solid-js 1.4.5 → 1.5.0-beta.0

package/web/dist/server.js

@@ -4,6 +4,7 @@ export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch,
 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"];
 const BooleanAttributes = /*#__PURE__*/new Set(booleans);
 /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
+const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const Aliases = {
   className: "class",
   htmlFor: "for"
@@ -229,8 +230,7 @@ function stringifyString(str) {
   return result;
 }
 
-const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t||null)}`;
-const FRAGMENT_REPLACE = /<!\[([\d-]+)\]>/;
+const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t||"$$$")}`;
 function renderToString(code, options = {}) {
   let scripts = "";
   sharedConfig.context = {
@@ -249,69 +249,20 @@ function renderToString(code, options = {}) {
   return html;
 }
 function renderToStringAsync(code, options = {}) {
-  let scripts = "";
   const {
-    nonce,
-    renderId,
     timeoutMs = 30000
   } = options;
-  const dedupe = new WeakMap();
-  const context = sharedConfig.context = {
-    id: renderId || "",
-    count: 0,
-    resources: {},
-    suspense: {},
-    assets: [],
-    async: true,
-    nonce,
-    writeResource(id, p, error) {
-      if (error) return scripts += `_$HY.set("${id}", ${serializeError(p)});`;
-      if (!p || typeof p !== "object" || !("then" in p)) return scripts += serializeSet(dedupe, id, p) + ";";
-      p.then(d => scripts += serializeSet(dedupe, id, d) + ";").catch(() => scripts += `_$HY.set("${id}", {});`);
-    }
-  };
   let timeoutHandle;
   const timeout = new Promise((_, reject) => {
     timeoutHandle = setTimeout(() => reject("renderToString timed out"), timeoutMs);
   });
-  function asyncWrap(fn) {
-    return new Promise(resolve => {
-      const registry = new Set();
-      const cache = Object.create(null);
-      sharedConfig.context.registerFragment = register;
-      const rendered = fn();
-      if (!registry.size) resolve(rendered);
-      function register(key) {
-        registry.add(key);
-        return (value = "", error) => {
-          if (!registry.has(key)) return;
-          cache[key] = value;
-          registry.delete(key);
-          if (error) scripts += `_$HY.set("${key}", Promise.resolve(${serializeError(error)}));`;else scripts += `_$HY.set("${key}", null);`;
-          if (!registry.size) Promise.resolve().then(() => {
-            let source = resolveSSRNode(rendered);
-            let final = "";
-            let match;
-            while (match = source.match(FRAGMENT_REPLACE)) {
-              final += source.substring(0, match.index);
-              source = cache[match[1]] + source.substring(match.index + match[0].length);
-            }
-            resolve(final + source);
-          });
-          return true;
-        };
-      }
-    });
-  }
-  return Promise.race([asyncWrap(() => escape(code())), timeout]).then(res => {
+  return Promise.race([renderToStream(code, options), timeout]).then(html => {
     clearTimeout(timeoutHandle);
-    let html = injectAssets(context.assets, resolveSSRNode(res));
-    if (scripts.length) html = injectScripts(html, scripts, nonce);
     return html;
   });
 }
 function renderToStream(code, options = {}) {
-  const {
+  let {
     nonce,
     onCompleteShell,
     onCompleteAll,
@@ -336,13 +287,13 @@ function renderToStream(code, options = {}) {
   };
   const pushTask = task => {
     tasks.push(task);
-    if (!scheduled) {
+    if (!scheduled && firstFlushed) {
       Promise.resolve().then(writeTasks);
       scheduled = true;
     }
   };
   const writeTasks = () => {
-    if (tasks.length && !completed) {
+    if (tasks.length && !completed && firstFlushed) {
       buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks.join(";")}</script>`);
       tasks.length = 0;
     }
@@ -362,7 +313,6 @@ function renderToStream(code, options = {}) {
     id: renderId || "",
     count: 0,
     async: true,
-    streaming: true,
     resources: {},
     suspense: {},
     assets: [],
@@ -390,15 +340,15 @@ function renderToStream(code, options = {}) {
           if ((value !== undefined || error) && !completed) {
             if (!firstFlushed) {
               Promise.resolve().then(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
-              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}_$HY.set("${key}",${error ? serializeError(error) : "null"})`);
+              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}_$HY.set("${key}",${error ? serializeError(error) : '"$$$"'})`);
             } else {
               buffer.write(`<div hidden id="${key}">${value !== undefined ? value : " "}</div>`);
-              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}")`).join(";") : ""}$df("${key}"${error ? "," + serializeError(error) : ""})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
+              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}")`).join(";") + ";" : ""}$df("${key}"${error ? "," + serializeError(error) : ""})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
               scriptFlushed = true;
             }
           }
         }
-        if (firstFlushed) checkEnd();
+        Promise.resolve().then(checkEnd);
         return true;
       };
     }
