solid-js 1.5.0-beta.3 → 1.5.0-beta.4

package/dist/dev.cjs

@@ -301,7 +301,7 @@ function createResource(pSource, pFetcher, pOptions) {
     !success && (err = castError(v));
     runUpdates(() => {
       setValue(() => v);
-      setState(success ? "ready" : "error");
+      setState(success ? "ready" : "errored");
       for (const c of contexts.keys()) c.decrement();
       contexts.clear();
     }, false);
@@ -352,10 +352,11 @@ function createResource(pSource, pFetcher, pOptions) {
     return p.then(v => loadEnd(p, v, true, lookup), e => loadEnd(p, e, false));
   }
   Object.defineProperties(read, {
+    value: {
+      get: () => value()
+    },
     state: {
-      get() {
-        return state();
-      }
+      get: () => state()
     },
     loading: {
       get() {
@@ -365,13 +366,13 @@ function createResource(pSource, pFetcher, pOptions) {
     },
     error: {
       get() {
-        return state() === "error" ? err : undefined;
+        return state() === "errored" ? err : undefined;
       }
     },
     latest: {
       get() {
         if (!resolved) return read();
-        if (state() === "error") throw err;
+        if (state() === "errored") throw err;
         return value();
       }
     }
@@ -400,9 +401,8 @@ function createSelector(source, fn = equalFn, options) {
   const subs = new Map();
   const node = createComputation(p => {
     const v = source();
-    for (const key of subs.keys()) if (fn(key, v) !== fn(key, p)) {
-      const l = subs.get(key);
-      for (const c of l.values()) {
+    for (const [key, val] of subs.entries()) if (fn(key, v) !== fn(key, p)) {
+      for (const c of val.values()) {
         c.state = STALE;
         if (c.pure) Updates.push(c);else Effects.push(c);
       }
@@ -411,8 +411,8 @@ function createSelector(source, fn = equalFn, options) {
   }, undefined, true, STALE, options );
   updateComputation(node);
   return key => {
-    let listener;
-    if (listener = Listener) {
+    const listener = Listener;
+    if (listener) {
       let l;
       if (l = subs.get(key)) l.add(listener);else subs.set(key, l = new Set([listener]));
       onCleanup(() => {
@@ -585,7 +585,12 @@ function useContext(context) {
 }
 function children(fn) {
   const children = createMemo(fn);
-  return createMemo(() => resolveChildren(children()));
+  const memo = createMemo(() => resolveChildren(children()));
+  memo.toArray = () => {
+    const c = memo();
+    return Array.isArray(c) ? c : c != null ? [c] : [];
+  };
+  return memo;
 }
 let SuspenseContext;
 function getSuspenseContext() {
@@ -700,7 +705,7 @@ function runComputation(node, value, time) {
     handleError(err);
   }
   if (!node.updatedAt || node.updatedAt <= time) {
-    if (node.updatedAt && "observers" in node) {
+    if (node.updatedAt != null && "observers" in node) {
       writeSignal(node, nextValue, true);
     } else if (Transition && Transition.running && node.pure) {
       Transition.sources.add(node);

package/dist/dev.js

@@ -297,7 +297,7 @@ function createResource(pSource, pFetcher, pOptions) {
     !success && (err = castError(v));
     runUpdates(() => {
       setValue(() => v);
-      setState(success ? "ready" : "error");
+      setState(success ? "ready" : "errored");
       for (const c of contexts.keys()) c.decrement();
       contexts.clear();
     }, false);
@@ -348,10 +348,11 @@ function createResource(pSource, pFetcher, pOptions) {
     return p.then(v => loadEnd(p, v, true, lookup), e => loadEnd(p, e, false));
   }
   Object.defineProperties(read, {
+    value: {
+      get: () => value()
+    },
     state: {
-      get() {
-        return state();
-      }
+      get: () => state()
     },
     loading: {
       get() {
@@ -361,13 +362,13 @@ function createResource(pSource, pFetcher, pOptions) {
     },
     error: {
       get() {
-        return state() === "error" ? err : undefined;
+        return state() === "errored" ? err : undefined;
       }
     },
     latest: {
       get() {
         if (!resolved) return read();
-        if (state() === "error") throw err;
+        if (state() === "errored") throw err;
         return value();
       }
     }
@@ -396,9 +397,8 @@ function createSelector(source, fn = equalFn, options) {
   const subs = new Map();
   const node = createComputation(p => {
     const v = source();
-    for (const key of subs.keys()) if (fn(key, v) !== fn(key, p)) {
-      const l = subs.get(key);
-      for (const c of l.values()) {
+    for (const [key, val] of subs.entries()) if (fn(key, v) !== fn(key, p)) {
+      for (const c of val.values()) {
         c.state = STALE;
         if (c.pure) Updates.push(c);else Effects.push(c);
       }
@@ -407,8 +407,8 @@ function createSelector(source, fn = equalFn, options) {
   }, undefined, true, STALE, options );
   updateComputation(node);
   return key => {
-    let listener;
-    if (listener = Listener) {
+    const listener = Listener;
+    if (listener) {
       let l;
       if (l = subs.get(key)) l.add(listener);else subs.set(key, l = new Set([listener]));
       onCleanup(() => {
@@ -581,7 +581,12 @@ function useContext(context) {
 }
 function children(fn) {
   const children = createMemo(fn);
-  return createMemo(() => resolveChildren(children()));
+  const memo = createMemo(() => resolveChildren(children()));
+  memo.toArray = () => {
+    const c = memo();
+    return Array.isArray(c) ? c : c != null ? [c] : [];
+  };
+  return memo;
 }
 let SuspenseContext;
 function getSuspenseContext() {
@@ -696,7 +701,7 @@ function runComputation(node, value, time) {
     handleError(err);
   }
   if (!node.updatedAt || node.updatedAt <= time) {
-    if (node.updatedAt && "observers" in node) {
+    if (node.updatedAt != null && "observers" in node) {
       writeSignal(node, nextValue, true);
     } else if (Transition && Transition.running && node.pure) {
       Transition.sources.add(node);

package/dist/server.cjs

@@ -144,7 +144,12 @@ function getOwner() {
   return Owner;
 }
 function children(fn) {
-  return createMemo(() => resolveChildren(fn()));
+  const memo = createMemo(() => resolveChildren(fn()));
+  memo.toArray = () => {
+    const c = memo();
+    return Array.isArray(c) ? c : c != null ? [c] : [];
+  };
+  return memo;
 }
 function runWithOwner(o, fn) {
   const prev = Owner;
@@ -416,9 +421,13 @@ function createResource(source, fetcher, options = {}) {
   };
   read.loading = false;
   read.error = undefined;
-  Object.defineProperty(read, "latest", {
-    get() {
-      return read();
+  read.state = "initialValue" in options ? "resolved" : "unresolved";
+  Object.defineProperties(read, {
+    value: {
+      get: () => read()
+    },
+    latest: {
+      get: () => read()
     }
   });
   function load() {
@@ -444,15 +453,18 @@ function createResource(source, fetcher, options = {}) {
     }
     if (p != undefined && typeof p === "object" && "then" in p) {
       read.loading = true;
+      read.state = "pending";
       if (ctx.writeResource) ctx.writeResource(id, p, undefined, options.deferStream);
       return p.then(res => {
         read.loading = false;
+        read.state = "resolved";
         ctx.resources[id].data = res;
         p = null;
         notifySuspense(contexts);
         return res;
       }).catch(err => {
         read.loading = false;
+        read.state = "errored";
         read.error = error = castError(err);
         p = null;
         notifySuspense(contexts);

package/dist/server.js

@@ -140,7 +140,12 @@ function getOwner() {
   return Owner;
 }
 function children(fn) {
-  return createMemo(() => resolveChildren(fn()));
+  const memo = createMemo(() => resolveChildren(fn()));
+  memo.toArray = () => {
+    const c = memo();
+    return Array.isArray(c) ? c : c != null ? [c] : [];
+  };
+  return memo;
 }
 function runWithOwner(o, fn) {
   const prev = Owner;
@@ -412,9 +417,13 @@ function createResource(source, fetcher, options = {}) {
   };
   read.loading = false;
   read.error = undefined;
-  Object.defineProperty(read, "latest", {
-    get() {
-      return read();
+  read.state = "initialValue" in options ? "resolved" : "unresolved";
+  Object.defineProperties(read, {
+    value: {
+      get: () => read()
+    },
+    latest: {
+      get: () => read()
     }
   });
   function load() {
@@ -440,15 +449,18 @@ function createResource(source, fetcher, options = {}) {
     }
     if (p != undefined && typeof p === "object" && "then" in p) {
       read.loading = true;
+      read.state = "pending";
       if (ctx.writeResource) ctx.writeResource(id, p, undefined, options.deferStream);
       return p.then(res => {
         read.loading = false;
+        read.state = "resolved";
         ctx.resources[id].data = res;
         p = null;
         notifySuspense(contexts);
         return res;
       }).catch(err => {
         read.loading = false;
+        read.state = "errored";
         read.error = error = castError(err);
         p = null;
         notifySuspense(contexts);

package/dist/solid.cjs

@@ -293,7 +293,7 @@ function createResource(pSource, pFetcher, pOptions) {
     !success && (err = castError(v));
     runUpdates(() => {
       setValue(() => v);
-      setState(success ? "ready" : "error");
+      setState(success ? "ready" : "errored");
       for (const c of contexts.keys()) c.decrement();
       contexts.clear();
     }, false);
@@ -344,10 +344,11 @@ function createResource(pSource, pFetcher, pOptions) {
     return p.then(v => loadEnd(p, v, true, lookup), e => loadEnd(p, e, false));
   }
   Object.defineProperties(read, {
+    value: {
+      get: () => value()
+    },
     state: {
-      get() {
-        return state();
-      }
+      get: () => state()
     },
     loading: {
       get() {
@@ -357,13 +358,13 @@ function createResource(pSource, pFetcher, pOptions) {
     },
     error: {
       get() {
-        return state() === "error" ? err : undefined;
+        return state() === "errored" ? err : undefined;
       }
     },
     latest: {
       get() {
         if (!resolved) return read();
-        if (state() === "error") throw err;
+        if (state() === "errored") throw err;
         return value();
       }
     }
@@ -392,9 +393,8 @@ function createSelector(source, fn = equalFn, options) {
   const subs = new Map();
   const node = createComputation(p => {
     const v = source();
-    for (const key of subs.keys()) if (fn(key, v) !== fn(key, p)) {
-      const l = subs.get(key);
-      for (const c of l.values()) {
+    for (const [key, val] of subs.entries()) if (fn(key, v) !== fn(key, p)) {
+      for (const c of val.values()) {
         c.state = STALE;
         if (c.pure) Updates.push(c);else Effects.push(c);
       }
@@ -403,8 +403,8 @@ function createSelector(source, fn = equalFn, options) {
   }, undefined, true, STALE);
   updateComputation(node);
   return key => {
-    let listener;
-    if (listener = Listener) {
+    const listener = Listener;
+    if (listener) {
       let l;
       if (l = subs.get(key)) l.add(listener);else subs.set(key, l = new Set([listener]));
       onCleanup(() => {
@@ -525,7 +525,12 @@ function useContext(context) {
 }
 function children(fn) {
   const children = createMemo(fn);
-  return createMemo(() => resolveChildren(children()));
+  const memo = createMemo(() => resolveChildren(children()));
+  memo.toArray = () => {
+    const c = memo();
+    return Array.isArray(c) ? c : c != null ? [c] : [];
+  };
+  return memo;
 }
 let SuspenseContext;
 function getSuspenseContext() {
@@ -640,7 +645,7 @@ function runComputation(node, value, time) {
     handleError(err);
   }
   if (!node.updatedAt || node.updatedAt <= time) {
-    if (node.updatedAt && "observers" in node) {
+    if (node.updatedAt != null && "observers" in node) {
       writeSignal(node, nextValue, true);
     } else if (Transition && Transition.running && node.pure) {
       Transition.sources.add(node);

package/dist/solid.js

@@ -289,7 +289,7 @@ function createResource(pSource, pFetcher, pOptions) {
     !success && (err = castError(v));
     runUpdates(() => {
       setValue(() => v);
-      setState(success ? "ready" : "error");
+      setState(success ? "ready" : "errored");
       for (const c of contexts.keys()) c.decrement();
       contexts.clear();
     }, false);
@@ -340,10 +340,11 @@ function createResource(pSource, pFetcher, pOptions) {
     return p.then(v => loadEnd(p, v, true, lookup), e => loadEnd(p, e, false));
   }
   Object.defineProperties(read, {
+    value: {
+      get: () => value()
+    },
     state: {
-      get() {
-        return state();
-      }
+      get: () => state()
     },
     loading: {
       get() {
@@ -353,13 +354,13 @@ function createResource(pSource, pFetcher, pOptions) {
     },
     error: {
       get() {
-        return state() === "error" ? err : undefined;
+        return state() === "errored" ? err : undefined;
       }
     },
     latest: {
       get() {
         if (!resolved) return read();
-        if (state() === "error") throw err;
+        if (state() === "errored") throw err;
         return value();
       }
     }
@@ -388,9 +389,8 @@ function createSelector(source, fn = equalFn, options) {
   const subs = new Map();
   const node = createComputation(p => {
     const v = source();
-    for (const key of subs.keys()) if (fn(key, v) !== fn(key, p)) {
-      const l = subs.get(key);
-      for (const c of l.values()) {
+    for (const [key, val] of subs.entries()) if (fn(key, v) !== fn(key, p)) {
+      for (const c of val.values()) {
         c.state = STALE;
         if (c.pure) Updates.push(c);else Effects.push(c);
       }
@@ -399,8 +399,8 @@ function createSelector(source, fn = equalFn, options) {
   }, undefined, true, STALE);
   updateComputation(node);
   return key => {
-    let listener;
-    if (listener = Listener) {
+    const listener = Listener;
+    if (listener) {
       let l;
       if (l = subs.get(key)) l.add(listener);else subs.set(key, l = new Set([listener]));
       onCleanup(() => {
@@ -521,7 +521,12 @@ function useContext(context) {
 }
 function children(fn) {
   const children = createMemo(fn);
-  return createMemo(() => resolveChildren(children()));
+  const memo = createMemo(() => resolveChildren(children()));
+  memo.toArray = () => {
+    const c = memo();
+    return Array.isArray(c) ? c : c != null ? [c] : [];
+  };
+  return memo;
 }
 let SuspenseContext;
 function getSuspenseContext() {
@@ -636,7 +641,7 @@ function runComputation(node, value, time) {
     handleError(err);
   }
   if (!node.updatedAt || node.updatedAt <= time) {
-    if (node.updatedAt && "observers" in node) {
+    if (node.updatedAt != null && "observers" in node) {
       writeSignal(node, nextValue, true);
     } else if (Transition && Transition.running && node.pure) {
       Transition.sources.add(node);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.5.0-beta.3",
+  "version": "1.5.0-beta.4",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",

package/store/types/store.d.ts

@@ -55,9 +55,9 @@ export interface SetStoreFunction<T> {
  *
  * @description https://www.solidjs.com/docs/latest/api#createstore
  */
-export declare function createStore<T extends {}>(...[store, options]: {} extends T ? [store?: T | Store<T>, options?: {
+export declare function createStore<T extends object = {}>(...[store, options]: {} extends T ? [store?: T | Store<T>, options?: {
     name?: string;
-}] : [store: object & (T | Store<T>), options?: {
+}] : [store: T | Store<T>, options?: {
     name?: string;
 }]): [get: Store<T>, set: SetStoreFunction<T>];
 export {};

package/types/index.d.ts

@@ -1,5 +1,5 @@
 export { createRoot, createSignal, createEffect, createRenderEffect, createComputed, createReaction, createDeferred, createSelector, createMemo, createResource, onMount, onCleanup, onError, untrack, batch, on, enableScheduling, enableExternalSource, startTransition, useTransition, createContext, useContext, children, getListener, getOwner, runWithOwner, equalFn, $DEVCOMP, $PROXY, $TRACK } from "./reactive/signal.js";
-export type { Accessor, Setter, Signal, Resource, ResourceOptions, ResourceReturn, ResourceFetcher, ResourceFetcherInfo, Context, ReturnTypes, Owner, InitializedResource, InitializedResourceOptions, InitializedResourceReturn } from "./reactive/signal.js";
+export type { Accessor, Setter, Signal, Resource, ResourceOptions, ResourceReturn, ResourceFetcher, ResourceFetcherInfo, ChildrenReturn, Context, ReturnTypes, Owner, InitializedResource, InitializedResourceOptions, InitializedResourceReturn } from "./reactive/signal.js";
 export * from "./reactive/observable.js";
 export * from "./reactive/scheduler.js";
 export * from "./reactive/array.js";

package/types/reactive/signal.d.ts

@@ -197,6 +197,7 @@ 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>;
 interface Unresolved {
+    value: undefined;
     state: "unresolved";
     loading: false;
     error: undefined;
@@ -204,6 +205,7 @@ interface Unresolved {
     (): undefined;
 }
 interface Pending {
+    value: undefined;
     state: "pending";
     loading: true;
     error: undefined;
@@ -211,6 +213,7 @@ interface Pending {
     (): undefined;
 }
 interface Ready<T> {
+    value: T;
     state: "ready";
     loading: false;
     error: undefined;
@@ -218,21 +221,23 @@ interface Ready<T> {
     (): T;
 }
 interface Refreshing<T> {
+    value: T;
     state: "refreshing";
     loading: true;
     error: undefined;
     latest: T;
     (): T;
 }
-interface Error {
-    state: "error";
+interface Errored {
+    value: never;
+    state: "errored";
     loading: false;
     error: any;
     latest: never;
     (): never;
 }
-export declare type Resource<T> = Unresolved | Pending | Ready<T> | Refreshing<T> | Error;
-export declare type InitializedResource<T> = Ready<T> | Refreshing<T> | Error;
+export declare type Resource<T> = Unresolved | Pending | Ready<T> | Refreshing<T> | Errored;
+export declare type InitializedResource<T> = Ready<T> | Refreshing<T> | Errored;
 export declare type ResourceActions<T, R = unknown> = {
     mutate: Setter<T | undefined>;
     refetch: (info?: R) => T | Promise<T> | undefined | null;
@@ -489,6 +494,9 @@ export declare function createContext<T>(defaultValue: T): Context<T>;
 export declare function useContext<T>(context: Context<T>): T;
 export declare type ResolvedJSXElement = Exclude<JSX.Element, JSX.ArrayElement | JSX.FunctionElement>;
 export declare type ResolvedChildren = ResolvedJSXElement | ResolvedJSXElement[];
+export declare type ChildrenReturn = Accessor<ResolvedChildren> & {
+    toArray: () => ResolvedJSXElement[];
+};
 /**
  * Resolves child elements to help interact with children
  *
@@ -497,7 +505,7 @@ export declare type ResolvedChildren = ResolvedJSXElement | ResolvedJSXElement[]
  *
  * @description https://www.solidjs.com/docs/latest/api#children
  */
-export declare function children(fn: Accessor<JSX.Element>): Accessor<ResolvedChildren>;
+export declare function children(fn: Accessor<JSX.Element>): ChildrenReturn;
 export declare type SuspenseContextType = {
     increment?: () => void;
     decrement?: () => void;

package/types/server/reactive.d.ts

@@ -46,7 +46,10 @@ export interface Context<T> {
 export declare function createContext<T>(defaultValue?: T): Context<T>;
 export declare function useContext<T>(context: Context<T>): T;
 export declare function getOwner(): Owner | null;
-export declare function children(fn: () => any): () => unknown;
+declare type ChildrenReturn = Accessor<any> & {
+    toArray: () => any[];
+};
+export declare function children(fn: () => any): ChildrenReturn;
 export declare function runWithOwner<T>(o: Owner, fn: () => T): T | undefined;
 export declare function lookup(owner: Owner | null, key: symbol | string): any;
 export interface Task {

package/types/server/rendering.d.ts

@@ -72,7 +72,8 @@ export declare function ErrorBoundary(props: {
 };
 export interface Resource<T> {
     (): T | undefined;
-    state: "unresolved" | "pending" | "ready" | "refreshing" | "error";
+    value: T | undefined;
+    state: "unresolved" | "pending" | "ready" | "refreshing" | "errored";
     loading: boolean;
     error: any;
     latest: T | undefined;

package/web/dist/dev.cjs

@@ -502,12 +502,10 @@ function getHydrationKey() {
   const hydrate = solidJs.sharedConfig.context;
   return `${hydrate.id}${hydrate.count++}`;
 }
-function Assets() {
-  return;
-}
 function NoHydration(props) {
   return solidJs.sharedConfig.context ? undefined : props.children;
 }
+function voidFn() {}
 
 function throwInBrowser(func) {
   const err = new Error(`${func.name} is not supported in the browser, returning undefined`);
@@ -530,7 +528,7 @@ function ssrAttribute(key, value) {}
 function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
-function generateHydrationScript() {}
+function ssrSpread(props, isSVG, skipChildren) {}
 
 const isServer = false;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
@@ -647,12 +645,12 @@ Object.defineProperty(exports, 'mergeProps', {
   get: function () { return solidJs.mergeProps; }
 });
 exports.Aliases = Aliases;
-exports.Assets = Assets;
+exports.Assets = voidFn;
 exports.ChildProperties = ChildProperties;
 exports.DOMElements = DOMElements;
 exports.DelegatedEvents = DelegatedEvents;
 exports.Dynamic = Dynamic;
-exports.HydrationScript = Assets;
+exports.HydrationScript = voidFn;
 exports.NoHydration = NoHydration;
 exports.Portal = Portal;
 exports.PropAliases = PropAliases;
@@ -667,7 +665,8 @@ exports.clearDelegatedEvents = clearDelegatedEvents;
 exports.delegateEvents = delegateEvents;
 exports.dynamicProperty = dynamicProperty;
 exports.escape = escape;
-exports.generateHydrationScript = generateHydrationScript;
+exports.generateHydrationScript = voidFn;
+exports.getAssets = voidFn;
 exports.getHydrationKey = getHydrationKey;
 exports.getNextElement = getNextElement;
 exports.getNextMarker = getNextMarker;
@@ -691,7 +690,9 @@ exports.ssrAttribute = ssrAttribute;
 exports.ssrClassList = ssrClassList;
 exports.ssrElement = ssrElement;
 exports.ssrHydrationKey = ssrHydrationKey;
+exports.ssrSpread = ssrSpread;
 exports.ssrStyle = ssrStyle;
 exports.style = style;
 exports.template = template;
 exports.use = use;
+exports.useAssets = voidFn;

package/web/dist/dev.js

@@ -499,12 +499,10 @@ function getHydrationKey() {
   const hydrate = sharedConfig.context;
   return `${hydrate.id}${hydrate.count++}`;
 }
-function Assets() {
-  return;
-}
 function NoHydration(props) {
   return sharedConfig.context ? undefined : props.children;
 }
+function voidFn() {}
 
 function throwInBrowser(func) {
   const err = new Error(`${func.name} is not supported in the browser, returning undefined`);
@@ -527,7 +525,7 @@ function ssrAttribute(key, value) {}
 function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
-function generateHydrationScript() {}
+function ssrSpread(props, isSVG, skipChildren) {}
 
 const isServer = false;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
@@ -595,4 +593,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, ssrElement, ssrHydrationKey, ssrStyle, style, template, use };
+export { Aliases, voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, 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, memo, 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

@@ -460,22 +460,16 @@ function renderToStream(code, options = {}) {
   };
 }
 function Assets(props) {
-  solidJs.sharedConfig.context.assets.push(() => NoHydration({
-    get children() {
-      return resolveSSRNode(props.children);
-    }
-  }));
-  return ssr(`%%$${solidJs.sharedConfig.context.assets.length - 1}%%`);
+  useAssets(() => props.children);
 }
 function HydrationScript(props) {
   const {
     nonce
   } = solidJs.sharedConfig.context;
-  solidJs.sharedConfig.context.assets.push(() => generateHydrationScript({
+  return ssr(generateHydrationScript({
     nonce,
     ...props
   }));
-  return ssr(`%%$${solidJs.sharedConfig.context.assets.length - 1}%%`);
 }
 function NoHydration(props) {
   const c = solidJs.sharedConfig.context;
@@ -621,6 +615,15 @@ function getHydrationKey() {
   const hydrate = solidJs.sharedConfig.context;
   return hydrate && !hydrate.noHydrate && `${hydrate.id}${hydrate.count++}`;
 }
+function useAssets(fn) {
+  solidJs.sharedConfig.context.assets.push(() => resolveSSRNode(fn()));
+}
+function getAssets() {
+  const assets = solidJs.sharedConfig.context.assets;
+  let out = "";
+  for (let i = 0, len = assets.length; i < len; i++) out += assets[i]();
+  return out;
+}
 function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
@@ -628,10 +631,10 @@ function generateHydrationScript({
   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++) {
-    html = html.replace(`%%$${i}%%`, assets[i]());
-  }
-  return html;
+  if (!assets || !assets.length) return html;
+  let out = "";
+  for (let i = 0, len = assets.length; i < len; i++) out += assets[i]();
+  return html.replace(`<head>`, `<head>` + out);
 }
 function injectScripts(html, scripts, nonce) {
   const tag = `<script${nonce ? ` nonce="${nonce}"` : ""}>${scripts}</script>`;
@@ -720,6 +723,37 @@ function pipeToWritable(code, writable, options = {}) {
   const stream = renderToStream(code, options);
   if (!options.onReady) stream.pipeTo(writable);
 }
+function ssrSpread(props, isSVG, skipChildren) {
+  let result = "";
+  if (props == null) return results;
+  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.`);
+      continue;
+    }
+    const value = props[prop];
+    if (prop === "style") {
+      result += `style="${ssrStyle(value)}"`;
+    } 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)}"`;
+      classResolved = true;
+    } else if (BooleanAttributes.has(prop)) {
+      if (value) result += prop;else continue;
+    } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on") {
+      continue;
+    } else {
+      result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
+    }
+    if (i !== keys.length - 1) result += " ";
+  }
+  return result;
+}
 
 const isServer = true;
 function spread() {}
@@ -784,6 +818,7 @@ exports.NoHydration = NoHydration;
 exports.Portal = Portal;
 exports.escape = escape;
 exports.generateHydrationScript = generateHydrationScript;
+exports.getAssets = getAssets;
 exports.getHydrationKey = getHydrationKey;
 exports.isServer = isServer;
 exports.pipeToNodeWritable = pipeToNodeWritable;
@@ -798,4 +833,6 @@ exports.ssrAttribute = ssrAttribute;
 exports.ssrClassList = ssrClassList;
 exports.ssrElement = ssrElement;
 exports.ssrHydrationKey = ssrHydrationKey;
+exports.ssrSpread = ssrSpread;
 exports.ssrStyle = ssrStyle;
+exports.useAssets = useAssets;

package/web/dist/server.js

@@ -457,22 +457,16 @@ function renderToStream(code, options = {}) {
   };
 }
 function Assets(props) {
-  sharedConfig.context.assets.push(() => NoHydration({
-    get children() {
-      return resolveSSRNode(props.children);
-    }
-  }));
-  return ssr(`%%$${sharedConfig.context.assets.length - 1}%%`);
+  useAssets(() => props.children);
 }
 function HydrationScript(props) {
   const {
     nonce
   } = sharedConfig.context;
-  sharedConfig.context.assets.push(() => generateHydrationScript({
+  return ssr(generateHydrationScript({
     nonce,
     ...props
   }));
-  return ssr(`%%$${sharedConfig.context.assets.length - 1}%%`);
 }
 function NoHydration(props) {
   const c = sharedConfig.context;
@@ -618,6 +612,15 @@ function getHydrationKey() {
   const hydrate = sharedConfig.context;
   return hydrate && !hydrate.noHydrate && `${hydrate.id}${hydrate.count++}`;
 }
+function useAssets(fn) {
+  sharedConfig.context.assets.push(() => resolveSSRNode(fn()));
+}
+function getAssets() {
+  const assets = sharedConfig.context.assets;
+  let out = "";
+  for (let i = 0, len = assets.length; i < len; i++) out += assets[i]();
+  return out;
+}
 function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
@@ -625,10 +628,10 @@ function generateHydrationScript({
   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++) {
-    html = html.replace(`%%$${i}%%`, assets[i]());
-  }
-  return html;
+  if (!assets || !assets.length) return html;
+  let out = "";
+  for (let i = 0, len = assets.length; i < len; i++) out += assets[i]();
+  return html.replace(`<head>`, `<head>` + out);
 }
 function injectScripts(html, scripts, nonce) {
   const tag = `<script${nonce ? ` nonce="${nonce}"` : ""}>${scripts}</script>`;
@@ -717,6 +720,37 @@ function pipeToWritable(code, writable, options = {}) {
   const stream = renderToStream(code, options);
   if (!options.onReady) stream.pipeTo(writable);
 }
+function ssrSpread(props, isSVG, skipChildren) {
+  let result = "";
+  if (props == null) return results;
+  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.`);
+      continue;
+    }
+    const value = props[prop];
+    if (prop === "style") {
+      result += `style="${ssrStyle(value)}"`;
+    } 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)}"`;
+      classResolved = true;
+    } else if (BooleanAttributes.has(prop)) {
+      if (value) result += prop;else continue;
+    } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on") {
+      continue;
+    } else {
+      result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
+    }
+    if (i !== keys.length - 1) result += " ";
+  }
+  return result;
+}
 
 const isServer = true;
 function spread() {}
@@ -734,4 +768,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, ssrElement, ssrHydrationKey, ssrStyle };
+export { Assets, Dynamic, HydrationScript, NoHydration, Portal, escape, generateHydrationScript, getAssets, getHydrationKey, isServer, pipeToNodeWritable, pipeToWritable, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, useAssets };

package/web/dist/web.cjs

@@ -501,12 +501,10 @@ function getHydrationKey() {
   const hydrate = solidJs.sharedConfig.context;
   return `${hydrate.id}${hydrate.count++}`;
 }
-function Assets() {
-  return;
-}
 function NoHydration(props) {
   return solidJs.sharedConfig.context ? undefined : props.children;
 }
+function voidFn() {}
 
 function throwInBrowser(func) {
   const err = new Error(`${func.name} is not supported in the browser, returning undefined`);
@@ -529,7 +527,7 @@ function ssrAttribute(key, value) {}
 function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
-function generateHydrationScript() {}
+function ssrSpread(props, isSVG, skipChildren) {}
 
 const isServer = false;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
@@ -643,12 +641,12 @@ Object.defineProperty(exports, 'mergeProps', {
   get: function () { return solidJs.mergeProps; }
 });
 exports.Aliases = Aliases;
-exports.Assets = Assets;
+exports.Assets = voidFn;
 exports.ChildProperties = ChildProperties;
 exports.DOMElements = DOMElements;
 exports.DelegatedEvents = DelegatedEvents;
 exports.Dynamic = Dynamic;
-exports.HydrationScript = Assets;
+exports.HydrationScript = voidFn;
 exports.NoHydration = NoHydration;
 exports.Portal = Portal;
 exports.PropAliases = PropAliases;
@@ -663,7 +661,8 @@ exports.clearDelegatedEvents = clearDelegatedEvents;
 exports.delegateEvents = delegateEvents;
 exports.dynamicProperty = dynamicProperty;
 exports.escape = escape;
-exports.generateHydrationScript = generateHydrationScript;
+exports.generateHydrationScript = voidFn;
+exports.getAssets = voidFn;
 exports.getHydrationKey = getHydrationKey;
 exports.getNextElement = getNextElement;
 exports.getNextMarker = getNextMarker;
@@ -687,7 +686,9 @@ exports.ssrAttribute = ssrAttribute;
 exports.ssrClassList = ssrClassList;
 exports.ssrElement = ssrElement;
 exports.ssrHydrationKey = ssrHydrationKey;
+exports.ssrSpread = ssrSpread;
 exports.ssrStyle = ssrStyle;
 exports.style = style;
 exports.template = template;
 exports.use = use;
+exports.useAssets = voidFn;

package/web/dist/web.js

@@ -498,12 +498,10 @@ function getHydrationKey() {
   const hydrate = sharedConfig.context;
   return `${hydrate.id}${hydrate.count++}`;
 }
-function Assets() {
-  return;
-}
 function NoHydration(props) {
   return sharedConfig.context ? undefined : props.children;
 }
+function voidFn() {}
 
 function throwInBrowser(func) {
   const err = new Error(`${func.name} is not supported in the browser, returning undefined`);
@@ -526,7 +524,7 @@ function ssrAttribute(key, value) {}
 function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
-function generateHydrationScript() {}
+function ssrSpread(props, isSVG, skipChildren) {}
 
 const isServer = false;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
@@ -591,4 +589,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, ssrElement, ssrHydrationKey, ssrStyle, style, template, use };
+export { Aliases, voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, 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, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, style, template, use, voidFn as useAssets };

package/web/types/client.d.ts

@@ -62,6 +62,9 @@ export function getHydrationKey(): string;
 export function getNextElement(template?: HTMLTemplateElement): Element;
 export function getNextMatch(start: Node, elementName: string): Element;
 export function getNextMarker(start: Node): [Node, Array<Node>];
+export function useAsset(fn: () => string): void;
+export function getAssets(): string;
 export function Assets(props: { children?: JSX.Element }): JSX.Element;
 export function HydrationScript(): JSX.Element;
 export function NoHydration(props: { children?: JSX.Element }): JSX.Element;
+export function getHydrationScript(): string;

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

@@ -38,7 +38,10 @@ 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;
+/**
+ * @deprecated Replaced by ssrElement
+ */
+export declare function ssrSpread(props: any, isSVG: boolean, skipChildren: boolean): void;
 export declare type LegacyResults = {
     startWriting: () => void;
 };

package/web/types/server.d.ts

@@ -37,6 +37,8 @@ export function ssrAttribute(key: string, value: any, isBoolean: boolean): strin
 export function ssrHydrationKey(): string;
 export function resolveSSRNode(node: any): string;
 export function escape(html: string): string;
+export function useAsset(fn: () => string): void;
+export function getAssets(): string;
 export function getHydrationKey(): string;
 export function effect<T>(fn: (prev?: T) => T, init?: T): void;
 export function memo<T>(fn: () => T, equal: boolean): () => T;