solid-js 1.5.3 → 1.5.5

package/dist/dev.cjs

@@ -338,7 +338,7 @@ function createResource(pSource, pFetcher, pOptions) {
       value: value(),
       refetching
     }));
-    if (typeof p !== "object" || !("then" in p)) {
+    if (typeof p !== "object" || !(p && "then" in p)) {
       loadEnd(pr, p);
       return p;
     }
@@ -522,6 +522,7 @@ function devComponent(Comp, props) {
     });
     return Comp(props);
   }), undefined, true);
+  c.props = props;
   c.observers = null;
   c.observerSlots = null;
   c.state = 0;

package/dist/dev.js

@@ -334,7 +334,7 @@ function createResource(pSource, pFetcher, pOptions) {
       value: value(),
       refetching
     }));
-    if (typeof p !== "object" || !("then" in p)) {
+    if (typeof p !== "object" || !(p && "then" in p)) {
       loadEnd(pr, p);
       return p;
     }
@@ -518,6 +518,7 @@ function devComponent(Comp, props) {
     });
     return Comp(props);
   }), undefined, true);
+  c.props = props;
   c.observers = null;
   c.observerSlots = null;
   c.state = 0;

package/dist/server.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const equalFn = (a, b) => a === b;
 const $PROXY = Symbol("solid-proxy");
+const $TRACK = Symbol("solid-track");
 const $DEVCOMP = Symbol("solid-dev-component");
 const DEV = {};
 const ERROR = Symbol("error");
@@ -604,6 +605,7 @@ function Suspense(props) {
 
 exports.$DEVCOMP = $DEVCOMP;
 exports.$PROXY = $PROXY;
+exports.$TRACK = $TRACK;
 exports.DEV = DEV;
 exports.ErrorBoundary = ErrorBoundary;
 exports.For = For;

package/dist/server.js

@@ -1,5 +1,6 @@
 const equalFn = (a, b) => a === b;
 const $PROXY = Symbol("solid-proxy");
+const $TRACK = Symbol("solid-track");
 const $DEVCOMP = Symbol("solid-dev-component");
 const DEV = {};
 const ERROR = Symbol("error");
@@ -598,4 +599,4 @@ function Suspense(props) {
   return props.fallback;
 }
 
-export { $DEVCOMP, $PROXY, DEV, ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, batch, children, createComponent, createComputed, createContext, createDeferred, createEffect, createMemo, createReaction, createRenderEffect, createResource, createRoot, createSelector, createSignal, createUniqueId, enableExternalSource, enableHydration, enableScheduling, equalFn, from, getListener, getOwner, lazy, mapArray, mergeProps, observable, on, onCleanup, onError, onMount, requestCallback, resetErrorBoundaries, runWithOwner, sharedConfig, splitProps, startTransition, untrack, useContext, useTransition };
+export { $DEVCOMP, $PROXY, $TRACK, DEV, ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, batch, children, createComponent, createComputed, createContext, createDeferred, createEffect, createMemo, createReaction, createRenderEffect, createResource, createRoot, createSelector, createSignal, createUniqueId, enableExternalSource, enableHydration, enableScheduling, equalFn, from, getListener, getOwner, lazy, mapArray, mergeProps, observable, on, onCleanup, onError, onMount, requestCallback, resetErrorBoundaries, runWithOwner, sharedConfig, splitProps, startTransition, untrack, useContext, useTransition };

package/dist/solid.cjs

@@ -330,7 +330,7 @@ function createResource(pSource, pFetcher, pOptions) {
       value: value(),
       refetching
     }));
-    if (typeof p !== "object" || !("then" in p)) {
+    if (typeof p !== "object" || !(p && "then" in p)) {
       loadEnd(pr, p);
       return p;
     }

package/dist/solid.js

@@ -326,7 +326,7 @@ function createResource(pSource, pFetcher, pOptions) {
       value: value(),
       refetching
     }));
