solid-js 2.0.0-beta.1 → 2.0.0-beta.11

package/types-cjs/client/component.d.cts

@@ -0,0 +1,120 @@
+import type { Element as SolidElement } from "../types.cjs";
+/**
+ * A general `Component` has no implicit `children` prop. If desired, specify
+ * one explicitly, e.g. `Component<{ name: string; children: Element }>`.
+ */
+export type Component<P extends Record<string, any> = {}> = (props: P) => SolidElement;
+/**
+ * Extend props to forbid the `children` prop.
+ * Use this to prevent accidentally passing `children` to components that
+ * would silently throw them away.
+ */
+export type VoidProps<P extends Record<string, any> = {}> = P & {
+    children?: never;
+};
+/**
+ * `VoidComponent` forbids the `children` prop.
+ * Use this to prevent accidentally passing `children` to components that
+ * would silently throw them away.
+ */
+export type VoidComponent<P extends Record<string, any> = {}> = Component<VoidProps<P>>;
+/**
+ * Extend props to allow optional Solid children.
+ * Use this for components that you want to accept children.
+ */
+export type ParentProps<P extends Record<string, any> = {}> = P & {
+    children?: SolidElement;
+};
+/**
+ * `ParentComponent` allows an optional `children` prop.
+ * Use this for components that you want to accept children.
+ */
+export type ParentComponent<P extends Record<string, any> = {}> = 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.
+ */
+export type FlowProps<P extends Record<string, any> = {}, C = SolidElement> = 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.
+ */
+export type FlowComponent<P extends Record<string, any> = {}, C = SolidElement> = Component<FlowProps<P, C>>;
+export type ValidComponent = Component<any>;
+/**
+ * Takes the props of the passed component and returns its type
+ *
+ * Intrinsic element prop extraction is renderer-specific and lives in renderer
+ * packages such as `@solidjs/web`.
+ */
+export type ComponentProps<T extends ValidComponent> = T extends Component<infer P> ? P : never;
+/**
+ * Type of `props.ref`, for use in `Component` or `props` typing.
+ *
+ * @example Component<{ref: Ref<Element>}>
+ */
+export type Ref<T> = T | ((val: T) => void);
+/**
+ * Invokes a component, wrapping the call in `untrack` so that reactive reads
+ * inside the component body don't subscribe the parent computation. Compiled
+ * JSX uses this internally; manual calls are rarely needed unless authoring a
+ * custom JSX factory or renderer.
+ */
+export declare function createComponent<T extends Record<string, any>>(Comp: Component<T>, props: T): SolidElement;
+/**
+ * Defines a code-split component. The returned component triggers its dynamic
+ * import on first render and suspends through any enclosing `<Loading>`
+ * boundary while the chunk is in flight. Call `.preload()` to start the
+ * import early (e.g. on hover).
+ *
+ * @param fn dynamic import returning the module's default export
+ * @param moduleUrl optional module URL used during hydration to look up
+ *   preloaded chunks; usually injected by the bundler integration
+ *
+ * @example
+ * ```tsx
+ * const Profile = lazy(() => import("./Profile"));
+ *
+ * function App() {
+ *   return (
+ *     <Loading fallback={<Spinner />}>
+ *       <Profile id="42" />
+ *     </Loading>
+ *   );
+ * }
+ *
+ * // Preload before the user clicks
+ * <button onMouseEnter={() => Profile.preload()}>Open profile</button>
+ * ```
+ */
+export declare function lazy<T extends Component<any>>(fn: () => Promise<{
+    default: T;
+}>, moduleUrl?: string): T & {
+    preload: () => Promise<{
+        default: T;
+    }>;
+    moduleUrl?: string;
+};
+/**
+ * Returns a stable id string that matches between server-rendered and
+ * client-hydrated trees. Use it for `<label for>`, `aria-labelledby`, and
+ * other attributes that need consistent ids across SSR.
+ *
+ * @example
+ * ```tsx
+ * function Field(props: { label: string }) {
+ *   const id = createUniqueId();
+ *   return (
+ *     <>
+ *       <label for={id}>{props.label}</label>
+ *       <input id={id} />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function createUniqueId(): string;

package/types-cjs/client/core.d.cts

@@ -0,0 +1,141 @@
+import type { Accessor, EffectOptions } from "@solidjs/signals";
+import type { ArrayElement, Element as SolidElement } from "../types.cjs";
+import { FlowComponent } from "./component.cjs";
+export declare const IS_DEV: string | boolean;
+/**
+ * Brand symbol marking dev-built components for `solid-devtools` /
+ * AI-readiness instrumentation. Internal cross-package wiring.
+ *
+ * @internal
+ */
+export declare const $DEVCOMP: unique symbol;
+export type NoInfer<T extends any> = [T][T extends any ? 0 : never];
+export type ContextProviderComponent<T> = FlowComponent<{
+    value: T;
+}>;
+export interface Context<T> extends ContextProviderComponent<T> {
+    id: symbol;
+    defaultValue: T | undefined;
+}
+/**
+ * Creates a Context for sharing state with descendants of a Provider in the
+ * component tree.
+ *
+ * The returned `Context` is itself a provider component — pass it a `value`
+ * prop to scope a value to its children. Read it inside descendants with
+ * `useContext`.
+ *
+ * Two forms:
+ *
+ * - **`createContext<T>()`** (default-less, the canonical form). Reading via
+ *   `useContext` outside an enclosing Provider throws `ContextNotFoundError`.
+ *   Use this for everything that carries reactive state — signals, stores,
+ *   `[state, actions]` tuples, services. The Provider is mandatory by
+ *   construction; the throw makes a missing Provider a loud bug instead of a
+ *   silent no-op. The annotation `<T>` is required because there is no value
+ *   to infer from.
+ * - **`createContext<T>(defaultValue)`** (default form). Reserved for the
+ *   narrow case of contexts whose value is a primitive with a meaningful
+ *   static fallback (theme, locale, frozen config). Outside any Provider,
+ *   `useContext` returns `defaultValue`.
+ *
+ * If you want truly app-wide state, **don't use Context** — a module-scope
+ * signal/store *is* a global. Context is for scoping state to a subtree;
+ * that's why a Provider is required.
+ *
+ * @param defaultValue optional default; only meaningful for primitive
+ *   fallbacks. Omit for any context carrying reactive state.
+ * @param options `{ name }` for debugging in development
+ * @returns a context object that doubles as its own provider component
+ *
+ * @example
+ * ```tsx
+ * // Reactive payload — default-less, throws if no Provider.
+ * type TodosCtx = readonly [Store<Todo[]>, TodoActions];
+ * const TodosContext = createContext<TodosCtx>();
+ *
+ * function App() {
+ *   return (
+ *     <TodosContext value={createTodos()}>
+ *       <TodoList />
+ *     </TodosContext>
+ *   );
+ * }
+ *
+ * function TodoList() {
+ *   const [todos, { addTodo }] = useContext(TodosContext); // typed as TodosCtx
+ *   // ...
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Primitive default — falls back to "light" outside a Provider.
+ * const ThemeContext = createContext<"light" | "dark">("light");
+ *
+ * function Button() {
+ *   const theme = useContext(ThemeContext); // "light" | "dark"
+ *   return <button class={theme}>Click</button>;
+ * }
+ * ```
+ *
+ * @description https://docs.solidjs.com/reference/component-apis/create-context
+ */
+export declare function createContext<T>(defaultValue?: T, options?: EffectOptions): Context<T>;
+/**
+ * Reads the current value of a context.
+ *
+ * - For `createContext<T>()` (default-less): returns the value from the
+ *   nearest enclosing Provider, or throws `ContextNotFoundError` if none is
+ *   mounted. Return type is `T` (no narrowing required).
+ * - For `createContext<T>(defaultValue)`: returns the value from the nearest
+ *   enclosing Provider, or `defaultValue` if none is mounted.
+ *
+ * In Solid, `useContext` is the canonical way to read context. There is no
+ * need for a wrapper hook that throws on missing Provider — the default-less
+ * form already does that, and its return type is `T`.
+ *
+ * @param context a context returned from `createContext`
+ * @returns the value provided by the nearest enclosing Provider, or the
+ *   default if one was supplied to `createContext`
+ * @throws `ContextNotFoundError` if no Provider is mounted and the context
+ *   was created without a default
+ *
+ * @example
+ * ```tsx
+ * const TodosContext = createContext<TodosCtx>();
+ *
+ * function TodoList() {
+ *   const [todos, { addTodo }] = useContext(TodosContext); // throws if no Provider
+ *   // ...
+ * }
+ * ```
+ *
+ * @description https://docs.solidjs.com/reference/component-apis/use-context
+ */
+export declare function useContext<T>(context: Context<T>): T;
+export type ResolvedElement = Exclude<SolidElement, ArrayElement>;
+export type ResolvedChildren = ResolvedElement | ResolvedElement[];
+export type ChildrenReturn = Accessor<ResolvedChildren> & {
+    toArray: () => ResolvedElement[];
+};
+/**
+ * Resolves a `children` accessor and exposes the result as an accessor with
+ * a `.toArray()` helper. Use this when a component needs to inspect or
+ * iterate over its children rather than just render them through.
+ *
+ * @param fn an accessor for the children
+ * @returns an accessor of the resolved children, with `.toArray()` for iteration
+ *
+ * @example
+ * ```tsx
+ * function List(props: { children: Element }) {
+ *   const items = children(() => props.children);
+ *   return <ul>{items.toArray().map(item => <li>{item}</li>)}</ul>;
+ * }
+ * ```
+ *
+ * @description https://docs.solidjs.com/reference/component-apis/children
+ */
+export declare function children(fn: Accessor<SolidElement>): ChildrenReturn;
+export declare function devComponent<P, V>(Comp: (props: P) => V, props: P): V;

