@solidjs/html 2.0.0-beta.3 → 2.0.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/html.cjs +11 -14
  2. package/dist/html.js +11 -14
  3. package/package.json +3 -3
package/dist/html.cjs CHANGED
@@ -225,7 +225,7 @@ function createHTML(r, {
225
225
  cache.set(statics, templates);
226
226
  return templates;
227
227
  }
228
- function parseKeyValue(node, tag, name, value, isSVG, options) {
228
+ function parseKeyValue(node, tag, name, value, options) {
229
229
  let expr, parts, namespace;
230
230
  if (value === "###") {
231
231
  expr = `_$v`;
@@ -240,19 +240,19 @@ function createHTML(r, {
240
240
  namespace = parts[0];
241
241
  }
242
242
  const isChildProp = r.ChildProperties.has(name);
243
- const isProp = r.Properties.has(name);
243
+ const isStatefulDOMProperty = !!r.DOMWithState[node.name.toUpperCase()]?.[name];
244
244
  if (name === "style") {
245
245
  options.exprs.push(`r.style(${tag},${expr},_$p)`);
246
246
  } else if (name === "class") {
247
- options.exprs.push(`r.className(${tag},${expr},${isSVG},_$p)`);
248
- } else if (isChildProp || !isSVG && isProp || namespace === "prop") {
247
+ options.exprs.push(`r.className(${tag},${expr},_$p)`);
248
+ } else if (isChildProp || isStatefulDOMProperty || namespace === "prop") {
249
249
  options.exprs.push(`${tag}.${name} = ${expr}`);
250
250
  } else {
251
- const ns = isSVG && name.indexOf(":") > -1 && r.SVGNamespace[name.split(":")[0]];
251
+ const ns = name.indexOf(":") > -1 && r.SVGNamespace[name.split(":")[0]];
252
252
  if (ns) options.exprs.push(`r.setAttributeNS(${tag},"${ns}","${name}",${expr})`);else options.exprs.push(`r.setAttribute(${tag},"${name}",${expr})`);
253
253
  }
254
254
  }
255
- function parseAttribute(node, tag, name, value, isSVG, options) {
255
+ function parseAttribute(node, tag, name, value, options) {
256
256
  if (name.slice(0, 2) === "on") {
257
257
  if (!name.includes(":")) {
258
258
  const lc = name.slice(2).toLowerCase();
@@ -269,7 +269,7 @@ function createHTML(r, {
269
269
  exprs: []
270
270
  }),
271
271
  count = options.counter;
272
- parseKeyValue(node, tag, name, value, isSVG, childOptions);
272
+ parseKeyValue(node, tag, name, value, childOptions);
273
273
  options.decl.push(`_fn${count} = (_$v, _$p) => {\n${childOptions.exprs.join(";\n")};\n}`);
274
274
  if (value === "###") {
275
275
  options.exprs.push(`typeof exprs[${count}] === "function" ? r.effect(() => exprs[${count}](), _fn${count}) : _fn${count}(exprs[${count}])`);
@@ -327,7 +327,6 @@ function createHTML(r, {
327
327
  }
328
328
  options.counter = childOptions.counter;
329
329
  options.templateId = childOptions.templateId;
330
- options.hasCustomElement = options.hasCustomElement || childOptions.hasCustomElement;
331
330
  options.isImportNode = options.isImportNode || childOptions.isImportNode;
332
331
  }
333
332
  function processComponentProps(propGroups) {
@@ -433,9 +432,7 @@ function createHTML(r, {
433
432
  const topDecl = !options.decl.length;
434
433
  const templateId = options.templateId;
435
434
  options.decl.push(topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
436
- const isSVG = r.SVGElements.has(node.name);
437
- options.hasCustomElement = node.name.includes("-") || node.attrs.some(e => e.name === "is");
438
- options.isImportNode = (node.name === "img" || node.name === "iframe") && node.attrs.some(e => e.name === "loading" && e.value === "lazy");
435
+ options.isImportNode = node.name.includes("-") || node.attrs.some(e => e.name === "is") || (node.name === "img" || node.name === "iframe") && node.attrs.some(e => e.name === "loading" && e.value === "lazy");
439
436
  if (node.attrs.some(e => e.name === "###")) {
440
437
  const spreadArgs = [];
441
438
  let current = "";
@@ -465,7 +462,7 @@ function createHTML(r, {
465
462
  if (current.length) {
466
463
  spreadArgs.push(`()=>({${current}})`);
467
464
  }
468
- options.exprs.push(`r.spread(${tag},${spreadArgs.length === 1 ? `typeof ${spreadArgs[0]} === "function" ? r.mergeProps(${spreadArgs[0]}) : ${spreadArgs[0]}` : `r.mergeProps(${spreadArgs.join(",")})`},${isSVG},${!!node.children.length})`);
465
+ options.exprs.push(`r.spread(${tag},${spreadArgs.length === 1 ? `typeof ${spreadArgs[0]} === "function" ? r.mergeProps(${spreadArgs[0]}) : ${spreadArgs[0]}` : `r.mergeProps(${spreadArgs.join(",")})`},${!!node.children.length})`);
469
466
  } else {
470
467
  for (let i = 0; i < node.attrs.length; i++) {
471
468
  const {
@@ -477,7 +474,7 @@ function createHTML(r, {
477
474
  if (value.includes("###")) {
478
475
  node.attrs.splice(i, 1);
479
476
  i--;
480
- parseAttribute(node, tag, name, value, isSVG, options);
477
+ parseAttribute(node, tag, name, value, options);
481
478
  }
482
479
  }
483
480
  }
@@ -486,7 +483,7 @@ function createHTML(r, {
486
483
  options.first = false;
487
484
  processChildren(node, options);
488
485
  if (topDecl) {
489
- options.decl[0] = options.hasCustomElement || options.isImportNode ? `const ${tag} = r.untrack(() => document.importNode(tmpls[${templateId}].content.firstChild, true))` : `const ${tag} = tmpls[${templateId}].content.firstChild.cloneNode(true)`;
486
+ options.decl[0] = options.isImportNode ? `const ${tag} = document.importNode(tmpls[${templateId}].content.firstChild, true)` : `const ${tag} = tmpls[${templateId}].content.firstChild.cloneNode(true)`;
490
487
  }
491
488
  } else if (node.type === "text") {
492
489
  const tag = `_$el${uuid++}`;
package/dist/html.js CHANGED
@@ -223,7 +223,7 @@ function createHTML(r, {
223
223
  cache.set(statics, templates);
224
224
  return templates;
225
225
  }
226
- function parseKeyValue(node, tag, name, value, isSVG, options) {
226
+ function parseKeyValue(node, tag, name, value, options) {
227
227
  let expr, parts, namespace;
228
228
  if (value === "###") {
229
229
  expr = `_$v`;
@@ -238,19 +238,19 @@ function createHTML(r, {
238
238
  namespace = parts[0];
239
239
  }
240
240
  const isChildProp = r.ChildProperties.has(name);
241
- const isProp = r.Properties.has(name);
241
+ const isStatefulDOMProperty = !!r.DOMWithState[node.name.toUpperCase()]?.[name];
242
242
  if (name === "style") {
243
243
  options.exprs.push(`r.style(${tag},${expr},_$p)`);
244
244
  } else if (name === "class") {
245
- options.exprs.push(`r.className(${tag},${expr},${isSVG},_$p)`);
246
- } else if (isChildProp || !isSVG && isProp || namespace === "prop") {
245
+ options.exprs.push(`r.className(${tag},${expr},_$p)`);
246
+ } else if (isChildProp || isStatefulDOMProperty || namespace === "prop") {
247
247
  options.exprs.push(`${tag}.${name} = ${expr}`);
248
248
  } else {
249
- const ns = isSVG && name.indexOf(":") > -1 && r.SVGNamespace[name.split(":")[0]];
249
+ const ns = name.indexOf(":") > -1 && r.SVGNamespace[name.split(":")[0]];
250
250
  if (ns) options.exprs.push(`r.setAttributeNS(${tag},"${ns}","${name}",${expr})`);else options.exprs.push(`r.setAttribute(${tag},"${name}",${expr})`);
251
251
  }
252
252
  }
253
- function parseAttribute(node, tag, name, value, isSVG, options) {
253
+ function parseAttribute(node, tag, name, value, options) {
254
254
  if (name.slice(0, 2) === "on") {
255
255
  if (!name.includes(":")) {
256
256
  const lc = name.slice(2).toLowerCase();
@@ -267,7 +267,7 @@ function createHTML(r, {
267
267
  exprs: []
268
268
  }),
269
269
  count = options.counter;
270
- parseKeyValue(node, tag, name, value, isSVG, childOptions);
270
+ parseKeyValue(node, tag, name, value, childOptions);
271
271
  options.decl.push(`_fn${count} = (_$v, _$p) => {\n${childOptions.exprs.join(";\n")};\n}`);
272
272
  if (value === "###") {
273
273
  options.exprs.push(`typeof exprs[${count}] === "function" ? r.effect(() => exprs[${count}](), _fn${count}) : _fn${count}(exprs[${count}])`);
@@ -325,7 +325,6 @@ function createHTML(r, {
325
325
  }
326
326
  options.counter = childOptions.counter;
327
327
  options.templateId = childOptions.templateId;
328
- options.hasCustomElement = options.hasCustomElement || childOptions.hasCustomElement;
329
328
  options.isImportNode = options.isImportNode || childOptions.isImportNode;
330
329
  }
331
330
  function processComponentProps(propGroups) {
@@ -431,9 +430,7 @@ function createHTML(r, {
431
430
  const topDecl = !options.decl.length;
432
431
  const templateId = options.templateId;
433
432
  options.decl.push(topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
434
- const isSVG = r.SVGElements.has(node.name);
435
- options.hasCustomElement = node.name.includes("-") || node.attrs.some(e => e.name === "is");
436
- options.isImportNode = (node.name === "img" || node.name === "iframe") && node.attrs.some(e => e.name === "loading" && e.value === "lazy");
433
+ options.isImportNode = node.name.includes("-") || node.attrs.some(e => e.name === "is") || (node.name === "img" || node.name === "iframe") && node.attrs.some(e => e.name === "loading" && e.value === "lazy");
437
434
  if (node.attrs.some(e => e.name === "###")) {
438
435
  const spreadArgs = [];
439
436
  let current = "";
@@ -463,7 +460,7 @@ function createHTML(r, {
463
460
  if (current.length) {
464
461
  spreadArgs.push(`()=>({${current}})`);
465
462
  }
466
- options.exprs.push(`r.spread(${tag},${spreadArgs.length === 1 ? `typeof ${spreadArgs[0]} === "function" ? r.mergeProps(${spreadArgs[0]}) : ${spreadArgs[0]}` : `r.mergeProps(${spreadArgs.join(",")})`},${isSVG},${!!node.children.length})`);
463
+ options.exprs.push(`r.spread(${tag},${spreadArgs.length === 1 ? `typeof ${spreadArgs[0]} === "function" ? r.mergeProps(${spreadArgs[0]}) : ${spreadArgs[0]}` : `r.mergeProps(${spreadArgs.join(",")})`},${!!node.children.length})`);
467
464
  } else {
468
465
  for (let i = 0; i < node.attrs.length; i++) {
469
466
  const {
@@ -475,7 +472,7 @@ function createHTML(r, {
475
472
  if (value.includes("###")) {
476
473
  node.attrs.splice(i, 1);
477
474
  i--;
478
- parseAttribute(node, tag, name, value, isSVG, options);
475
+ parseAttribute(node, tag, name, value, options);
479
476
  }
480
477
  }
481
478
  }
@@ -484,7 +481,7 @@ function createHTML(r, {
484
481
  options.first = false;
485
482
  processChildren(node, options);
486
483
  if (topDecl) {
487
- options.decl[0] = options.hasCustomElement || options.isImportNode ? `const ${tag} = r.untrack(() => document.importNode(tmpls[${templateId}].content.firstChild, true))` : `const ${tag} = tmpls[${templateId}].content.firstChild.cloneNode(true)`;
484
+ options.decl[0] = options.isImportNode ? `const ${tag} = document.importNode(tmpls[${templateId}].content.firstChild, true)` : `const ${tag} = tmpls[${templateId}].content.firstChild.cloneNode(true)`;
488
485
  }
489
486
  } else if (node.type === "text") {
490
487
  const tag = `_$el${uuid++}`;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@solidjs/html",
3
3
  "description": "Build-less Tagged-Template-Literal Templating for Solid",
4
- "version": "2.0.0-beta.3",
4
+ "version": "2.0.0-beta.5",
5
5
  "author": "Ryan Carniato",
6
6
  "license": "MIT",
7
7
  "homepage": "https://solidjs.com",
@@ -31,10 +31,10 @@
31
31
  "./dist/*": "./dist/*"
32
32
  },
33
33
  "peerDependencies": {
34
- "@solidjs/web": "^2.0.0-beta.3"
34
+ "@solidjs/web": "^2.0.0-beta.5"
35
35
  },
36
36
  "devDependencies": {
37
- "@solidjs/web": "2.0.0-beta.3"
37
+ "@solidjs/web": "2.0.0-beta.5"
38
38
  },
39
39
  "scripts": {
40
40
  "build": "npm-run-all -nl build:*",