solid-js 1.7.0-beta.0 → 1.7.0-beta.1

package/web/dist/dev.js

@@ -1,4 +1,4 @@
-import { createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, createSignal, onCleanup, splitProps, createMemo, $DEVCOMP } from 'solid-js';
+import { createRoot, untrack, createRenderEffect, sharedConfig, enableHydration, createMemo, createSignal, onMount, onCleanup, splitProps, $DEVCOMP } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, createRenderEffect as effect, getOwner, createMemo as memo, mergeProps, untrack } from 'solid-js';
 
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
@@ -10,12 +10,33 @@ const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
 });
 const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
   class: "className",
-  formnovalidate: "formNoValidate",
-  ismap: "isMap",
-  nomodule: "noModule",
-  playsinline: "playsInline",
-  readonly: "readOnly"
+  formnovalidate: {
+    $: "formNoValidate",
+    BUTTON: 1,
+    INPUT: 1
+  },
+  ismap: {
+    $: "isMap",
+    IMG: 1
+  },
+  nomodule: {
+    $: "noModule",
+    SCRIPT: 1
+  },
+  playsinline: {
+    $: "playsInline",
+    VIDEO: 1
+  },
+  readonly: {
+    $: "readOnly",
+    INPUT: 1,
+    TEXTAREA: 1
+  }
 });
+function getPropAlias(prop, tagName) {
+  const a = PropAliases[prop];
+  return typeof a === "object" ? a[tagName] ? a["$"] : undefined : a;
+}
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
 "altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
@@ -97,13 +118,14 @@ function render(code, element, init, options = {}) {
     element.textContent = "";
   };
 }
