solid-js 1.3.16 → 1.4.0-beta.1

package/store/dist/store.cjs

@@ -68,11 +68,14 @@ function proxyDescriptor(target, property) {
   desc.get = () => target[solidJs.$PROXY][property];
   return desc;
 }
-function ownKeys(target) {
+function trackSelf(target) {
   if (solidJs.getListener()) {
     const nodes = getDataNodes(target);
     (nodes._ || (nodes._ = createDataNode()))();
   }
+}
+function ownKeys(target) {
+  trackSelf(target);
   return Reflect.ownKeys(target);
 }
 function createDataNode() {
@@ -89,18 +92,12 @@ const proxyTraps$1 = {
     if (property === solidJs.$PROXY) return receiver;
     const value = target[property];
     if (property === $NODE || property === "__proto__") return value;
-    const wrappable = isWrappable(value);
+    if (property === solidJs.$TRACK) return trackSelf(target);
     if (solidJs.getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
-      let nodes, node;
-      if (wrappable && (nodes = getDataNodes(value))) {
-        node = nodes._ || (nodes._ = createDataNode());
-        node();
-      }
-      nodes = getDataNodes(target);
-      node = nodes[property] || (nodes[property] = createDataNode());
-      node();
+      const nodes = getDataNodes(target);
+      (nodes[property] || (nodes[property] = createDataNode()))();
     }
-    return wrappable ? wrap$1(value) : value;
+    return isWrappable(value) ? wrap$1(value) : value;
   },
   set() {
     return true;
@@ -115,16 +112,14 @@ function setProperty(state, property, value) {
   if (state[property] === value) return;
   const array = Array.isArray(state);
   const len = state.length;
-  const isUndefined = value === undefined;
-  const notify = array || isUndefined === property in state;
-  if (isUndefined) {
+  if (value === undefined) {
     delete state[property];
   } else state[property] = value;
   let nodes = getDataNodes(state),
       node;
   (node = nodes[property]) && node.$();
   if (array && state.length !== len) (node = nodes.length) && node.$();
-  notify && (node = nodes._) && node.$();
+  (node = nodes._) && node.$();
 }
 function mergeStoreNode(state, value) {
   const keys = Object.keys(value);
@@ -133,6 +128,18 @@ function mergeStoreNode(state, value) {
     setProperty(state, key, value[key]);
   }
 }
+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++) {
+    const value = next[i];
+    if (current[i] !== value) setProperty(current, i, value);
+  }
+  setProperty(current, "length", len);
+}
 function updatePath(current, path, traversed = []) {
   let part,
       prev = current;
@@ -180,9 +187,12 @@ function updatePath(current, path, traversed = []) {
 }
 function createStore(store, options) {
   const unwrappedStore = unwrap(store || {});
+  const isArray = Array.isArray(unwrappedStore);
   const wrappedStore = wrap$1(unwrappedStore);
   function setStore(...args) {
-    solidJs.batch(() => updatePath(unwrappedStore, args));
+    solidJs.batch(() => {
+      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
+    });
   }
   return [wrappedStore, setStore];
 }
@@ -193,18 +203,14 @@ const proxyTraps = {
     if (property === solidJs.$PROXY) return receiver;
     const value = target[property];
     if (property === $NODE || property === "__proto__") return value;
-    const wrappable = isWrappable(value);
+    if (property === solidJs.$TRACK) return trackSelf(target);
     if (solidJs.getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
-      let nodes, node;
-      if (wrappable && (nodes = getDataNodes(value))) {
-        node = nodes._ || (nodes._ = createDataNode());
-        node();
-      }
-      nodes = getDataNodes(target);
-      node = nodes[property] || (nodes[property] = createDataNode());
-      node();
+      const nodes = getDataNodes(target);
+      (nodes[property] || (nodes[property] = createDataNode()))();
+    } else if (value != null && typeof value === "function" && value === Array.prototype[property]) {
+      return (...args) => solidJs.batch(() => Array.prototype[property].apply(receiver, args));
     }
-    return wrappable ? wrap(value) : value;
+    return isWrappable(value) ? wrap(value) : value;
   },
   set(target, property, value) {
     setProperty(target, property, unwrap(value));
@@ -249,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];
@@ -326,9 +335,9 @@ function reconcile(value, options = {}) {
         v = unwrap(value);
   return state => {
     if (!isWrappable(state) || !isWrappable(v)) return v;
-    applyState(v, {
+    solidJs.batch(() => applyState(v, {
       state
-    }, "state", merge, key);
+    }, "state", merge, key));
     return state;
   };
 }
@@ -353,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

@@ -1,4 +1,4 @@
-import { $PROXY, getListener, batch, createSignal } from 'solid-js';
+import { $PROXY, $TRACK, getListener, batch, createSignal } from 'solid-js';
 
 const $RAW = Symbol("store-raw"),
       $NODE = Symbol("store-node"),
@@ -64,11 +64,14 @@ function proxyDescriptor(target, property) {
   desc.get = () => target[$PROXY][property];
   return desc;
 }
-function ownKeys(target) {
+function trackSelf(target) {
   if (getListener()) {
     const nodes = getDataNodes(target);
     (nodes._ || (nodes._ = createDataNode()))();
   }
+}
+function ownKeys(target) {
+  trackSelf(target);
   return Reflect.ownKeys(target);
 }
 function createDataNode() {
@@ -85,18 +88,12 @@ const proxyTraps$1 = {
     if (property === $PROXY) return receiver;
     const value = target[property];
     if (property === $NODE || property === "__proto__") return value;
-    const wrappable = isWrappable(value);
+    if (property === $TRACK) return trackSelf(target);
     if (getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
-      let nodes, node;
-      if (wrappable && (nodes = getDataNodes(value))) {
-        node = nodes._ || (nodes._ = createDataNode());
-        node();
-      }
-      nodes = getDataNodes(target);
-      node = nodes[property] || (nodes[property] = createDataNode());
-      node();
+      const nodes = getDataNodes(target);
+      (nodes[property] || (nodes[property] = createDataNode()))();
     }
-    return wrappable ? wrap$1(value) : value;
+    return isWrappable(value) ? wrap$1(value) : value;
   },
   set() {
     return true;
@@ -111,16 +108,14 @@ function setProperty(state, property, value) {
   if (state[property] === value) return;
   const array = Array.isArray(state);
   const len = state.length;
-  const isUndefined = value === undefined;
-  const notify = array || isUndefined === property in state;
-  if (isUndefined) {
+  if (value === undefined) {
     delete state[property];
   } else state[property] = value;
   let nodes = getDataNodes(state),
       node;
   (node = nodes[property]) && node.$();
   if (array && state.length !== len) (node = nodes.length) && node.$();
-  notify && (node = nodes._) && node.$();
+  (node = nodes._) && node.$();
 }
 function mergeStoreNode(state, value) {
   const keys = Object.keys(value);
@@ -129,6 +124,18 @@ function mergeStoreNode(state, value) {
     setProperty(state, key, value[key]);
   }
 }
+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++) {
+    const value = next[i];
+    if (current[i] !== value) setProperty(current, i, value);
+  }
+  setProperty(current, "length", len);
+}
 function updatePath(current, path, traversed = []) {
   let part,
       prev = current;
@@ -176,9 +183,12 @@ function updatePath(current, path, traversed = []) {
 }
 function createStore(store, options) {
   const unwrappedStore = unwrap(store || {});
+  const isArray = Array.isArray(unwrappedStore);
   const wrappedStore = wrap$1(unwrappedStore);
   function setStore(...args) {
-    batch(() => updatePath(unwrappedStore, args));
+    batch(() => {
+      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
+    });
   }
   return [wrappedStore, setStore];
 }
@@ -189,18 +199,14 @@ const proxyTraps = {
     if (property === $PROXY) return receiver;
     const value = target[property];
     if (property === $NODE || property === "__proto__") return value;
-    const wrappable = isWrappable(value);
+    if (property === $TRACK) return trackSelf(target);
     if (getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
-      let nodes, node;
-      if (wrappable && (nodes = getDataNodes(value))) {
-        node = nodes._ || (nodes._ = createDataNode());
-        node();
-      }
-      nodes = getDataNodes(target);
-      node = nodes[property] || (nodes[property] = createDataNode());
-      node();
+      const nodes = getDataNodes(target);
+      (nodes[property] || (nodes[property] = createDataNode()))();
+    } else if (value != null && typeof value === "function" && value === Array.prototype[property]) {
+      return (...args) => batch(() => Array.prototype[property].apply(receiver, args));
     }
-    return wrappable ? wrap(value) : value;
+    return isWrappable(value) ? wrap(value) : value;
   },
   set(target, property, value) {
     setProperty(target, property, unwrap(value));
@@ -245,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];
@@ -322,9 +331,9 @@ function reconcile(value, options = {}) {
         v = unwrap(value);
   return state => {
     if (!isWrappable(state) || !isWrappable(v)) return v;
-    applyState(v, {
+    batch(() => applyState(v, {
       state
-    }, "state", merge, key);
+    }, "state", merge, key));
     return state;
   };
 }
@@ -349,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/store/types/store.d.ts

@@ -11,6 +11,7 @@ export declare function isWrappable(obj: any): any;
 export declare function unwrap<T extends StoreNode>(item: any, set?: Set<unknown>): T;
 export declare function getDataNodes(target: StoreNode): any;
 export declare function proxyDescriptor(target: StoreNode, property: PropertyKey): PropertyDescriptor | undefined;
+export declare function trackSelf(target: StoreNode): void;
 export declare function ownKeys(target: StoreNode): (string | symbol)[];
 export declare function createDataNode(): Accessor<void> & {
     $: () => void;

package/types/index.d.ts

@@ -1,4 +1,4 @@
-export { createRoot, createSignal, createEffect, createRenderEffect, createComputed, createReaction, createDeferred, createSelector, createMemo, createResource, onMount, onCleanup, onError, untrack, batch, on, enableScheduling, enableExternalSource, startTransition, useTransition, refetchResources, createContext, useContext, children, getListener, getOwner, runWithOwner, equalFn, $DEVCOMP, $PROXY } from "./reactive/signal";
+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";
 export type { Accessor, Setter, Signal, Resource, ResourceReturn, ResourceFetcher, ResourceFetcherInfo, Context, ReturnTypes } from "./reactive/signal";
 export * from "./reactive/observable";
 export * from "./reactive/scheduler";

package/types/jsx.d.ts

@@ -23,7 +23,6 @@ export namespace JSX {
   interface ElementClass {
     // empty, libs can define requirements downstream
   }
-  type LibraryManagedAttributes<Component, Props> = Props;
   interface ElementAttributesProperty {
     // empty, libs can define requirements downstream
   }
@@ -59,7 +58,11 @@ export namespace JSX {
     };
     $ServerOnly?: boolean;
   }
+  type Accessor<T> = () => T
   interface Directives {}
+  interface DirectiveFunctions {
+    [x: string]: (el: Element, accessor: Accessor<any>) => void;
+  }
   interface ExplicitProperties {}
   interface ExplicitAttributes {}
   interface CustomEvents {}
@@ -67,6 +70,20 @@ export namespace JSX {
   type DirectiveAttributes = {
     [Key in keyof Directives as `use:${Key}`]?: Directives[Key];
   };
+  type DirectiveFunctionAttributes<T> = {
+    [K in keyof DirectiveFunctions as string extends K ? never : `use:${K}`]?: DirectiveFunctions[K] extends (
+      el: infer E, // will be unknown if not provided
+      ...rest: infer R // use rest so that we can check whether it's provided or not
+    ) => void
+      ? T extends E // everything extends unknown if E is unknown
+        ? R extends [infer A] // check if has accessor provided
+          ? A extends Accessor<infer V>
+            ? V // it's an accessor
+            : never // it isn't, type error
+          : true // no accessor provided
+        : never // T is the wrong element
+      : never; // it isn't a function
+  };
   type PropAttributes = {
     [Key in keyof ExplicitProperties as `prop:${Key}`]?: ExplicitProperties[Key];
   };
@@ -79,7 +96,7 @@ export namespace JSX {
   type OnCaptureAttributes<T> = {
     [Key in keyof CustomCaptureEvents as `oncapture:${Key}`]?: EventHandler<T, CustomCaptureEvents[Key]>;
   }
-  interface DOMAttributes<T> extends CustomAttributes<T>, DirectiveAttributes, PropAttributes, AttrAttributes, OnAttributes<T>, OnCaptureAttributes<T> {
+  interface DOMAttributes<T> extends CustomAttributes<T>, DirectiveAttributes, DirectiveFunctionAttributes<T>, PropAttributes, AttrAttributes, OnAttributes<T>, OnCaptureAttributes<T> {
     children?: Element;
     innerHTML?: string;
     innerText?: string | number;
@@ -1906,7 +1923,6 @@ export namespace JSX {
 
   interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
     accessKey?: string;
-    className?: string;
     class?: string;
     contenteditable?: boolean | "inherit";
     contextmenu?: string;
@@ -2207,7 +2223,6 @@ export namespace JSX {
     name?: string;
   }
   interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
-    htmlFor?: string;
     for?: string;
     form?: string;
   }
@@ -2294,7 +2309,6 @@ export namespace JSX {
   }
   interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
     form?: string;
-    htmlFor?: string;
     for?: string;
     name?: string;
   }
@@ -2468,7 +2482,6 @@ export namespace JSX {
   }
   interface StylableSVGAttributes {
     class?: string;
-    className?: string;
     style?: CSSProperties | string;
   }
   interface TransformableSVGAttributes {

package/types/reactive/signal.d.ts

@@ -1,7 +1,9 @@
 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;
 export declare const $DEVCOMP: unique symbol;
 export declare const NOTPENDING: {};
 export declare var Owner: Owner | null;
@@ -70,7 +72,7 @@ export declare type RootFunction<T> = (dispose: () => void) => T;
  */
 export declare function createRoot<T>(fn: RootFunction<T>, detachedOwner?: Owner): T;
 export declare type Accessor<T> = () => T;
-export declare type Setter<T> = (undefined extends T ? (value?: undefined) => undefined : {}) & (<U extends T>(value: Exclude<U, Function> | ((prev: T) => U)) => U);
+export declare type Setter<T> = (undefined extends T ? () => undefined : {}) & (<U extends T>(value: Exclude<U, Function> | ((prev: T) => U)) => U);
 export declare type Signal<T> = [get: Accessor<T>, set: Setter<T>];
 export interface SignalOptions<T> extends MemoOptions<T> {
     internal?: boolean;
@@ -122,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
@@ -139,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
@@ -156,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
@@ -193,11 +195,12 @@ 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;
+    latest: T | undefined;
 }
 export declare type ResourceActions<T> = {
     mutate: Setter<T>;
@@ -213,12 +216,10 @@ 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;
 };
 /**
@@ -250,7 +251,6 @@ 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 refetchResources(info?: unknown): Promise<any[]>;
 export interface DeferredOptions<T> {
     equals?: false | ((prev: T, next: T) => boolean);
     name?: string;
@@ -402,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>;
@@ -416,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]>];
@@ -23,18 +76,13 @@ declare type UnboxIntersection<T> = T extends {
 } ? U : never;
 declare type MergeProps<T extends any[]> = UnboxIntersection<UnionToIntersection<BoxedTupleTypes<T>>>;
 export declare function mergeProps<T extends any[]>(...sources: T): MergeProps<T>;
-export declare function splitProps<T extends object, K1 extends keyof T>(props: T, ...keys: [K1[]]): [Pick<T, K1>, Omit<T, K1>];
-export declare function splitProps<T extends object, K1 extends keyof T, K2 extends keyof T>(props: T, ...keys: [K1[], K2[]]): [Pick<T, K1>, Pick<T, K2>, Omit<T, K1 | K2>];
-export declare function splitProps<T extends object, K1 extends keyof T, K2 extends keyof T, K3 extends keyof T>(props: T, ...keys: [K1[], K2[], K3[]]): [Pick<T, K1>, Pick<T, K2>, Pick<T, K3>, Omit<T, K1 | K2 | K3>];
-export declare function splitProps<T extends object, K1 extends keyof T, K2 extends keyof T, K3 extends keyof T, K4 extends keyof T>(props: T, ...keys: [K1[], K2[], K3[], K4[]]): [Pick<T, K1>, Pick<T, K2>, Pick<T, K3>, Pick<T, K4>, Omit<T, K1 | K2 | K3 | K4>];
-export declare function splitProps<T extends object, K1 extends keyof T, K2 extends keyof T, K3 extends keyof T, K4 extends keyof T, K5 extends keyof T>(props: T, ...keys: [K1[], K2[], K3[], K4[], K5[]]): [
-    Pick<T, K1>,
-    Pick<T, K2>,
-    Pick<T, K3>,
-    Pick<T, K4>,
-    Pick<T, K5>,
-    Omit<T, K1 | K2 | K3 | K4 | K5>
+declare type SplitProps<T, K extends (readonly (keyof T)[])[]> = [
+    ...{
+        [P in keyof K]: P extends `${number}` ? Pick<T, Extract<K[P], readonly (keyof T)[]>[number]> : K[P];
+    },
+    Omit<T, K[number][number]>
 ];
+export declare function splitProps<T, K extends [readonly (keyof T)[], ...(readonly (keyof T)[])[]]>(props: T, ...keys: K): SplitProps<T, K>;
 export declare function lazy<T extends Component<any>>(fn: () => Promise<{
     default: T;
 }>): T & {

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";
-export { mergeProps, splitProps, createComponent, For, Index, Show, Switch, Match, ErrorBoundary, Suspense, SuspenseList, createResource, refetchResources, resetErrorBoundaries, enableScheduling, enableHydration, startTransition, useTransition, createUniqueId, lazy, sharedConfig } from "./rendering";
+export { mergeProps, splitProps, createComponent, For, Index, Show, Switch, Match, ErrorBoundary, Suspense, SuspenseList, createResource, resetErrorBoundaries, enableScheduling, enableHydration, startTransition, useTransition, createUniqueId, lazy, sharedConfig } from "./rendering";
 export type { Component, Resource } from "./rendering";