solid-js 1.3.17 → 1.4.0-beta.2

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;
   };
 }
@@ -350,4 +359,4 @@ function produce(fn) {
   };
 }
 
-export { $RAW, createMutable, createStore, produce, reconcile, unwrap };
+export { $RAW, createMutable, createStore, modifyMutable, produce, reconcile, unwrap };

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>(state: T, modifier: (state: T) => 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

@@ -58,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 {}
@@ -66,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];
   };
@@ -78,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;
@@ -1905,7 +1923,6 @@ export namespace JSX {
 
   interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
     accessKey?: string;
-    className?: string;
     class?: string;
     contenteditable?: boolean | "inherit";
     contextmenu?: string;
@@ -2206,7 +2223,6 @@ export namespace JSX {
     name?: string;
   }
   interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
-    htmlFor?: string;
     for?: string;
     form?: string;
   }
@@ -2293,7 +2309,6 @@ export namespace JSX {
   }
   interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
     form?: string;
-    htmlFor?: string;
     for?: string;
     name?: string;
   }
@@ -2467,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,12 @@ export declare type ResourceFetcherInfo<T> = {
 export declare type ResourceOptions<T> = undefined extends T ? {
     initialValue?: T;
     name?: string;
-    globalRefetch?: boolean;
+    deferStream?: boolean;
     onHydrated?: <S, T>(k: S, info: ResourceFetcherInfo<T>) => void;
 } : {
     initialValue: T;
     name?: string;
-    globalRefetch?: boolean;
+    deferStream?: boolean;
     onHydrated?: <S, T>(k: S, info: ResourceFetcherInfo<T>) => void;
 };
 /**
@@ -250,7 +253,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 +404,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 +417,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";

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;
@@ -61,6 +69,7 @@ export interface Resource<T> {
     (): T | undefined;
     loading: boolean;
     error: any;
+    latest: T | undefined;
 }
 declare type SuspenseContextType = {
     resources: Map<string, {
@@ -83,22 +92,25 @@ export declare type ResourceFetcherInfo<T> = {
 export declare type ResourceOptions<T> = undefined extends T ? {
     initialValue?: T;
     name?: string;
-    globalRefetch?: boolean;
+    deferStream?: boolean;
     onHydrated?: <S, T>(k: S, info: ResourceFetcherInfo<T>) => void;
 } : {
     initialValue: T;
     name?: string;
-    globalRefetch?: boolean;
+    deferStream?: 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;
@@ -106,7 +118,7 @@ export declare function useTransition(): [() => boolean, (fn: () => any) => void
 declare type HydrationContext = {
     id: string;
     count: number;
-    writeResource?: (id: string, v: Promise<any> | any, error?: boolean) => void;
+    writeResource?: (id: string, v: Promise<any> | any, error?: boolean, deferStream?: boolean) => void;
     resources: Record<string, any>;
     suspense: Record<string, SuspenseContextType>;
     registerFragment: (v: string) => (v?: string, err?: any) => boolean;
@@ -122,5 +134,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 };