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

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "solid-js",
-  "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "2.0.0-beta.1",
+  "description": "Reactive JavaScript library for building user interfaces. Compiles JSX to real DOM with fine-grained signal-based updates — no virtual DOM.",
+  "version": "2.0.0-beta.11",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/solidjs/solid"
+    "url": "git+https://github.com/solidjs/solid.git",
+    "directory": "packages/solid"
   },
   "main": "./dist/server.cjs",
   "module": "./dist/server.js",
@@ -18,55 +19,82 @@
   "files": [
     "dist",
     "types",
-    "jsx-runtime.d.ts",
-    "package.json"
+    "types-cjs",
+    "package.json",
+    "CHEATSHEET.md"
   ],
   "exports": {
     ".": {
       "worker": {
-        "types": "./types/index.d.ts",
-        "import": "./dist/server.js",
-        "require": "./dist/server.cjs"
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/server.cjs"
+        }
       },
       "browser": {
         "development": {
+          "import": {
+            "types": "./types/index.d.ts",
+            "default": "./dist/dev.js"
+          },
+          "require": {
+            "types": "./types-cjs/index.d.cts",
+            "default": "./dist/dev.cjs"
+          }
+        },
+        "import": {
           "types": "./types/index.d.ts",
-          "import": "./dist/dev.js",
-          "require": "./dist/dev.cjs"
+          "default": "./dist/solid.js"
         },
-        "types": "./types/index.d.ts",
-        "import": "./dist/solid.js",
-        "require": "./dist/solid.cjs"
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/solid.cjs"
+        }
       },
       "deno": {
-        "types": "./types/index.d.ts",
-        "import": "./dist/server.js",
-        "require": "./dist/server.cjs"
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/server.cjs"
+        }
       },
       "node": {
-        "types": "./types/index.d.ts",
-        "import": "./dist/server.js",
-        "require": "./dist/server.cjs"
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/server.cjs"
+        }
       },
       "development": {
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/dev.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/dev.cjs"
+        }
+      },
+      "import": {
         "types": "./types/index.d.ts",
-        "import": "./dist/dev.js",
-        "require": "./dist/dev.cjs"
+        "default": "./dist/solid.js"
       },
-      "types": "./types/index.d.ts",
-      "import": "./dist/solid.js",
-      "require": "./dist/solid.cjs"
+      "require": {
+        "types": "./types-cjs/index.d.cts",
+        "default": "./dist/solid.cjs"
+      }
     },
-    "./dist/*": "./dist/*",
     "./types/*": "./types/*",
-    "./jsx-runtime": {
-      "types": "./types/jsx.d.ts",
-      "default": "./dist/solid.js"
-    },
-    "./jsx-dev-runtime": {
-      "types": "./types/jsx.d.ts",
-      "default": "./dist/solid.js"
-    },
     "./package.json": "./package.json"
   },
   "keywords": [
@@ -79,7 +107,7 @@
     "performance"
   ],
   "dependencies": {
-    "@solidjs/signals": "^0.11.3",
+    "@solidjs/signals": "^2.0.0-beta.11",
     "csstype": "^3.1.0",
     "seroval": "~1.5.0",
     "seroval-plugins": "~1.5.0"
@@ -88,12 +116,12 @@
     "build": "npm-run-all -nl build:*",
     "build:clean": "rimraf dist/ coverage/",
     "build:js": "rollup -c",
-    "types": "npm-run-all -nl types:*",
-    "types:clean": "rimraf types/",
-    "types:copy": "ncp ../../node_modules/dom-expressions/src/jsx.d.ts ./src/jsx.d.ts",
-    "types:src": "tsc --project ./tsconfig.build.json && ncp ../../node_modules/dom-expressions/src/jsx.d.ts ./types/jsx.d.ts",
+    "types": "npm-run-all -nl types:clean types:src types:cjs",
+    "types:clean": "rimraf types/ types-cjs/",
+    "types:src": "tsc --project ./tsconfig.build.json",
+    "types:cjs": "node ../../scripts/sync-dual-types.mjs ./types ./types-cjs",
     "test": "vitest run",
     "coverage": "vitest run --coverage",
-    "test-types": "tsc --project tsconfig.test.json"
+    "test-types": "tsc --project tsconfig.test.json && tsc --project tsconfig.no-dom.json"
   }
 }

package/types/client/component.d.ts

