solid-js 1.2.2 → 1.3.0-beta.0

package/dist/solid.cjs

@@ -184,18 +184,21 @@ function createSignal(value, options) {
     pending: NOTPENDING,
     comparator: options.equals || undefined
   };
-  return [readSignal.bind(s), value => {
+  const setter = value => {
     if (typeof value === "function") {
       if (Transition && Transition.running && Transition.sources.has(s)) value = value(s.pending !== NOTPENDING ? s.pending : s.tValue);else value = value(s.pending !== NOTPENDING ? s.pending : s.value);
     }
     return writeSignal(s, value);
-  }];
+  };
+  return [readSignal.bind(s), setter];
 }
 function createComputed(fn, value, options) {
-  updateComputation(createComputation(fn, value, true, STALE));
+  const c = createComputation(fn, value, true, STALE);
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createRenderEffect(fn, value, options) {
-  updateComputation(createComputation(fn, value, false, STALE));
+  const c = createComputation(fn, value, false, STALE);
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createEffect(fn, value, options) {
   runEffects = runUserEffects;
@@ -212,7 +215,10 @@ function createMemo(fn, value, options) {
   c.observers = null;
   c.observerSlots = null;
   c.comparator = options.equals || undefined;
-  updateComputation(c);
+  if (Scheduler && Transition && Transition.running) {
+    c.tState = STALE;
+    Updates.push(c);
+  } else updateComputation(c);
   return readSignal.bind(c);
 }
 function createResource(source, fetcher, options) {
@@ -241,12 +247,7 @@ function createResource(source, fetcher, options) {
       dynamic = typeof source === "function";
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
-    if (sharedConfig.context.loadResource) {
-      initP = sharedConfig.context.loadResource(id);
-    } else if (sharedConfig.resources && id && id in sharedConfig.resources) {
-      initP = sharedConfig.resources[id];
-      delete sharedConfig.resources[id];
-    }
+    if (sharedConfig.load) initP = sharedConfig.load(id);
   }
   function loadEnd(p, v, e) {
     if (pr === p) {
@@ -401,7 +402,8 @@ function untrack(fn) {
   Listener = listener;
   return result;
 }
-function on(deps, fn, options) {
+function on(deps, fn,
+options) {
   const isArray = Array.isArray(deps);
   let prevInput;
   let defer = options && options.defer;
@@ -1131,6 +1133,9 @@ function splitProps(props, ...keys) {
       Object.defineProperty(clone, key, descriptors[key] ? descriptors[key] : {
         get() {
           return props[key];
+        },
+        set() {
+          return true;
         }
       });
     }
@@ -1153,7 +1158,7 @@ function lazy(fn) {
   let comp;
   const wrap = props => {
     const ctx = sharedConfig.context;
-    if (ctx && sharedConfig.resources) {
+    if (ctx) {
       ctx.count++;
       const [s, set] = createSignal();
       fn().then(mod => {
@@ -1226,7 +1231,7 @@ function Switch(props) {
     }
     return [-1];
   }, undefined, {
-    equals: (a, b) => a && a[0] === b[0] && (strictEqual ? a[1] === b[1] : !a[1] === !b[1]) && a[2] === b[2]
+    equals: (a, b) => a[0] === b[0] && (strictEqual ? a[1] === b[1] : !a[1] === !b[1]) && a[2] === b[2]
   });
   return createMemo(() => {
     const [index, when, cond] = evalConditions();
@@ -1320,7 +1325,10 @@ function SuspenseList(props) {
 function Suspense(props) {
   let counter = 0,
       showContent,
-      showFallback;
+      showFallback,
+      ctx,
+      waitingHydration,
+      flicker;
   const [inFallback, setFallback] = createSignal(false),
         SuspenseContext = getSuspenseContext(),
         store = {
@@ -1333,30 +1341,62 @@ function Suspense(props) {
     inFallback,
     effects: [],
     resolved: false
-  };
+  },
+        owner = getOwner();
+  if (sharedConfig.context && sharedConfig.load) {
+    const key = sharedConfig.context.id + sharedConfig.context.count;
+    const p = sharedConfig.load(key);
+    if (p) {
+      const [s, set] = createSignal(undefined, {
+        equals: false
+      });
+      flicker = s;
+      p.then(() => {
+        sharedConfig.gather(key);
+        waitingHydration = true;
+        setHydrateContext(ctx);
+        set();
+        setHydrateContext(undefined);
+        waitingHydration = false;
+      });
+    }
+  }
   const listContext = useContext(SuspenseListContext);
   if (listContext) [showContent, showFallback] = listContext.register(store.inFallback);
+  let dispose;
+  onCleanup(() => dispose && dispose());
   return createComponent(SuspenseContext.Provider, {
     value: store,
     get children() {
-      const rendered = untrack(() => props.children);
       return createMemo(() => {
-        const inFallback = store.inFallback(),
-              visibleContent = showContent ? showContent() : true,
-              visibleFallback = showFallback ? showFallback() : true;
-        if (!inFallback && visibleContent) {
-          store.resolved = true;
-          resumeEffects(store.effects);
-          return rendered;
+        if (flicker) {
+          ctx = sharedConfig.context;
+          flicker();
+          return flicker = undefined;
         }
-        if (!visibleFallback) return;
-        return props.fallback;
+        const rendered = untrack(() => props.children);
+        return createMemo(() => {
+          const inFallback = store.inFallback(),
+                visibleContent = showContent ? showContent() : true,
+                visibleFallback = showFallback ? showFallback() : true;
+          dispose && dispose();
+          if ((!inFallback || waitingHydration) && visibleContent) {
+            store.resolved = true;
+            resumeEffects(store.effects);
+            return rendered;
+          }
+          if (!visibleFallback) return;
+          return createRoot(disposer => {
+            dispose = disposer;
+            if (sharedConfig.context) sharedConfig.context.count = 0;
+            return props.fallback;
+          }, owner);
+        });
       });
     }
   });
 }
 
-function awaitSuspense() {}
 let DEV;
 
 exports.$PROXY = $PROXY;
@@ -1369,7 +1409,6 @@ exports.Show = Show;
 exports.Suspense = Suspense;
 exports.SuspenseList = SuspenseList;
 exports.Switch = Switch;
-exports.awaitSuspense = awaitSuspense;
 exports.batch = batch;
 exports.cancelCallback = cancelCallback;
 exports.children = children;

package/dist/solid.js

@@ -180,18 +180,21 @@ function createSignal(value, options) {
     pending: NOTPENDING,
     comparator: options.equals || undefined
   };
-  return [readSignal.bind(s), value => {
+  const setter = value => {
     if (typeof value === "function") {
       if (Transition && Transition.running && Transition.sources.has(s)) value = value(s.pending !== NOTPENDING ? s.pending : s.tValue);else value = value(s.pending !== NOTPENDING ? s.pending : s.value);
     }
     return writeSignal(s, value);
-  }];
+  };
+  return [readSignal.bind(s), setter];
 }
 function createComputed(fn, value, options) {
-  updateComputation(createComputation(fn, value, true, STALE));
+  const c = createComputation(fn, value, true, STALE);
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createRenderEffect(fn, value, options) {
-  updateComputation(createComputation(fn, value, false, STALE));
+  const c = createComputation(fn, value, false, STALE);
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createEffect(fn, value, options) {
   runEffects = runUserEffects;
@@ -208,7 +211,10 @@ function createMemo(fn, value, options) {
   c.observers = null;
   c.observerSlots = null;
   c.comparator = options.equals || undefined;
-  updateComputation(c);
+  if (Scheduler && Transition && Transition.running) {
+    c.tState = STALE;
+    Updates.push(c);
+  } else updateComputation(c);
   return readSignal.bind(c);
 }
 function createResource(source, fetcher, options) {
@@ -237,12 +243,7 @@ function createResource(source, fetcher, options) {
       dynamic = typeof source === "function";
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
-    if (sharedConfig.context.loadResource) {
-      initP = sharedConfig.context.loadResource(id);
-    } else if (sharedConfig.resources && id && id in sharedConfig.resources) {
-      initP = sharedConfig.resources[id];
-      delete sharedConfig.resources[id];
-    }
+    if (sharedConfig.load) initP = sharedConfig.load(id);
   }
   function loadEnd(p, v, e) {
     if (pr === p) {
@@ -397,7 +398,8 @@ function untrack(fn) {
   Listener = listener;
   return result;
 }
-function on(deps, fn, options) {
+function on(deps, fn,
+options) {
   const isArray = Array.isArray(deps);
   let prevInput;
   let defer = options && options.defer;
@@ -1127,6 +1129,9 @@ function splitProps(props, ...keys) {
       Object.defineProperty(clone, key, descriptors[key] ? descriptors[key] : {
         get() {
           return props[key];
+        },
+        set() {
+          return true;
         }
       });
     }
@@ -1149,7 +1154,7 @@ function lazy(fn) {
   let comp;
   const wrap = props => {
     const ctx = sharedConfig.context;
-    if (ctx && sharedConfig.resources) {
+    if (ctx) {
       ctx.count++;
       const [s, set] = createSignal();
       fn().then(mod => {
@@ -1222,7 +1227,7 @@ function Switch(props) {
     }
     return [-1];
   }, undefined, {
-    equals: (a, b) => a && a[0] === b[0] && (strictEqual ? a[1] === b[1] : !a[1] === !b[1]) && a[2] === b[2]
+    equals: (a, b) => a[0] === b[0] && (strictEqual ? a[1] === b[1] : !a[1] === !b[1]) && a[2] === b[2]
   });
   return createMemo(() => {
     const [index, when, cond] = evalConditions();
@@ -1316,7 +1321,10 @@ function SuspenseList(props) {
 function Suspense(props) {
   let counter = 0,
       showContent,
-      showFallback;
+      showFallback,
+      ctx,
+      waitingHydration,
+      flicker;
   const [inFallback, setFallback] = createSignal(false),
         SuspenseContext = getSuspenseContext(),
         store = {
@@ -1329,30 +1337,62 @@ function Suspense(props) {
     inFallback,
     effects: [],
     resolved: false
-  };
+  },
+        owner = getOwner();
+  if (sharedConfig.context && sharedConfig.load) {
+    const key = sharedConfig.context.id + sharedConfig.context.count;
+    const p = sharedConfig.load(key);
+    if (p) {
+      const [s, set] = createSignal(undefined, {
+        equals: false
+      });
+      flicker = s;
+      p.then(() => {
+        sharedConfig.gather(key);
+        waitingHydration = true;
+        setHydrateContext(ctx);
+        set();
+        setHydrateContext(undefined);
+        waitingHydration = false;
+      });
+    }
+  }
   const listContext = useContext(SuspenseListContext);
   if (listContext) [showContent, showFallback] = listContext.register(store.inFallback);
+  let dispose;
+  onCleanup(() => dispose && dispose());
   return createComponent(SuspenseContext.Provider, {
     value: store,
     get children() {
-      const rendered = untrack(() => props.children);
       return createMemo(() => {
-        const inFallback = store.inFallback(),
-              visibleContent = showContent ? showContent() : true,
-              visibleFallback = showFallback ? showFallback() : true;
-        if (!inFallback && visibleContent) {
-          store.resolved = true;
-          resumeEffects(store.effects);
-          return rendered;
+        if (flicker) {
+          ctx = sharedConfig.context;
+          flicker();
+          return flicker = undefined;
         }
-        if (!visibleFallback) return;
-        return props.fallback;
+        const rendered = untrack(() => props.children);
+        return createMemo(() => {
+          const inFallback = store.inFallback(),
+                visibleContent = showContent ? showContent() : true,
+                visibleFallback = showFallback ? showFallback() : true;
+          dispose && dispose();
+          if ((!inFallback || waitingHydration) && visibleContent) {
+            store.resolved = true;
+            resumeEffects(store.effects);
+            return rendered;
+          }
+          if (!visibleFallback) return;
+          return createRoot(disposer => {
+            dispose = disposer;
+            if (sharedConfig.context) sharedConfig.context.count = 0;
+            return props.fallback;
+          }, owner);
+        });
       });
     }
   });
 }
 
-function awaitSuspense() {}
 let DEV;
 
-export { $PROXY, DEV, ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, awaitSuspense, batch, cancelCallback, children, createComponent, createComputed, createContext, createDeferred, createEffect, createMemo, createRenderEffect, createResource, createRoot, createSelector, createSignal, createUniqueId, enableScheduling, equalFn, from, getListener, getOwner, indexArray, lazy, mapArray, mergeProps, observable, on, onCleanup, onError, onMount, requestCallback, runWithOwner, sharedConfig, splitProps, startTransition, untrack, useContext, useTransition };
+export { $PROXY, DEV, ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, batch, cancelCallback, children, createComponent, createComputed, createContext, createDeferred, createEffect, createMemo, createRenderEffect, createResource, createRoot, createSelector, createSignal, createUniqueId, enableScheduling, equalFn, from, getListener, getOwner, indexArray, lazy, mapArray, mergeProps, observable, on, onCleanup, onError, onMount, requestCallback, runWithOwner, sharedConfig, splitProps, startTransition, untrack, useContext, useTransition };

package/html/dist/html.cjs

@@ -358,7 +358,8 @@ function createHTML(r, {
             childOptions = Object.assign({}, options, {
         first: true,
         decl: [],
-        exprs: []
+        exprs: [],
+        parent: false
       });
       parseNode(children, childOptions);
       props.push(`children: () => { ${childOptions.exprs.join(";\n")}}`);
@@ -399,8 +400,8 @@ function createHTML(r, {
             decl: [],
             exprs: []
           });
-          parseNode(child, childOptions);
           options.templateNodes.push([child]);
+          parseNode(child, childOptions);
           parts.push(`function() { ${childOptions.decl.join(",\n") + ";\n" + childOptions.exprs.join(";\n") + `;\nreturn _$el${id};\n`}}()`);
           options.counter = childOptions.counter;
           options.templateId = childOptions.templateId;

package/html/dist/html.js

@@ -356,7 +356,8 @@ function createHTML(r, {
             childOptions = Object.assign({}, options, {
         first: true,
         decl: [],
-        exprs: []
+        exprs: [],
+        parent: false
       });
       parseNode(children, childOptions);
       props.push(`children: () => { ${childOptions.exprs.join(";\n")}}`);
@@ -397,8 +398,8 @@ function createHTML(r, {
             decl: [],
             exprs: []
           });
-          parseNode(child, childOptions);
           options.templateNodes.push([child]);
+          parseNode(child, childOptions);
           parts.push(`function() { ${childOptions.decl.join(",\n") + ";\n" + childOptions.exprs.join(";\n") + `;\nreturn _$el${id};\n`}}()`);
           options.counter = childOptions.counter;
           options.templateId = childOptions.templateId;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.2.2",
+  "version": "1.3.0-beta.0",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://github.com/solidjs/solid#readme",
@@ -132,5 +132,5 @@
     "compiler",
     "performance"
   ],
-  "gitHead": "116e636553b34a7bf9fc5d87402d0077d7f16e59"
+  "gitHead": "4efd2be2d5180db0a4875c7c05d8fb4cd9bf44f3"
 }

package/store/dist/dev.cjs

@@ -31,7 +31,7 @@ function wrap$1(value, name) {
   return p;
 }
 function isWrappable(obj) {
-  return obj != null && typeof obj === "object" && (!obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
+  return obj != null && typeof obj === "object" && (obj[solidJs.$PROXY] || !obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
 }
 function unwrap(item, set = new Set()) {
   let result, unwrapped, v, prop;
@@ -65,7 +65,7 @@ function getDataNodes(target) {
 }
 function proxyDescriptor(target, property) {
   const desc = Reflect.getOwnPropertyDescriptor(target, property);
-  if (!desc || desc.get || property === solidJs.$PROXY || property === $NODE || property === $NAME) return desc;
+  if (!desc || desc.get || !desc.configurable || property === solidJs.$PROXY || property === $NODE || property === $NAME) return desc;
   delete desc.value;
   delete desc.writable;
   desc.get = () => target[solidJs.$PROXY][property];

package/store/dist/dev.js

@@ -1,4 +1,4 @@
-import { DEV, $PROXY, getListener, batch, createSignal } from 'solid-js';
+import { $PROXY, DEV, getListener, batch, createSignal } from 'solid-js';
 
 const $RAW = Symbol("store-raw"),
       $NODE = Symbol("store-node"),
@@ -27,7 +27,7 @@ function wrap$1(value, name) {
   return p;
 }
 function isWrappable(obj) {
-  return obj != null && typeof obj === "object" && (!obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
+  return obj != null && typeof obj === "object" && (obj[$PROXY] || !obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
 }
 function unwrap(item, set = new Set()) {
   let result, unwrapped, v, prop;
@@ -61,7 +61,7 @@ function getDataNodes(target) {
 }
 function proxyDescriptor(target, property) {
   const desc = Reflect.getOwnPropertyDescriptor(target, property);
-  if (!desc || desc.get || property === $PROXY || property === $NODE || property === $NAME) return desc;
+  if (!desc || desc.get || !desc.configurable || property === $PROXY || property === $NODE || property === $NAME) return desc;
   delete desc.value;
   delete desc.writable;
   desc.get = () => target[$PROXY][property];

package/store/dist/store.cjs

@@ -28,7 +28,7 @@ function wrap$1(value, name) {
   return p;
 }
 function isWrappable(obj) {
-  return obj != null && typeof obj === "object" && (!obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
+  return obj != null && typeof obj === "object" && (obj[solidJs.$PROXY] || !obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
 }
 function unwrap(item, set = new Set()) {
   let result, unwrapped, v, prop;
@@ -62,7 +62,7 @@ function getDataNodes(target) {
 }
 function proxyDescriptor(target, property) {
   const desc = Reflect.getOwnPropertyDescriptor(target, property);
-  if (!desc || desc.get || property === solidJs.$PROXY || property === $NODE || property === $NAME) return desc;
+  if (!desc || desc.get || !desc.configurable || property === solidJs.$PROXY || property === $NODE || property === $NAME) return desc;
   delete desc.value;
   delete desc.writable;
   desc.get = () => target[solidJs.$PROXY][property];

package/store/dist/store.js

@@ -24,7 +24,7 @@ function wrap$1(value, name) {
   return p;
 }
 function isWrappable(obj) {
-  return obj != null && typeof obj === "object" && (!obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
+  return obj != null && typeof obj === "object" && (obj[$PROXY] || !obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
 }
 function unwrap(item, set = new Set()) {
   let result, unwrapped, v, prop;
@@ -58,7 +58,7 @@ function getDataNodes(target) {
 }
 function proxyDescriptor(target, property) {
   const desc = Reflect.getOwnPropertyDescriptor(target, property);
-  if (!desc || desc.get || property === $PROXY || property === $NODE || property === $NAME) return desc;
+  if (!desc || desc.get || !desc.configurable || property === $PROXY || property === $NODE || property === $NAME) return desc;
   delete desc.value;
   delete desc.writable;
   desc.get = () => target[$PROXY][property];

package/store/types/store.d.ts

@@ -33,7 +33,7 @@ export declare type Store<T> = {
 } & {
     [$RAW]?: T;
 } & AddSymbolToPrimitive<T> & AddSymbolIterator<T> & AddSymbolToStringTag<T> & AddCallable<T>;
-export declare function isWrappable(obj: any): boolean;
+export declare function isWrappable(obj: any): any;
 export declare function unwrap<T extends StoreNode>(item: any, set?: Set<unknown>): T;
 export declare function getDataNodes(target: StoreNode): any;
 export declare function proxyDescriptor(target: StoreNode, property: string | number | symbol): PropertyDescriptor | undefined;

package/types/index.d.ts

@@ -7,7 +7,6 @@ export * from "./render";
 import type { JSX } from "./jsx";
 declare type JSXElement = JSX.Element;
 export type { JSXElement, JSX };
-export declare function awaitSuspense(): void;
 import { writeSignal, serializeGraph, registerGraph, hashValue } from "./reactive/signal";
 declare let DEV: {
     writeSignal: typeof writeSignal;

package/types/jsx.d.ts

@@ -92,6 +92,7 @@ export namespace JSX {
     onFocusIn?: EventHandlerUnion<T, FocusEvent>;
     onBlur?: EventHandlerUnion<T, FocusEvent>;
     onChange?: EventHandlerUnion<T, Event>;
+    onInvalid?: EventHandlerUnion<T, Event>;
     onInput?: EventHandlerUnion<T, InputEvent>;
     onBeforeInput?: EventHandlerUnion<T, InputEvent>;
     onReset?: EventHandlerUnion<T, Event>;
@@ -180,6 +181,7 @@ export namespace JSX {
     onfocusin?: EventHandlerUnion<T, FocusEvent>;
     onblur?: EventHandlerUnion<T, FocusEvent>;
     onchange?: EventHandlerUnion<T, Event>;
+    oninvalid?: EventHandlerUnion<T, Event>;
     oninput?: EventHandlerUnion<T, InputEvent>;
     onbeforeinput?: EventHandlerUnion<T, InputEvent>;
     onreset?: EventHandlerUnion<T, Event>;