diff --git a/README.md b/README.md index 073e322..1dce010 100644 --- a/README.md +++ b/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] diff --git a/src/build.mjs b/src/build.mjs index 9b3a2c4..3813467 100644 --- a/src/build.mjs +++ b/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')) { commit(); if (mode === MODE_TAGNAME) { current = current[0]; diff --git a/test/index.test.mjs b/test/index.test.mjs index a75d282..640e055 100644 --- a/test/index.test.mjs +++ b/test/index.test.mjs @@ -77,6 +77,17 @@ describe('htm', () => { expect(html``).toEqual({ tag: 'a', props: { href: 'foo' }, children: [] }); }); + test('slash in the middle of tag name or property name self-closes the element', () => { + expect(html``).toEqual({ tag: 'ab', props: null, children: [] }); + expect(html``).toEqual({ tag: 'abba', props: { pr: true }, children: [] }); + }); + + test('slash in a property value does not self-closes the element, unless followed by >', () => { + expect(html``).toEqual({ tag: 'abba', props: { prop: 'val/ue' }, children: [] }); + expect(html``).toEqual({ tag: 'abba', props: { prop: 'value' }, children: [] }); + expect(html``).toEqual({ tag: 'abba', props: { prop: 'value/' }, children: [] }); + }); + test('two props with dynamic values', () => { function onClick(e) { } expect(html``).toEqual({ tag: 'a', props: { href: 'foo', onClick }, children: [] }); @@ -86,6 +97,8 @@ describe('htm', () => { expect(html``).toEqual({ tag: 'a', props: { href: 'beforefooafter' }, children: [] }); expect(html``).toEqual({ tag: 'a', props: { href: '11' }, children: [] }); expect(html``).toEqual({ tag: 'a', props: { href: '1between1' }, children: [] }); + expect(html``).toEqual({ tag: 'a', props: { href: '/before/foo/after' }, children: [] }); + expect(html``).toEqual({ tag: 'a', props: { href: '/before/foo' }, children: [] }); }); test('spread props', () => {