-    if (typeof p !== "object" || !("then" in p)) {
+    if (typeof p !== "object" || !(p && "then" in p)) {
       loadEnd(pr, p);
       return p;
     }

package/html/dist/html.cjs

@@ -420,7 +420,7 @@ function createHTML(r, {
       options.first = false;
       processChildren(node, options);
       if (topDecl) {
-        options.decl[0] = options.hasCustomElement ? `const ${tag} = document.importNode(tmpls[${templateId}].content.firstChild, true)` : `const ${tag} = tmpls[${templateId}].content.firstChild.cloneNode(true)`;
+        options.decl[0] = options.hasCustomElement ? `const ${tag} = r.untrack(() => document.importNode(tmpls[${templateId}].content.firstChild, true))` : `const ${tag} = tmpls[${templateId}].content.firstChild.cloneNode(true)`;
       }
     } else if (node.type === "text") {
       const tag = `_$el${uuid++}`;
@@ -479,6 +479,7 @@ var index = createHTML({
   effect: web.effect,
   style: web.style,
   insert: web.insert,
+  untrack: web.untrack,
   spread: web.spread,
   createComponent: web.createComponent,
   delegateEvents: web.delegateEvents,

package/html/dist/html.js

@@ -1,4 +1,4 @@
-import { effect, style, insert, spread, createComponent, delegateEvents, classList, mergeProps, dynamicProperty, setAttribute, setAttributeNS, addEventListener, Aliases, PropAliases, Properties, ChildProperties, DelegatedEvents, SVGElements, SVGNamespace } from 'solid-js/web';
+import { effect, style, insert, untrack, spread, createComponent, delegateEvents, classList, mergeProps, dynamicProperty, setAttribute, setAttributeNS, addEventListener, Aliases, PropAliases, Properties, ChildProperties, DelegatedEvents, SVGElements, SVGNamespace } from 'solid-js/web';
 
 const tagRE = /(?:<!--[\S\s]*?-->|<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>)/g;
 const attrRE = /(?:\s(?<boolean>[^/\s><=]+?)(?=[\s/>]))|(?:(?<name>\S+?)(?:\s*=\s*(?:(['"])(?<quotedValue>[\s\S]*?)\3|(?<unquotedValue>[^\s>]+))))/g;
@@ -418,7 +418,7 @@ function createHTML(r, {
       options.first = false;
       processChildren(node, options);
       if (topDecl) {
-        options.decl[0] = options.hasCustomElement ? `const ${tag} = document.importNode(tmpls[${templateId}].content.firstChild, true)` : `const ${tag} = tmpls[${templateId}].content.firstChild.cloneNode(true)`;
+        options.decl[0] = options.hasCustomElement ? `const ${tag} = r.untrack(() => document.importNode(tmpls[${templateId}].content.firstChild, true))` : `const ${tag} = tmpls[${templateId}].content.firstChild.cloneNode(true)`;
       }
     } else if (node.type === "text") {
       const tag = `_$el${uuid++}`;
@@ -477,6 +477,7 @@ var index = createHTML({
   effect,
   style,
   insert,
+  untrack,
   spread,
   createComponent,
   delegateEvents,

package/html/types/lit.d.ts

@@ -1,6 +1,7 @@
 declare type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
 interface Runtime {
     effect<T>(fn: (prev?: T) => T, init?: T): any;
+    untrack<T>(fn: () => T): T;
     insert(parent: MountableElement, accessor: any, marker?: Node | null, init?: any): any;
     spread<T>(node: Element, accessor: (() => T) | T, isSVG?: Boolean, skipChildren?: Boolean): void;
     createComponent(Comp: (props: any) => any, props: any): any;

package/package.json

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

package/types/reactive/observable.d.ts

@@ -25,8 +25,8 @@ export declare function observable<T>(input: Accessor<T>): {
     };
     [Symbol.observable](): any;
 };
-export declare function from<T>(producer: ((setter: Setter<T>) => () => void) | {
+export declare function from<T>(producer: ((setter: Setter<T | undefined>) => () => void) | {
     subscribe: (fn: (v: T) => void) => (() => void) | {
         unsubscribe: () => void;
     };
-}): Accessor<T>;
+}): Accessor<T | undefined>;

package/types/reactive/signal.d.ts

@@ -256,10 +256,7 @@ export declare type ResourceOptions<T, S = unknown> = {
 export declare type InitializedResourceOptions<T, S = unknown> = ResourceOptions<T, S> & {
     initialValue: T;
 };
-export declare type ResourceReturn<T, R = unknown> = [
-    Resource<T>,
-    ResourceActions<T | undefined, R>
-];
+export declare type ResourceReturn<T, R = unknown> = [Resource<T>, ResourceActions<T | undefined, R>];
 export declare type InitializedResourceReturn<T, R = unknown> = [
     InitializedResource<T>,
     ResourceActions<T, R>
@@ -447,6 +444,10 @@ export declare type Transition = [Accessor<boolean>, (fn: () => void) => Promise
  */
 export declare function useTransition(): Transition;
 export declare function resumeEffects(e: Computation<any>[]): void;
+export interface DevComponent<T> extends Memo<JSX.Element> {
+    props: T;
+    componentName: string;
+}
 export declare function devComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
 export declare function hashValue(v: any): string;
 export declare function registerGraph(name: string, value: {

package/types/server/index.d.ts

@@ -1,3 +1,3 @@
-export { createRoot, createSignal, createComputed, createRenderEffect, createEffect, createReaction, createDeferred, createSelector, createMemo, getListener, onMount, onCleanup, onError, untrack, batch, on, children, createContext, useContext, getOwner, runWithOwner, equalFn, requestCallback, mapArray, observable, from, $PROXY, $DEVCOMP, DEV, enableExternalSource } from "./reactive.js";
+export { createRoot, createSignal, createComputed, createRenderEffect, createEffect, createReaction, createDeferred, createSelector, createMemo, getListener, onMount, onCleanup, onError, untrack, batch, on, children, createContext, useContext, getOwner, runWithOwner, equalFn, requestCallback, mapArray, observable, from, $PROXY, $DEVCOMP, $TRACK, DEV, enableExternalSource } from "./reactive.js";
 export { mergeProps, splitProps, createComponent, For, Index, Show, Switch, Match, ErrorBoundary, Suspense, SuspenseList, createResource, resetErrorBoundaries, enableScheduling, enableHydration, startTransition, useTransition, createUniqueId, lazy, sharedConfig } from "./rendering.js";
 export type { Component, Resource } from "./rendering.js";

package/types/server/reactive.d.ts

@@ -1,5 +1,6 @@
 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 DEV: {};
 export declare type Accessor<T> = () => T;

package/web/dist/dev.cjs

@@ -373,10 +373,10 @@ function eventHandler(e) {
 }
 function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
   props || (props = {});
-  if (!skipChildren && "children" in props) {
+  if (!skipChildren) {
     solidJs.createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
   }
-  props.ref && props.ref(node);
+  solidJs.createRenderEffect(() => props.ref && props.ref(node));
   solidJs.createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
@@ -646,6 +646,10 @@ Object.defineProperty(exports, 'mergeProps', {
   enumerable: true,
   get: function () { return solidJs.mergeProps; }
 });
+Object.defineProperty(exports, 'untrack', {
+  enumerable: true,
+  get: function () { return solidJs.untrack; }
+});
 exports.Aliases = Aliases;
 exports.Assets = voidFn;
 exports.ChildProperties = ChildProperties;

package/web/dist/dev.js

@@ -1,5 +1,5 @@
 import { createMemo, createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, createSignal, onCleanup, splitProps, $DEVCOMP } from 'solid-js';
-export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, createRenderEffect as effect, getOwner, mergeProps } from 'solid-js';
+export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, createRenderEffect as effect, getOwner, 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"];
 const Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
@@ -370,10 +370,10 @@ function eventHandler(e) {
 }
 function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
   props || (props = {});
-  if (!skipChildren && "children" in props) {
+  if (!skipChildren) {
     createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
   }
-  props.ref && props.ref(node);
+  createRenderEffect(() => props.ref && props.ref(node));
   createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }

package/web/dist/server.cjs

@@ -526,7 +526,7 @@ function ssrStyle(value) {
 }
 function ssrElement(tag, props, children, needsId) {
   let result = `<${tag}${needsId ? ssrHydrationKey() : ""} `;
-  if (typeof props === "function") props = props();
+  if (props == null) props = {};else if (typeof props === "function") props = props();
   const keys = Object.keys(props);
   let classResolved;
   for (let i = 0; i < keys.length; i++) {
@@ -567,6 +567,13 @@ function escape(s, attr) {
   const t = typeof s;
   if (t !== "string") {
     if (!attr && t === "function") return escape(s(), attr);
+    if (!attr && Array.isArray(s)) {
+      let r = "";
+      for (let i = 0; i < s.length; i++) r += resolveSSRNode(escape(s[i], attr));
+      return {
+        t: r
+      };
+    }
     if (attr && t === "boolean") return String(s);
     return s;
   }
@@ -763,7 +770,9 @@ function ssrSpread(props, isSVG, skipChildren) {
 }
 
 const isServer = true;
+function insert() {}
 function spread() {}
+function delegateEvents() {}
 function Dynamic(props) {
   const [p, others] = solidJs.splitProps(props, ["component"]);
   const comp = p.component,
@@ -823,10 +832,12 @@ exports.Dynamic = Dynamic;
 exports.HydrationScript = HydrationScript;
 exports.NoHydration = NoHydration;
 exports.Portal = Portal;
+exports.delegateEvents = delegateEvents;
 exports.escape = escape;
 exports.generateHydrationScript = generateHydrationScript;
 exports.getAssets = getAssets;
 exports.getHydrationKey = getHydrationKey;
+exports.insert = insert;
 exports.isServer = isServer;
 exports.pipeToNodeWritable = pipeToNodeWritable;
 exports.pipeToWritable = pipeToWritable;

package/web/dist/server.js

@@ -523,7 +523,7 @@ function ssrStyle(value) {
 }
 function ssrElement(tag, props, children, needsId) {
   let result = `<${tag}${needsId ? ssrHydrationKey() : ""} `;
-  if (typeof props === "function") props = props();
+  if (props == null) props = {};else if (typeof props === "function") props = props();
   const keys = Object.keys(props);
   let classResolved;
   for (let i = 0; i < keys.length; i++) {
@@ -564,6 +564,13 @@ function escape(s, attr) {
   const t = typeof s;
   if (t !== "string") {
     if (!attr && t === "function") return escape(s(), attr);
+    if (!attr && Array.isArray(s)) {
+      let r = "";
+      for (let i = 0; i < s.length; i++) r += resolveSSRNode(escape(s[i], attr));
+      return {
+        t: r
+      };
+    }
     if (attr && t === "boolean") return String(s);
     return s;
   }
@@ -760,7 +767,9 @@ function ssrSpread(props, isSVG, skipChildren) {
 }
 
 const isServer = true;
+function insert() {}
 function spread() {}
+function delegateEvents() {}
 function Dynamic(props) {
   const [p, others] = splitProps(props, ["component"]);
   const comp = p.component,
@@ -775,4 +784,4 @@ function Portal(props) {
   return "";
 }
 
-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 };
+export { Assets, Dynamic, HydrationScript, NoHydration, Portal, delegateEvents, escape, generateHydrationScript, getAssets, getHydrationKey, insert, isServer, pipeToNodeWritable, pipeToWritable, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, useAssets };

package/web/dist/web.cjs

@@ -370,10 +370,10 @@ function eventHandler(e) {
 }
 function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
   props || (props = {});
-  if (!skipChildren && "children" in props) {
+  if (!skipChildren) {
     solidJs.createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
   }
-  props.ref && props.ref(node);
+  solidJs.createRenderEffect(() => props.ref && props.ref(node));
   solidJs.createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
@@ -640,6 +640,10 @@ Object.defineProperty(exports, 'mergeProps', {
   enumerable: true,
   get: function () { return solidJs.mergeProps; }
 });
+Object.defineProperty(exports, 'untrack', {
+  enumerable: true,
+  get: function () { return solidJs.untrack; }
+});
 exports.Aliases = Aliases;
 exports.Assets = voidFn;
 exports.ChildProperties = ChildProperties;

package/web/dist/web.js

@@ -1,5 +1,5 @@
 import { createMemo, createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, createSignal, onCleanup, splitProps } from 'solid-js';
-export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, createRenderEffect as effect, getOwner, mergeProps } from 'solid-js';
+export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, createRenderEffect as effect, getOwner, 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"];
 const Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
@@ -367,10 +367,10 @@ function eventHandler(e) {
 }
 function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
   props || (props = {});
-  if (!skipChildren && "children" in props) {
+  if (!skipChildren) {
     createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
   }
-  props.ref && props.ref(node);
+  createRenderEffect(() => props.ref && props.ref(node));
   createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }

package/web/types/client.d.ts

@@ -13,6 +13,7 @@ export function render(code: () => JSX.Element, element: MountableElement): () =
 export function template(html: string, count: number, isSVG?: boolean): Element;
 export function effect<T>(fn: (prev?: T) => T, init?: T): void;
 export function memo<T>(fn: () => T, equal: boolean): () => T;
+export function untrack<T>(fn: () => T): T;
 export function insert<T>(
   parent: MountableElement,
   accessor: (() => T) | T,