Merge pull request #112 from jviide/issue-106

Allow slashes in unquoted prop values (unless immediately followed by >)

README.md

@@ -19,7 +19,7 @@ It uses standard JavaScript [Tagged Templates] and works in [all modern browsers
 
 ⚛️ **< 500 bytes** when used with Preact _(thanks gzip 🌈)_
 
-🥚 **< 420 byte** `htm/mini` version
+🥚 **< 450 byte** `htm/mini` version
 
 🏅 **0 bytes** if compiled using [babel-plugin-htm]
 

src/build.mjs

@@ -73,22 +73,23 @@ export const treeify = (built, fields) => {
 
 export const evaluate = (h, built, fields, args) => {
 	for (let i = 1; i < built.length; i++) {
-		const field = built[i++];
+		const field = built[i];
 		const value = typeof field === 'number' ? fields[field] : field;
+		const type = built[++i];
 
-		if (built[i] === TAG_SET) {
+		if (type === TAG_SET) {
 			args[0] = value;
 		}
-		else if (built[i] === PROPS_ASSIGN) {
+		else if (type === PROPS_ASSIGN) {
 			args[1] = Object.assign(args[1] || {}, value);
 		}
-		else if (built[i] === PROP_SET) {
+		else if (type === PROP_SET) {
 			(args[1] = args[1] || {})[built[++i]] = value;
 		}
-		else if (built[i] === PROP_APPEND) {
+		else if (type === PROP_APPEND) {
 			args[1][built[++i]] += (value + '');
 		}
-		else if (built[i]) {
+		else if (type) {
 			// code === CHILD_RECURSE
 			args.push(h.apply(null, evaluate(h, value, fields, ['', null])));
 		}
@@ -178,7 +179,7 @@ export const build = function(statics) {
 			commit(i);
 		}
 
-		for (let j=0; j<statics[i].length; j++) {
+		for (let j=0; j<statics[i].length;j++) {
 			char = statics[i][j];
 
 			if (mode === MODE_TEXT) {
@@ -230,7 +231,7 @@ export const build = function(statics) {
 				propName = buffer;
 				buffer = '';
 			}
-			else if (char === '/') {
+			else if (char === '/' && (mode < MODE_PROP_SET || statics[i][j+1] === '>')) {
 				commit();
 				if (mode === MODE_TAGNAME) {
 					current = current[0];

test/index.test.mjs

@@ -77,6 +77,17 @@ describe('htm', () => {
 		expect(html`<a href=${'foo'} />`).toEqual({ tag: 'a', props: { href: 'foo' }, children: [] });
 	});
 
+	test('slash in the middle of tag name or property name self-closes the element', () => {
+		expect(html`<ab/ba prop=value>`).toEqual({ tag: 'ab', props: null, children: [] });
+		expect(html`<abba pr/op=value>`).toEqual({ tag: 'abba', props: { pr: true }, children: [] });
+	});
+
+	test('slash in a property value does not self-closes the element, unless followed by >', () => {
+		expect(html`<abba prop=val/ue><//>`).toEqual({ tag: 'abba', props: { prop: 'val/ue' }, children: [] });
+		expect(html`<abba prop=value/>`).toEqual({ tag: 'abba', props: { prop: 'value' }, children: [] });
+		expect(html`<abba prop=value/ ><//>`).toEqual({ tag: 'abba', props: { prop: 'value/' }, children: [] });
+	});
+
 	test('two props with dynamic values', () => {
 		function onClick(e) { }
 		expect(html`<a href=${'foo'} onClick=${onClick} />`).toEqual({ tag: 'a', props: { href: 'foo', onClick }, children: [] });
@@ -86,6 +97,8 @@ describe('htm', () => {
 		expect(html`<a href="before${'foo'}after" />`).toEqual({ tag: 'a', props: { href: 'beforefooafter' }, children: [] });
 		expect(html`<a href=${1}${1} />`).toEqual({ tag: 'a', props: { href: '11' }, children: [] });
 		expect(html`<a href=${1}between${1} />`).toEqual({ tag: 'a', props: { href: '1between1' }, children: [] });
+		expect(html`<a href=/before/${'foo'}/after />`).toEqual({ tag: 'a', props: { href: '/before/foo/after' }, children: [] });
+		expect(html`<a href=/before/${'foo'}/>`).toEqual({ tag: 'a', props: { href: '/before/foo' }, children: [] });
 	});
 
 	test('spread props', () => {