solid-js 2.0.0-experimental.1 → 2.0.0-experimental.3

package/dist/solid.js

@@ -1,15 +1,66 @@
-import { createEffect, getContext, createMemo, flatten, setContext, untrack, createRoot, getOwner, onCleanup, createSignal, createAsync, mapArray, repeat, createErrorBoundary, createSuspense } from '@solidjs/signals';
-export { $PROXY, $RAW, $TRACK, catchError, createAsync, createEffect, createMemo, createProjection, createReaction, createRenderEffect, createRoot, createSignal, createStore, flatten, flushSync, getObserver, getOwner, isEqual, isStale, isWrappable, latest, mapArray, merge, omit, onCleanup, reconcile, repeat, resolve, runWithOwner, untrack, unwrap } from '@solidjs/signals';
+import {
+  createEffect,
+  getContext,
+  createMemo,
+  flatten,
+  setContext,
+  untrack,
+  createRoot,
+  getOwner,
+  onCleanup,
+  createSignal,
+  createAsync,
+  mapArray,
+  repeat,
+  createErrorBoundary,
+  createSuspense
+} from "@solidjs/signals";
+export {
+  $PROXY,
+  $RAW,
+  $TRACK,
+  catchError,
+  createAsync,
+  createEffect,
+  createMemo,
+  createProjection,
+  createRenderEffect,
+  createRoot,
+  createSignal,
+  createStore,
+  flatten,
+  flushSync,
+  getObserver,
+  getOwner,
+  isEqual,
+  isPending,
+  isWrappable,
+  latest,
+  mapArray,
+  merge,
+  omit,
+  onCleanup,
+  reconcile,
+  repeat,
+  resolve,
+  runWithObserver,
+  runWithOwner,
+  untrack,
+  unwrap
+} from "@solidjs/signals";
 
 const $DEVCOMP = Symbol(0);
 function onMount(fn) {
   createEffect(() => null, fn);
 }
 function createContext(defaultValue, options) {
-  const id = Symbol(options && options.name || "");
+  const id = Symbol((options && options.name) || "");
   function provider(props) {
     return createMemo(() => {
-      setContext(provider, untrack(() => props.value));
+      setContext(
+        provider,
+        untrack(() => props.value)
+      );
       return children(() => props.children);
     });
   }
@@ -36,16 +87,20 @@ function observable(input) {
       if (!(observer instanceof Object) || observer == null) {
         throw new TypeError("Expected the observer to be an object.");
       }
-      const handler = typeof observer === "function" ? observer : observer.next && observer.next.bind(observer);
+      const handler =
+        typeof observer === "function" ? observer : observer.next && observer.next.bind(observer);
       if (!handler) {
         return {
           unsubscribe() {}
         };
       }
       const dispose = createRoot(disposer => {
-        createEffect(() => input(), v => {
-          handler(v);
-        });
+        createEffect(
+          () => input(),
+          v => {
+            handler(v);
+          }
+        );
         return disposer;
       });
       if (getOwner()) onCleanup(dispose);
@@ -60,13 +115,13 @@ function observable(input) {
     }
   };
 }
