solid-js 1.4.0-beta.0 → 1.4.0-beta.1

package/dist/dev.cjs

@@ -263,6 +263,7 @@ function createResource(source, fetcher, options) {
       id = null,
       loadedUnderTransition = false,
       scheduled = false,
+      resolved = ("initialValue" in options),
       dynamic = typeof source === "function" && createMemo(source);
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
@@ -271,6 +272,7 @@ function createResource(source, fetcher, options) {
   function loadEnd(p, v, e, key) {
     if (pr === p) {
       pr = null;
+      resolved = true;
       if (initP && p === initP && options.onHydrated) options.onHydrated(key, {
         value: v
       });
@@ -357,6 +359,7 @@ function createResource(source, fetcher, options) {
     },
     latest: {
       get() {
+        if (!resolved) return read();
         if (err) throw err;
         return value();
       }
@@ -1225,6 +1228,7 @@ function enableHydration() {
   hydrationEnabled = true;
 }
 function createComponent(Comp, props) {
+  if (props == null || typeof props !== "object") props = {};
   if (hydrationEnabled) {
     if (sharedConfig.context) {
       const c = sharedConfig.context;
@@ -1265,7 +1269,7 @@ const propTraps = {
   }
 };
 function resolveSource(s) {
-  return typeof s === "function" ? s() : s;
+  return (s = typeof s === "function" ? s() : s) == null || typeof s !== "object" ? {} : s;
 }
 function mergeProps(...sources) {
   return new Proxy({

package/dist/dev.js

@@ -259,6 +259,7 @@ function createResource(source, fetcher, options) {
       id = null,
       loadedUnderTransition = false,
       scheduled = false,
+      resolved = ("initialValue" in options),
       dynamic = typeof source === "function" && createMemo(source);
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
@@ -267,6 +268,7 @@ function createResource(source, fetcher, options) {
   function loadEnd(p, v, e, key) {
     if (pr === p) {
       pr = null;
+      resolved = true;
       if (initP && p === initP && options.onHydrated) options.onHydrated(key, {
         value: v
       });
@@ -353,6 +355,7 @@ function createResource(source, fetcher, options) {
     },
     latest: {
       get() {
+        if (!resolved) return read();
         if (err) throw err;
         return value();
       }
@@ -1221,6 +1224,7 @@ function enableHydration() {
   hydrationEnabled = true;
 }
 function createComponent(Comp, props) {
+  if (props == null || typeof props !== "object") props = {};
   if (hydrationEnabled) {
     if (sharedConfig.context) {
       const c = sharedConfig.context;
@@ -1261,7 +1265,7 @@ const propTraps = {
   }
 };
 function resolveSource(s) {
-  return typeof s === "function" ? s() : s;
+  return (s = typeof s === "function" ? s() : s) == null || typeof s !== "object" ? {} : s;
 }
 function mergeProps(...sources) {
   return new Proxy({

package/dist/server.cjs

@@ -246,6 +246,7 @@ function createUniqueId() {
   return `${ctx.id}${ctx.count++}`;
 }
 function createComponent(Comp, props) {
+  if (props == null || typeof props !== "object") props = {};
   if (sharedConfig.context && !sharedConfig.context.noHydrate) {
     const c = sharedConfig.context;
     setHydrateContext(nextHydrateContext());
@@ -372,6 +373,11 @@ function createResource(source, fetcher, options = {}) {
   };
   read.loading = false;
   read.error = undefined;
+  Object.defineProperty(read, "latest", {
+    get() {
+      return read();
+    }
+  });
   function load() {
     const ctx = sharedConfig.context;
     if (!ctx.async) return read.loading = !!(typeof source === "function" ? source() : source);

package/dist/server.js

@@ -242,6 +242,7 @@ function createUniqueId() {
   return `${ctx.id}${ctx.count++}`;
 }
 function createComponent(Comp, props) {
+  if (props == null || typeof props !== "object") props = {};
   if (sharedConfig.context && !sharedConfig.context.noHydrate) {
     const c = sharedConfig.context;
     setHydrateContext(nextHydrateContext());
@@ -368,6 +369,11 @@ function createResource(source, fetcher, options = {}) {
   };
   read.loading = false;
   read.error = undefined;
+  Object.defineProperty(read, "latest", {
+    get() {
+      return read();
+    }
+  });
   function load() {
     const ctx = sharedConfig.context;
     if (!ctx.async) return read.loading = !!(typeof source === "function" ? source() : source);

package/dist/solid.cjs

@@ -260,6 +260,7 @@ function createResource(source, fetcher, options) {
       id = null,
       loadedUnderTransition = false,
       scheduled = false,
+      resolved = ("initialValue" in options),
       dynamic = typeof source === "function" && createMemo(source);
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
@@ -268,6 +269,7 @@ function createResource(source, fetcher, options) {
   function loadEnd(p, v, e, key) {
     if (pr === p) {
       pr = null;
+      resolved = true;
       if (initP && p === initP && options.onHydrated) options.onHydrated(key, {
         value: v
       });
@@ -354,6 +356,7 @@ function createResource(source, fetcher, options) {
     },
     latest: {
       get() {
+        if (!resolved) return read();
         if (err) throw err;
         return value();
       }
@@ -1144,6 +1147,7 @@ function enableHydration() {
   hydrationEnabled = true;
 }
 function createComponent(Comp, props) {
+  if (props == null || typeof props !== "object") props = {};
   if (hydrationEnabled) {
     if (sharedConfig.context) {
       const c = sharedConfig.context;
@@ -1184,7 +1188,7 @@ const propTraps = {
   }
 };
 function resolveSource(s) {
-  return typeof s === "function" ? s() : s;
+  return (s = typeof s === "function" ? s() : s) == null || typeof s !== "object" ? {} : s;
 }
 function mergeProps(...sources) {
   return new Proxy({

package/dist/solid.js

@@ -256,6 +256,7 @@ function createResource(source, fetcher, options) {
       id = null,
       loadedUnderTransition = false,
       scheduled = false,
+      resolved = ("initialValue" in options),
       dynamic = typeof source === "function" && createMemo(source);
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
@@ -264,6 +265,7 @@ function createResource(source, fetcher, options) {
   function loadEnd(p, v, e, key) {
     if (pr === p) {
       pr = null;
+      resolved = true;
       if (initP && p === initP && options.onHydrated) options.onHydrated(key, {
         value: v
       });
@@ -350,6 +352,7 @@ function createResource(source, fetcher, options) {
     },
     latest: {
       get() {
+        if (!resolved) return read();
         if (err) throw err;
         return value();
       }
@@ -1140,6 +1143,7 @@ function enableHydration() {
   hydrationEnabled = true;
 }
 function createComponent(Comp, props) {
+  if (props == null || typeof props !== "object") props = {};
   if (hydrationEnabled) {
     if (sharedConfig.context) {
       const c = sharedConfig.context;
@@ -1180,7 +1184,7 @@ const propTraps = {
   }
 };
 function resolveSource(s) {
-  return typeof s === "function" ? s() : s;
+  return (s = typeof s === "function" ? s() : s) == null || typeof s !== "object" ? {} : s;
 }
 function mergeProps(...sources) {
   return new Proxy({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.4.0-beta.0",
+  "version": "1.4.0-beta.1",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -144,5 +144,5 @@
     "compiler",
     "performance"
   ],
-  "gitHead": "c47bee46d775574c4eebd94ea207f4e679f08d60"
+  "gitHead": "34628200f7c8e0a329905688a455848096a3e429"
 }

package/store/dist/dev.cjs

@@ -134,6 +134,9 @@ function mergeStoreNode(state, value) {
   }
 }
 function updateArray(current, next) {
+  if (typeof next === "function") next = next(current);
+  next = unwrap(next);
+  if (current === next) return;
   let i = 0,
       len = next.length;
   for (; i < len; i++) {
@@ -200,7 +203,7 @@ function createStore(store, options) {
   }
   function setStore(...args) {
     solidJs.batch(() => {
-      isArray && args.length === 1 ? updateArray(unwrappedStore, unwrap(args[0])) : updatePath(unwrappedStore, args);
+      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
     });
   }
   return [wrappedStore, setStore];
@@ -216,8 +219,8 @@ const proxyTraps = {
     if (solidJs.getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
       const nodes = getDataNodes(target);
       (nodes[property] || (nodes[property] = createDataNode()))();
-    } else if (value != null && value === Array.prototype[property]) {
-      return (...args) => solidJs.batch(() => Array.prototype[property].apply(target, args));
+    } else if (value != null && typeof value === "function" && value === Array.prototype[property]) {
+      return (...args) => solidJs.batch(() => Array.prototype[property].apply(receiver, args));
     }
     return isWrappable(value) ? wrap(value, target[$NAME] && `${target[$NAME]}:${property.toString()}`) : value;
   },
@@ -274,6 +277,9 @@ function createMutable(state, options) {
   }
   return wrappedStore;
 }
+function modifyMutable(state, modifier) {
+  solidJs.batch(() => modifier(unwrap(state)));
+}
 
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
@@ -378,10 +384,36 @@ function produce(fn) {
     return state;
   };
 }
+function splice(start, deleteCount = 0, ...items) {
+  return state => {
+    if (Array.isArray(state)) {
+      if (start < 0) start = start + state.length;
+      if (deleteCount < 0) deleteCount = 0;
+      const stop = start + deleteCount;
+      if (deleteCount >= items.length) {
+        for (let i = stop; i < state.length; i++) {
+          setProperty(state, start + i - stop, state[i]);
+        }
+      } else {
+        const offset = items.length - deleteCount;
+        for (let i = state.length - 1; i >= stop; i--) {
+          setProperty(state, i + offset, state[i]);
+        }
+      }
+      for (let i = 0; i < items.length; i++) {
+        setProperty(state, start + i, items[i]);
+      }
+      setProperty(state, "length", state.length + items.length - deleteCount);
+    }
+    return state;
+  };
+}
 
 exports.$RAW = $RAW;
 exports.createMutable = createMutable;
 exports.createStore = createStore;
+exports.modifyMutable = modifyMutable;
 exports.produce = produce;
 exports.reconcile = reconcile;
+exports.splice = splice;
 exports.unwrap = unwrap;

package/store/dist/dev.js

@@ -130,6 +130,9 @@ function mergeStoreNode(state, value) {
   }
 }
 function updateArray(current, next) {
+  if (typeof next === "function") next = next(current);
+  next = unwrap(next);
+  if (current === next) return;
   let i = 0,
       len = next.length;
   for (; i < len; i++) {
@@ -196,7 +199,7 @@ function createStore(store, options) {
   }
   function setStore(...args) {
     batch(() => {
-      isArray && args.length === 1 ? updateArray(unwrappedStore, unwrap(args[0])) : updatePath(unwrappedStore, args);
+      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
     });
   }
   return [wrappedStore, setStore];
@@ -212,8 +215,8 @@ const proxyTraps = {
     if (getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
       const nodes = getDataNodes(target);
       (nodes[property] || (nodes[property] = createDataNode()))();
-    } else if (value != null && value === Array.prototype[property]) {
-      return (...args) => batch(() => Array.prototype[property].apply(target, args));
+    } else if (value != null && typeof value === "function" && value === Array.prototype[property]) {
+      return (...args) => batch(() => Array.prototype[property].apply(receiver, args));
     }
     return isWrappable(value) ? wrap(value, target[$NAME] && `${target[$NAME]}:${property.toString()}`) : value;
   },
@@ -270,6 +273,9 @@ function createMutable(state, options) {
   }
   return wrappedStore;
 }
+function modifyMutable(state, modifier) {
+  batch(() => modifier(unwrap(state)));
+}
 
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
@@ -374,5 +380,29 @@ function produce(fn) {
     return state;
   };
 }
+function splice(start, deleteCount = 0, ...items) {
+  return state => {
+    if (Array.isArray(state)) {
+      if (start < 0) start = start + state.length;
+      if (deleteCount < 0) deleteCount = 0;
+      const stop = start + deleteCount;
+      if (deleteCount >= items.length) {
+        for (let i = stop; i < state.length; i++) {
+          setProperty(state, start + i - stop, state[i]);
+        }
+      } else {
+        const offset = items.length - deleteCount;
+        for (let i = state.length - 1; i >= stop; i--) {
+          setProperty(state, i + offset, state[i]);
+        }
+      }
+      for (let i = 0; i < items.length; i++) {
+        setProperty(state, start + i, items[i]);
+      }
+      setProperty(state, "length", state.length + items.length - deleteCount);
+    }
+    return state;
+  };
+}
 
-export { $RAW, createMutable, createStore, produce, reconcile, unwrap };
+export { $RAW, createMutable, createStore, modifyMutable, produce, reconcile, splice, unwrap };

package/store/dist/store.cjs

@@ -129,6 +129,9 @@ function mergeStoreNode(state, value) {
   }
 }
 function updateArray(current, next) {
+  if (typeof next === "function") next = next(current);
+  next = unwrap(next);
+  if (current === next) return;
   let i = 0,
       len = next.length;
   for (; i < len; i++) {
@@ -188,7 +191,7 @@ function createStore(store, options) {
   const wrappedStore = wrap$1(unwrappedStore);
   function setStore(...args) {
     solidJs.batch(() => {
-      isArray && args.length === 1 ? updateArray(unwrappedStore, unwrap(args[0])) : updatePath(unwrappedStore, args);
+      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
     });
   }
   return [wrappedStore, setStore];
@@ -204,8 +207,8 @@ const proxyTraps = {
     if (solidJs.getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
       const nodes = getDataNodes(target);
       (nodes[property] || (nodes[property] = createDataNode()))();
-    } else if (value != null && value === Array.prototype[property]) {
-      return (...args) => solidJs.batch(() => Array.prototype[property].apply(target, args));
+    } else if (value != null && typeof value === "function" && value === Array.prototype[property]) {
+      return (...args) => solidJs.batch(() => Array.prototype[property].apply(receiver, args));
     }
     return isWrappable(value) ? wrap(value) : value;
   },
@@ -252,6 +255,9 @@ function createMutable(state, options) {
   const wrappedStore = wrap(unwrappedStore);
   return wrappedStore;
 }
+function modifyMutable(state, modifier) {
+  solidJs.batch(() => modifier(unwrap(state)));
+}
 
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
@@ -356,10 +362,36 @@ function produce(fn) {
     return state;
   };
 }
+function splice(start, deleteCount = 0, ...items) {
+  return state => {
+    if (Array.isArray(state)) {
+      if (start < 0) start = start + state.length;
+      if (deleteCount < 0) deleteCount = 0;
+      const stop = start + deleteCount;
+      if (deleteCount >= items.length) {
+        for (let i = stop; i < state.length; i++) {
+          setProperty(state, start + i - stop, state[i]);
+        }
+      } else {
+        const offset = items.length - deleteCount;
+        for (let i = state.length - 1; i >= stop; i--) {
+          setProperty(state, i + offset, state[i]);
+        }
+      }
+      for (let i = 0; i < items.length; i++) {
+        setProperty(state, start + i, items[i]);
+      }
+      setProperty(state, "length", state.length + items.length - deleteCount);
+    }
+    return state;
+  };
+}
 
 exports.$RAW = $RAW;
 exports.createMutable = createMutable;
 exports.createStore = createStore;
+exports.modifyMutable = modifyMutable;
 exports.produce = produce;
 exports.reconcile = reconcile;
+exports.splice = splice;
 exports.unwrap = unwrap;

package/store/dist/store.js

@@ -125,6 +125,9 @@ function mergeStoreNode(state, value) {
   }
 }
 function updateArray(current, next) {
+  if (typeof next === "function") next = next(current);
+  next = unwrap(next);
+  if (current === next) return;
   let i = 0,
       len = next.length;
   for (; i < len; i++) {
@@ -184,7 +187,7 @@ function createStore(store, options) {
   const wrappedStore = wrap$1(unwrappedStore);
   function setStore(...args) {
     batch(() => {
-      isArray && args.length === 1 ? updateArray(unwrappedStore, unwrap(args[0])) : updatePath(unwrappedStore, args);
+      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
     });
   }
   return [wrappedStore, setStore];
@@ -200,8 +203,8 @@ const proxyTraps = {
     if (getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
       const nodes = getDataNodes(target);
       (nodes[property] || (nodes[property] = createDataNode()))();
-    } else if (value != null && value === Array.prototype[property]) {
-      return (...args) => batch(() => Array.prototype[property].apply(target, args));
+    } else if (value != null && typeof value === "function" && value === Array.prototype[property]) {
+      return (...args) => batch(() => Array.prototype[property].apply(receiver, args));
     }
     return isWrappable(value) ? wrap(value) : value;
   },
@@ -248,6 +251,9 @@ function createMutable(state, options) {
   const wrappedStore = wrap(unwrappedStore);
   return wrappedStore;
 }
+function modifyMutable(state, modifier) {
+  batch(() => modifier(unwrap(state)));
+}
 
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
@@ -352,5 +358,29 @@ function produce(fn) {
     return state;
   };
 }
+function splice(start, deleteCount = 0, ...items) {
+  return state => {
+    if (Array.isArray(state)) {
+      if (start < 0) start = start + state.length;
+      if (deleteCount < 0) deleteCount = 0;
+      const stop = start + deleteCount;
+      if (deleteCount >= items.length) {
+        for (let i = stop; i < state.length; i++) {
+          setProperty(state, start + i - stop, state[i]);
+        }
+      } else {
+        const offset = items.length - deleteCount;
+        for (let i = state.length - 1; i >= stop; i--) {
+          setProperty(state, i + offset, state[i]);
+        }
+      }
+      for (let i = 0; i < items.length; i++) {
+        setProperty(state, start + i, items[i]);
+      }
+      setProperty(state, "length", state.length + items.length - deleteCount);
+    }
+    return state;
+  };
+}
 
-export { $RAW, createMutable, createStore, produce, reconcile, unwrap };
+export { $RAW, createMutable, createStore, modifyMutable, produce, reconcile, splice, unwrap };

package/store/types/modifiers.d.ts

@@ -5,3 +5,4 @@ export declare type ReconcileOptions = {
 };
 export declare function reconcile<T extends U, U>(value: T, options?: ReconcileOptions): (state: U) => T;
 export declare function produce<T>(fn: (state: DeepMutable<T>) => void): (state: T) => T;
+export declare function splice<T extends U, U>(start: number, deleteCount?: number, ...items: T[]): (state: readonly U[]) => T[];

package/store/types/mutable.d.ts

@@ -2,3 +2,4 @@ import { StoreNode } from "./store";
 export declare function createMutable<T extends StoreNode>(state: T, options?: {
     name?: string;
 }): T;
+export declare function modifyMutable<T extends U, U>(state: T, modifier: (state: U) => T): void;

package/types/reactive/signal.d.ts

@@ -1,5 +1,6 @@
 import { requestCallback } from "./scheduler";
 import type { JSX } from "../jsx";
+import type { FlowComponent } from "../render";
 export declare const equalFn: <T>(a: T, b: T) => boolean;
 export declare const $PROXY: unique symbol;
 export declare const $TRACK: unique symbol;
@@ -123,8 +124,8 @@ export declare type EffectFunction<Prev, Next extends Prev = Prev> = (v: Prev) =
  *
  * @description https://www.solidjs.com/docs/latest/api#createcomputed
  */
+export declare function createComputed<Next>(fn: EffectFunction<undefined | NoInfer<Next>, Next>): void;
 export declare function createComputed<Next, Init = Next>(fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions): void;
-export declare function createComputed<Next, Init = undefined>(..._: undefined extends Init ? [fn: EffectFunction<Init | Next, Next>, value?: Init, options?: EffectOptions] : [fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions]): void;
 /**
  * Creates a reactive computation that runs during the render phase as DOM elements are created and updated but not necessarily connected
  * ```typescript
@@ -140,8 +141,8 @@ export declare function createComputed<Next, Init = undefined>(..._: undefined e
  *
  * @description https://www.solidjs.com/docs/latest/api#createrendereffect
  */
+export declare function createRenderEffect<Next>(fn: EffectFunction<undefined | NoInfer<Next>, Next>): void;
 export declare function createRenderEffect<Next, Init = Next>(fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions): void;
-export declare function createRenderEffect<Next, Init = undefined>(..._: undefined extends Init ? [fn: EffectFunction<Init | Next, Next>, value?: Init, options?: EffectOptions] : [fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions]): void;
 /**
  * Creates a reactive computation that runs after the render phase
  * ```typescript
@@ -157,8 +158,8 @@ export declare function createRenderEffect<Next, Init = undefined>(..._: undefin
  *
  * @description https://www.solidjs.com/docs/latest/api#createeffect
  */
+export declare function createEffect<Next>(fn: EffectFunction<undefined | NoInfer<Next>, Next>): void;
 export declare function createEffect<Next, Init = Next>(fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions): void;
-export declare function createEffect<Next, Init = undefined>(..._: undefined extends Init ? [fn: EffectFunction<Init | Next, Next>, value?: Init, options?: EffectOptions] : [fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions]): void;
 /**
  * Creates a reactive computation that runs after the render phase with flexible tracking
  * ```typescript
@@ -194,8 +195,8 @@ export interface MemoOptions<T> extends EffectOptions {
  *
  * @description https://www.solidjs.com/docs/latest/api#creatememo
  */
-export declare function createMemo<Next extends _Next, Init = Next, _Next = Next>(fn: EffectFunction<Init | _Next, Next>, value: Init, options?: MemoOptions<Next>): Accessor<Next>;
-export declare function createMemo<Next extends _Next, Init = undefined, _Next = Next>(..._: undefined extends Init ? [fn: EffectFunction<Init | _Next, Next>, value?: Init, options?: MemoOptions<Next>] : [fn: EffectFunction<Init | _Next, Next>, value: Init, options?: MemoOptions<Next>]): Accessor<Next>;
+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;
@@ -401,10 +402,9 @@ interface GraphRecord {
     [k: string]: GraphRecord | unknown;
 }
 export declare function serializeGraph(owner?: Owner | null): GraphRecord;
-export declare type ContextProviderComponent<T> = (props: {
+export declare type ContextProviderComponent<T> = FlowComponent<{
     value: T;
-    children: any;
-}) => any;
+}>;
 export interface Context<T> {
     id: symbol;
     Provider: ContextProviderComponent<T>;
@@ -415,7 +415,7 @@ export interface Context<T> {
  * ```typescript
  * interface Context<T> {
  *   id: symbol;
- *   Provider: (props: { value: T; children: any }) => any;
+ *   Provider: FlowComponent<{ value: T }>;
  *   defaultValue: T;
  * }
  * export function createContext<T>(defaultValue?: T): Context<T | undefined>;

package/types/render/component.d.ts

@@ -1,9 +1,56 @@
 import type { JSX } from "../jsx";
 export declare function enableHydration(): void;
-export declare type PropsWithChildren<P = {}> = P & {
+/**
+ * A general `Component` has no implicit `children` prop.  If desired, you can
+ * specify one as in `Component<{name: String, children: JSX.Element>}`.
+ */
+export declare type Component<P = {}> = (props: P) => JSX.Element;
+/**
+ * Extend props to forbid the `children` prop.
+ * Use this to prevent accidentally passing `children` to components that
+ * would silently throw them away.
+ */
+export declare type VoidProps<P = {}> = P & {
+    children?: never;
+};
+/**
+ * `VoidComponent` forbids the `children` prop.
+ * Use this to prevent accidentally passing `children` to components that
+ * would silently throw them away.
+ */
+export declare type VoidComponent<P = {}> = Component<VoidProps<P>>;
+/**
+ * Extend props to allow an optional `children` prop with the usual
+ * type in JSX, `JSX.Element` (which allows elements, arrays, functions, etc.).
+ * Use this for components that you want to accept children.
+ */
+export declare type ParentProps<P = {}> = P & {
     children?: JSX.Element;
 };
-export declare type Component<P = {}> = (props: PropsWithChildren<P>) => JSX.Element;
+/**
+ * `ParentComponent` allows an optional `children` prop with the usual
+ * type in JSX, `JSX.Element` (which allows elements, arrays, functions, etc.).
+ * Use this for components that you want to accept children.
+ */
+export declare type ParentComponent<P = {}> = Component<ParentProps<P>>;
+/**
+ * Extend props to require a `children` prop with the specified type.
+ * Use this for components where you need a specific child type,
+ * typically a function that receives specific argument types.
+ * Note that all JSX <Elements> are of the type `JSX.Element`.
+ */
+export declare type FlowProps<P = {}, C = JSX.Element> = P & {
+    children: C;
+};
+/**
+ * `FlowComponent` requires a `children` prop with the specified type.
+ * Use this for components where you need a specific child type,
+ * typically a function that receives specific argument types.
+ * Note that all JSX <Elements> are of the type `JSX.Element`.
+ */
+export declare type FlowComponent<P = {}, C = JSX.Element> = Component<FlowProps<P, C>>;
+/** @deprecated: use `ParentProps` instead */
+export declare type PropsWithChildren<P = {}> = ParentProps<P>;
 /**
  * Takes the props of the passed component and returns its type
  *
@@ -12,7 +59,13 @@ export declare type Component<P = {}> = (props: PropsWithChildren<P>) => JSX.Ele
  * 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 function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
+/**
+ * Type of `props.ref`, for use in `Component` or `props` typing.
+ *
+ * @example Component<{ref: Ref<Element>}>
+ */
+export declare type Ref<T> = T | ((val: T) => void);
+export declare function createComponent<T>(Comp: Component<T>, props: T): JSX.Element;
 declare type UnboxLazy<T> = T extends () => infer U ? U : T;
 declare type BoxedTupleTypes<T extends any[]> = {
     [P in keyof T]: [UnboxLazy<T[P]>];

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;
@@ -94,9 +102,13 @@ export declare function createResource<T, S = true>(fetcher: ResourceFetcher<S,
 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 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;
@@ -120,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 {};