-function template(html, check, isSVG) {
-  const t = document.createElement("template");
-  t.innerHTML = html;
-  if (check && t.innerHTML.split("<").length - 1 !== check) throw `The browser resolved template HTML does not match JSX input:\n${t.innerHTML}\n\n${html}. Is your HTML properly formed?`;
-  let node = t.content.firstChild;
-  if (isSVG) node = node.firstChild;
-  return node;
+function template(html, isSVG, isCE) {
+  let node;
+  const create = () => {
+    const t = document.createElement("template");
+    t.innerHTML = html;
+    return isSVG ? t.content.firstChild.firstChild : t.content.firstChild;
+  };
+  return isCE ? () => (node || (node = create())).cloneNode(true) : () => untrack(() => document.importNode(node || (node = create()), true));
 }
 function delegateEvents(eventNames, document = window.document) {
   const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
@@ -248,7 +270,7 @@ function getNextElement(template) {
   if (!sharedConfig.context || !(node = sharedConfig.registry.get(key = getHydrationKey()))) {
     if (sharedConfig.context) console.warn("Unable to find DOM nodes for hydration key:", key);
     if (!template) throw new Error("Unrecoverable Hydration Mismatch. No template for key: " + key);
-    return template.cloneNode(true);
+    return template();
   }
   if (sharedConfig.completed) sharedConfig.completed.add(node);
   sharedConfig.registry.delete(key);
@@ -303,7 +325,7 @@ function toggleClassKey(node, key, value) {
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
 }
 function assignProp(node, prop, value, prev, isSVG, skipRef) {
-  let isCE, isProp, isChildProp;
+  let isCE, isProp, isChildProp, propAlias, forceProp;
   if (prop === "style") return style(node, value, prev);
   if (prop === "classList") return classList(node, value, prev);
   if (value === prev) return prev;
@@ -328,8 +350,14 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
       addEventListener(node, name, value, delegate);
       delegate && delegateEvents([name]);
     }
-  } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+  } else if (prop.slice(0, 5) === "attr:") {
+    setAttribute(node, prop.slice(5), value);
+  } else if ((forceProp = prop.slice(0, 5) === "prop:") || (isChildProp = ChildProperties.has(prop)) || !isSVG && ((propAlias = getPropAlias(prop, node.tagName)) || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
+    if (forceProp) {
+      prop = prop.slice(5);
+      isProp = true;
+    }
+    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[propAlias || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
@@ -351,17 +379,7 @@ function eventHandler(e) {
       return node || document;
     }
   });
-  if (sharedConfig.registry && !sharedConfig.done) {
-    sharedConfig.done = true;
-    document.querySelectorAll("[id^=pl-]").forEach(elem => {
-      while (elem && elem.nodeType !== 8 && elem.nodeValue !== "pl-" + e) {
-        let x = elem.nextSibling;
-        elem.remove();
-        elem = x;
-      }
-      elem && elem.remove();
-    });
-  }
+  if (sharedConfig.registry && !sharedConfig.done) sharedConfig.done = _$HY.done = true;
   while (node) {
     const handler = node[key];
     if (handler && !node.disabled) {
@@ -459,7 +477,9 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
       }
     } else {
       const value = String(item);
-      if (prev && prev.nodeType === 3 && prev.data === value) {
+      if (value === "<!>") {
+        if (prev && prev.nodeType === 8) normalized.push(prev);
+      } else if (prev && prev.nodeType === 3 && prev.data === value) {
         normalized.push(prev);
       } else normalized.push(document.createTextNode(value));
     }
@@ -528,6 +548,7 @@ function escape(html) {}
 function ssrSpread(props, isSVG, skipChildren) {}
 
 const isServer = false;
+const isDev = true;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 function createElement(tagName, isSVG = false) {
   return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName);
@@ -541,37 +562,41 @@ function Portal(props) {
       useShadow
     } = props,
     marker = document.createTextNode(""),
-    mount = props.mount || document.body;
+    mount = () => props.mount || document.body,
+    content = createMemo(renderPortal());
   function renderPortal() {
     if (sharedConfig.context) {
       const [s, set] = createSignal(false);
-      queueMicrotask(() => set(true));
+      onMount(() => set(true));
       return () => s() && props.children;
     } else return () => props.children;
   }
-  if (mount instanceof HTMLHeadElement) {
-    const [clean, setClean] = createSignal(false);
-    const cleanup = () => setClean(true);
-    createRoot(dispose => insert(mount, () => !clean() ? renderPortal()() : dispose(), null));
-    onCleanup(() => {
-      if (sharedConfig.context) queueMicrotask(cleanup);else cleanup();
-    });
-  } else {
-    const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
-      renderRoot = useShadow && container.attachShadow ? container.attachShadow({
-        mode: "open"
-      }) : container;
-    Object.defineProperty(container, "_$host", {
-      get() {
-        return marker.parentNode;
-      },
-      configurable: true
-    });
-    insert(renderRoot, renderPortal());
-    mount.appendChild(container);
-    props.ref && props.ref(container);
-    onCleanup(() => mount.removeChild(container));
-  }
+  createRenderEffect(() => {
+    const el = mount();
+    if (el instanceof HTMLHeadElement) {
+      const [clean, setClean] = createSignal(false);
+      const cleanup = () => setClean(true);
+      createRoot(dispose => insert(el, () => !clean() ? content() : dispose(), null));
+      onCleanup(() => {
+        if (sharedConfig.context) queueMicrotask(cleanup);else cleanup();
+      });
+    } else {
+      const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
+        renderRoot = useShadow && container.attachShadow ? container.attachShadow({
+          mode: "open"
+        }) : container;
+      Object.defineProperty(container, "_$host", {
+        get() {
+          return marker.parentNode;
+        },
+        configurable: true
+      });
+      insert(renderRoot, content);
+      el.appendChild(container);
+      props.ref && props.ref(container);
+      onCleanup(() => el.removeChild(container));
+    }
+  });
   return marker;
 }
 function Dynamic(props) {
@@ -594,4 +619,4 @@ function Dynamic(props) {
   });
 }
 
-export { Aliases, voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, voidFn as generateHydrationScript, voidFn as getAssets, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, style, template, use, voidFn as useAssets };
+export { Aliases, voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, voidFn as generateHydrationScript, voidFn as getAssets, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getPropAlias, hydrate, innerHTML, insert, isDev, isServer, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, style, template, use, voidFn as useAssets };

package/web/dist/server.cjs

@@ -262,7 +262,7 @@ function toRefParam(index) {
 }
 
 const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
-const REPLACE_SCRIPT = `function $df(e,t,n,o,d){if(n=document.getElementById(e),o=document.getElementById("pl-"+e)){for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)d=o.nextSibling,o.remove(),o=d;o.replaceWith(n.content)}n.remove(),_$HY.set(e,t),_$HY.fe(e)}`;
+const REPLACE_SCRIPT = `function $df(e,n,t,o,d){if(t=document.getElementById(e),o=document.getElementById("pl-"+e)){for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)d=o.nextSibling,o.remove(),o=d;_$HY.done?o.remove():o.replaceWith(t.content)}t.remove(),_$HY.set(e,n),_$HY.fe(e)}`;
 function renderToString(code, options = {}) {
   let scripts = "";
   solidJs.sharedConfig.context = {
@@ -278,7 +278,10 @@ function renderToString(code, options = {}) {
       scripts += `_$HY.set("${id}", ${stringify(p)});`;
     }
   };
-  let html = resolveSSRNode(escape(code()));
+  let html = solidJs.createRoot(d => {
+    setTimeout(d);
+    return resolveSSRNode(escape(code()));
+  });
   solidJs.sharedConfig.context.noHydrate = true;
   html = injectAssets(solidJs.sharedConfig.context.assets, html);
   if (scripts.length) html = injectScripts(html, scripts, options.nonce);
@@ -304,6 +307,7 @@ function renderToStream(code, options = {}) {
     onCompleteAll,
     renderId
   } = options;
+  let dispose;
   const blockingResources = [];
   const registry = new Map();
   const dedupe = new WeakMap();
@@ -317,6 +321,7 @@ function renderToStream(code, options = {}) {
       });
       writable && writable.end();
       completed = true;
+      setTimeout(dispose);
     }
   };
   const pushTask = task => {
@@ -404,7 +409,10 @@ function renderToStream(code, options = {}) {
       };
     }
   };
