@plasmicapp/data-sources 1.0.5 → 1.0.7

package/dist/index.esm.js

@@ -278,6 +278,70 @@ function mapRecords(callback, record1, record2, record3) {
 
 // src/serverQueries/common.ts
 import React2 from "react";
+
+// src/serverQueries/makeQueryCacheKey.ts
+function makeQueryCacheKey(id, params) {
+  return `${id}:${safeStableStringify(params)}`;
+}
+var shortPlasmicPrefix = "\u03C1";
+function safeStableStringify(unstableValue) {
+  const stableValue = sortObjectsDeep(unstableValue, /* @__PURE__ */ new Map());
+  const visitedPaths = /* @__PURE__ */ new Map();
+  return JSON.stringify(stableValue, function(key, value) {
+    switch (typeof value) {
+      case "undefined":
+        return `${shortPlasmicPrefix}:UNDEFINED`;
+      case "function":
+        return `${shortPlasmicPrefix}:FUNCTION:${value.name}`;
+      case "symbol":
+        return `${shortPlasmicPrefix}:SYMBOL:${value.description}`;
+      case "bigint":
+        return value.toString();
+      case "object":
+        if (value !== null) {
+          const cyclePath = visitedPaths.get(value);
+          if (cyclePath) {
+            return `${shortPlasmicPrefix}:REF:${cyclePath}`;
+          }
+          const parentPath = visitedPaths.get(this);
+          const valuePath = parentPath === void 0 ? "$" : `${parentPath}.${key}`;
+          visitedPaths.set(value, valuePath);
+        }
+        return value;
+      default:
+        return value;
+    }
+  });
+}
+function sortObjectsDeep(value, visitedObjects) {
+  if (typeof value !== "object" || value === null) {
+    return value;
+  }
+  const visitedValue = visitedObjects.get(value);
+  if (visitedValue) {
+    return visitedValue;
+  }
+  if (typeof value.toJSON === "function") {
+    return sortObjectsDeep(value.toJSON(), visitedObjects);
+  }
+  if (Array.isArray(value)) {
+    const newArr = [];
+    visitedObjects.set(value, newArr);
+    value.forEach((item, key) => {
+      newArr[key] = sortObjectsDeep(item, visitedObjects);
+    });
+    return newArr;
+  } else {
+    const newObj = {};
+    visitedObjects.set(value, newObj);
+    Object.keys(value).sort().forEach((key) => {
+      newObj[key] = sortObjectsDeep(value[key], visitedObjects);
+    });
+    return newObj;
+  }
+}
+
+// src/serverQueries/common.ts
 function createDollarQueries(queryNames) {
   return Object.fromEntries(
     queryNames.map((queryName) => {
@@ -335,11 +399,6 @@ var StatefulQueryResult = class {
       (err) => this.rejectPromise(key, err)
     );
   }
-  /**
-   * Resolve is allowed if:
-   * 1) no key / state is initial, which means we are resolving from cache
-   * 2) key / state is loading, which means we need to check the keys match
-   */
   resolvePromise(key, data) {
     if (this.current.key === null || this.current.key === key) {
       this.transitionState({
@@ -368,6 +427,9 @@ var StatefulQueryResult = class {
       untagPlasmicUndefinedDataErrorPromise(this.settable.promise);
     }
   }
+  toJSON() {
+    return this.current;
+  }
   get key() {
     return this.current.key;
   }
@@ -416,12 +478,17 @@ function safeExecResult(tryData) {
 function assertUnexpectedNodeType(x) {
   throw new Error(`Unexpected node type: ${x}`);
 }
-function resolveParams(params) {
+function resolveParams(queryId, params) {
   return safeExec(
-    () => ({
-      status: "ready",
-      resolvedParams: params()
-    }),
+    () => {
+      const resolvedParams = params();
+      const cacheKey = makeQueryCacheKey(queryId, resolvedParams);
+      return {
+        status: "ready",
+        resolvedParams,
+        cacheKey
+      };
+    },
     (promise) => ({
       status: "blocked",
       promise
@@ -496,19 +563,6 @@ var SyncPromise = class {
     );
   }
 };
-function shallowEqualRecords(a, b) {
-  if (Object.is(a, b)) {
-    return true;
-  }
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-  if (aKeys.length !== bKeys.length) {
-    return false;
-  }
-  return aKeys.every(
-    (key) => Object.prototype.hasOwnProperty.call(b, key) && Object.is(a[key], b[key])
-  );
-}
 var SettablePromise = class {
   constructor() {
     __publicField(this, "promise");
@@ -526,181 +580,154 @@ var SettablePromise = class {
     this._reject(error);
   }
 };
-function useRenderEffect(effect, deps) {
-  const ref = React2.useRef({ deps: void 0, cleanup: void 0 });
-  const depsChanged = ref.current.deps === void 0 || deps.length !== ref.current.deps.length || deps.some((dep, i) => !Object.is(dep, ref.current.deps[i]));
-  if (depsChanged) {
-    if (ref.current.cleanup) {
-      ref.current.cleanup();
+function usePrevious(value) {
+  const ref = React2.useRef(void 0);
+  const prev = ref.current;
+  ref.current = value;
+  return prev;
+}
+function createInitial$State($ctx, $props, $q, stateSpecs) {
+  const root = {};
+  for (const stateSpec of stateSpecs) {
+    if (stateSpec.path.includes("[]")) {
+      continue;
     }
-    const prevDeps = ref.current.deps;
-    ref.current.cleanup = effect(prevDeps);
-    ref.current.deps = deps;
-  }
-  React2.useEffect(() => {
-    return () => {
-      if (ref.current.cleanup) {
-        ref.current.cleanup();
+    const parts = stateSpec.path.split(".");
+    const parentPath = parts.slice(0, parts.length - 1);
+    const leaf = parts[parts.length - 1];
+    let parent = root;
+    for (const part of parentPath) {
+      if (!(part in parent)) {
+        parent[part] = {};
       }
-    };
-  }, []);
-}
-
-// src/serverQueries/makeQueryCacheKey.ts
-function makeQueryCacheKey(id, params) {
-  return `${id}:${safeStableStringify(params)}`;
-}
-var shortPlasmicPrefix = "\u03C1";
-function safeStableStringify(unstableValue) {
-  const stableValue = sortObjectsDeep(unstableValue, /* @__PURE__ */ new Map());
-  const visitedPaths = /* @__PURE__ */ new Map();
-  return JSON.stringify(stableValue, function(key, value) {
-    switch (typeof value) {
-      case "undefined":
-        return `${shortPlasmicPrefix}:UNDEFINED`;
-      case "function":
-        return `${shortPlasmicPrefix}:FUNCTION:${value.name}`;
-      case "symbol":
-        return `${shortPlasmicPrefix}:SYMBOL:${value.description}`;
-      case "bigint":
-        return value.toString();
-      case "object":
-        if (value !== null) {
-          const cyclePath = visitedPaths.get(value);
-          if (cyclePath) {
-            return `${shortPlasmicPrefix}:REF:${cyclePath}`;
+      parent = parent[part];
+    }
+    if (stateSpec.valueProp) {
+      parent[leaf] = $props[stateSpec.valueProp];
+    } else if ("initVal" in stateSpec) {
+      parent[leaf] = stateSpec.initVal;
+    } else if (stateSpec.initFunc) {
+      const initFunc = stateSpec.initFunc;
+      let cached;
+      Object.defineProperty(parent, leaf, {
+        get: () => {
+          if (cached) {
+            return cached.value;
           }
-          const parentPath = visitedPaths.get(this);
-          const valuePath = parentPath === void 0 ? "$" : `${parentPath}.${key}`;
-          visitedPaths.set(value, valuePath);
-        }
-        return value;
-      default:
-        return value;
+          const value = initFunc({
+            $ctx,
+            $props,
+            $q,
+            $state: root,
+            $refs: {},
+            $queries: {}
+          });
+          cached = { value };
+          return value;
+        },
+        enumerable: true,
+        configurable: true
+      });
     }
-  });
-}
-function sortObjectsDeep(value, visitedObjects) {
-  if (typeof value !== "object" || value === null) {
-    return value;
-  }
-  const visitedValue = visitedObjects.get(value);
-  if (visitedValue) {
-    return visitedValue;
-  }
-  if (Array.isArray(value)) {
-    const newArr = [];
-    visitedObjects.set(value, newArr);
-    value.forEach((item, key) => {
-      newArr[key] = sortObjectsDeep(item, visitedObjects);
-    });
-    return newArr;
-  } else {
-    const newObj = {};
-    visitedObjects.set(value, newObj);
-    Object.keys(value).sort().forEach((key) => {
-      newObj[key] = sortObjectsDeep(value[key], visitedObjects);
-    });
-    return newObj;
   }
+  return root;
 }
 
 // src/serverQueries/client.ts
 var GLOBAL_CACHE = /* @__PURE__ */ new Map();
-function usePlasmicQueries(tree, $props, $ctx, $state) {
-  const stableProps = useShallowStableRecord($props);
-  const stableCtx = useShallowStableRecord($ctx);
-  const $stateRef = React3.useRef($state != null ? $state : {});
-  $stateRef.current = $state != null ? $state : {};
+function usePlasmicQueries(tree, $ctx, $props, $state) {
+  var _a;
+  const wrappedQueries = React3.useMemo(() => wrapQueries(tree.queries), [tree]);
   const $queries = React3.useMemo(
     () => createDollarQueries(Object.keys(tree.queries)),
     [tree]
   );
-  const queries = React3.useMemo(() => {
-    return mapRecords(
-      (_name, q) => ({
-        id: q.id,
-        fn: q.fn,
-        execParams: () => q.args({
-          $q: $queries,
-          $props: stableProps,
-          $ctx: stableCtx,
-          $state: $stateRef.current,
-          $scopedItemVars: {}
-        })
-      }),
-      tree.queries
-    );
-  }, [$queries, stableCtx, stableProps, tree]);
-  const wrappedQueries = React3.useMemo(() => wrapQueries(queries), [queries]);
   const $queryStates = $queries;
+  if (!$state) {
+    $state = createInitial$State($ctx, $props, $queryStates, tree.stateSpecs);
+  }
   const { fallback: prefetchedCache, cache: swrCache } = usePlasmicDataConfig2();
-  const [settledCount, setSettledCount] = React3.useState(0);
-  React3.useEffect(() => {
-    let cleanup = false;
-    const resultListener = (next, prev) => {
-      if (cleanup) {
+  const paramsResults = {};
+  const executionCtx = {
+    $ctx,
+    $props,
+    $q: $queryStates,
+    $state
+  };
+  const prevWrappedQueries = usePrevious(wrappedQueries);
+  let consistent = prevWrappedQueries === void 0 || Object.is(prevWrappedQueries, wrappedQueries);
+  mapRecords(
+    (queryName, $query, query) => {
+      if (!consistent || $query.current.state === "initial") {
         return;
       }
-      if (prev.state === "done" || next.state === "done") {
-        queueMicrotask(() => setSettledCount((v) => v + 1));
+      const paramsResult = resolveParams(
+        query.id,
+        () => query.args(executionCtx)
+      );
+      paramsResults[queryName] = paramsResult;
+      if (paramsResult.status === "blocked") {
+        consistent = false;
+      } else if (paramsResult.status === "error" && $query.current.key !== null) {
+        consistent = false;
+      } else if (paramsResult.status === "ready" && paramsResult.cacheKey !== $query.current.key) {
+        consistent = false;
       }
-    };
+    },
+    $queryStates,
+    wrappedQueries
+  );
+  if (!consistent) {
     mapRecords((_queryName, $query) => {
-      $query.addListener(resultListener);
+      $query.reset();
     }, $queryStates);
-    return () => {
-      cleanup = true;
-      mapRecords((_queryName, $query) => {
-        $query.removeListener(resultListener);
-      }, $queryStates);
+    for (const k of Object.keys(paramsResults)) {
+      delete paramsResults[k];
+    }
+  }
+  const stopRef = React3.useRef();
+  (_a = stopRef.current) == null ? void 0 : _a.call(stopRef);
+  let stopped = false;
+  const stop = new Promise((resolve) => {
+    stopRef.current = () => {
+      stopped = true;
+      resolve();
     };
-  }, [$queryStates]);
-  useRenderEffect(
-    (prevDeps) => {
-      if (prevDeps) {
-        const prevWrappedQueries = prevDeps[0];
-        if (!Object.is(prevWrappedQueries, wrappedQueries)) {
-          mapRecords((_queryName, $query) => {
-            $query.reset();
-          }, $queryStates);
+  });
+  React3.useEffect(() => () => {
+    var _a2;
+    return (_a2 = stopRef.current) == null ? void 0 : _a2.call(stopRef);
+  }, []);
+  const loop = () => __async(null, null, function* () {
+    while (true) {
+      initPlasmicQueriesSync(
+        $queryStates,
+        wrappedQueries,
+        paramsResults,
+        executionCtx,
+        prefetchedCache,
+        swrCache
+      );
+      const loadingQueries = mapRecordEntries((_queryName, $query) => {
+        if ($query.isLoading) {
+          return $query.getDoneResult();
+        } else {
+          return null;
         }
+      }, $queryStates).filter(notNil);
+      if (loadingQueries.length === 0) {
+        break;
       }
-      let cleanup = false;
-      const loop = () => __async(null, null, function* () {
-        while (true) {
-          initPlasmicQueriesSync(
-            $queryStates,
-            wrappedQueries,
-            prefetchedCache,
-            swrCache
-          );
-          const loadingQueries = mapRecordEntries((_queryName, $query) => {
-            if ($query.isLoading) {
-              return $query.getDoneResult();
-            } else {
-              return null;
-            }
-          }, $queryStates).filter(notNil);
-          if (loadingQueries.length === 0) {
-            break;
-          }
-          yield Promise.race(loadingQueries);
-          if (cleanup) {
-            break;
-          }
-        }
-      });
-      loop().catch(noopFn);
-      return () => {
-        cleanup = true;
-      };
-    },
-    [wrappedQueries, $queryStates, settledCount]
-  );
+      yield Promise.race([stop, ...loadingQueries]);
+      if (stopped) {
+        break;
+      }
+    }
+  });
+  loop().catch(noopFn);
   mapRecords(
-    (_queryName, $query, query) => {
-      usePlasmicQuery($query, query, settledCount);
+    (queryName, $query, query) => {
+      usePlasmicQuery($query, query, paramsResults[queryName]);
     },
     $queryStates,
     wrappedQueries
@@ -722,20 +749,24 @@ function wrapQueries(queries) {
     return {
       id: query.id,
       fn: wrappedFn,
-      execParams: query.execParams
+      args: query.args
     };
   }, queries);
 }
-function initPlasmicQueriesSync($queries, queries, prefetchedCache, clientCache) {
+function initPlasmicQueriesSync($queries, queries, paramsResults, executionCtx, prefetchedCache, clientCache) {
   let anySettled;
   do {
     anySettled = false;
     mapRecords(
-      (_queryName, $query, query) => {
+      (queryName, $query, query) => {
         if ($query.current.state !== "initial") {
           return;
         }
-        const paramsResult = resolveParams(query.execParams);
+        const paramsResult = resolveParams(
+          query.id,
+          () => query.args(executionCtx)
+        );
+        paramsResults[queryName] = paramsResult;
         if (paramsResult.status === "error") {
           $query.rejectPromise(null, paramsResult.error);
           anySettled = true;
@@ -778,11 +809,8 @@ function initPlasmicQueriesSync($queries, queries, prefetchedCache, clientCache)
     );
   } while (anySettled);
 }
-function usePlasmicQuery($query, query, settledCount) {
+function usePlasmicQuery($query, query, paramsResult) {
   const $queryState = $query;
-  const paramsResult = React3.useMemo(() => {
-    return resolveParams(query.execParams);
-  }, [query.execParams, settledCount]);
   const { key, fetcher } = React3.useMemo(() => {
     switch (paramsResult.status) {
       case "blocked":
@@ -802,11 +830,29 @@ function usePlasmicQuery($query, query, settledCount) {
         return {
           key: cacheKey,
           fetcher: () => {
-            const promise = query.fn(...paramsResult.resolvedParams);
-            $queryState.loadingPromise(cacheKey, promise);
-            return promise.finally(() => {
-              GLOBAL_CACHE.delete(cacheKey);
-            });
+            const clientCachedPromise = GLOBAL_CACHE.get(cacheKey);
+            if (clientCachedPromise == null ? void 0 : clientCachedPromise.result) {
+              if (clientCachedPromise.result.state === "resolved") {
+                $queryState.resolvePromise(
+                  cacheKey,
+                  clientCachedPromise.result.value
+                );
+              } else {
+                $queryState.rejectPromise(
+                  cacheKey,
+                  clientCachedPromise.result.error
+                );
+              }
+              return clientCachedPromise.promise.finally(() => {
+                GLOBAL_CACHE.delete(cacheKey);
+              });
+            } else {
+              const promise = query.fn(...paramsResult.resolvedParams);
+              $queryState.loadingPromise(cacheKey, promise);
+              return promise.finally(() => {
+                GLOBAL_CACHE.delete(cacheKey);
+              });
+            }
           }
         };
       }
@@ -830,13 +876,6 @@ function usePlasmicQuery($query, query, settledCount) {
   }
   return result;
 }
-function useShallowStableRecord(value) {
-  const ref = React3.useRef(value);
-  if (!shallowEqualRecords(ref.current, value)) {
-    ref.current = value;
-  }
-  return ref.current;
-}
 
 // src/serverQueries/server.ts
 var ROOT_COMPONENT_KEY_PATH = "root";
@@ -848,6 +887,8 @@ function executeQueryTree(rootNode, options, queriesByComponent) {
   const initialContext = {
     $props,
     $ctx,
+    // Placeholder; executeComponentNode replaces this with an initial
+    // $state derived from the component's own stateSpecs.
     $state: {},
     $q: {},
     $scopedItemVars: {}
@@ -905,10 +946,16 @@ function executeComponentNode(node, params) {
     componentQueries = {};
     queriesByComponent.set(componentKeyPath, componentQueries);
   }
+  const $state = node.stateSpecs.length > 0 ? createInitial$State(
+    parentContext.$ctx,
+    evaluatedProps,
+    componentQueries,
+    node.stateSpecs
+  ) : {};
   const componentContext = {
     $props: evaluatedProps,
     $ctx: parentContext.$ctx,
-    $state: parentContext.$state,
+    $state,
     $q: componentQueries,
     $scopedItemVars: parentContext.$scopedItemVars
   };
@@ -919,14 +966,7 @@ function executeComponentNode(node, params) {
     }
     const $query = new StatefulQueryResult();
     componentQueries[queryName] = $query;
-    const capturedContext = componentContext;
-    const capturedArgsFn = query.args;
-    const plasmicQuery = {
-      id: query.id,
-      fn: query.fn,
-      execParams: () => capturedArgsFn(capturedContext)
-    };
-    discovered.push({ $query, query: plasmicQuery });
+    discovered.push({ $query, query, ctx: componentContext });
   }
   node.children.forEach((child, idx) => {
     discovered.push(
@@ -1053,7 +1093,7 @@ function executePlasmicQueries(rootNode, options) {
       discoveredQueries.push(...newQueries);
       yield Promise.all(
         newQueries.map(
-          (d) => executePlasmicQuery(d.$query, d.query).catch(() => {
+          (d) => executePlasmicQuery(d.$query, d.query, d.ctx).catch(() => {
           })
         )
       );
@@ -1085,13 +1125,13 @@ function executePlasmicQueries(rootNode, options) {
     return { cache, queries };
   });
 }
-function executePlasmicQuery($query, query) {
+function executePlasmicQuery($query, query, ctx) {
   return __async(this, null, function* () {
     if ($query.current.state === "loading" || $query.current.state === "done") {
       return $query.getDoneResult();
     }
     do {
-      const paramsResult = resolveParams(query.execParams);
+      const paramsResult = resolveParams(query.id, () => query.args(ctx));
       switch (paramsResult.status) {
         case "blocked": {
           try {
@@ -1101,13 +1141,9 @@ function executePlasmicQuery($query, query) {
           continue;
         }
         case "ready": {
-          const cacheKey = makeQueryCacheKey(
-            query.id,
-            paramsResult.resolvedParams
-          );
           $query.loadingPromise(
-            cacheKey,
-            query.fn(...paramsResult.resolvedParams)
+            paramsResult.cacheKey,
+            Promise.resolve(query.fn(...paramsResult.resolvedParams))
           );
           return $query.getDoneResult();
         }