@@ -417,6 +367,22 @@ function renderToStream(code, options = {}) {
     });
   }
   return {
+    then(fn) {
+      function complete() {
+        doShell();
+        let mapped = "";
+        for (let i = 0, len = tmp.length; i < len; i++) mapped += tmp[i];
+        fn(mapped);
+      }
+      if (onCompleteAll) {
+        ogComplete = onCompleteAll;
+        onCompleteAll = options => {
+          ogComplete(options);
+          complete();
+        };
+      } else onCompleteAll = complete;
+      checkEnd();
+    },
     pipe(w) {
       Promise.allSettled(blockingResources).then(() => {
         doShell();
@@ -513,16 +479,15 @@ function ssrStyle(value) {
   }
   return result;
 }
-function ssrSpread(props, isSVG, skipChildren) {
-  let result = "";
-  if (props == null) return results;
+function ssrElement(tag, props, children, needsId) {
+  let result = `<${tag}${needsId ? ssrHydrationKey() : ""} `;
   if (typeof props === "function") props = props();
   const keys = Object.keys(props);
   let classResolved;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
-    if (prop === "children") {
-      !skipChildren && console.warn(`SSR currently does not support spread children.`);
+    if (ChildProperties.has(prop) && children === undefined) {
+      children = prop === "innerHTML" ? props[prop] : escape(props[prop]);
       continue;
     }
     const value = props[prop];
@@ -542,7 +507,9 @@ function ssrSpread(props, isSVG, skipChildren) {
     }
     if (i !== keys.length - 1) result += " ";
   }
-  return result;
+  return {
+    t: result + `>${resolveSSRNode(children)}</${tag}>`
+  };
 }
 function ssrAttribute(key, value, isBoolean) {
   return isBoolean ? value ? " " + key : "" : value != null ? ` ${key}="${value}"` : "";
@@ -614,7 +581,7 @@ function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
 } = {}) {
-  return `<script${nonce ? ` nonce="${nonce}"` : ""}>var e,t;e=window._$HY||(_$HY={events:[],completed:new WeakSet,r:{}}),t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])})))),e.init=(t,o)=>{e.r[t]=[new Promise(((e,t)=>o=e)),o]},e.set=(t,o,s)=>{(s=e.r[t])&&s[1](o),e.r[t]=[o]},e.unset=t=>{delete e.r[t]},e.load=(t,o)=>{if(o=e.r[t])return o[0]};</script><!--xs-->`;
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>var e,t;e=window._$HY||(_$HY={events:[],completed:new WeakSet,r:{}}),t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])})))),e.init=(t,o)=>{e.r[t]=[new Promise(((e,t)=>o=e)),o]},e.set=(t,o,s)=>{(s=e.r[t])&&s[1](o),e.r[t]=[o]},e.unset=t=>{delete e.r[t]},e.load=t=>e.r[t];</script><!--xs-->`;
 }
 function injectAssets(assets, html) {
   for (let i = 0; i < assets.length; i++) {
@@ -718,8 +685,7 @@ function Dynamic(props) {
         t = typeof comp;
   if (comp) {
     if (t === "function") return comp(others);else if (t === "string") {
-      const [local, sOthers] = splitProps(others, ["children"]);
-      return ssr([`<${comp}`, ' ', ">", `</${comp}>`], ssrHydrationKey(), ssrSpread(sOthers), escape(local.children || ""));
+      return ssrElement(comp, others, undefined, true);
     }
   }
 }
@@ -727,4 +693,4 @@ function Portal(props) {
   return "";
 }
 
-export { Assets, Dynamic, HydrationScript, NoHydration, Portal, escape, generateHydrationScript, getHydrationKey, isServer, pipeToNodeWritable, pipeToWritable, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle };
+export { Assets, Dynamic, HydrationScript, NoHydration, Portal, escape, generateHydrationScript, getHydrationKey, isServer, pipeToNodeWritable, pipeToWritable, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle };

package/web/dist/web.cjs

@@ -445,13 +445,12 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
   let dynamic = false;
   for (let i = 0, len = array.length; i < len; i++) {
     let item = array[i],
-        prev = current && current[i],
-        t;
+        prev = current && current[i];
     if (item instanceof Node) {
       normalized.push(item);
     } else if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
       dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
-    } else if ((t = typeof item) === "function") {
+    } else if ((typeof item) === "function") {
       if (unwrap) {
         while (typeof item === "function") item = item();
         dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], prev) || dynamic;
@@ -460,7 +459,7 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
         dynamic = true;
       }
     } else {
-      const value = t === "string" ? item : item.string();
+      const value = String(item);
       if (prev && prev.nodeType === 3 && prev.data === value) {
         normalized.push(prev);
       } else normalized.push(document.createTextNode(value));
@@ -519,12 +518,12 @@ function renderToStream(fn, options) {
   throwInBrowser(renderToStream);
 }
 function ssr(template, ...nodes) {}
-function resolveSSRNode(node) {}
+function ssrElement(name, props, children, needsId) {}
 function ssrClassList(value) {}
 function ssrStyle(value) {}
-function ssrSpread(accessor) {}
 function ssrAttribute(key, value) {}
 function ssrHydrationKey() {}
+function resolveSSRNode(node) {}
 function escape(html) {}
 function generateHydrationScript() {}
 
@@ -682,8 +681,8 @@ exports.spread = spread;
 exports.ssr = ssr;
 exports.ssrAttribute = ssrAttribute;
 exports.ssrClassList = ssrClassList;
+exports.ssrElement = ssrElement;
 exports.ssrHydrationKey = ssrHydrationKey;
-exports.ssrSpread = ssrSpread;
 exports.ssrStyle = ssrStyle;
 exports.style = style;
 exports.template = template;

package/web/dist/web.js

@@ -442,13 +442,12 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
   let dynamic = false;
   for (let i = 0, len = array.length; i < len; i++) {
     let item = array[i],
-        prev = current && current[i],
-        t;
+        prev = current && current[i];
     if (item instanceof Node) {
       normalized.push(item);
     } else if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
       dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
-    } else if ((t = typeof item) === "function") {
+    } else if ((typeof item) === "function") {
       if (unwrap) {
         while (typeof item === "function") item = item();
         dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], prev) || dynamic;
@@ -457,7 +456,7 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
         dynamic = true;
       }
     } else {
-      const value = t === "string" ? item : item.string();
+      const value = String(item);
       if (prev && prev.nodeType === 3 && prev.data === value) {
         normalized.push(prev);
       } else normalized.push(document.createTextNode(value));
@@ -516,12 +515,12 @@ function renderToStream(fn, options) {
   throwInBrowser(renderToStream);
 }
 function ssr(template, ...nodes) {}
-function resolveSSRNode(node) {}
+function ssrElement(name, props, children, needsId) {}
 function ssrClassList(value) {}
 function ssrStyle(value) {}
-function ssrSpread(accessor) {}
 function ssrAttribute(key, value) {}
 function ssrHydrationKey() {}
+function resolveSSRNode(node) {}
 function escape(html) {}
 function generateHydrationScript() {}
 
@@ -588,4 +587,4 @@ function Dynamic(props) {
   });
 }
 
-export { Aliases, Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };
+export { Aliases, Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template };

package/web/types/index.d.ts

@@ -1,5 +1,5 @@
 import { hydrate as hydrateCore } from "./client";
-import { Component, JSX, Accessor } from "../..";
+import { JSX, Accessor, ComponentProps, ValidComponent } from "../..";
 export * from "./client";
 export { For, Show, Suspense, SuspenseList, Switch, Match, Index, ErrorBoundary, mergeProps } from "../..";
 export * from "./server-mock";
@@ -21,9 +21,8 @@ export declare function Portal<T extends boolean = false, S extends boolean = fa
     } : {}) & (S extends true ? SVGGElement : HTMLDivElement)) => void);
     children: JSX.Element;
 }): Text;
-declare type DynamicProps<T> = T & {
-    children?: any;
-    component?: Component<T> | string | keyof JSX.IntrinsicElements;
+declare type DynamicProps<T extends ValidComponent> = ComponentProps<T> & {
+    component: T | undefined;
 };
 /**
  * renders an arbitrary custom or native component and passes the other props
@@ -32,4 +31,4 @@ declare type DynamicProps<T> = T & {
  * ```
  * @description https://www.solidjs.com/docs/latest/api#%3Cdynamic%3E
  */
-export declare function Dynamic<T>(props: DynamicProps<T>): Accessor<JSX.Element>;
+export declare function Dynamic<T extends ValidComponent>(props: DynamicProps<T>): Accessor<JSX.Element>;

package/web/types/server-mock.d.ts

@@ -25,16 +25,18 @@ export declare function renderToStream<T>(fn: () => T, options?: {
 export declare function ssr(template: string[] | string, ...nodes: any[]): {
     t: string;
 };
-export declare function resolveSSRNode(node: any): string;
+export declare function ssrElement(name: string, props: any, children: any, needsId: boolean): {
+    t: string;
+};
 export declare function ssrClassList(value: {
     [k: string]: boolean;
 }): string;
 export declare function ssrStyle(value: {
     [k: string]: string;
 }): string;
-export declare function ssrSpread(accessor: any): () => string;
 export declare function ssrAttribute(key: string, value: boolean): string;
 export declare function ssrHydrationKey(): string;
+export declare function resolveSSRNode(node: any): string;
 export declare function escape(html: string): string;
 export declare function generateHydrationScript(): string;
 export declare type LegacyResults = {