-  let html = resolveSSRNode(escape(code()));
+  let html = solidJs.createRoot(d => {
+    dispose = d;
+    return resolveSSRNode(escape(code()));
+  });
   function doShell() {
     solidJs.sharedConfig.context = context;
     context.noHydrate = true;
@@ -502,7 +510,7 @@ function ssrClassList(value) {
       classValue = !!value[key];
     if (!key || key === "undefined" || !classValue) continue;
     i && (result += " ");
-    result += key;
+    result += escape(key);
   }
   return result;
 }
@@ -539,7 +547,7 @@ function ssrElement(tag, props, children, needsId) {
     } else if (prop === "class" || prop === "className" || prop === "classList") {
       if (classResolved) continue;
       let n;
-      result += `class="${(n = props.class) ? n + " " : ""}${(n = props.className) ? n + " " : ""}${ssrClassList(props.classList)}"`;
+      result += `class="${escape(((n = props.class) ? n + " " : "") + ((n = props.className) ? n + " " : ""), true) + ssrClassList(props.classList)}"`;
       classResolved = true;
     } else if (BooleanAttributes.has(prop)) {
       if (value) result += prop;else continue;
@@ -552,7 +560,7 @@ function ssrElement(tag, props, children, needsId) {
   }
   if (skipChildren) {
     return {
-      t: result + '/>'
+      t: result + "/>"
     };
   }
   return {
@@ -773,9 +781,10 @@ function ssrSpread(props, isSVG, skipChildren) {
       classResolved = true;
     } else if (BooleanAttributes.has(prop)) {
       if (value) result += prop;else continue;
-    } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on") {
+    } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on" || prop.slice(0, 5) === "prop:") {
       continue;
     } else {
+      if (prop.slice(0, 5) === "attr:") prop = prop.slice(5);
       result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
     }
     if (i !== keys.length - 1) result += " ";
@@ -784,6 +793,7 @@ function ssrSpread(props, isSVG, skipChildren) {
 }
 
 const isServer = true;
+const isDev = false;
 function render() {}
 function hydrate() {}
 function insert() {}
@@ -858,6 +868,7 @@ exports.getAssets = getAssets;
 exports.getHydrationKey = getHydrationKey;
 exports.hydrate = hydrate;
 exports.insert = insert;
+exports.isDev = isDev;
 exports.isServer = isServer;
 exports.pipeToNodeWritable = pipeToNodeWritable;
 exports.pipeToWritable = pipeToWritable;

package/web/dist/server.js

@@ -1,4 +1,4 @@
-import { sharedConfig, splitProps } from 'solid-js';
+import { sharedConfig, createRoot, splitProps } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, mergeProps } from 'solid-js';
 
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
@@ -261,7 +261,7 @@ function toRefParam(index) {
 }
 
 const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
