@webstudio-is/react-sdk 0.22.0 → 0.24.0

package/lib/app/custom-components/image.js

@@ -5,17 +5,17 @@ import {
 } from "react";
 import { Image as WebstudioImage, loaders } from "@webstudio-is/image";
 import { Image as SdkImage } from "../../components/image";
-import { useUserPropsAsset } from "../../user-props/use-user-props-asset";
+import { usePropAsset } from "../../props";
 import { idAttribute } from "../../tree/wrapper-component";
 import { getParams } from "../params";
 const defaultTag = "img";
 const Image = forwardRef(
   (props, ref) => {
     const componentId = props[idAttribute];
-    const asset = useUserPropsAsset(componentId, "src");
+    const asset = usePropAsset(componentId, "src");
     const params = getParams();
     const loader = useMemo(() => {
-      if (asset == null) {
+      if (asset === void 0) {
         return null;
       }
       if (asset.location === "REMOTE") {

package/lib/cjs/app/custom-components/image.cjs

@@ -25,17 +25,17 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_image = require("@webstudio-is/image");
 var import_image2 = require("../../components/image");
-var import_use_user_props_asset = require("../../user-props/use-user-props-asset");
+var import_props = require("../../props");
 var import_wrapper_component = require("../../tree/wrapper-component");
 var import_params = require("../params");
 const defaultTag = "img";
 const Image = (0, import_react.forwardRef)(
   (props, ref) => {
     const componentId = props[import_wrapper_component.idAttribute];
-    const asset = (0, import_use_user_props_asset.useUserPropsAsset)(componentId, "src");
+    const asset = (0, import_props.usePropAsset)(componentId, "src");
     const params = (0, import_params.getParams)();
     const loader = (0, import_react.useMemo)(() => {
-      if (asset == null) {
+      if (asset === void 0) {
         return null;
       }
       if (asset.location === "REMOTE") {

package/lib/cjs/components/index.cjs

@@ -111,32 +111,38 @@ const getComponentNames = () => {
   return [...uniqueNames.values()];
 };
 const getComponentMeta = (name) => {
+  const componentMeta = meta[name];
   if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
-    return { ...meta[name], ...registeredComponentsMeta[name] };
+    return {
+      ...componentMeta,
+      ...registeredComponentsMeta[name]
+    };
   }
-  return meta[name];
+  return componentMeta;
 };
 const getComponent = (name) => {
   return registeredComponents != null && name in registeredComponents ? registeredComponents[name] : components[name];
 };
 const getComponentMetaProps = (name) => {
+  const componentMeta = meta[name];
   if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
+    const registeredComponentMeta = registeredComponentsMeta[name];
     const allMetaPropKeys = /* @__PURE__ */ new Set([
-      ...Object.keys(meta[name]?.props ?? {}),
-      ...Object.keys(registeredComponentsMeta[name].props)
+      ...Object.keys(componentMeta?.props ?? {}),
+      ...Object.keys(registeredComponentMeta.props)
     ]);
     const props = {};
     for (const key of allMetaPropKeys.values()) {
       props[key] = {
-        ...meta[name]?.props[key],
-        ...registeredComponentsMeta[name]?.props?.[key],
-        defaultValue: registeredComponentsMeta[name]?.props?.[key]?.defaultValue ?? meta[name]?.props[key]?.defaultValue ?? null,
-        required: registeredComponentsMeta[name]?.props?.[key]?.required || meta[name]?.props[key]?.required
+        ...componentMeta?.props[key],
+        ...registeredComponentMeta?.props?.[key],
+        defaultValue: registeredComponentMeta?.props?.[key]?.defaultValue ?? componentMeta?.props[key]?.defaultValue ?? null,
+        required: registeredComponentMeta?.props?.[key]?.required || componentMeta?.props[key]?.required
       };
     }
     return props;
   }
-  return meta[name].props;
+  return componentMeta?.props;
 };
 const registerComponents = (components2) => {
   registeredComponents = components2;

package/lib/cjs/index.cjs

@@ -20,14 +20,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   customComponents: () => import_custom_components.customComponents,
-  customComponentsMeta: () => import_custom_components.customComponentsMeta
+  customComponentsMeta: () => import_custom_components.customComponentsMeta,
+  setPropsByInstanceIdStore: () => import_props.setPropsByInstanceIdStore
 });
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./css"), module.exports);
 __reExport(src_exports, require("./tree"), module.exports);
 __reExport(src_exports, require("./components"), module.exports);
-__reExport(src_exports, require("./user-props"), module.exports);
 __reExport(src_exports, require("./pubsub"), module.exports);
-__reExport(src_exports, require("./db"), 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

@@ -0,0 +1,80 @@
+"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 props_exports = {};
+__export(props_exports, {
+  getPropsByInstanceId: () => getPropsByInstanceId,
+  getPropsByInstanceIdStore: () => getPropsByInstanceIdStore,
+  setPropsByInstanceIdStore: () => setPropsByInstanceIdStore,
+  useInstanceProps: () => useInstanceProps,
+  usePropAsset: () => usePropAsset
+});
+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;
+};
+const getPropsByInstanceId = (props) => {
+  const propsByInstanceId = /* @__PURE__ */ new Map();
+  for (const prop of props) {
+    let instanceProps = propsByInstanceId.get(prop.instanceId);
+    if (instanceProps === void 0) {
+      instanceProps = [];
+      propsByInstanceId.set(prop.instanceId, instanceProps);
+    }
+    instanceProps.push(prop);
+  }
+  return propsByInstanceId;
+};
+const useInstanceProps = (instanceId) => {
+  const propsByInstanceId = (0, import_react2.useStore)(propsByInstanceIdStore);
+  const instanceProps = propsByInstanceId.get(instanceId);
+  const instancePropsObject = {};
+  if (instanceProps) {
+    for (const prop of instanceProps) {
+      if (prop.type !== "asset") {
+        instancePropsObject[prop.name] = prop.value;
+      }
+    }
+  }
+  return instancePropsObject;
+};
+const usePropAsset = (instanceId, name) => {
+  const assetStore = (0, import_react.useMemo)(() => {
+    return (0, import_nanostores.computed)(propsByInstanceIdStore, (propsByInstanceId) => {
+      const instanceProps = propsByInstanceId.get(instanceId);
+      let asset2 = void 0;
+      if (instanceProps) {
+        for (const prop of instanceProps) {
+          if (prop.type === "asset" && prop.name === name) {
+            asset2 = prop.value;
+          }
+        }
+      }
+      return asset2;
+    });
+  }, [instanceId, name]);
+  const asset = (0, import_react2.useStore)(assetStore);
+  return asset;
+};

package/lib/cjs/tree/root.cjs

@@ -21,12 +21,13 @@ __export(root_exports, {
   InstanceRoot: () => InstanceRoot
 });
 module.exports = __toCommonJS(root_exports);
-var import_user_props = require("../user-props/");
+var import_nanostores = require("nanostores");
 var import_create_elements_tree = require("./create-elements-tree");
 var import_wrapper_component = require("./wrapper-component");
 var import_components = require("../components");
 var import_custom_components = require("../app/custom-components");
 var import_params = require("../app/params");
+var import_props = require("../props");
 const InstanceRoot = ({
   data,
   Component,
@@ -35,7 +36,7 @@ const InstanceRoot = ({
   if (data.tree === null) {
     throw new Error("Tree is null");
   }
-  (0, import_user_props.useAllUserProps)(data.props);
+  (0, import_props.setPropsByInstanceIdStore)((0, import_nanostores.atom)((0, import_props.getPropsByInstanceId)(data.tree.props)));
   (0, import_params.setParams)(data.params ?? null);
   (0, import_components.registerComponents)(customComponents);
   return (0, import_create_elements_tree.createElementsTree)({

package/lib/cjs/tree/wrapper-component.cjs

@@ -27,7 +27,7 @@ module.exports = __toCommonJS(wrapper_component_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_components = require("../components");
-var import_use_user_props = require("../user-props/use-user-props");
+var import_props = require("../props");
 const renderText = (text) => {
   const lines = text.split("\n");
   return lines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, {
@@ -51,14 +51,17 @@ const WrapperComponent = ({
   children,
   ...rest
 }) => {
-  const Component = (0, import_components.getComponent)(instance.component);
-  const userProps = (0, import_use_user_props.useUserProps)(instance.id);
+  const instanceProps = (0, import_props.useInstanceProps)(instance.id);
   const props = {
-    ...userProps,
+    ...instanceProps,
     ...rest,
     [idAttribute]: instance.id,
     [componentAttribute]: instance.component
   };
+  const Component = (0, import_components.getComponent)(instance.component);
+  if (Component === void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
     ...props,
     children: renderWrapperComponentChildren(children)

package/lib/components/index.js

@@ -77,32 +77,38 @@ const getComponentNames = () => {
   return [...uniqueNames.values()];
 };
 const getComponentMeta = (name) => {
+  const componentMeta = meta[name];
   if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
-    return { ...meta[name], ...registeredComponentsMeta[name] };
+    return {
+      ...componentMeta,
+      ...registeredComponentsMeta[name]
+    };
   }
-  return meta[name];
+  return componentMeta;
 };
 const getComponent = (name) => {
   return registeredComponents != null && name in registeredComponents ? registeredComponents[name] : components[name];
 };
 const getComponentMetaProps = (name) => {
+  const componentMeta = meta[name];
   if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
+    const registeredComponentMeta = registeredComponentsMeta[name];
     const allMetaPropKeys = /* @__PURE__ */ new Set([
-      ...Object.keys(meta[name]?.props ?? {}),
-      ...Object.keys(registeredComponentsMeta[name].props)
+      ...Object.keys(componentMeta?.props ?? {}),
+      ...Object.keys(registeredComponentMeta.props)
     ]);
     const props = {};
     for (const key of allMetaPropKeys.values()) {
       props[key] = {
-        ...meta[name]?.props[key],
-        ...registeredComponentsMeta[name]?.props?.[key],
-        defaultValue: registeredComponentsMeta[name]?.props?.[key]?.defaultValue ?? meta[name]?.props[key]?.defaultValue ?? null,
-        required: registeredComponentsMeta[name]?.props?.[key]?.required || meta[name]?.props[key]?.required
+        ...componentMeta?.props[key],
+        ...registeredComponentMeta?.props?.[key],
+        defaultValue: registeredComponentMeta?.props?.[key]?.defaultValue ?? componentMeta?.props[key]?.defaultValue ?? null,
+        required: registeredComponentMeta?.props?.[key]?.required || componentMeta?.props[key]?.required
       };
     }
     return props;
   }
-  return meta[name].props;
+  return componentMeta?.props;
 };
 const registerComponents = (components2) => {
   registeredComponents = components2;

package/lib/index.js

@@ -1,15 +1,15 @@
 export * from "./css";
 export * from "./tree";
 export * from "./components";
-export * from "./user-props";
 export * from "./pubsub";
-export * from "./db";
 export * from "./app";
 import {
   customComponents,
   customComponentsMeta
 } from "./app/custom-components";
+import { setPropsByInstanceIdStore } from "./props";
 export {
   customComponents,
-  customComponentsMeta
+  customComponentsMeta,
+  setPropsByInstanceIdStore
 };

package/lib/props.js

@@ -0,0 +1,60 @@
+import { useMemo } from "react";
+import { atom, computed } from "nanostores";
+import { useStore } from "@nanostores/react";
+let propsByInstanceIdStore = atom(/* @__PURE__ */ new Map());
+const setPropsByInstanceIdStore = (store) => {
+  propsByInstanceIdStore = store;
+};
+const getPropsByInstanceIdStore = () => {
+  return propsByInstanceIdStore;
+};
+const getPropsByInstanceId = (props) => {
+  const propsByInstanceId = /* @__PURE__ */ new Map();
+  for (const prop of props) {
+    let instanceProps = propsByInstanceId.get(prop.instanceId);
+    if (instanceProps === void 0) {
+      instanceProps = [];
+      propsByInstanceId.set(prop.instanceId, instanceProps);
+    }
+    instanceProps.push(prop);
+  }
+  return propsByInstanceId;
+};
+const useInstanceProps = (instanceId) => {
+  const propsByInstanceId = useStore(propsByInstanceIdStore);
+  const instanceProps = propsByInstanceId.get(instanceId);
+  const instancePropsObject = {};
+  if (instanceProps) {
+    for (const prop of instanceProps) {
+      if (prop.type !== "asset") {
+        instancePropsObject[prop.name] = prop.value;
+      }
+    }
+  }
+  return instancePropsObject;
+};
+const usePropAsset = (instanceId, name) => {
+  const assetStore = useMemo(() => {
+    return computed(propsByInstanceIdStore, (propsByInstanceId) => {
+      const instanceProps = propsByInstanceId.get(instanceId);
+      let asset2 = void 0;
+      if (instanceProps) {
+        for (const prop of instanceProps) {
+          if (prop.type === "asset" && prop.name === name) {
+            asset2 = prop.value;
+          }
+        }
+      }
+      return asset2;
+    });
+  }, [instanceId, name]);
+  const asset = useStore(assetStore);
+  return asset;
+};
+export {
+  getPropsByInstanceId,
+  getPropsByInstanceIdStore,
+  setPropsByInstanceIdStore,
+  useInstanceProps,
+  usePropAsset
+};

package/lib/tree/root.js

@@ -1,9 +1,10 @@
-import { useAllUserProps } from "../user-props/";
+import { atom } from "nanostores";
 import { createElementsTree } from "./create-elements-tree";
 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";
 const InstanceRoot = ({
   data,
   Component,
@@ -12,7 +13,7 @@ const InstanceRoot = ({
   if (data.tree === null) {
     throw new Error("Tree is null");
   }
-  useAllUserProps(data.props);
+  setPropsByInstanceIdStore(atom(getPropsByInstanceId(data.tree.props)));
   setParams(data.params ?? null);
   registerComponents(customComponents);
   return createElementsTree({

package/lib/tree/wrapper-component.js

@@ -1,10 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2 } from "react";
 import { getComponent } from "../components";
-import { useUserProps } from "../user-props/use-user-props";
+import { useInstanceProps } from "../props";
 const renderText = (text) => {
   const lines = text.split("\n");
-  return lines.map((line, index) => /* @__PURE__ */ jsxs(Fragment, {
+  return lines.map((line, index) => /* @__PURE__ */ jsxs(Fragment2, {
     children: [
       line,
       index < lines.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
@@ -25,14 +25,17 @@ const WrapperComponent = ({
   children,
   ...rest
 }) => {
-  const Component = getComponent(instance.component);
-  const userProps = useUserProps(instance.id);
+  const instanceProps = useInstanceProps(instance.id);
   const props = {
-    ...userProps,
+    ...instanceProps,
     ...rest,
     [idAttribute]: instance.id,
     [componentAttribute]: instance.component
   };
+  const Component = getComponent(instance.component);
+  if (Component === void 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
   return /* @__PURE__ */ jsx(Component, {
     ...props,
     children: renderWrapperComponentChildren(children)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -9,12 +9,12 @@
     "@babel/core": "^7.20.2",
     "@esbuild-kit/esm-loader": "^2.4.2",
     "@jest/globals": "^29.3.1",
-    "@remix-run/node": "1.9.0",
-    "@remix-run/react": "1.9.0",
-    "@remix-run/server-runtime": "1.9.0",
+    "@remix-run/node": "1.12.0",
+    "@remix-run/react": "1.12.0",
+    "@remix-run/server-runtime": "1.12.0",
     "@storybook/react": "^6.5.14",
     "@storybook/testing-library": "^0.0.11",
-    "@types/node": "^17.0.21",
+    "@types/node": "^18.11.18",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
     "babel-loader": "^8.2.5",
@@ -47,12 +47,12 @@
     "mitt": "^3.0.0",
     "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.22.0",
-    "@webstudio-is/css-data": "^0.22.0",
-    "@webstudio-is/design-tokens": "^0.22.0",
-    "@webstudio-is/icons": "^0.22.0",
-    "@webstudio-is/image": "^0.22.0",
-    "@webstudio-is/prisma-client": "^0.22.0"
+    "@webstudio-is/asset-uploader": "^0.24.0",
+    "@webstudio-is/css-data": "^0.24.0",
+    "@webstudio-is/icons": "^0.24.0",
+    "@webstudio-is/image": "^0.24.0",
+    "@webstudio-is/prisma-client": "^0.24.0",
+    "@webstudio-is/project-build": "^0.24.0"
   },
   "exports": {
     "import": "./lib/index.js",

package/src/app/custom-components/image.tsx

@@ -6,7 +6,7 @@ import {
 } from "react";
 import { Image as WebstudioImage, loaders } from "@webstudio-is/image";
 import { Image as SdkImage } from "../../components/image";
-import { useUserPropsAsset } from "../../user-props/use-user-props-asset";
+import { usePropAsset } from "../../props";
 import { idAttribute } from "../../tree/wrapper-component";
 import { getParams } from "../params";
 
@@ -18,11 +18,11 @@ export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
   (props, ref) => {
     const componentId = props[idAttribute] as string;
 
-    const asset = useUserPropsAsset(componentId, "src");
+    const asset = usePropAsset(componentId, "src");
     const params = getParams();
 
     const loader = useMemo(() => {
-      if (asset == null) {
+      if (asset === undefined) {
         return null;
       }
       if (asset.location === "REMOTE") {

package/src/components/index.ts

@@ -96,28 +96,37 @@ export const getComponentNames = (): ComponentName[] => {
   return [...uniqueNames.values()] as ComponentName[];
 };
 
-export const getComponentMeta = (name: ComponentName): WsComponentMeta => {
+export const getComponentMeta = (name: string): undefined | WsComponentMeta => {
+  const componentMeta = meta[name as ComponentName];
   if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
-    return { ...meta[name], ...registeredComponentsMeta[name] };
+    return {
+      ...componentMeta,
+      ...registeredComponentsMeta[name as ComponentName],
+    };
   }
 
-  return meta[name];
+  return componentMeta;
 };
 
 export const getComponent = (
-  name: ComponentName
-): typeof components[ComponentName] => {
+  name: string
+): undefined | typeof components[ComponentName] => {
   return registeredComponents != null && name in registeredComponents
-    ? (registeredComponents[name] as typeof components[ComponentName])
-    : components[name];
+    ? (registeredComponents[
+        name as ComponentName
+      ] as typeof components[ComponentName])
+    : components[name as ComponentName];
 };
 
-export const getComponentMetaProps = (name: ComponentName): MetaProps => {
+export const getComponentMetaProps = (name: string): undefined | MetaProps => {
+  const componentMeta = meta[name as ComponentName];
   if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
+    const registeredComponentMeta =
+      registeredComponentsMeta[name as ComponentName];
     const allMetaPropKeys = new Set([
-      ...Object.keys(meta[name]?.props ?? {}),
+      ...Object.keys(componentMeta?.props ?? {}),
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      ...Object.keys(registeredComponentsMeta[name]!.props!),
+      ...Object.keys(registeredComponentMeta!.props!),
     ]);
 
     const props: MetaProps = {};
@@ -126,21 +135,21 @@ export const getComponentMetaProps = (name: ComponentName): MetaProps => {
      **/
     for (const key of allMetaPropKeys.values()) {
       props[key] = {
-        ...meta[name]?.props[key],
-        ...registeredComponentsMeta[name]?.props?.[key],
+        ...componentMeta?.props[key],
+        ...registeredComponentMeta?.props?.[key],
         defaultValue:
-          registeredComponentsMeta[name]?.props?.[key]?.defaultValue ??
-          meta[name]?.props[key]?.defaultValue ??
+          registeredComponentMeta?.props?.[key]?.defaultValue ??
+          componentMeta?.props[key]?.defaultValue ??
           null,
         required:
-          registeredComponentsMeta[name]?.props?.[key]?.required ||
-          meta[name]?.props[key]?.required,
+          registeredComponentMeta?.props?.[key]?.required ||
+          componentMeta?.props[key]?.required,
       } as MetaProps[string];
     }
     return props;
   }
 
-  return meta[name].props;
+  return componentMeta?.props;
 };
 
 /**

package/src/index.ts

@@ -1,12 +1,11 @@
 export * from "./css";
 export * from "./tree";
 export * from "./components";
-export * from "./user-props";
 export * from "./pubsub";
-export * from "./db";
 export * from "./app";
 export {
   customComponents,
   customComponentsMeta,
 } from "./app/custom-components";
-export type { MetaProps } from "./components/component-type";
+export type { MetaProps, WsComponentMeta } from "./components/component-type";
+export { setPropsByInstanceIdStore } from "./props";

package/src/props.ts

@@ -0,0 +1,69 @@
+import { useMemo } from "react";
+import { atom, computed, type ReadableAtom } from "nanostores";
+import { useStore } from "@nanostores/react";
+import type { Instance, Props } from "@webstudio-is/project-build";
+import type { Asset } from "@webstudio-is/asset-uploader";
+
+type PropsByInstanceId = Map<Instance["id"], Props>;
+
+type PropsByInstanceIdStore = ReadableAtom<PropsByInstanceId>;
+
+let propsByInstanceIdStore: PropsByInstanceIdStore = atom(new Map());
+
+export const setPropsByInstanceIdStore = (store: PropsByInstanceIdStore) => {
+  propsByInstanceIdStore = store;
+};
+
+export const getPropsByInstanceIdStore = () => {
+  return propsByInstanceIdStore;
+};
+
+export const getPropsByInstanceId = (props: Props) => {
+  const propsByInstanceId: PropsByInstanceId = new Map();
+  for (const prop of props) {
+    let instanceProps = propsByInstanceId.get(prop.instanceId);
+    if (instanceProps === undefined) {
+      instanceProps = [];
+      propsByInstanceId.set(prop.instanceId, instanceProps);
+    }
+    instanceProps.push(prop);
+  }
+  return propsByInstanceId;
+};
+
+// 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 propsByInstanceId = useStore(propsByInstanceIdStore);
+  const instanceProps = propsByInstanceId.get(instanceId);
+  const instancePropsObject: Record<string, number | string | boolean> = {};
+  if (instanceProps) {
+    for (const prop of instanceProps) {
+      if (prop.type !== "asset") {
+        instancePropsObject[prop.name] = prop.value;
+      }
+    }
+  }
+  return instancePropsObject;
+};
+
+// 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 assetStore = useMemo(() => {
+    return computed(propsByInstanceIdStore, (propsByInstanceId) => {
+      const instanceProps = propsByInstanceId.get(instanceId);
+      let asset: undefined | Asset = undefined;
+      if (instanceProps) {
+        for (const prop of instanceProps) {
+          if (prop.type === "asset" && prop.name === name) {
+            asset = prop.value;
+          }
+        }
+      }
+      return asset;
+    });
+  }, [instanceId, name]);
+  const asset = useStore(assetStore);
+  return asset;
+};