@webstudio-is/react-sdk 0.27.0 → 0.28.0

package/lib/cjs/context.cjs

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var context_exports = {};
+__export(context_exports, {
+  ReactSdkContext: () => ReactSdkContext
+});
+module.exports = __toCommonJS(context_exports);
+var import_nanostores = require("nanostores");
+var import_react = require("react");
+const ReactSdkContext = (0, import_react.createContext)({
+  propsByInstanceIdStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
+  assetsStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map())
+});

package/lib/cjs/index.cjs

@@ -20,8 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   customComponents: () => import_custom_components.customComponents,
-  customComponentsMeta: () => import_custom_components.customComponentsMeta,
-  setPropsByInstanceIdStore: () => import_props.setPropsByInstanceIdStore
+  customComponentsMeta: () => import_custom_components.customComponentsMeta
 });
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./css"), module.exports);
@@ -30,4 +29,3 @@ __reExport(src_exports, require("./components"), module.exports);
 __reExport(src_exports, require("./pubsub"), module.exports);
 __reExport(src_exports, require("./app"), module.exports);
 var import_custom_components = require("./app/custom-components");
-var import_props = require("./props");

package/lib/cjs/props.cjs

@@ -19,8 +19,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var props_exports = {};
 __export(props_exports, {
   getPropsByInstanceId: () => getPropsByInstanceId,
-  getPropsByInstanceIdStore: () => getPropsByInstanceIdStore,
-  setPropsByInstanceIdStore: () => setPropsByInstanceIdStore,
   useInstanceProps: () => useInstanceProps,
   usePropAsset: () => usePropAsset
 });
@@ -28,13 +26,7 @@ module.exports = __toCommonJS(props_exports);
 var import_react = require("react");
 var import_nanostores = require("nanostores");
 var import_react2 = require("@nanostores/react");
