solid-js 1.3.16 → 1.4.0-beta.1

package/types/server/reactive.d.ts

@@ -42,7 +42,7 @@ 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;
-export declare function runWithOwner(o: Owner, fn: () => any): any;
+export declare function runWithOwner<T>(o: Owner, fn: () => T): T;
 export declare function lookup(owner: Owner | null, key: symbol | string): any;
 export interface Task {
     id: number;

package/types/server/rendering.d.ts

@@ -1,18 +1,26 @@
 import { Setter } from "./reactive";
 import type { JSX } from "../jsx";
-declare type PropsWithChildren<P> = P & {
+export declare type Component<P = {}> = (props: P) => JSX.Element;
+export declare type VoidProps<P = {}> = P & {
+    children?: never;
+};
+export declare type VoidComponent<P = {}> = Component<VoidProps<P>>;
+export declare type ParentProps<P = {}> = P & {
     children?: JSX.Element;
 };
-export declare type Component<P = {}> = (props: PropsWithChildren<P>) => JSX.Element;
-declare type PossiblyWrapped<T> = {
-    [P in keyof T]: T[P] | (() => T[P]);
+export declare type ParentComponent<P = {}> = Component<ParentProps<P>>;
+export declare type FlowProps<P = {}, C = JSX.Element> = P & {
+    children: C;
 };
+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] : {};
 declare type SharedConfig = {
     context?: HydrationContext;
 };
 export declare const sharedConfig: SharedConfig;
 export declare function createUniqueId(): string;
-export declare function createComponent<T>(Comp: (props: T) => JSX.Element, props: PossiblyWrapped<T>): JSX.Element;
+export declare function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
 export declare function mergeProps<T, U>(source: T, source1: U): T & U;
 export declare function mergeProps<T, U, V>(source: T, source1: U, source2: V): T & U & V;
 export declare function mergeProps<T, U, V, W>(source: T, source1: U, source2: V, source3: W): T & U & V & W;
@@ -32,16 +40,12 @@ export declare function For<T>(props: {
     each: T[];
     fallback?: string;
     children: (item: T, index: () => number) => string;
-}): string | {
-    t: string;
-};
+}): string | any[] | undefined;
 export declare function Index<T>(props: {
     each: T[];
     fallback?: string;
     children: (item: () => T, index: number) => string;
-}): string | {
-    t: string;
-};
+}): string | any[] | undefined;
 export declare function Show<T>(props: {
     when: T | false;
     fallback?: string;
@@ -65,6 +69,7 @@ export interface Resource<T> {
     (): T | undefined;
     loading: boolean;
     error: any;
+    latest: T | undefined;
 }
 declare type SuspenseContextType = {
     resources: Map<string, {
@@ -87,22 +92,23 @@ export declare type ResourceFetcherInfo<T> = {
 export declare type ResourceOptions<T> = undefined extends T ? {
     initialValue?: T;
     name?: string;
-    globalRefetch?: boolean;
     onHydrated?: <S, T>(k: S, info: ResourceFetcherInfo<T>) => void;
 } : {
     initialValue: T;
     name?: string;
-    globalRefetch?: boolean;
     onHydrated?: <S, T>(k: S, info: ResourceFetcherInfo<T>) => void;
 };
 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 declare function refetchResources(info?: unknown): void;
-export declare function lazy(fn: () => Promise<{
-    default: any;
-}>): (props: any) => string;
+export declare function lazy<T extends Component<any>>(fn: () => Promise<{
+    default: T;
+}>): T & {
+    preload: () => Promise<{
+        default: T;
+    }>;
+};
 export declare function enableScheduling(): void;
 export declare function enableHydration(): void;
 export declare function startTransition(fn: () => any): void;
@@ -126,5 +132,7 @@ export declare function SuspenseList(props: {
 export declare function Suspense(props: {
     fallback?: string;
     children: string;
-}): any;
+}): string | number | boolean | Node | JSX.ArrayElement | JSX.FunctionElement | {
+    t: string;
+} | null | undefined;
 export {};

package/web/dist/dev.cjs

@@ -136,6 +136,9 @@ function setAttribute(node, name, value) {
 function setAttributeNS(node, namespace, name, value) {
   if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
 }
+function className(node, value) {
+  if (value == null) node.removeAttribute("class");else node.className = value;
+}
 function addEventListener(node, name, handler, delegate) {
   if (delegate) {
     if (Array.isArray(handler)) {
@@ -316,7 +319,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     addEventListener(node, name, value, delegate);
     delegate && delegateEvents([name]);
   } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-    if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
@@ -639,6 +642,7 @@ exports.SVGNamespace = SVGNamespace;
 exports.addEventListener = addEventListener;
 exports.assign = assign;
 exports.classList = classList;
+exports.className = className;
 exports.clearDelegatedEvents = clearDelegatedEvents;
 exports.delegateEvents = delegateEvents;
 exports.dynamicProperty = dynamicProperty;

package/web/dist/dev.js

@@ -133,6 +133,9 @@ function setAttribute(node, name, value) {
 function setAttributeNS(node, namespace, name, value) {
   if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
 }
+function className(node, value) {
+  if (value == null) node.removeAttribute("class");else node.className = value;
+}
 function addEventListener(node, name, handler, delegate) {
   if (delegate) {
     if (Array.isArray(handler)) {
@@ -313,7 +316,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     addEventListener(node, name, value, delegate);
     delegate && delegateEvents([name]);
   } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-    if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
@@ -572,4 +575,4 @@ function Dynamic(props) {
   });
 }
 
-export { Aliases, Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrBoolean, 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, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };

package/web/dist/server.cjs

@@ -496,9 +496,10 @@ function ssrStyle(value) {
   return result;
 }
 function ssrSpread(props, isSVG, skipChildren) {
+  let result = "";
+  if (props == null) return results;
   if (typeof props === "function") props = props();
   const keys = Object.keys(props);
-  let result = "";
   let classResolved;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
@@ -516,7 +517,7 @@ function ssrSpread(props, isSVG, skipChildren) {
       classResolved = true;
     } else if (BooleanAttributes.has(prop)) {
       if (value) result += prop;else continue;
-    } else if (prop === "ref" || prop.slice(0, 2) === "on") {
+    } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on") {
       continue;
     } else {
       result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
@@ -525,8 +526,8 @@ function ssrSpread(props, isSVG, skipChildren) {
   }
   return result;
 }
-function ssrBoolean(key, value) {
-  return value ? " " + key : "";
+function ssrAttribute(key, value, isBoolean) {
+  return isBoolean ? value ? " " + key : "" : value != null ? ` ${key}="${value}"` : "";
 }
 function ssrHydrationKey() {
   const hk = getHydrationKey();
@@ -578,7 +579,11 @@ function resolveSSRNode(node) {
   const t = typeof node;
   if (t === "string") return node;
   if (node == null || t === "boolean") return "";
-  if (Array.isArray(node)) return node.map(resolveSSRNode).join("");
+  if (Array.isArray(node)) {
+    let mapped = "";
+    for (let i = 0, len = node.length; i < len; i++) mapped += resolveSSRNode(node[i]);
+    return mapped;
+  }
   if (t === "object") return resolveSSRNode(node.t);
   if (t === "function") return resolveSSRNode(node());
   return String(node);
@@ -744,7 +749,7 @@ exports.renderToStringAsync = renderToStringAsync;
 exports.resolveSSRNode = resolveSSRNode;
 exports.spread = spread;
 exports.ssr = ssr;
-exports.ssrBoolean = ssrBoolean;
+exports.ssrAttribute = ssrAttribute;
 exports.ssrClassList = ssrClassList;
 exports.ssrHydrationKey = ssrHydrationKey;
 exports.ssrSpread = ssrSpread;

package/web/dist/server.js

@@ -493,9 +493,10 @@ function ssrStyle(value) {
   return result;
 }
 function ssrSpread(props, isSVG, skipChildren) {
+  let result = "";
+  if (props == null) return results;
   if (typeof props === "function") props = props();
   const keys = Object.keys(props);
-  let result = "";
   let classResolved;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
@@ -513,7 +514,7 @@ function ssrSpread(props, isSVG, skipChildren) {
       classResolved = true;
     } else if (BooleanAttributes.has(prop)) {
       if (value) result += prop;else continue;
-    } else if (prop === "ref" || prop.slice(0, 2) === "on") {
+    } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on") {
       continue;
     } else {
       result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
@@ -522,8 +523,8 @@ function ssrSpread(props, isSVG, skipChildren) {
   }
   return result;
 }
-function ssrBoolean(key, value) {
-  return value ? " " + key : "";
+function ssrAttribute(key, value, isBoolean) {
+  return isBoolean ? value ? " " + key : "" : value != null ? ` ${key}="${value}"` : "";
 }
 function ssrHydrationKey() {
   const hk = getHydrationKey();
@@ -575,7 +576,11 @@ function resolveSSRNode(node) {
   const t = typeof node;
   if (t === "string") return node;
   if (node == null || t === "boolean") return "";
-  if (Array.isArray(node)) return node.map(resolveSSRNode).join("");
+  if (Array.isArray(node)) {
+    let mapped = "";
+    for (let i = 0, len = node.length; i < len; i++) mapped += resolveSSRNode(node[i]);
+    return mapped;
+  }
   if (t === "object") return resolveSSRNode(node.t);
   if (t === "function") return resolveSSRNode(node());
   return String(node);
@@ -684,4 +689,4 @@ function Portal(props) {
   return "";
 }
 
-export { Assets, Dynamic, HydrationScript, NoHydration, Portal, escape, generateHydrationScript, getHydrationKey, isServer, pipeToNodeWritable, pipeToWritable, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle };
+export { Assets, Dynamic, HydrationScript, NoHydration, Portal, escape, generateHydrationScript, getHydrationKey, isServer, pipeToNodeWritable, pipeToWritable, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle };

package/web/dist/web.cjs

@@ -135,6 +135,9 @@ function setAttribute(node, name, value) {
 function setAttributeNS(node, namespace, name, value) {
   if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
 }
+function className(node, value) {
+  if (value == null) node.removeAttribute("class");else node.className = value;
+}
 function addEventListener(node, name, handler, delegate) {
   if (delegate) {
     if (Array.isArray(handler)) {
@@ -315,7 +318,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     addEventListener(node, name, value, delegate);
     delegate && delegateEvents([name]);
   } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-    if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
@@ -635,6 +638,7 @@ exports.SVGNamespace = SVGNamespace;
 exports.addEventListener = addEventListener;
 exports.assign = assign;
 exports.classList = classList;
+exports.className = className;
 exports.clearDelegatedEvents = clearDelegatedEvents;
 exports.delegateEvents = delegateEvents;
 exports.dynamicProperty = dynamicProperty;

package/web/dist/web.js

@@ -132,6 +132,9 @@ function setAttribute(node, name, value) {
 function setAttributeNS(node, namespace, name, value) {
   if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
 }
+function className(node, value) {
+  if (value == null) node.removeAttribute("class");else node.className = value;
+}
 function addEventListener(node, name, handler, delegate) {
   if (delegate) {
     if (Array.isArray(handler)) {
@@ -312,7 +315,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     addEventListener(node, name, value, delegate);
     delegate && delegateEvents([name]);
   } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-    if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
@@ -568,4 +571,4 @@ function Dynamic(props) {
   });
 }
 
-export { Aliases, Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrBoolean, 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, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };

package/web/types/client.d.ts

@@ -31,6 +31,7 @@ export function spread<T>(
 export function assign(node: Element, props: any, isSVG?: Boolean, skipChildren?: Boolean): void;
 export function setAttribute(node: Element, name: string, value: string): void;
 export function setAttributeNS(node: Element, namespace: string, name: string, value: string): void;
+export function className(node: Element, value: string): void;
 export function innerHTML(node: Element, content: string): void;
 export function addEventListener(
   node: Element,