solid-js 1.5.0-beta.1 → 1.5.0-beta.4

package/dist/solid.js

@@ -149,7 +149,6 @@ let Transition = null;
 let Scheduler = null;
 let ExternalSourceFactory = null;
 let Listener = null;
-let Pending = null;
 let Updates = null;
 let Effects = null;
 let ExecCount = 0;
@@ -163,7 +162,7 @@ function createRoot(fn, detachedOwner) {
     context: null,
     owner: detachedOwner || owner
   },
-        updateFn = unowned ? fn : () => fn(() => cleanNode(root));
+        updateFn = unowned ? fn : () => fn(() => untrack(() => cleanNode(root)));
   Owner = root;
   Listener = null;
   try {
@@ -231,18 +230,19 @@ function createMemo(fn, value, options) {
   } else updateComputation(c);
   return readSignal.bind(c);
 }
-function createResource(source, fetcher, options) {
-  if (arguments.length === 2) {
-    if (typeof fetcher === "object") {
-      options = fetcher;
-      fetcher = source;
-      source = true;
-    }
-  } else if (arguments.length === 1) {
-    fetcher = source;
+function createResource(pSource, pFetcher, pOptions) {
+  let source;
+  let fetcher;
+  let options;
+  if (arguments.length === 2 && typeof pFetcher === "object" || arguments.length === 1) {
     source = true;
+    fetcher = pSource;
+    options = pFetcher || {};
+  } else {
+    source = pSource;
+    fetcher = pFetcher;
+    options = pOptions || {};
   }
-  options || (options = {});
   let err = undefined,
       pr = null,
       initP = NO_INIT,
@@ -260,7 +260,7 @@ function createResource(source, fetcher, options) {
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
     let v;
-    if (sharedConfig.load && (v = sharedConfig.load(id))) initP = v[0];
+    if (options.useInitialValue) initP = options.initialValue;else if (sharedConfig.load && (v = sharedConfig.load(id))) initP = v[0];
   }
   function loadEnd(p, v, success, key) {
     if (pr === p) {
@@ -288,8 +288,8 @@ function createResource(source, fetcher, options) {
   function completeLoad(v, success) {
     !success && (err = castError(v));
     runUpdates(() => {
-      setValue(() => success ? v : undefined);
-      setState(success ? "ready" : "error");
+      setValue(() => v);
+      setState(success ? "ready" : "errored");
       for (const c of contexts.keys()) c.decrement();
       contexts.clear();
     }, false);
@@ -312,7 +312,7 @@ function createResource(source, fetcher, options) {
     return v;
   }
   function load(refetching = true) {
-    if (refetching && scheduled) return;
+    if (refetching !== false && scheduled) return;
     scheduled = false;
     err = undefined;
     const lookup = dynamic ? dynamic() : source;
@@ -340,10 +340,11 @@ function createResource(source, fetcher, options) {
     return p.then(v => loadEnd(p, v, true, lookup), e => loadEnd(p, e, false));
   }
   Object.defineProperties(read, {
+    value: {
+      get: () => value()
+    },
     state: {
-      get() {
-        return state();
-      }
+      get: () => state()
     },
     loading: {
       get() {
@@ -353,13 +354,13 @@ function createResource(source, fetcher, options) {
     },
     error: {
       get() {
-        return state() === "error" ? err : undefined;
+        return state() === "errored" ? err : undefined;
       }
     },
     latest: {
       get() {
         if (!resolved) return read();
-        if (state() === "error") throw err;
+        if (state() === "errored") throw err;
         return value();
       }
     }
@@ -388,9 +389,8 @@ function createSelector(source, fn = equalFn, options) {
   const subs = new Map();
   const node = createComputation(p => {
     const v = source();
-    for (const key of subs.keys()) if (fn(key, v) !== fn(key, p)) {
-      const l = subs.get(key);
-      for (const c of l.values()) {
+    for (const [key, val] of subs.entries()) if (fn(key, v) !== fn(key, p)) {
+      for (const c of val.values()) {
         c.state = STALE;
         if (c.pure) Updates.push(c);else Effects.push(c);
       }
@@ -399,8 +399,8 @@ function createSelector(source, fn = equalFn, options) {
   }, undefined, true, STALE);
   updateComputation(node);
   return key => {
-    let listener;
-    if (listener = Listener) {
+    const listener = Listener;
+    if (listener) {
       let l;
       if (l = subs.get(key)) l.add(listener);else subs.set(key, l = new Set([listener]));
       onCleanup(() => {
@@ -412,18 +412,7 @@ function createSelector(source, fn = equalFn, options) {
   };
 }
 function batch(fn) {
-  if (Pending) return fn();
-  let result;
-  const q = Pending = [];
-  try {
-    result = fn();
-  } finally {
-    Pending = null;
-  }
-  runUpdates(() => {
-    for (let i = 0; i < q.length; i += 1) notifySignal(q[i]);
-  }, false);
-  return result;
+  return runUpdates(fn, false);
 }
 function untrack(fn) {
   let result,
@@ -532,7 +521,12 @@ function useContext(context) {
 }
 function children(fn) {
   const children = createMemo(fn);
-  return createMemo(() => resolveChildren(children()));
+  const memo = createMemo(() => resolveChildren(children()));
+  memo.toArray = () => {
+    const c = memo();
+    return Array.isArray(c) ? c : c != null ? [c] : [];
+  };
+  return memo;
 }
 let SuspenseContext;
 function getSuspenseContext() {
@@ -559,10 +553,12 @@ function enableExternalSource(factory) {
 function readSignal() {
   const runningTransition = Transition && Transition.running;
   if (this.sources && (!runningTransition && this.state || runningTransition && this.tState)) {
-    const updates = Updates;
-    Updates = null;
-    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookUpstream(this);
-    Updates = updates;
+    if (!runningTransition && this.state === STALE || runningTransition && this.tState === STALE) updateComputation(this);else {
+      const updates = Updates;
+      Updates = null;
+      runUpdates(() => lookUpstream(this), false);
+      Updates = updates;
+    }
   }
   if (Listener) {
     const sSlot = this.observers ? this.observers.length : 0;
@@ -595,30 +591,27 @@ function writeSignal(node, value, isComp) {
       }
       if (!TransitionRunning) node.value = value;
     } else node.value = value;
-    if (Pending) Pending.push(node);else notifySignal(node);
-  }
-  return value;
-}
-function notifySignal(node) {
-  if (node.observers && node.observers.length) {
-    runUpdates(() => {
-      for (let i = 0; i < node.observers.length; i += 1) {
-        const o = node.observers[i];
-        const TransitionRunning = Transition && Transition.running;
-        if (TransitionRunning && Transition.disposed.has(o)) continue;
-        if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
-          if (o.pure) Updates.push(o);else Effects.push(o);
-          if (o.observers) markDownstream(o);
+    if (node.observers && node.observers.length) {
+      runUpdates(() => {
+        for (let i = 0; i < node.observers.length; i += 1) {
+          const o = node.observers[i];
+          const TransitionRunning = Transition && Transition.running;
+          if (TransitionRunning && Transition.disposed.has(o)) continue;
+          if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
+            if (o.pure) Updates.push(o);else Effects.push(o);
+            if (o.observers) markDownstream(o);
+          }
+          if (TransitionRunning) o.tState = STALE;else o.state = STALE;
         }
-        if (TransitionRunning) o.tState = STALE;else o.state = STALE;
-      }
-      if (Updates.length > 10e5) {
-        Updates = [];
-        if (false) ;
-        throw new Error();
-      }
-    }, false);
+        if (Updates.length > 10e5) {
+          Updates = [];
+          if (false) ;
+          throw new Error();
+        }
+      }, false);
+    }
   }
+  return value;
 }
 function updateComputation(node) {
   if (!node.fn) return;
@@ -644,10 +637,11 @@ function runComputation(node, value, time) {
   try {
     nextValue = node.fn(value);
   } catch (err) {
+    if (node.pure) Transition && Transition.running ? node.tState = STALE : node.state = STALE;
     handleError(err);
   }
   if (!node.updatedAt || node.updatedAt <= time) {
-    if (node.updatedAt && "observers" in node) {
+    if (node.updatedAt != null && "observers" in node) {
       writeSignal(node, nextValue, true);
     } else if (Transition && Transition.running && node.pure) {
       Transition.sources.add(node);
@@ -720,7 +714,7 @@ function runTop(node) {
     } else if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) {
       const updates = Updates;
       Updates = null;
-      lookUpstream(node, ancestors[0]);
+      runUpdates(() => lookUpstream(node, ancestors[0]), false);
       Updates = updates;
     }
   }
@@ -914,7 +908,7 @@ function resolveChildren(children) {
 function createProvider(id) {
   return function provider(props) {
     let res;
-    createComputed(() => res = untrack(() => {
+    createRenderEffect(() => res = untrack(() => {
       Owner.context = {
         [id]: props.value
       };
@@ -937,7 +931,7 @@ function observable(input) {
         };
       }
       const dispose = createRoot(disposer => {
-        createComputed(() => {
+        createEffect(() => {
           const v = input();
           untrack(() => handler(v));
         });
@@ -1289,6 +1283,7 @@ function Index(props) {
 }
 function Show(props) {
   let strictEqual = false;
+  const keyed = props.keyed;
   const condition = createMemo(() => props.when, undefined, {
     equals: (a, b) => strictEqual ? a === b : !a === !b
   });
@@ -1296,20 +1291,26 @@ function Show(props) {
     const c = condition();
     if (c) {
       const child = props.children;
-      return (strictEqual = typeof child === "function" && child.length > 0) ? untrack(() => child(c)) : child;
+      const fn = typeof child === "function" && child.length > 0;
+      strictEqual = keyed || fn;
+      return fn ? untrack(() => child(c)) : child;
     }
     return props.fallback;
   });
 }
 function Switch(props) {
   let strictEqual = false;
+  let keyed = false;
   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) return [i, c, conds[i]];
+      if (c) {
+        keyed = !!conds[i].keyed;
+        return [i, c, conds[i]];
+      }
     }
     return [-1];
   }, undefined, {
@@ -1319,7 +1320,9 @@ function Switch(props) {
     const [index, when, cond] = evalConditions();
     if (index < 0) return props.fallback;
     const c = cond.children;
-    return (strictEqual = typeof c === "function" && c.length > 0) ? untrack(() => c(when)) : c;
+    const fn = typeof c === "function" && c.length > 0;
+    strictEqual = keyed || fn;
+    return fn ? untrack(() => c(when)) : c;
   });
 }
 function Match(props) {
@@ -1341,81 +1344,94 @@ function ErrorBoundary(props) {
     let e;
     if (e = errored()) {
       const f = props.fallback;
-      return typeof f === "function" && f.length ? untrack(() => f(e, setErrored)) : f;
+      const res = typeof f === "function" && f.length ? untrack(() => f(e, () => setErrored())) : f;
+      onError(setErrored);
+      return res;
     }
     onError(setErrored);
     return props.children;
   });
 }
 
+const suspenseListEquals = (a, b) => a.showContent === b.showContent && a.showFallback === b.showFallback;
 const SuspenseListContext = createContext();
 function SuspenseList(props) {
-  let suspenseSetter, showContent, showFallback;
+  let [wrapper, setWrapper] = createSignal(() => ({
+    inFallback: false
+  })),
+      show;
   const listContext = useContext(SuspenseListContext);
+  const [registry, setRegistry] = createSignal([]);
   if (listContext) {
-    const [inFallback, setFallback] = createSignal(false);
-    suspenseSetter = setFallback;
-    [showContent, showFallback] = listContext.register(inFallback);
+    show = listContext.register(createMemo(() => wrapper()().inFallback));
   }
-  const [registry, setRegistry] = createSignal([]),
-        comp = createComponent(SuspenseListContext.Provider, {
-    value: {
-      register: inFallback => {
-        const [showingContent, showContent] = createSignal(false),
-              [showingFallback, showFallback] = createSignal(false);
-        setRegistry(registry => [...registry, {
-          inFallback,
-          showContent,
-          showFallback
-        }]);
-        return [showingContent, showingFallback];
-      }
-    },
-    get children() {
-      return props.children;
-    }
-  });
-  createComputed(() => {
+  const resolved = createMemo(prev => {
     const reveal = props.revealOrder,
           tail = props.tail,
-          visibleContent = showContent ? showContent() : true,
-          visibleFallback = showFallback ? showFallback() : true,
+          {
+      showContent = true,
+      showFallback = true
+    } = show ? show() : {},
           reg = registry(),
           reverse = reveal === "backwards";
     if (reveal === "together") {
-      const all = reg.every(i => !i.inFallback());
-      suspenseSetter && suspenseSetter(!all);
-      reg.forEach(i => {
-        i.showContent(all && visibleContent);
-        i.showFallback(visibleFallback);
-      });
-      return;
+      const all = reg.every(inFallback => !inFallback());
+      const res = reg.map(() => ({
+        showContent: all && showContent,
+        showFallback
+      }));
+      res.inFallback = !all;
+      return res;
     }
     let stop = false;
+    let inFallback = prev.inFallback;
+    const res = [];
     for (let i = 0, len = reg.length; i < len; i++) {
       const n = reverse ? len - i - 1 : i,
-            s = reg[n].inFallback();
+            s = reg[n]();
       if (!stop && !s) {
-        reg[n].showContent(visibleContent);
-        reg[n].showFallback(visibleFallback);
+        res[n] = {
+          showContent,
+          showFallback
+        };
       } else {
         const next = !stop;
-        if (next && suspenseSetter) suspenseSetter(true);
-        if (!tail || next && tail === "collapsed") {
-          reg[n].showFallback(visibleFallback);
-        } else reg[n].showFallback(false);
+        if (next) inFallback = true;
+        res[n] = {
+          showContent: next,
+          showFallback: !tail || next && tail === "collapsed" ? showFallback : false
+        };
         stop = true;
-        reg[n].showContent(next);
       }
     }
-    if (!stop && suspenseSetter) suspenseSetter(false);
+    if (!stop) inFallback = false;
+    res.inFallback = inFallback;
+    return res;
+  }, {
+    inFallback: false
+  });
+  setWrapper(() => resolved);
+  return createComponent(SuspenseListContext.Provider, {
+    value: {
+      register: inFallback => {
+        let index;
+        setRegistry(registry => {
+          index = registry.length;
+          return [...registry, inFallback];
+        });
+        return createMemo(() => resolved()[index], undefined, {
+          equals: suspenseListEquals
+        });
+      }
+    },
+    get children() {
+      return props.children;
+    }
   });
-  return comp;
 }
 function Suspense(props) {
   let counter = 0,
-      showContent,
-      showFallback,
+      show,
       ctx,
       p,
       flicker,
@@ -1437,29 +1453,26 @@ function Suspense(props) {
   if (sharedConfig.context && sharedConfig.load) {
     const key = sharedConfig.context.id + sharedConfig.context.count;
     let ref = sharedConfig.load(key);
-    if (ref) {
-      p = ref[0];
-      if (p === "$$$") sharedConfig.gather(key);else {
-        if (typeof p !== "object" || !("then" in p)) p = Promise.resolve(p);
-        const [s, set] = createSignal(undefined, {
-          equals: false
-        });
-        flicker = s;
-        p.then(err => {
-          if (err !== "$$$" || sharedConfig.done) {
-            err !== "$$$" && (error = err);
-            return set();
-          }
-          sharedConfig.gather(key);
-          setHydrateContext(ctx);
-          set();
-          setHydrateContext();
-        });
-      }
+    if (ref && (p = ref[0]) && p !== "$$f") {
+      if (typeof p !== "object" || !("then" in p)) p = Promise.resolve(p);
+      const [s, set] = createSignal(undefined, {
+        equals: false
+      });
+      flicker = s;
+      p.then(err => {
+        if (err || sharedConfig.done) {
+          err && (error = err);
+          return set();
+        }
+        sharedConfig.gather(key);
+        setHydrateContext(ctx);
+        set();
+        setHydrateContext();
+      });
     }
   }
   const listContext = useContext(SuspenseListContext);
-  if (listContext) [showContent, showFallback] = listContext.register(store.inFallback);
+  if (listContext) show = listContext.register(store.inFallback);
   let dispose;
   onCleanup(() => dispose && dispose());
   return createComponent(SuspenseContext.Provider, {
@@ -1472,20 +1485,23 @@ function Suspense(props) {
           flicker();
           return flicker = undefined;
         }
-        if (ctx && !p) setHydrateContext();
+        if (ctx && p === "$$f") setHydrateContext();
         const rendered = createMemo(() => props.children);
-        return createMemo(() => {
+        return createMemo(prev => {
           const inFallback = store.inFallback(),
-                visibleContent = showContent ? showContent() : true,
-                visibleFallback = showFallback ? showFallback() : true;
-          dispose && dispose();
-          if ((!inFallback || p) && visibleContent) {
+                {
+            showContent = true,
+            showFallback = true
+          } = show ? show() : {};
+          if ((!inFallback || p && p !== "$$f") && showContent) {
             store.resolved = true;
-            ctx = p = undefined;
+            dispose && dispose();
+            dispose = ctx = p = undefined;
             resumeEffects(store.effects);
             return rendered();
           }
-          if (!visibleFallback) return;
+          if (!showFallback) return;
+          if (dispose) return prev;
           return createRoot(disposer => {
             dispose = disposer;
             if (ctx) {

package/h/jsx-runtime/types/jsx.d.ts

@@ -163,6 +163,7 @@ export namespace JSX {
     onVolumeChange?: EventHandlerUnion<T, Event>;
     onWaiting?: EventHandlerUnion<T, Event>;
     onClick?: EventHandlerUnion<T, MouseEvent>;
+    onAuxClick?: EventHandlerUnion<T, MouseEvent>;
     onContextMenu?: EventHandlerUnion<T, MouseEvent>;
     onDblClick?: EventHandlerUnion<T, MouseEvent>;
     onDrag?: EventHandlerUnion<T, DragEvent>;
@@ -252,6 +253,7 @@ export namespace JSX {
     onvolumechange?: EventHandlerUnion<T, Event>;
     onwaiting?: EventHandlerUnion<T, Event>;
     onclick?: EventHandlerUnion<T, MouseEvent>;
+    onauxclick?: EventHandlerUnion<T, MouseEvent>;
     oncontextmenu?: EventHandlerUnion<T, MouseEvent>;
     ondblclick?: EventHandlerUnion<T, MouseEvent>;
     ondrag?: EventHandlerUnion<T, DragEvent>;
@@ -1852,7 +1854,7 @@ export namespace JSX {
     del: HTMLAttributes<HTMLElement>;
     details: DetailsHtmlAttributes<HTMLDetailsElement>;
     dfn: HTMLAttributes<HTMLElement>;
-    dialog: DialogHtmlAttributes<HTMLElement>;
+    dialog: DialogHtmlAttributes<HTMLDialogElement>;
     div: HTMLAttributes<HTMLDivElement>;
     dl: HTMLAttributes<HTMLDListElement>;
     dt: HTMLAttributes<HTMLElement>;