-let propsByInstanceIdStore = (0, import_nanostores.atom)(/* @__PURE__ */ new Map());
-const setPropsByInstanceIdStore = (store) => {
-  propsByInstanceIdStore = store;
-};
-const getPropsByInstanceIdStore = () => {
-  return propsByInstanceIdStore;
-};
+var import_context = require("./context");
 const getPropsByInstanceId = (props) => {
   const propsByInstanceId = /* @__PURE__ */ new Map();
   for (const prop of props.values()) {
@@ -48,6 +40,7 @@ const getPropsByInstanceId = (props) => {
   return propsByInstanceId;
 };
 const useInstanceProps = (instanceId) => {
+  const { propsByInstanceIdStore } = (0, import_react.useContext)(import_context.ReactSdkContext);
   const propsByInstanceId = (0, import_react2.useStore)(propsByInstanceIdStore);
   const instanceProps = propsByInstanceId.get(instanceId);
   const instancePropsObject = {};
@@ -61,20 +54,24 @@ const useInstanceProps = (instanceId) => {
   return instancePropsObject;
 };
 const usePropAsset = (instanceId, name) => {
+  const { propsByInstanceIdStore, assetsStore } = (0, import_react.useContext)(import_context.ReactSdkContext);
   const assetStore = (0, import_react.useMemo)(() => {
-    return (0, import_nanostores.computed)(propsByInstanceIdStore, (propsByInstanceId) => {
-      const instanceProps = propsByInstanceId.get(instanceId);
-      let asset2 = void 0;
-      if (instanceProps) {
+    return (0, import_nanostores.computed)(
+      [propsByInstanceIdStore, assetsStore],
+      (propsByInstanceId, assets) => {
+        const instanceProps = propsByInstanceId.get(instanceId);
+        if (instanceProps === void 0) {
+          return void 0;
+        }
         for (const prop of instanceProps) {
           if (prop.type === "asset" && prop.name === name) {
-            asset2 = prop.value;
+            const assetId = prop.value;
+            return assets.get(assetId);
           }
         }
       }
-      return asset2;
-    });
-  }, [instanceId, name]);
+    );
+  }, [propsByInstanceIdStore, assetsStore, instanceId, name]);
   const asset = (0, import_react2.useStore)(assetStore);
   return asset;
 };

package/lib/cjs/tree/create-elements-tree.cjs

@@ -24,10 +24,13 @@ module.exports = __toCommonJS(create_elements_tree_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react2 = require("@remix-run/react");
+var import_context = require("../context");
 var import_session_storage_polyfill = require("./session-storage-polyfill");
 const createElementsTree = ({
   sandbox,
   instance,
+  propsByInstanceIdStore,
+  assetsStore,
   Component,
   onChangeChildren
 }) => {
@@ -50,7 +53,10 @@ const createElementsTree = ({
       }, "children")
     ]
   });
-  return body;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.ReactSdkContext.Provider, {
+    value: { propsByInstanceIdStore, assetsStore },
+    children: body
+  });
 };
 const createInstanceChildrenElements = ({
   children,

package/lib/cjs/tree/root.cjs

@@ -36,13 +36,14 @@ const InstanceRoot = ({
   if (data.tree === null) {
     throw new Error("Tree is null");
   }
-  (0, import_props.setPropsByInstanceIdStore)(
-    (0, import_nanostores.atom)((0, import_props.getPropsByInstanceId)(new Map(data.tree.props)))
-  );
   (0, import_params.setParams)(data.params ?? null);
   (0, import_components.registerComponents)(customComponents);
   return (0, import_create_elements_tree.createElementsTree)({
     instance: data.tree.root,
+    propsByInstanceIdStore: (0, import_nanostores.atom)(
+      (0, import_props.getPropsByInstanceId)(new Map(data.tree.props))
+    ),
+    assetsStore: (0, import_nanostores.atom)(new Map(data.assets.map((asset) => [asset.id, asset]))),
     Component: Component ?? import_wrapper_component.WrapperComponent
   });
 };

package/lib/context.js

@@ -0,0 +1,9 @@
+import { atom } from "nanostores";
+import { createContext } from "react";
+const ReactSdkContext = createContext({
+  propsByInstanceIdStore: atom(/* @__PURE__ */ new Map()),
+  assetsStore: atom(/* @__PURE__ */ new Map())
+});
+export {
+  ReactSdkContext
+};

package/lib/index.js

@@ -7,9 +7,7 @@ import {
   customComponents,
   customComponentsMeta
 } from "./app/custom-components";
-import { setPropsByInstanceIdStore } from "./props";
 export {
   customComponents,
-  customComponentsMeta,
-  setPropsByInstanceIdStore
+  customComponentsMeta
 };

package/lib/props.js

@@ -1,13 +1,7 @@
-import { useMemo } from "react";
-import { atom, computed } from "nanostores";
+import { useContext, useMemo } from "react";
+import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
-let propsByInstanceIdStore = atom(/* @__PURE__ */ new Map());
-const setPropsByInstanceIdStore = (store) => {
-  propsByInstanceIdStore = store;
-};
-const getPropsByInstanceIdStore = () => {
-  return propsByInstanceIdStore;
-};
+import { ReactSdkContext } from "./context";
 const getPropsByInstanceId = (props) => {
   const propsByInstanceId = /* @__PURE__ */ new Map();
   for (const prop of props.values()) {
@@ -21,6 +15,7 @@ const getPropsByInstanceId = (props) => {
   return propsByInstanceId;
 };
 const useInstanceProps = (instanceId) => {
+  const { propsByInstanceIdStore } = useContext(ReactSdkContext);
   const propsByInstanceId = useStore(propsByInstanceIdStore);
   const instanceProps = propsByInstanceId.get(instanceId);
   const instancePropsObject = {};
@@ -34,27 +29,29 @@ const useInstanceProps = (instanceId) => {
   return instancePropsObject;
 };
 const usePropAsset = (instanceId, name) => {
+  const { propsByInstanceIdStore, assetsStore } = useContext(ReactSdkContext);
   const assetStore = useMemo(() => {
-    return computed(propsByInstanceIdStore, (propsByInstanceId) => {
-      const instanceProps = propsByInstanceId.get(instanceId);
-      let asset2 = void 0;
-      if (instanceProps) {
+    return computed(
+      [propsByInstanceIdStore, assetsStore],
+      (propsByInstanceId, assets) => {
+        const instanceProps = propsByInstanceId.get(instanceId);
+        if (instanceProps === void 0) {
+          return void 0;
+        }
         for (const prop of instanceProps) {
           if (prop.type === "asset" && prop.name === name) {
-            asset2 = prop.value;
+            const assetId = prop.value;
+            return assets.get(assetId);
           }
         }
       }
-      return asset2;
-    });
-  }, [instanceId, name]);
+    );
+  }, [propsByInstanceIdStore, assetsStore, instanceId, name]);
   const asset = useStore(assetStore);
   return asset;
 };
 export {
   getPropsByInstanceId,
-  getPropsByInstanceIdStore,
-  setPropsByInstanceIdStore,
   useInstanceProps,
   usePropAsset
 };

package/lib/tree/create-elements-tree.js

@@ -1,10 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
+import { ReactSdkContext } from "../context";
 import { SessionStoragePolyfill } from "./session-storage-polyfill";
 const createElementsTree = ({
   sandbox,
   instance,
+  propsByInstanceIdStore,
+  assetsStore,
   Component,
   onChangeChildren
 }) => {
@@ -27,7 +30,10 @@ const createElementsTree = ({
       }, "children")
     ]
   });
-  return body;
+  return /* @__PURE__ */ jsx(ReactSdkContext.Provider, {
+    value: { propsByInstanceIdStore, assetsStore },
+    children: body
+  });
 };
 const createInstanceChildrenElements = ({
   children,

package/lib/tree/root.js

@@ -4,7 +4,7 @@ import { WrapperComponent } from "./wrapper-component";
 import { registerComponents } from "../components";
 import { customComponents as defaultCustomComponents } from "../app/custom-components";
 import { setParams } from "../app/params";
-import { getPropsByInstanceId, setPropsByInstanceIdStore } from "../props";
+import { getPropsByInstanceId } from "../props";
 const InstanceRoot = ({
   data,
   Component,
@@ -13,13 +13,14 @@ const InstanceRoot = ({
   if (data.tree === null) {
     throw new Error("Tree is null");
   }
-  setPropsByInstanceIdStore(
-    atom(getPropsByInstanceId(new Map(data.tree.props)))
-  );
   setParams(data.params ?? null);
   registerComponents(customComponents);
   return createElementsTree({
     instance: data.tree.root,
+    propsByInstanceIdStore: atom(
+      getPropsByInstanceId(new Map(data.tree.props))
+    ),
+    assetsStore: atom(new Map(data.assets.map((asset) => [asset.id, asset]))),
     Component: Component ?? WrapperComponent
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -47,12 +47,12 @@
     "mitt": "^3.0.0",
     "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.27.0",
-    "@webstudio-is/css-data": "^0.27.0",
-    "@webstudio-is/icons": "^0.27.0",
-    "@webstudio-is/image": "^0.27.0",
-    "@webstudio-is/prisma-client": "^0.27.0",
-    "@webstudio-is/project-build": "^0.27.0"
+    "@webstudio-is/asset-uploader": "^0.28.0",
+    "@webstudio-is/css-data": "^0.28.0",
+    "@webstudio-is/icons": "^0.28.0",
+    "@webstudio-is/image": "^0.28.0",
+    "@webstudio-is/prisma-client": "^0.28.0",
+    "@webstudio-is/project-build": "^0.28.0"
   },
   "exports": {
     "import": "./lib/index.js",

package/src/context.tsx

@@ -0,0 +1,11 @@
+import { type ReadableAtom, atom } from "nanostores";
+import { createContext } from "react";
+import type { Assets, PropsByInstanceId } from "./props";
+
+export const ReactSdkContext = createContext<{
+  propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
+  assetsStore: ReadableAtom<Assets>;
+}>({
+  propsByInstanceIdStore: atom(new Map()),
+  assetsStore: atom(new Map()),
+});

package/src/index.ts

@@ -8,4 +8,3 @@ export {
   customComponentsMeta,
 } from "./app/custom-components";
 export type { MetaProps, WsComponentMeta } from "./components/component-type";
-export { setPropsByInstanceIdStore } from "./props";

package/src/props.ts

@@ -1,22 +1,13 @@
-import { useMemo } from "react";
-import { atom, computed, type ReadableAtom } from "nanostores";
+import { useContext, useMemo } from "react";
+import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import type { Instance, Prop, Props } from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
+import { ReactSdkContext } from "./context";
 
-type PropsByInstanceId = Map<Instance["id"], Prop[]>;
+export type PropsByInstanceId = Map<Instance["id"], Prop[]>;
 
-type PropsByInstanceIdStore = ReadableAtom<PropsByInstanceId>;
-
-let propsByInstanceIdStore: PropsByInstanceIdStore = atom(new Map());
-
-export const setPropsByInstanceIdStore = (store: PropsByInstanceIdStore) => {
-  propsByInstanceIdStore = store;
-};
-
-export const getPropsByInstanceIdStore = () => {
-  return propsByInstanceIdStore;
-};
+export type Assets = Map<Asset["id"], Asset>;
 
 export const getPropsByInstanceId = (props: Props) => {
   const propsByInstanceId: PropsByInstanceId = new Map();
@@ -34,6 +25,7 @@ export const getPropsByInstanceId = (props: Props) => {
 // this utility is be used only for preview with static props
 // so there is no need to use computed to optimize rerenders
 export const useInstanceProps = (instanceId: Instance["id"]) => {
+  const { propsByInstanceIdStore } = useContext(ReactSdkContext);
   const propsByInstanceId = useStore(propsByInstanceIdStore);
   const instanceProps = propsByInstanceId.get(instanceId);
   const instancePropsObject: Record<string, number | string | boolean> = {};
@@ -50,20 +42,24 @@ export const useInstanceProps = (instanceId: Instance["id"]) => {
 // this utility is be used for image component in both designer and preview
 // so need to optimize rerenders with computed
 export const usePropAsset = (instanceId: Instance["id"], name: string) => {
+  const { propsByInstanceIdStore, assetsStore } = useContext(ReactSdkContext);
   const assetStore = useMemo(() => {
-    return computed(propsByInstanceIdStore, (propsByInstanceId) => {
-      const instanceProps = propsByInstanceId.get(instanceId);
-      let asset: undefined | Asset = undefined;
-      if (instanceProps) {
+    return computed(
+      [propsByInstanceIdStore, assetsStore],
+      (propsByInstanceId, assets) => {
+        const instanceProps = propsByInstanceId.get(instanceId);
+        if (instanceProps === undefined) {
+          return undefined;
+        }
         for (const prop of instanceProps) {
           if (prop.type === "asset" && prop.name === name) {
-            asset = prop.value;
+            const assetId = prop.value;
+            return assets.get(assetId);
           }
         }
       }
-      return asset;
-    });
-  }, [instanceId, name]);
+    );
+  }, [propsByInstanceIdStore, assetsStore, instanceId, name]);
   const asset = useStore(assetStore);
   return asset;
 };

package/src/tree/create-elements-tree.tsx

@@ -1,6 +1,9 @@
 import { type ComponentProps, Fragment } from "react";
+import { ReadableAtom } from "nanostores";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
 import type { Instance } from "@webstudio-is/project-build";
+import { ReactSdkContext } from "../context";
+import { Assets, PropsByInstanceId } from "../props";
 import { WrapperComponent } from "./wrapper-component";
 import { SessionStoragePolyfill } from "./session-storage-polyfill";
 
@@ -25,11 +28,15 @@ export type OnChangeChildren = (change: {
 export const createElementsTree = ({
   sandbox,
   instance,
+  propsByInstanceIdStore,
+  assetsStore,
   Component,
   onChangeChildren,
 }: {
   sandbox?: boolean;
   instance: Instance;
+  propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
+  assetsStore: ReadableAtom<Assets>;
   Component: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
   onChangeChildren?: OnChangeChildren;
 }) => {
@@ -50,7 +57,11 @@ export const createElementsTree = ({
       </Fragment>,
     ],
   });
-  return body;
+  return (
+    <ReactSdkContext.Provider value={{ propsByInstanceIdStore, assetsStore }}>
+      {body}
+    </ReactSdkContext.Provider>
+  );
 };
 
 const createInstanceChildrenElements = ({

package/src/tree/root.ts

@@ -7,7 +7,7 @@ import { WrapperComponent } from "./wrapper-component";
 import { registerComponents } from "../components";
 import { customComponents as defaultCustomComponents } from "../app/custom-components";
 import { setParams, type Params } from "../app/params";
-import { getPropsByInstanceId, setPropsByInstanceIdStore } from "../props";
+import { getPropsByInstanceId } from "../props";
 
 export type Data = {
   tree: Tree | null;
@@ -30,16 +30,16 @@ export const InstanceRoot = ({
     throw new Error("Tree is null");
   }
 
-  setPropsByInstanceIdStore(
-    atom(getPropsByInstanceId(new Map(data.tree.props)))
-  );
-
   setParams(data.params ?? null);
 
   registerComponents(customComponents);
 
   return createElementsTree({
     instance: data.tree.root,
+    propsByInstanceIdStore: atom(
+      getPropsByInstanceId(new Map(data.tree.props))
+    ),
+    assetsStore: atom(new Map(data.assets.map((asset) => [asset.id, asset]))),
     Component: Component ?? WrapperComponent,
   });
 };