solid-js 2.0.0-experimental.0 → 2.0.0-experimental.10

package/dist/solid.js

@@ -1,66 +1,15 @@
-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, createSuspense, 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, latest, mapArray, merge, omit, onCleanup, reconcile, repeat, resolve, runWithOwner, snapshot, transition, untrack, useTransition } 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)
-      );
+    return createRoot(() => {
+      setContext(provider, props.value);
       return children(() => props.children);
     });
   }
@@ -81,26 +30,43 @@ 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) {
       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);
@@ -115,13 +81,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);
@@ -130,226 +96,208 @@ 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 o.getNextChildId();
   }
 };
-function getContextId(count) {
-  const num = String(count),
-    len = num.length - 1;
-  return sharedConfig.context.id + (len ? String.fromCharCode(96 + len) : "") + num;
+function Suspense(props) {
+  if (!sharedConfig.hydrating) return createSuspense(() => 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 createSuspense(() => 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 createMemo(() => (Comp = comp()) ? untrack(() => {
+      return Comp(props);
+    }) : "");
   };
-  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;
 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}>.`;
 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
+  } : {};
+  options.from = () => props.from;
+  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)
+  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 props.when;
-              })
-            )
-          : child;
-      }
-      return props.fallback;
-    },
-    undefined,
-    undefined
-  );
+  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
-  );
+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, ErrorBoundary, For, Match, Repeat, Show, Suspense, 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.0",
+  "version": "2.0.0-experimental.10",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -79,8 +79,10 @@
     "performance"
   ],
   "dependencies": {
-    "@solidjs/signals": "^0.0.10",
-    "csstype": "^3.1.0"
+    "@solidjs/signals": "^0.7.1",
+    "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

@@ -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.
@@ -21,15 +21,15 @@ 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 & {
-  children?: JSX.Element;
+    children?: JSX.Element;
 };
 /**
  * `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>>;
@@ -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,9 +48,7 @@ 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
@@ -59,28 +57,19 @@ 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,10 +37,7 @@ 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
@@ -54,7 +51,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
@@ -67,9 +64,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 {};