@@ -1,9 +1,9 @@
-import type { JSX } from "../jsx.js";
+import type { Element as SolidElement } from "../types.js";
 /**
- * A general `Component` has no implicit `children` prop.  If desired, you can
- * specify one as in `Component<{name: String, children: JSX.Element}>`.
+ * 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) => JSX.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
@@ -19,16 +19,14 @@ export type VoidProps<P extends Record<string, any> = {}> = P & {
  */
 export type VoidComponent<P extends Record<string, any> = {}> = Component<VoidProps<P>>;
 /**
- * Extend props to allow an optional `children` prop with the usual
- * type in JSX, `JSX.Element` (which allows elements, arrays, strings, etc.).
+ * 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?: JSX.Element;
+    children?: SolidElement;
 };
 /**
- * `ParentComponent` allows an optional `children` prop with the usual
- * type in JSX, `JSX.Element` (which allows elements, arrays, strings, etc.).
+ * `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>>;
@@ -36,34 +34,63 @@ export type ParentComponent<P extends Record<string, any> = {}> = Component<Pare
  * 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 type FlowProps<P extends Record<string, any> = {}, C = JSX.Element> = P & {
+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.
- * Note that all JSX <Elements> are of the type `JSX.Element`.
  */
-export type FlowComponent<P extends Record<string, any> = {}, C = JSX.Element> = Component<FlowProps<P, C>>;
-export type ValidComponent = keyof JSX.IntrinsicElements | Component<any> | (string & {});
+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
  *
- * @example
- * ComponentProps<typeof Portal> // { mount?: Node; useShadow?: boolean; children: JSX.Element }
- * ComponentProps<'div'> // JSX.HTMLAttributes<HTMLDivElement>
+ * 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 : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : Record<string, unknown>;
+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);
-export declare function createComponent<T extends Record<string, any>>(Comp: Component<T>, props: T): JSX.Element;
+/**
+ * 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 & {
@@ -72,4 +99,22 @@ export declare function lazy<T extends Component<any>>(fn: () => Promise<{
     }>;
     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/client/core.d.ts

@@ -1,7 +1,13 @@
-import type { Accessor, Owner, EffectOptions } from "@solidjs/signals";
-import type { JSX } from "../jsx.js";
+import type { Accessor, EffectOptions } from "@solidjs/signals";
+import type { ArrayElement, Element as SolidElement } from "../types.js";
 import { FlowComponent } from "./component.js";
 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<{
@@ -9,57 +15,127 @@ export type ContextProviderComponent<T> = FlowComponent<{
 }>;
 export interface Context<T> extends ContextProviderComponent<T> {
     id: symbol;
-    defaultValue: T;
+    defaultValue: T | undefined;
 }
 /**
- * Creates a Context to handle a state scoped for the children of a component
- * ```typescript
- * interface Context<T> {
- *   id: symbol;
- *   Provider: FlowComponent<{ value: T }>;
- *   defaultValue: T;
+ * 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>;
  * }
- * export function createContext<T>(
- *   defaultValue?: T,
- *   options?: { name?: string }
- * ): Context<T | undefined>;
  * ```
- * @param defaultValue optional default to inject into context
- * @param options allows to set a name in dev mode for debugging purposes
- * @returns The context that contains the Provider Component and that can be used with `useContext`
  *
  * @description https://docs.solidjs.com/reference/component-apis/create-context
  */
-export declare function createContext<T>(defaultValue?: undefined, options?: EffectOptions): Context<T | undefined>;
-export declare function createContext<T>(defaultValue: T, options?: EffectOptions): Context<T>;
+export declare function createContext<T>(defaultValue?: T, options?: EffectOptions): Context<T>;
 /**
- * Uses a context to receive a scoped state from a parent's Context.Provider
+ * 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.
  *
- * @param context Context object made by `createContext`
- * @returns the current or `defaultValue`, if present
+ * 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 ResolvedJSXElement = Exclude<JSX.Element, JSX.ArrayElement>;
-export type ResolvedChildren = ResolvedJSXElement | ResolvedJSXElement[];
+export type ResolvedElement = Exclude<SolidElement, ArrayElement>;
+export type ResolvedChildren = ResolvedElement | ResolvedElement[];
 export type ChildrenReturn = Accessor<ResolvedChildren> & {
-    toArray: () => ResolvedJSXElement[];
+    toArray: () => ResolvedElement[];
 };
 /**
- * Resolves child elements to help interact with children
+ * 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 a accessor of the same children, but resolved
+ * @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<JSX.Element>): ChildrenReturn;
+export declare function children(fn: Accessor<SolidElement>): ChildrenReturn;
 export declare function devComponent<P, V>(Comp: (props: P) => V, props: P): V;
-interface SourceMapValue {
-    value: unknown;
-    name?: string;
-    graph?: Owner;
-}
-export declare function registerGraph(value: SourceMapValue): void;
-export {};