-const REPLACE_SCRIPT = `function $df(e,t,n,o,d){if(n=document.getElementById(e),o=document.getElementById("pl-"+e)){for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)d=o.nextSibling,o.remove(),o=d;o.replaceWith(n.content)}n.remove(),_$HY.set(e,t),_$HY.fe(e)}`;
+const REPLACE_SCRIPT = `function $df(e,n,t,o,d){if(t=document.getElementById(e),o=document.getElementById("pl-"+e)){for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)d=o.nextSibling,o.remove(),o=d;_$HY.done?o.remove():o.replaceWith(t.content)}t.remove(),_$HY.set(e,n),_$HY.fe(e)}`;
 function renderToString(code, options = {}) {
   let scripts = "";
   sharedConfig.context = {
@@ -277,7 +277,10 @@ function renderToString(code, options = {}) {
       scripts += `_$HY.set("${id}", ${stringify(p)});`;
     }
   };
-  let html = resolveSSRNode(escape(code()));
+  let html = createRoot(d => {
+    setTimeout(d);
+    return resolveSSRNode(escape(code()));
+  });
   sharedConfig.context.noHydrate = true;
   html = injectAssets(sharedConfig.context.assets, html);
   if (scripts.length) html = injectScripts(html, scripts, options.nonce);
@@ -303,6 +306,7 @@ function renderToStream(code, options = {}) {
     onCompleteAll,
     renderId
   } = options;
+  let dispose;
   const blockingResources = [];
   const registry = new Map();
   const dedupe = new WeakMap();
@@ -316,6 +320,7 @@ function renderToStream(code, options = {}) {
       });
       writable && writable.end();
       completed = true;
+      setTimeout(dispose);
     }
   };
   const pushTask = task => {
@@ -403,7 +408,10 @@ function renderToStream(code, options = {}) {
       };
     }
   };
-  let html = resolveSSRNode(escape(code()));
+  let html = createRoot(d => {
+    dispose = d;
+    return resolveSSRNode(escape(code()));
+  });
   function doShell() {
     sharedConfig.context = context;
     context.noHydrate = true;
@@ -501,7 +509,7 @@ function ssrClassList(value) {
       classValue = !!value[key];
     if (!key || key === "undefined" || !classValue) continue;
     i && (result += " ");
-    result += key;
+    result += escape(key);
   }
   return result;
 }
@@ -538,7 +546,7 @@ function ssrElement(tag, props, children, needsId) {
     } else if (prop === "class" || prop === "className" || prop === "classList") {
       if (classResolved) continue;
       let n;
-      result += `class="${(n = props.class) ? n + " " : ""}${(n = props.className) ? n + " " : ""}${ssrClassList(props.classList)}"`;
+      result += `class="${escape(((n = props.class) ? n + " " : "") + ((n = props.className) ? n + " " : ""), true) + ssrClassList(props.classList)}"`;
       classResolved = true;
     } else if (BooleanAttributes.has(prop)) {
       if (value) result += prop;else continue;
@@ -551,7 +559,7 @@ function ssrElement(tag, props, children, needsId) {
   }
   if (skipChildren) {
     return {
-      t: result + '/>'
+      t: result + "/>"
     };
   }
   return {
@@ -772,9 +780,10 @@ function ssrSpread(props, isSVG, skipChildren) {
       classResolved = true;
     } else if (BooleanAttributes.has(prop)) {
       if (value) result += prop;else continue;
-    } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on") {
+    } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on" || prop.slice(0, 5) === "prop:") {
       continue;
     } else {
+      if (prop.slice(0, 5) === "attr:") prop = prop.slice(5);
       result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
     }
     if (i !== keys.length - 1) result += " ";
@@ -783,6 +792,7 @@ function ssrSpread(props, isSVG, skipChildren) {
 }
 
 const isServer = true;
+const isDev = false;
 function render() {}
 function hydrate() {}
 function insert() {}
@@ -803,4 +813,4 @@ function Portal(props) {
   return "";
 }
 
-export { Assets, Dynamic, Hydration, HydrationScript, NoHydration, Portal, addEventListener, delegateEvents, escape, generateHydrationScript, getAssets, getHydrationKey, hydrate, insert, isServer, pipeToNodeWritable, pipeToWritable, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, stringify, useAssets };
+export { Assets, Dynamic, Hydration, HydrationScript, NoHydration, Portal, addEventListener, delegateEvents, escape, generateHydrationScript, getAssets, getHydrationKey, hydrate, insert, isDev, isServer, pipeToNodeWritable, pipeToWritable, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, stringify, useAssets };