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

package/dist/solid.js

@@ -1,5 +1,5 @@
-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, createRoot, setContext, NotReadyError, getOwner, onCleanup, createSignal, getNextChildId, createLoadBoundary, flush, runWithOwner, createAsync as createAsync$1, untrack, mapArray, repeat, createErrorBoundary, createBoundary } from '@solidjs/signals';
+export { $PROXY, $TRACK, createEffect, createMemo, createOptimistic, createOptimisticStore, createProjection, createReaction, createRenderEffect, createRoot, createSignal, createStore, createTrackedEffect, deep, flatten, flush, getObserver, getOwner, isEqual, isPending, isWrappable, mapArray, merge, omit, onCleanup, onSettled, pending, reconcile, repeat, resolve, runWithOwner, snapshot, untrack } from '@solidjs/signals';
 
 const $DEVCOMP = Symbol(0);
 function onMount(fn) {
@@ -8,8 +8,8 @@ function onMount(fn) {
 function createContext(defaultValue, options) {
   const id = Symbol(options && options.name || "");
   function provider(props) {
-    return createMemo(() => {
-      setContext(provider, untrack(() => props.value));
+    return createRoot(() => {
+      setContext(provider, props.value);
       return children(() => props.children);
     });
   }
@@ -30,6 +30,27 @@ function children(fn) {
   return memo;
 }
 
+function tryCatch(fn) {
+  try {
+    const v = fn();
+    if (v instanceof Promise) {
+      return v.then(v => [undefined, v], e => {
+        if (e instanceof NotReadyError) throw e;
+        return [e];
+      });
+    }
+    return [undefined, v];
+  } catch (e) {
+    if (e instanceof NotReadyError) throw e;
+    return [e];
+  }
+}
+function reducer(source, reducerFn) {
+  return [source[0], action => {
+    source[1](s => reducerFn(s, action));
+  }];
+}
+
 function observable(input) {
   return {
     subscribe(observer) {
@@ -60,8 +81,8 @@ 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) {
@@ -75,76 +96,117 @@ function from(producer) {
 }
 
 const sharedConfig = {
-  context: undefined,
+  hydrating: false,
   registry: undefined,
   done: false,
-  getContextId() {
-    return getContextId(this.context.count);
-  },
   getNextContextId() {
-    return getContextId(this.context.count++);
+    const o = getOwner();
+    if (!o) throw new Error(`getNextContextId cannot be used under non-hydrating context`);
+    return getNextChildId(o);
   }
 };
-function getContextId(count) {
-  const num = String(count),
-    len = num.length - 1;
-  return sharedConfig.context.id + (len ? String.fromCharCode(96 + len) : "") + num;
+function Loading(props) {
+  if (!sharedConfig.hydrating) return createLoadBoundary(() => props.children, () => props.fallback);
+  return createMemo(() => {
+    const o = getOwner();
+    const id = o.id;
+    if (sharedConfig.hydrating && sharedConfig.has(id)) {
+      let ref = sharedConfig.load(id);
+      let p;
+      if (ref) {
+        if (typeof ref !== "object" || ref.s !== "success") p = ref;else sharedConfig.gather(id);
+      }
+      if (p) {
+        const [s, set] = createSignal(undefined, {
+          equals: false
+        });
+        s();
+        if (p !== "$$f") {
+          p.then(() => {
+            sharedConfig.gather(id);
+            sharedConfig.hydrating = true;
+            set();
+            flush();
+            sharedConfig.hydrating = false;
+          }, err => runWithOwner(o, () => {
+            throw err;
+          }));
+        } else queueMicrotask(set);
+        return props.fallback;
+      }
+    }
+    return createLoadBoundary(() => props.children, () => props.fallback);
+  });
 }
-function setHydrateContext(context) {
-  sharedConfig.context = context;
+function createAsync(compute, value, options) {
+  if (!sharedConfig.hydrating) return createAsync$1(compute, value, options);
+  return createAsync$1(prev => {
+    if (!sharedConfig.hydrating) return compute(prev);
+    const o = getOwner();
+    let initP;
+    if (sharedConfig.has(o.id)) initP = sharedConfig.load(o.id);
+    const init = initP?.value || initP;
+    return init ? (subFetch(compute, prev), init) : compute(prev);
+  }, value, options);
 }
-function nextHydrateContext() {
-  return {
-    ...sharedConfig.context,
-    id: sharedConfig.getNextContextId(),
-    count: 0
-  };
+class MockPromise {
+  static all() {
+    return new MockPromise();
+  }
+  static allSettled() {
+    return new MockPromise();
+  }
+  static any() {
+    return new MockPromise();
+  }
+  static race() {
+    return new MockPromise();
+  }
+  static reject() {
+    return new MockPromise();
+  }
+  static resolve() {
+    return new MockPromise();
+  }
+  catch() {
+    return new MockPromise();
+  }
+  then() {
+    return new MockPromise();
+  }
+  finally() {
+    return new MockPromise();
+  }
+}
+function subFetch(fn, prev) {
+  const ogFetch = fetch;
+  const ogPromise = Promise;
+  try {
+    window.fetch = () => new MockPromise();
+    Promise = MockPromise;
+    return fn(prev);
+  } finally {
+    window.fetch = ogFetch;
+    Promise = ogPromise;
+  }
 }
 
-let hydrationEnabled = false;
 function enableHydration() {
-  hydrationEnabled = true;
 }
 function createComponent(Comp, props) {
-  if (hydrationEnabled) {
-    if (sharedConfig.context) {
-      const c = sharedConfig.context;
-      setHydrateContext(nextHydrateContext());
-      const r = untrack(() => Comp(props || {}));
-      setHydrateContext(c);
-      return r;
-    }
-  }
   return untrack(() => Comp(props || {}));
 }
 function lazy(fn) {
   let comp;
   let p;
   const wrap = props => {
-    const ctx = sharedConfig.context;
-    if (ctx) {
-      const [s, set] = createSignal();
-      sharedConfig.count || (sharedConfig.count = 0);
-      sharedConfig.count++;
-      (p || (p = fn())).then(mod => {
-        !sharedConfig.done && setHydrateContext(ctx);
-        sharedConfig.count--;
-        set(() => mod.default);
-        setHydrateContext();
-      });
-      comp = s;
-    } else if (!comp) {
-      const s = createAsync(() => (p || (p = fn())).then(mod => mod.default));
+    if (!comp) {
+      const s = createAsync$1(() => (p || (p = fn())).then(mod => mod.default));
       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 Comp(props);
     }) : "");
   };
   wrap.preload = () => p || ((p = fn()).then(mod => comp = () => mod.default), p);
@@ -152,8 +214,7 @@ function lazy(fn) {
 }
 let counter = 0;
 function createUniqueId() {
-  const ctx = sharedConfig.context;
-  return ctx ? sharedConfig.getNextContextId() : `cl-${counter++}`;
+  return sharedConfig.hydrating ? sharedConfig.getNextContextId() : `cl-${counter++}`;
 }
 
 const narrowedError = name => `Stale read from <${name}>.`;
@@ -164,18 +225,20 @@ function For(props) {
   } : {
     keyed: props.keyed
   };
-  return createMemo(mapArray(() => props.each, props.children, options));
+  return 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));
+  options.from = () => props.from;
+  return 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
+  const conditionValue = createMemo(() => props.when, undefined, undefined);
+  const condition = keyed ? conditionValue : createMemo(conditionValue, undefined, {
+    equals: (a, b) => !a === !b
   });
   return createMemo(() => {
     const c = condition();
@@ -184,54 +247,56 @@ function Show(props) {
       const fn = typeof child === "function" && child.length > 0;
       return fn ? untrack(() => child(() => {
         if (!untrack(condition)) throw narrowedError("Show");
-        return props.when;
+        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
-    });
+  const chs = children(() => props.children);
+  const switchFunc = createMemo(() => {
+    const mps = chs.toArray();
+    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 [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;
+    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) {
+function Errored(props) {
   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);
+function Boundary(props) {
+  return createBoundary(() => props.children, () => props.mode);
 }
 
+function ssrHandleError() {}
+function ssrRunInScope() {}
 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, Boundary, DEV, Errored, For, Loading, Match, Repeat, Show, Switch, children, createAsync, createComponent, createContext, createUniqueId, enableHydration, from, lazy, observable, onMount, reducer, sharedConfig, ssrHandleError, ssrRunInScope, tryCatch, 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.11",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -79,8 +79,10 @@
     "performance"
   ],
   "dependencies": {
-    "@solidjs/signals": "^0.1.0",
-    "csstype": "^3.1.0"
+    "@solidjs/signals": "^0.8.0",
+    "csstype": "^3.1.0",
+    "seroval": "~1.3.0",
+    "seroval-plugins": "~1.3.0"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",

package/types/client/component.d.ts

@@ -21,7 +21,7 @@ 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, functions, etc.).
+ * type in JSX, `JSX.Element` (which allows elements, arrays, strings, etc.).
  * Use this for components that you want to accept children.
  */
 export type ParentProps<P extends Record<string, any> = {}> = P & {
@@ -29,7 +29,7 @@ export type ParentProps<P extends Record<string, any> = {}> = P & {
 };
 /**
  * `ParentComponent` allows an optional `children` prop with the usual
- * type in JSX, `JSX.Element` (which allows elements, arrays, functions, etc.).
+ * type in JSX, `JSX.Element` (which allows elements, arrays, strings, etc.).
  * Use this for components that you want to accept children.
  */
 export type ParentComponent<P extends Record<string, any> = {}> = Component<ParentProps<P>>;

package/types/client/flow.d.ts

@@ -1,4 +1,4 @@
-import type { Accessor } from "@solidjs/signals";
+import type { Accessor, BoundaryMode } from "@solidjs/signals";
 import type { JSX } from "../jsx.js";
 /**
  * Creates a list of elements from a list
@@ -15,7 +15,7 @@ import type { JSX } from "../jsx.js";
 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);
+    keyed?: boolean | ((item: T[number]) => any);
     children: (item: Accessor<T[number]>, index: Accessor<number>) => U;
 }): JSX.Element;
 /**
@@ -32,6 +32,7 @@ export declare function For<T extends readonly any[], U extends JSX.Element>(pro
  */
 export declare function Repeat<T extends JSX.Element>(props: {
     count: number;
+    from?: number | undefined;
     fallback?: JSX.Element;
     children: ((index: number) => T) | T;
 }): JSX.Element;
@@ -83,32 +84,21 @@ export declare function Match<T>(props: MatchProps<T>): JSX.Element;
  *
  * Also supports a callback form that passes the error and a reset function:
  * ```typescript
- * <ErrorBoundary fallback={
+ * <Errored fallback={
  *   (err, reset) => <div onClick={reset}>Error: {err.toString()}</div>
  * }>
  *   <MyComp />
- * </ErrorBoundary>
+ * </Errored>
  * ```
- * Errors thrown from the fallback can be caught by a parent ErrorBoundary
+ * Errors thrown from the fallback can be caught by a parent Errored
  *
  * @description https://docs.solidjs.com/reference/components/error-boundary
  */
-export declare function ErrorBoundary(props: {
+export declare function Errored(props: {
     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
- * ```typescript
- * const AsyncComponent = lazy(() => import('./component'));
- *
- * <Suspense fallback={<LoadingIndicator />}>
- *   <AsyncComponent />
- * </Suspense>
- * ```
- * @description https://docs.solidjs.com/reference/components/suspense
- */
-export declare function Suspense(props: {
-    fallback?: JSX.Element;
+export declare function Boundary(props: {
+    mode: BoundaryMode;
     children: JSX.Element;
 }): JSX.Element;

package/types/client/hydration.d.ts

@@ -1,9 +1,8 @@
-export type HydrationContext = {
-    id: string;
-    count: number;
-};
+import { MemoOptions } from "@solidjs/signals";
+import { JSX } from "../jsx.js";
+export type HydrationContext = {};
 type SharedConfig = {
-    context?: HydrationContext;
+    hydrating: boolean;
     resources?: {
         [key: string]: any;
     };
@@ -11,12 +10,41 @@ type SharedConfig = {
     has?: (id: string) => boolean;
     gather?: (key: string) => void;
     registry?: Map<string, Element>;
-    done?: boolean;
-    count?: number;
-    getContextId(): string;
+    done: boolean;
     getNextContextId(): string;
 };
 export declare const sharedConfig: SharedConfig;
-export declare function setHydrateContext(context?: HydrationContext): void;
-export declare function nextHydrateContext(): HydrationContext | undefined;
+/**
+ * Tracks all resources inside a component and renders a fallback until they are all resolved
+ * ```typescript
+ * const AsyncComponent = lazy(() => import('./component'));
+ *
+ * <Loading fallback={<LoadingIndicator />}>
+ *   <AsyncComponent />
+ * </Loading>
+ * ```
+ * @description https://docs.solidjs.com/reference/components/suspense
+ */
+export declare function Loading(props: {
+    fallback?: JSX.Element;
+    children: JSX.Element;
+}): JSX.Element;
+/**
+ * Creates a readonly derived async reactive memoized signal
+ * ```typescript
+ * export function createAsync<T>(
+ *   compute: (v: T) => Promise<T> | T,
+ *   value?: T,
+ *   options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
+ * ): () => T & { refresh: () => void };
+ * ```
+ * @param compute a function that receives its previous or the initial value, if set, and returns a new value used to react on a computation
+ * @param value an optional initial value for the computation; if set, fn will never receive undefined as first argument
+ * @param options allows to set a name in dev mode for debugging purposes and use a custom comparison function in equals
+ *
+ * @description https://docs.solidjs.com/reference/basic-reactivity/create-async
+ */
+export declare function createAsync<T>(compute: (prev?: T) => Promise<T> | AsyncIterable<T> | T, value?: T, options?: MemoOptions<T>): import("@solidjs/signals").Accessor<T> & {
+    refresh: () => void;
+};
 export {};

package/types/client/observable.d.ts

@@ -26,9 +26,11 @@ 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) | {
+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 {};

package/types/index.d.ts

@@ -1,11 +1,14 @@
-export { $PROXY, $TRACK, $RAW, 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";
-export type { Accessor, ComputeFunction, EffectFunction, EffectOptions, Merge, NoInfer, NotWrappable, Omit, Owner, Signal, SignalOptions, Setter, Store, SolidStore, StoreNode, StoreSetter } from "@solidjs/signals";
+export { $PROXY, $TRACK, createEffect, createMemo, createOptimistic, createOptimisticStore, createProjection, createReaction, createRenderEffect, createRoot, createSignal, createStore, createTrackedEffect, deep, flatten, flush, getObserver, getOwner, isEqual, isPending, isWrappable, mapArray, merge, omit, onCleanup, onSettled, pending, reconcile, repeat, resolve, runWithOwner, snapshot, untrack } from "@solidjs/signals";
+export type { Accessor, BoundaryMode, ComputeFunction, EffectFunction, EffectOptions, Merge, NoInfer, NotWrappable, Omit, Owner, Signal, SignalOptions, Setter, Store, SolidStore, StoreNode, StoreSetter } from "@solidjs/signals";
 export { $DEVCOMP, children, createContext, onMount, useContext } from "./client/core.js";
 export type { ChildrenReturn, Context, ContextProviderComponent, ResolvedChildren, ResolvedJSXElement } from "./client/core.js";
+export * from "./utilities.js";
 export * from "./client/observable.js";
 export * from "./client/component.js";
 export * from "./client/flow.js";
-export { sharedConfig } from "./client/hydration.js";
+export { sharedConfig, createAsync, Loading } from "./client/hydration.js";
+export declare function ssrHandleError(): void;
+export declare function ssrRunInScope(): void;
 import type { JSX } from "./jsx.js";
 type JSXElement = JSX.Element;
 export type { JSXElement, JSX };