package/types-cjs/client/flow.d.cts

@@ -0,0 +1,234 @@
+import type { Accessor, RevealOrder } from "@solidjs/signals";
+export type { RevealOrder };
+import type { Element as SolidElement } from "../types.cjs";
+type NonZeroParams<T extends (...args: any[]) => any> = Parameters<T>["length"] extends 0 ? never : T;
+type ConditionalRenderCallback<T> = (item: Accessor<NonNullable<T>>) => SolidElement;
+type ConditionalRenderChildren<T, F extends ConditionalRenderCallback<T> = ConditionalRenderCallback<T>> = SolidElement | NonZeroParams<F>;
+/**
+ * Creates a list of elements from a list.
+ *
+ * Receives a map function as its child that takes list element and index
+ * accessors and returns a JSX element; if the list is empty, an optional
+ * `fallback` is rendered instead.
+ *
+ * @example
+ * ```tsx
+ * <For each={items} fallback={<div>No items</div>}>
+ *   {(item, index) => <div data-index={index()}>{item()}</div>}
+ * </For>
+ * ```
+ *
+ * @description https://docs.solidjs.com/reference/components/for
+ */
+export declare function For<T extends readonly any[], U extends SolidElement>(props: {
+    each: T | undefined | null | false;
+    fallback?: SolidElement;
+    keyed?: boolean | ((item: T[number]) => any);
+    children: (item: Accessor<T[number]>, index: Accessor<number>) => U;
+}): SolidElement;
+/**
+ * Creates a list of elements from a count.
+ *
+ * Receives a map function as its child that takes the index and returns a JSX
+ * element; if the count is zero, an optional `fallback` is rendered instead.
+ *
+ * @example
+ * ```tsx
+ * <Repeat count={items.length} fallback={<div>No items</div>}>
+ *   {(index) => <div data-index={index}>{items[index]}</div>}
+ * </Repeat>
+ * ```
+ *
+ * @description https://docs.solidjs.com/reference/components/repeat
+ */
+export declare function Repeat<T extends SolidElement>(props: {
+    count: number;
+    from?: number | undefined;
+    fallback?: SolidElement;
+    children: ((index: number) => T) | T;
+}): SolidElement;
+/**
+ * Conditionally renders its children when `when` is truthy, otherwise renders
+ * the optional `fallback`.
+ *
+ * The function-child form receives an accessor for the narrowed value — call
+ * it to read. Without `keyed` (default), the child is preserved across
+ * truthy values; with `keyed`, the child remounts whenever the value's
+ * identity changes.
+ *
+ * @example
+ * ```tsx
+ * <Show when={user()} fallback={<SignIn />}>
+ *   {u => <Greeting name={u().name} />}
+ * </Show>
+ * ```
+ *
+ * @description https://docs.solidjs.com/reference/components/show
+ */
+export declare function Show<T, F extends ConditionalRenderCallback<T>>(props: {
+    when: T | undefined | null | false;
+    keyed?: boolean;
+    fallback?: SolidElement;
+    children: ConditionalRenderChildren<T, F>;
+}): SolidElement;
+/**
+ * Switches between content based on mutually exclusive conditions. Renders
+ * the first `<Match>` whose `when` is truthy; falls back to `fallback` when
+ * none match.
+ *
+ * @example
+ * ```tsx
+ * <Switch fallback={<FourOhFour />}>
+ *   <Match when={state.route === 'home'}>
+ *     <Home />
+ *   </Match>
+ *   <Match when={state.route === 'settings'}>
+ *     <Settings />
+ *   </Match>
+ * </Switch>
+ * ```
+ *
+ * @description https://docs.solidjs.com/reference/components/switch-and-match
+ */
+export declare function Switch(props: {
+    fallback?: SolidElement;
+    children: SolidElement;
+}): SolidElement;
+export type MatchProps<T, F extends ConditionalRenderCallback<T> = ConditionalRenderCallback<T>> = {
+    when: T | undefined | null | false;
+    keyed?: boolean;
+    children: ConditionalRenderChildren<T, F>;
+};
+/**
+ * A branch inside a `<Switch>`. The first `<Match>` whose `when` is truthy
+ * wins; remaining matches are skipped.
+ *
+ * Like `<Show>`, `<Match>` supports a function child that receives an
+ * accessor for the narrowed value.
+ *
+ * @example
+ * ```tsx
+ * <Switch fallback={<NotFound />}>
+ *   <Match when={user()}>
+ *     {u => <Profile name={u().name} />}
+ *   </Match>
+ *   <Match when={loading()}>
+ *     <Spinner />
+ *   </Match>
+ * </Switch>
+ * ```
+ *
+ * @description https://docs.solidjs.com/reference/components/switch-and-match
+ */
+export declare function Match<T, F extends ConditionalRenderCallback<T>>(props: MatchProps<T, F>): SolidElement;
+/**
+ * Catches uncaught errors inside its subtree and renders fallback content
+ * instead. The `fallback` prop can be a JSX element, or a callback that
+ * receives the error and a `reset()` function for retry affordances.
+ *
+ * Errors thrown from the fallback itself can be caught by a parent
+ * `<Errored>`.
+ *
+ * @example
+ * ```tsx
+ * <Errored fallback={(err, reset) => (
+ *   <div onClick={reset}>Error: {err.toString()}</div>
+ * )}>
+ *   <MyComp />
+ * </Errored>
+ * ```
+ *
+ * @description https://docs.solidjs.com/reference/components/error-boundary
+ */
+export declare function Errored(props: {
+    fallback: SolidElement | ((err: any, reset: () => void) => SolidElement);
+    children: SolidElement;
+}): SolidElement;
+/**
+ * Renders a `fallback` while pending async reads inside the subtree settle.
+ *
+ * Any computation (`createMemo`, `createSignal(fn)`, `createStore(fn)`,
+ * `lazy(...)`, etc.) that throws because data isn't ready is caught by the
+ * nearest enclosing `<Loading>`. The boundary swaps to its `fallback` until
+ * every pending read has resolved, then renders the children.
+ *
+ * The optional `on` prop scopes the boundary so it ignores transitions
+ * caused by writes to other reactive sources — those transitions stay on the
+ * previous content (with `isPending()` flipping during the transition).
+ *
+ * Scope `<Loading>` around the data-dependent slot, not the surrounding
+ * shell. Wrapping layout chrome (header, nav, footer) in the same boundary
+ * as the data means revalidation replaces the entire screen with the
+ * fallback; rendering chrome outside the boundary keeps it stable while
+ * only the affordance flips.
+ *
+ * @example
+ * ```tsx
+ * const Profile = lazy(() => import("./Profile"));
+ *
+ * <Loading fallback={<Spinner />}>
+ *   <Profile />
+ * </Loading>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Only show the fallback for transitions caused by writes to `route`.
+ * <Loading fallback={<Skeleton />} on={route}>
+ *   <Page />
+ * </Loading>
+ * ```
+ *
+ * @description https://docs.solidjs.com/reference/components/suspense
+ */
+export declare function Loading(props: {
+    fallback?: SolidElement;
+    on?: any;
+    children: SolidElement;
+}): SolidElement;
+export type RevealProps = {
+    order?: RevealOrder;
+    collapsed?: boolean;
+    children: SolidElement;
+};
+/**
+ * Coordinates the reveal timing of sibling `<Loading>` boundaries.
+ *
+ * The `order` prop picks the reveal policy:
+ * - `"sequential"` (default) — boundaries reveal in registration order; later boundaries
+ *   stay on their fallback until earlier ones resolve.
+ * - `"together"` — every direct slot stays on its fallback until the whole group is
+ *   "minimally ready" (every direct slot has its own first visible content available),
+ *   then the group releases in one cohesive reveal.
+ * - `"natural"` — each boundary reveals as its own data resolves. At the top level
+ *   this is equivalent to omitting `<Reveal>`; the mode exists for nesting, where
+ *   the group registers as a single composite slot in an enclosing `<Reveal>`.
+ *
+ * The `collapsed` prop is only consulted when `order="sequential"` (the default);
+ * it is ignored under `"together"` and `"natural"`. When set, tail boundaries past
+ * the frontier suppress their own fallback output.
+ *
+ * Nested `<Reveal>` groups compose: the inner group is one slot in the outer order
+ * and is held on its fallbacks until the outer releases the slot. Once released, the
+ * inner group runs its own `order` locally over whatever is still pending. There is
+ * no escape hatch — nesting under an outer group means participating in its ordering.
+ * See `documentation/solid-2.0/03-control-flow.md` for the full nesting matrix and the
+ * "minimally ready" definition per order.
+ *
+ * @example
+ * ```tsx
+ * // Default order is "sequential"; the inner group composes as one slot
+ * // and runs its own "natural" order locally once the outer releases it.
+ * <Reveal>
+ *   <Loading fallback={<Skeleton />}><ProfileHeader /></Loading>
+ *   <Reveal order="natural">
+ *     <Loading fallback={<Skeleton />}><PostA /></Loading>
+ *     <Loading fallback={<Skeleton />}><PostB /></Loading>
+ *   </Reveal>
+ *   <Loading fallback={<Skeleton />}><Comments /></Loading>
+ * </Reveal>
+ * ```
+ *
+ * @description https://docs.solidjs.com/reference/components/reveal
+ */
+export declare function Reveal(props: RevealProps): SolidElement;