-function from(producer) {
-  const [s, set] = createSignal(undefined, {
+function from(producer, initialValue = undefined) {
+  const [s, set] = createSignal(() => initialValue, initialValue, {
     equals: false
   });
   if ("subscribe" in producer) {
     const unsub = producer.subscribe(v => set(() => v));
-    onCleanup(() => "unsubscribe" in unsub ? unsub.unsubscribe() : unsub());
+    onCleanup(() => ("unsubscribe" in unsub ? unsub.unsubscribe() : unsub()));
   } else {
     const clean = producer(set);
     onCleanup(clean);
@@ -138,16 +193,20 @@ function lazy(fn) {
       comp = s;
     }
     let Comp;
-    return createMemo(() => (Comp = comp()) ? untrack(() => {
-      if (!ctx || sharedConfig.done) return Comp(props);
-      const c = sharedConfig.context;
-      setHydrateContext(ctx);
-      const r = Comp(props);
-      setHydrateContext(c);
-      return r;
-    }) : "");
+    return createMemo(() =>
+      (Comp = comp())
+        ? untrack(() => {
+            if (!ctx || sharedConfig.done) return Comp(props);
+            const c = sharedConfig.context;
+            setHydrateContext(ctx);
+            const r = Comp(props);
+            setHydrateContext(c);
+            return r;
+          })
+        : ""
+    );
   };
-  wrap.preload = () => p || ((p = fn()).then(mod => comp = () => mod.default), p);
+  wrap.preload = () => p || ((p = fn()).then(mod => (comp = () => mod.default)), p);
   return wrap;
 }
 let counter = 0;
@@ -158,80 +217,145 @@ function createUniqueId() {
 
 const narrowedError = name => `Stale read from <${name}>.`;
 function For(props) {
-  const options = "fallback" in props ? {
-    keyed: props.keyed,
-    fallback: () => props.fallback
-  } : {
-    keyed: props.keyed
-  };
+  const options =
+    "fallback" in props
+      ? {
+          keyed: props.keyed,
+          fallback: () => props.fallback
+        }
+      : {
+          keyed: props.keyed
+        };
   return createMemo(mapArray(() => props.each, props.children, options));
 }
 function Repeat(props) {
-  const options = "fallback" in props ? {
-    fallback: () => props.fallback
-  } : {};
-  return createMemo(repeat(() => props.count, index => typeof props.children === "function" ? props.children(index) : props.children, options));
+  const options =
+    "fallback" in props
+      ? {
+          fallback: () => props.fallback
+        }
+      : {};
+  return createMemo(
+    repeat(
+      () => props.count,
+      index => (typeof props.children === "function" ? props.children(index) : props.children),
+      options
+    )
+  );
 }
 function Show(props) {
   const keyed = props.keyed;
-  const condition = createMemo(() => props.when, undefined, {
-    equals: (a, b) => keyed ? a === b : !a === !b
-  });
-  return createMemo(() => {
-    const c = condition();
-    if (c) {
-      const child = props.children;
-      const fn = typeof child === "function" && child.length > 0;
-      return fn ? untrack(() => child(() => {
-        if (!untrack(condition)) throw narrowedError("Show");
-        return props.when;
-      })) : child;
-    }
-    return props.fallback;
-  }, undefined, undefined);
+  const conditionValue = createMemo(() => props.when, undefined, undefined);
+  const condition = keyed
+    ? conditionValue
+    : createMemo(conditionValue, undefined, {
+        equals: (a, b) => !a === !b
+      });
+  return createMemo(
+    () => {
+      const c = condition();
+      if (c) {
+        const child = props.children;
+        const fn = typeof child === "function" && child.length > 0;
+        return fn
+          ? untrack(() =>
+              child(() => {
+                if (!untrack(condition)) throw narrowedError("Show");
+                return conditionValue();
+              })
+            )
+          : child;
+      }
+      return props.fallback;
+    },
+    undefined,
+    undefined
+  );
 }
 function Switch(props) {
-  let keyed = false;
-  const equals = (a, b) => (keyed ? a[1] === b[1] : !a[1] === !b[1]) && a[2] === b[2];
-  const conditions = children(() => props.children),
-    evalConditions = createMemo(() => {
-      let conds = conditions();
-      if (!Array.isArray(conds)) conds = [conds];
-      for (let i = 0; i < conds.length; i++) {
-        const c = conds[i].when;
-        if (c) {
-          keyed = !!conds[i].keyed;
-          return [i, c, conds[i]];
-        }
-      }
-      return [-1];
-    }, undefined, {
-      equals
-    });
-  return createMemo(() => {
-    const [index, when, cond] = evalConditions();
-    if (index < 0) return props.fallback;
-    const c = cond.children;
-    const fn = typeof c === "function" && c.length > 0;
-    return fn ? untrack(() => c(() => {
-      if (untrack(evalConditions)[0] !== index) throw narrowedError("Match");
-      return cond.when;
-    })) : c;
-  }, undefined, undefined);
+  const chs = children(() => props.children);
+  const switchFunc = createMemo(() => {
+    const ch = chs();
+    const mps = Array.isArray(ch) ? ch : [ch];
+    let func = () => undefined;
+    for (let i = 0; i < mps.length; i++) {
+      const index = i;
+      const mp = mps[i];
+      const prevFunc = func;
+      const conditionValue = createMemo(
+        () => (prevFunc() ? undefined : mp.when),
+        undefined,
+        undefined
+      );
+      const condition = mp.keyed
+        ? conditionValue
+        : createMemo(conditionValue, undefined, {
+            equals: (a, b) => !a === !b
+          });
+      func = () => prevFunc() || (condition() ? [index, conditionValue, mp] : undefined);
+    }
+    return func;
+  });
+  return createMemo(
+    () => {
+      const sel = switchFunc()();
+      if (!sel) return props.fallback;
+      const [index, conditionValue, mp] = sel;
+      const child = mp.children;
+      const fn = typeof child === "function" && child.length > 0;
+      return fn
+        ? untrack(() =>
+            child(() => {
+              if (untrack(switchFunc)()?.[0] !== index) throw narrowedError("Match");
+              return conditionValue();
+            })
+          )
+        : child;
+    },
+    undefined,
+    undefined
+  );
 }
 function Match(props) {
   return props;
 }
 function ErrorBoundary(props) {
-  return createErrorBoundary(() => props.children, (err, reset) => {
-    const f = props.fallback;
-    return typeof f === "function" && f.length ? f(err, reset) : f;
-  });
+  return createErrorBoundary(
+    () => props.children,
+    (err, reset) => {
+      const f = props.fallback;
+      return typeof f === "function" && f.length ? f(err, reset) : f;
+    }
+  );
 }
 function Suspense(props) {
-  return createSuspense(() => props.children, () => props.fallback);
+  return createSuspense(
+    () => props.children,
+    () => props.fallback
+  );
 }
 
 const DEV = undefined;
 
-export { $DEVCOMP, DEV, ErrorBoundary, For, Match, Repeat, Show, Suspense, Switch, children, createComponent, createContext, createUniqueId, enableHydration, from, lazy, observable, onMount, sharedConfig, useContext };
+export {
+  $DEVCOMP,
+  DEV,
+  ErrorBoundary,
+  For,
+  Match,
+  Repeat,
+  Show,
+  Suspense,
+  Switch,
+  children,
+  createComponent,
+  createContext,
+  createUniqueId,
+  enableHydration,
+  from,
+  lazy,
+  observable,
+  onMount,
+  sharedConfig,
+  useContext
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "2.0.0-experimental.1",
+  "version": "2.0.0-experimental.3",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -79,7 +79,7 @@
     "performance"
   ],
   "dependencies": {
-    "@solidjs/signals": "^0.1.0",
+    "@solidjs/signals": "^0.2.3",
     "csstype": "^3.1.0"
   },
   "scripts": {

package/types/client/component.d.ts

@@ -11,7 +11,7 @@ export type Component<P extends Record<string, any> = {}> = (props: P) => JSX.El
  * would silently throw them away.
  */
 export type VoidProps<P extends Record<string, any> = {}> = P & {
-    children?: never;
+  children?: never;
 };
 /**
  * `VoidComponent` forbids the `children` prop.
@@ -25,7 +25,7 @@ export type VoidComponent<P extends Record<string, any> = {}> = Component<VoidPr
  * Use this for components that you want to accept children.
  */
 export type ParentProps<P extends Record<string, any> = {}> = P & {
-    children?: JSX.Element;
+  children?: JSX.Element;
 };
 /**
  * `ParentComponent` allows an optional `children` prop with the usual
@@ -40,7 +40,7 @@ export type ParentComponent<P extends Record<string, any> = {}> = Component<Pare
  * Note that all JSX <Elements> are of the type `JSX.Element`.
  */
 export type FlowProps<P extends Record<string, any> = {}, C = JSX.Element> = P & {
-    children: C;
+  children: C;
 };
 /**
  * `FlowComponent` requires a `children` prop with the specified type.
@@ -48,7 +48,9 @@ export type FlowProps<P extends Record<string, any> = {}, C = JSX.Element> = P &
  * 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 FlowComponent<P extends Record<string, any> = {}, C = JSX.Element> = Component<
+  FlowProps<P, C>
+>;
 export type ValidComponent = keyof JSX.IntrinsicElements | Component<any> | (string & {});
 /**
  * Takes the props of the passed component and returns its type
@@ -57,19 +59,28 @@ export type ValidComponent = keyof JSX.IntrinsicElements | Component<any> | (str
  * ComponentProps<typeof Portal> // { mount?: Node; useShadow?: boolean; children: JSX.Element }
  * ComponentProps<'div'> // JSX.HTMLAttributes<HTMLDivElement>
  */
-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
+  : T extends keyof JSX.IntrinsicElements
+  ? JSX.IntrinsicElements[T]
+  : Record<string, unknown>;
 /**
  * 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;
-export declare function lazy<T extends Component<any>>(fn: () => Promise<{
+export declare function createComponent<T extends Record<string, any>>(
+  Comp: Component<T>,
+  props: T
+): JSX.Element;
+export declare function lazy<T extends Component<any>>(
+  fn: () => Promise<{
     default: T;
-}>): T & {
-    preload: () => Promise<{
-        default: T;
-    }>;
+  }>
+): T & {
+  preload: () => Promise<{
+    default: T;
+  }>;
 };
 export declare function createUniqueId(): string;

package/types/client/core.d.ts

@@ -12,11 +12,11 @@ export declare const $DEVCOMP: unique symbol;
 export declare function onMount(fn: () => void): void;
 export type NoInfer<T extends any> = [T][T extends any ? 0 : never];
 export type ContextProviderComponent<T> = FlowComponent<{
-    value: T;
+  value: T;
 }>;
 export interface Context<T> extends ContextProviderComponent<T> {
-    id: symbol;
-    defaultValue: T;
+  id: symbol;
+  defaultValue: T;
 }
 /**
  * Creates a Context to handle a state scoped for the children of a component
@@ -37,7 +37,10 @@ export interface Context<T> extends ContextProviderComponent<T> {
  *
  * @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?: undefined,
+  options?: EffectOptions
+): Context<T | undefined>;
 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
@@ -51,7 +54,7 @@ export declare function useContext<T>(context: Context<T>): T;
 export type ResolvedJSXElement = Exclude<JSX.Element, JSX.ArrayElement>;
 export type ResolvedChildren = ResolvedJSXElement | ResolvedJSXElement[];
 export type ChildrenReturn = Accessor<ResolvedChildren> & {
-    toArray: () => ResolvedJSXElement[];
+  toArray: () => ResolvedJSXElement[];
 };
 /**
  * Resolves child elements to help interact with children
@@ -64,9 +67,9 @@ export type ChildrenReturn = Accessor<ResolvedChildren> & {
 export declare function children(fn: Accessor<JSX.Element>): ChildrenReturn;
 export declare function devComponent<P, V>(Comp: (props: P) => V, props: P): V;
 interface SourceMapValue {
-    value: unknown;
-    name?: string;
-    graph?: Owner;
+  value: unknown;
+  name?: string;
+  graph?: Owner;
 }
 export declare function registerGraph(value: SourceMapValue): void;
 export {};

package/types/client/flow.d.ts

@@ -13,10 +13,10 @@ import type { JSX } from "../jsx.js";
  * @description https://docs.solidjs.com/reference/components/for
  */
 export declare function For<T extends readonly any[], U extends JSX.Element>(props: {
-    each: T | undefined | null | false;
-    fallback?: JSX.Element;
-    keyed?: boolean | ((item: T) => any);
-    children: (item: Accessor<T[number]>, index: Accessor<number>) => U;
+  each: T | undefined | null | false;
+  fallback?: JSX.Element;
+  keyed?: boolean | ((item: T) => any);
+  children: (item: Accessor<T[number]>, index: Accessor<number>) => U;
 }): JSX.Element;
 /**
  * Creates a list elements from a count
@@ -31,19 +31,19 @@ export declare function For<T extends readonly any[], U extends JSX.Element>(pro
  * @description https://docs.solidjs.com/reference/components/repeat
  */
 export declare function Repeat<T extends JSX.Element>(props: {
-    count: number;
-    fallback?: JSX.Element;
-    children: ((index: number) => T) | T;
+  count: number;
+  fallback?: JSX.Element;
+  children: ((index: number) => T) | T;
 }): JSX.Element;
 /**
  * Conditionally render its children or an optional fallback component
  * @description https://docs.solidjs.com/reference/components/show
  */
 export declare function Show<T>(props: {
-    when: T | undefined | null | false;
-    keyed?: boolean;
-    fallback?: JSX.Element;
-    children: JSX.Element | ((item: Accessor<NonNullable<T>>) => JSX.Element);
+  when: T | undefined | null | false;
+  keyed?: boolean;
+  fallback?: JSX.Element;
+  children: JSX.Element | ((item: Accessor<NonNullable<T>>) => JSX.Element);
 }): JSX.Element;
 /**
  * Switches between content based on mutually exclusive conditions
@@ -60,13 +60,13 @@ export declare function Show<T>(props: {
  * @description https://docs.solidjs.com/reference/components/switch-and-match
  */
 export declare function Switch(props: {
-    fallback?: JSX.Element;
-    children: JSX.Element;
+  fallback?: JSX.Element;
+  children: JSX.Element;
 }): JSX.Element;
 export type MatchProps<T> = {
-    when: T | undefined | null | false;
-    keyed?: boolean;
-    children: JSX.Element | ((item: Accessor<NonNullable<T>>) => JSX.Element);
+  when: T | undefined | null | false;
+  keyed?: boolean;
+  children: JSX.Element | ((item: Accessor<NonNullable<T>>) => JSX.Element);
 };
 /**
  * Selects a content based on condition when inside a `<Switch>` control flow
@@ -94,8 +94,8 @@ export declare function Match<T>(props: MatchProps<T>): JSX.Element;
  * @description https://docs.solidjs.com/reference/components/error-boundary
  */
 export declare function ErrorBoundary(props: {
-    fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
-    children: JSX.Element;
+  fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
+  children: JSX.Element;
 }): JSX.Element;
 /**
  * Tracks all resources inside a component and renders a fallback until they are all resolved
@@ -109,6 +109,6 @@ export declare function ErrorBoundary(props: {
  * @description https://docs.solidjs.com/reference/components/suspense
  */
 export declare function Suspense(props: {
-    fallback?: JSX.Element;
-    children: JSX.Element;
+  fallback?: JSX.Element;
+  children: JSX.Element;
 }): JSX.Element;

package/types/client/hydration.d.ts

@@ -1,20 +1,20 @@
 export type HydrationContext = {
-    id: string;
-    count: number;
+  id: string;
+  count: number;
 };
 type SharedConfig = {
-    context?: HydrationContext;
-    resources?: {
-        [key: string]: any;
-    };
-    load?: (id: string) => Promise<any> | any;
-    has?: (id: string) => boolean;
-    gather?: (key: string) => void;
-    registry?: Map<string, Element>;
-    done?: boolean;
-    count?: number;
-    getContextId(): string;
-    getNextContextId(): string;
+  context?: HydrationContext;
+  resources?: {
+    [key: string]: any;
+  };
+  load?: (id: string) => Promise<any> | any;
+  has?: (id: string) => boolean;
+  gather?: (key: string) => void;
+  registry?: Map<string, Element>;
+  done?: boolean;
+  count?: number;
+  getContextId(): string;
+  getNextContextId(): string;
 };
 export declare const sharedConfig: SharedConfig;
 export declare function setHydrateContext(context?: HydrationContext): void;

package/types/client/observable.d.ts

@@ -1,20 +1,22 @@
 import { Accessor, Setter } from "@solidjs/signals";
 declare global {
-    interface SymbolConstructor {
-        readonly observable: symbol;
-    }
+  interface SymbolConstructor {
+    readonly observable: symbol;
+  }
 }
 interface Observable<T> {
-    subscribe(observer: ObservableObserver<T>): {
-        unsubscribe(): void;
-    };
-    [Symbol.observable](): Observable<T>;
+  subscribe(observer: ObservableObserver<T>): {
+    unsubscribe(): void;
+  };
+  [Symbol.observable](): Observable<T>;
 }
-export type ObservableObserver<T> = ((v: T) => void) | {
-    next?: (v: T) => void;
-    error?: (v: any) => void;
-    complete?: (v: boolean) => void;
-};
+export type ObservableObserver<T> =
+  | ((v: T) => void)
+  | {
+      next?: (v: T) => void;
+      error?: (v: any) => void;
+      complete?: (v: boolean) => void;
+    };
 /**
  * Creates a simple observable from a signal's accessor to be used with the `from` operator of observable libraries like e.g. rxjs
  * ```typescript
@@ -26,9 +28,15 @@ export type ObservableObserver<T> = ((v: T) => void) | {
  * description https://docs.solidjs.com/reference/reactive-utilities/observable
  */
 export declare function observable<T>(input: Accessor<T>): Observable<T>;
-export declare function from<T>(producer: ((setter: Setter<T | undefined>) => () => void) | {
-    subscribe: (fn: (v: T) => void) => (() => void) | {
-        unsubscribe: () => void;
+type Producer<T> =
+  | ((setter: Setter<T>) => () => void)
+  | {
+      subscribe: (fn: (v: T) => void) =>
+        | (() => void)
+        | {
+            unsubscribe: () => void;
+          };
     };
-}): Accessor<T | undefined>;
+export declare function from<T>(producer: Producer<T>, initalValue: T): Accessor<T>;
+export declare function from<T>(producer: Producer<T | undefined>): Accessor<T | undefined>;
 export {};