solid-js 1.4.5 → 1.5.0-beta.0

package/types/reactive/observable.d.ts

@@ -1,6 +1,11 @@
 import { Accessor, Setter } from "./signal";
+declare global {
+    interface SymbolConstructor {
+        readonly observable: symbol;
+    }
+}
 export declare type ObservableObserver<T> = ((v: T) => void) | {
-    next: (v: T) => void;
+    next?: (v: T) => void;
     error?: (v: any) => void;
     complete?: (v: boolean) => void;
 };
@@ -15,10 +20,10 @@ export declare type ObservableObserver<T> = ((v: T) => void) | {
  * description https://www.solidjs.com/docs/latest/api#observable
  */
 export declare function observable<T>(input: Accessor<T>): {
-    [x: number]: () => any;
     subscribe(observer: ObservableObserver<T>): {
         unsubscribe(): void;
     };
+    [Symbol.observable](): any;
 };
 export declare function from<T>(producer: ((setter: Setter<T>) => () => void) | {
     subscribe: (fn: (v: T) => void) => (() => void) | {

package/types/reactive/signal.d.ts

@@ -5,10 +5,10 @@ export declare const equalFn: <T>(a: T, b: T) => boolean;
 export declare const $PROXY: unique symbol;
 export declare const $TRACK: unique symbol;
 export declare const $DEVCOMP: unique symbol;
-export declare const NOTPENDING: {};
 export declare var Owner: Owner | null;
 export declare let Transition: TransitionState | null;
 declare let ExternalSourceFactory: ExternalSourceFactory | null;
+declare let Pending: SignalState<any>[] | null;
 declare global {
     var _$afterUpdate: () => void;
     var _$afterCreateRoot: (root: Owner) => void;
@@ -17,7 +17,6 @@ export interface SignalState<T> {
     value?: T;
     observers: Computation<any>[] | null;
     observerSlots: number[] | null;
-    pending: T | {};
     tValue?: T;
     comparator?: (prev: T, next: T) => boolean;
     name?: string;
@@ -198,11 +197,42 @@ export interface MemoOptions<T> extends EffectOptions {
  */
 export declare function createMemo<Next extends Prev, Prev = Next>(fn: EffectFunction<undefined | NoInfer<Prev>, Next>): Accessor<Next>;
 export declare function createMemo<Next extends Prev, Init = Next, Prev = Next>(fn: EffectFunction<Init | Prev, Next>, value: Init, options?: MemoOptions<Next>): Accessor<Next>;
-export interface Resource<T> extends Accessor<T> {
-    loading: boolean;
-    error: any;
+interface Unresolved {
+    state: "unresolved";
+    loading: false;
+    error: undefined;
+    latest: undefined;
+    (): undefined;
+}
+interface Pending {
+    state: "pending";
+    loading: true;
+    error: undefined;
+    latest: undefined;
+    (): undefined;
+}
+interface Ready<T> {
+    state: "ready";
+    loading: false;
+    error: undefined;
     latest: T;
+    (): T;
+}
+interface Refreshing<T> {
+    state: "refreshing";
+    loading: true;
+    error: undefined;
+    latest: T;
+    (): T;
+}
+interface Error {
+    state: "error";
+    loading: false;
+    error: any;
+    latest: undefined;
+    (): undefined;
 }
+export declare type Resource<T> = undefined extends T ? Unresolved | Pending | Ready<T> | Refreshing<T> | Error : Ready<T> | Refreshing<T> | Error;
 export declare type ResourceActions<T> = {
     mutate: Setter<T>;
     refetch: (info?: unknown) => T | Promise<T> | undefined | null;
@@ -217,17 +247,16 @@ export declare type ResourceOptions<T> = undefined extends T ? {
     initialValue?: T;
     name?: string;
     deferStream?: boolean;
+    store?: <T>(init: T) => [Accessor<T>, Setter<T>];
     onHydrated?: <S, T>(k: S, info: ResourceFetcherInfo<T>) => void;
 } : {
     initialValue: T;
     name?: string;
     deferStream?: boolean;
+    store?: <T>(init: T) => [Accessor<T>, Setter<T>];
     onHydrated?: <S, T>(k: S, info: ResourceFetcherInfo<T>) => void;
 };
-export declare type ResourceReturn<T, O extends ResourceOptions<T | undefined> | undefined, K = T> = [
-    Resource<O extends undefined | null ? T | undefined : NonNullable<O>["initialValue"] extends undefined ? T | undefined : T>,
-    ResourceActions<K>
-];
+export declare type ResourceReturn<T, K = T> = [Resource<T>, ResourceActions<K>];
 /**
  * Creates a resource that wraps a repeated promise in a reactive pattern:
  * ```typescript
@@ -253,10 +282,10 @@ export declare type ResourceReturn<T, O extends ResourceOptions<T | undefined> |
  *
  * @description https://www.solidjs.com/docs/latest/api#createresource
  */
-export declare function createResource<T, S = true>(fetcher: ResourceFetcher<S, T>, options?: ResourceOptions<undefined>): ResourceReturn<T | undefined, typeof options>;
-export declare function createResource<T, S = true>(fetcher: ResourceFetcher<S, T>, options: ResourceOptions<T>): ResourceReturn<T, typeof options>;
-export declare function createResource<T, S>(source: ResourceSource<S>, fetcher: ResourceFetcher<S, T>, options?: ResourceOptions<undefined>): ResourceReturn<T | undefined, typeof options>;
-export declare function createResource<T, S>(source: ResourceSource<S>, fetcher: ResourceFetcher<S, T>, options: ResourceOptions<T>): ResourceReturn<T, typeof options>;
+export declare function createResource<T, S = true>(fetcher: ResourceFetcher<S, T>, options?: ResourceOptions<undefined>): ResourceReturn<T | undefined>;
+export declare function createResource<T, S = true>(fetcher: ResourceFetcher<S, T>, options: ResourceOptions<T>): ResourceReturn<T>;
+export declare function createResource<T, S>(source: ResourceSource<S>, fetcher: ResourceFetcher<S, T>, options?: ResourceOptions<undefined>): ResourceReturn<T | undefined>;
+export declare function createResource<T, S>(source: ResourceSource<S>, fetcher: ResourceFetcher<S, T>, options: ResourceOptions<T>): ResourceReturn<T>;
 export interface DeferredOptions<T> {
     equals?: false | ((prev: T, next: T) => boolean);
     name?: string;

package/types/render/component.d.ts

@@ -51,6 +51,7 @@ export declare type FlowProps<P = {}, C = JSX.Element> = P & {
 export declare type FlowComponent<P = {}, C = JSX.Element> = Component<FlowProps<P, C>>;
 /** @deprecated: use `ParentProps` instead */
 export declare type PropsWithChildren<P = {}> = ParentProps<P>;
+export declare type ValidComponent = keyof JSX.IntrinsicElements | Component<any> | (string & {});
 /**
  * Takes the props of the passed component and returns its type
  *
@@ -58,7 +59,7 @@ export declare type PropsWithChildren<P = {}> = ParentProps<P>;
  * ComponentProps<typeof Portal> // { mount?: Node; useShadow?: boolean; children: JSX.Element }
  * ComponentProps<'div'> // JSX.HTMLAttributes<HTMLDivElement>
  */
-export declare type ComponentProps<T extends keyof JSX.IntrinsicElements | Component<any>> = T extends Component<infer P> ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : {};
+export declare type ComponentProps<T extends ValidComponent> = T extends Component<infer P> ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : Record<string, unknown>;
 /**
  * Type of `props.ref`, for use in `Component` or `props` typing.
  *
@@ -66,16 +67,30 @@ export declare type ComponentProps<T extends keyof JSX.IntrinsicElements | Compo
  */
 export declare type Ref<T> = T | ((val: T) => void);
 export declare function createComponent<T>(Comp: Component<T>, props: T): JSX.Element;
+declare type DistributeOverride<T, F> = T extends undefined ? F : T;
 declare type Override<T, U> = T extends any ? U extends any ? {
-    [K in keyof T]: K extends keyof U ? undefined extends U[K] ? Exclude<U[K], undefined> | T[K] : U[K] : T[K];
+    [K in keyof T]: K extends keyof U ? DistributeOverride<U[K], T[K]> : T[K];
 } & {
-    [K in keyof U]: K extends keyof T ? undefined extends U[K] ? Exclude<U[K], undefined> | T[K] : U[K] : U[K];
+    [K in keyof U]: K extends keyof T ? DistributeOverride<U[K], T[K]> : U[K];
 } : T & U : T & U;
-export declare type MergeProps<T extends unknown[], Curr = {}> = T extends [
+declare type OverrideSpread<T, U> = T extends any ? {
+    [K in keyof ({
+        [K in keyof T]: any;
+    } & {
+        [K in keyof U]?: any;
+    } & {
+        [K in U extends any ? keyof U : keyof U]?: any;
+    })]: K extends keyof T ? Exclude<U extends any ? U[K & keyof U] : never, undefined> | T[K] : U extends any ? U[K & keyof U] : never;
+} : T & U;
+declare type Simplify<T> = T extends any ? {
+    [K in keyof T]: T[K];
+} : T;
+declare type _MergeProps<T extends unknown[], Curr = {}> = T extends [
     infer Next | (() => infer Next),
     ...infer Rest
-] ? MergeProps<Rest, Override<Curr, Next>> : Curr;
-export declare function mergeProps<T extends [unknown, ...unknown[]]>(...sources: T): MergeProps<T>;
+] ? _MergeProps<Rest, Override<Curr, Next>> : T extends [...infer Rest, infer Next | (() => infer Next)] ? Override<_MergeProps<Rest, Curr>, Next> : T extends [] ? Curr : T extends (infer I | (() => infer I))[] ? OverrideSpread<Curr, I> : Curr;
+export declare type MergeProps<T extends unknown[]> = Simplify<_MergeProps<T>>;
+export declare function mergeProps<T extends unknown[]>(...sources: T): MergeProps<T>;
 export declare type SplitProps<T, K extends (readonly (keyof T)[])[]> = [
     ...{
         [P in keyof K]: P extends `${number}` ? Pick<T, Extract<K[P], readonly (keyof T)[]>[number]> : never;

package/types/server/reactive.d.ts

@@ -4,6 +4,7 @@ export declare const $DEVCOMP: unique symbol;
 export declare const DEV: {};
 export declare type Accessor<T> = () => T;
 export declare type Setter<T> = undefined extends T ? <U extends T>(value?: (U extends Function ? never : U) | ((prev?: T) => U)) => U : <U extends T>(value: (U extends Function ? never : U) | ((prev: T) => U)) => U;
+export declare function castError(err: any): string | Error;
 export declare let Owner: Owner | null;
 interface Owner {
     owner: Owner | null;

package/types/server/rendering.d.ts

@@ -14,7 +14,8 @@ export declare type FlowProps<P = {}, C = JSX.Element> = P & {
 };
 export declare type FlowComponent<P = {}, C = JSX.Element> = Component<FlowProps<P, C>>;
 export declare type Ref<T> = T | ((val: T) => void);
-export declare type ComponentProps<T extends keyof JSX.IntrinsicElements | Component> = T extends Component<infer P> ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : {};
+export declare type ValidComponent = keyof JSX.IntrinsicElements | Component<any> | (string & {});
+export declare type ComponentProps<T extends ValidComponent> = T extends Component<infer P> ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : Record<string, unknown>;
 declare type SharedConfig = {
     context?: HydrationContext;
 };
@@ -123,7 +124,6 @@ declare type HydrationContext = {
     suspense: Record<string, SuspenseContextType>;
     registerFragment: (v: string) => (v?: string, err?: any) => boolean;
     async?: boolean;
-    streaming?: boolean;
     noHydrate: boolean;
 };
 export declare function SuspenseList(props: {

package/universal/types/universal.d.ts

@@ -6,9 +6,9 @@ export interface RendererOptions<NodeType> {
   setProperty<T>(node: NodeType, name: string, value: T, prev?: T): void;
   insertNode(parent: NodeType, node: NodeType, anchor?: NodeType): void;
   removeNode(parent: NodeType, node: NodeType): void;
-  getParentNode(node: NodeType): NodeType;
-  getFirstChild(node: NodeType): NodeType;
-  getNextSibling(node: NodeType): NodeType;
+  getParentNode(node: NodeType): NodeType | undefined;
+  getFirstChild(node: NodeType): NodeType | undefined;
+  getNextSibling(node: NodeType): NodeType | undefined;
 }
 
 export interface Renderer<NodeType> {

package/web/dist/dev.cjs

@@ -446,13 +446,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;
@@ -461,7 +460,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));
@@ -520,12 +519,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() {}
 
@@ -686,8 +685,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/dev.js

@@ -443,13 +443,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;
@@ -458,7 +457,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));
@@ -517,12 +516,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() {}
 
@@ -592,4 +591,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/dist/server.cjs

@@ -7,6 +7,7 @@ var solidJs = require('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"];
 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"
@@ -232,8 +233,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 = "";
   solidJs.sharedConfig.context = {
@@ -252,69 +252,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 = solidJs.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);
-      solidJs.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,
@@ -339,13 +290,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;
     }
@@ -365,7 +316,6 @@ function renderToStream(code, options = {}) {
     id: renderId || "",
     count: 0,
     async: true,
-    streaming: true,
     resources: {},
     suspense: {},
     assets: [],
@@ -393,15 +343,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;
       };
     }
@@ -420,6 +370,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();
@@ -516,16 +482,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];
@@ -545,7 +510,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}"` : "";
@@ -617,7 +584,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++) {
@@ -721,8 +688,7 @@ function Dynamic(props) {
         t = typeof comp;
   if (comp) {
     if (t === "function") return comp(others);else if (t === "string") {
-      const [local, sOthers] = solidJs.splitProps(others, ["children"]);
-      return ssr([`<${comp}`, ' ', ">", `</${comp}>`], ssrHydrationKey(), ssrSpread(sOthers), escape(local.children || ""));
+      return ssrElement(comp, others, undefined, true);
     }
   }
 }
@@ -789,6 +755,6 @@ exports.spread = spread;
 exports.ssr = ssr;
 exports.ssrAttribute = ssrAttribute;
 exports.ssrClassList = ssrClassList;
+exports.ssrElement = ssrElement;
 exports.ssrHydrationKey = ssrHydrationKey;
-exports.ssrSpread = ssrSpread;
 exports.ssrStyle = ssrStyle;