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', () => {