@webstudio-is/react-sdk 0.90.0 → 0.92.0

package/lib/cjs/props.js

@@ -1,204 +0,0 @@
-"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, {
-  getIndexWithinAncestorFromComponentProps: () => getIndexWithinAncestorFromComponentProps,
-  getInstanceIdFromComponentProps: () => getInstanceIdFromComponentProps,
-  getPropsByInstanceId: () => getPropsByInstanceId,
-  resolveUrlProp: () => resolveUrlProp,
-  useInstanceProps: () => useInstanceProps,
-  usePropAsset: () => usePropAsset,
-  usePropUrl: () => usePropUrl
-});
-module.exports = __toCommonJS(props_exports);
-var import_react = require("react");
-var import_nanostores = require("nanostores");
-var import_react2 = require("@nanostores/react");
-var import_context = require("./context");
-var import_webstudio_component = require("./tree/webstudio-component");
-const getPropsByInstanceId = (props) => {
-  const propsByInstanceId = /* @__PURE__ */ new Map();
-  for (const prop of props.values()) {
-    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 {
-    propsByInstanceIdStore,
-    dataSourceValuesStore,
-    executeEffectfulExpression,
-    setDataSourceValues,
-    indexesWithinAncestors
-  } = (0, import_react.useContext)(import_context.ReactSdkContext);
-  const index = indexesWithinAncestors.get(instanceId);
-  const instancePropsObjectStore = (0, import_react.useMemo)(() => {
-    return (0, import_nanostores.computed)(
-      [propsByInstanceIdStore, dataSourceValuesStore],
-      (propsByInstanceId, dataSourceValues) => {
-        const instancePropsObject2 = {};
-        if (index !== void 0) {
-          instancePropsObject2[import_webstudio_component.indexAttribute] = index.toString();
-        }
-        const instanceProps = propsByInstanceId.get(instanceId);
-        if (instanceProps === void 0) {
-          return instancePropsObject2;
-        }
-        for (const prop of instanceProps) {
-          if (prop.type === "asset" || prop.type === "page") {
-            continue;
-          }
-          if (prop.type === "dataSource") {
-            const dataSourceId = prop.value;
-            const value = dataSourceValues.get(dataSourceId);
-            if (value !== void 0) {
-              instancePropsObject2[prop.name] = value;
-            }
-            continue;
-          }
-          if (prop.type === "action") {
-            instancePropsObject2[prop.name] = (...args) => {
-              for (const value of prop.value) {
-                if (value.type === "execute") {
-                  const argsMap = /* @__PURE__ */ new Map();
-                  for (const [i, name] of value.args.entries()) {
-                    argsMap.set(name, args[i]);
-                  }
-                  const newValues = executeEffectfulExpression(
-                    value.code,
-                    argsMap,
-                    dataSourceValues
-                  );
-                  setDataSourceValues(newValues);
-                }
-              }
-            };
-            continue;
-          }
-          instancePropsObject2[prop.name] = prop.value;
-        }
-        return instancePropsObject2;
-      }
-    );
-  }, [
-    propsByInstanceIdStore,
-    dataSourceValuesStore,
-    instanceId,
-    executeEffectfulExpression,
-    setDataSourceValues,
-    index
-  ]);
-  const instancePropsObject = (0, import_react2.useStore)(instancePropsObjectStore);
-  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, assetsStore],
-      (propsByInstanceId, assets) => {
-        const instanceProps = propsByInstanceId.get(instanceId);
-        if (instanceProps === void 0) {
-          return;
-        }
-        for (const prop of instanceProps) {
-          if (prop.type === "asset" && prop.name === name) {
-            const assetId = prop.value;
-            return assets.get(assetId);
-          }
-        }
-      }
-    );
-  }, [propsByInstanceIdStore, assetsStore, instanceId, name]);
-  const asset = (0, import_react2.useStore)(assetStore);
-  return asset;
-};
-const resolveUrlProp = (instanceId, name, {
-  props,
-  pages,
-  assets
-}) => {
-  const instanceProps = props.get(instanceId);
-  if (instanceProps === void 0) {
-    return;
-  }
-  let prop = void 0;
-  for (const intanceProp of instanceProps) {
-    if (intanceProp.name !== name) {
-      continue;
-    }
-    prop = intanceProp;
-  }
-  if (prop === void 0) {
-    return;
-  }
-  if (prop.type === "page") {
-    if (typeof prop.value === "string") {
-      const page2 = pages.get(prop.value);
-      return page2 && { type: "page", page: page2 };
-    }
-    const { instanceId: instanceId2, pageId } = prop.value;
-    const page = pages.get(pageId);
-    if (page === void 0) {
-      return;
-    }
-    const idProp = props.get(instanceId2)?.find((prop2) => prop2.name === "id");
-    return {
-      type: "page",
-      page,
-      instanceId: instanceId2,
-      hash: idProp === void 0 || idProp.type !== "string" ? void 0 : idProp.value
-    };
-  }
-  if (prop.type === "string") {
-    for (const page of pages.values()) {
-      if (page.path === prop.value) {
-        return { type: "page", page };
-      }
-    }
-    return { type: "string", url: prop.value };
-  }
-  if (prop.type === "asset") {
-    const asset = assets.get(prop.value);
-    return asset && { type: "asset", asset };
-  }
-  return;
-};
-const usePropUrl = (instanceId, name) => {
-  const { propsByInstanceIdStore, pagesStore, assetsStore } = (0, import_react.useContext)(import_context.ReactSdkContext);
-  const store = (0, import_react.useMemo)(
-    () => (0, import_nanostores.computed)(
-      [propsByInstanceIdStore, pagesStore, assetsStore],
-      (props, pages, assets) => resolveUrlProp(instanceId, name, { props, pages, assets })
-    ),
-    [propsByInstanceIdStore, pagesStore, assetsStore, instanceId, name]
-  );
-  return (0, import_react2.useStore)(store);
-};
-const getInstanceIdFromComponentProps = (props) => {
-  return props[import_webstudio_component.idAttribute];
-};
-const getIndexWithinAncestorFromComponentProps = (props) => {
-  return props[import_webstudio_component.indexAttribute];
-};

package/lib/cjs/pubsub/create.js

@@ -1,78 +0,0 @@
-"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 create_exports = {};
-__export(create_exports, {
-  createPubsub: () => createPubsub
-});
-module.exports = __toCommonJS(create_exports);
-var import_nanoevents = require("nanoevents");
-var import_react = require("react");
-var import_raf_queue = require("./raf-queue");
-const createPubsub = () => {
-  const emitter = (0, import_nanoevents.createNanoEvents)();
-  if (typeof window === "object") {
-    window.addEventListener(
-      "message",
-      (event) => {
-        if (typeof event.data?.type === "string") {
-          (0, import_raf_queue.batchUpdate)(() => emitter.emit(event.data.type, event.data.payload));
-        }
-      },
-      false
-    );
-  }
-  return {
-    /**
-     * To publish a postMessage event on the current window and parent window from the iframe.
-     */
-    publish(action) {
-      window.parent.postMessage(action, "*");
-      window.postMessage(action, "*");
-    },
-    /**
-     * To publish a postMessage event on the iframe and parent window from the parent window.
-     */
-    usePublish() {
-      const iframeRef = (0, import_react.useRef)(null);
-      const publishCallback = (0, import_react.useCallback)(
-        (action) => {
-          const element = iframeRef.current;
-          if (element?.contentWindow == null) {
-            return;
-          }
-          element.contentWindow.postMessage(action, "*");
-          window.postMessage(action, "*");
-        },
-        [iframeRef]
-      );
-      return [publishCallback, iframeRef];
-    },
-    /**
-     * To subscribe a message event on the current window.
-     */
-    useSubscribe(type, onAction) {
-      (0, import_react.useEffect)(() => {
-        return emitter.on(type, onAction);
-      }, [type, onAction]);
-    },
-    subscribe(type, onAction) {
-      return emitter.on(type, onAction);
-    }
-  };
-};

package/lib/cjs/pubsub/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var pubsub_exports = {};
-module.exports = __toCommonJS(pubsub_exports);
-__reExport(pubsub_exports, require("./create"), module.exports);

package/lib/cjs/pubsub/raf-queue.js

@@ -1,42 +0,0 @@
-"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 raf_queue_exports = {};
-__export(raf_queue_exports, {
-  batchUpdate: () => batchUpdate
-});
-module.exports = __toCommonJS(raf_queue_exports);
-let handle;
-let updateQueue = [];
-const processUpdates = (updates) => {
-  for (const update of updates) {
-    update();
-  }
-};
-const batchUpdate = (update) => {
-  updateQueue.push(update);
-  if (handle !== void 0) {
-    return;
-  }
-  handle = requestAnimationFrame(() => {
-    const updates = updateQueue;
-    updateQueue = [];
-    handle = void 0;
-    processUpdates(updates);
-  });
-};

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

@@ -1,152 +0,0 @@
-"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 create_elements_tree_exports = {};
-__export(create_elements_tree_exports, {
-  createElementsTree: () => createElementsTree
-});
-module.exports = __toCommonJS(create_elements_tree_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_context = require("../context");
-const createElementsTree = ({
-  renderer,
-  imageBaseUrl,
-  assetBaseUrl,
-  instances,
-  rootInstanceId,
-  propsByInstanceIdStore,
-  assetsStore,
-  pagesStore,
-  dataSourceValuesStore,
-  executeEffectfulExpression,
-  onDataSourceUpdate,
-  indexesWithinAncestors,
-  Component,
-  components,
-  scripts
-}) => {
-  const rootInstance = instances.get(rootInstanceId);
-  if (rootInstance === void 0) {
-    return null;
-  }
-  const rootInstanceSelector = [rootInstanceId];
-  const children = createInstanceChildrenElements({
-    instances,
-    instanceSelector: rootInstanceSelector,
-    Component,
-    children: rootInstance.children,
-    components
-  });
-  const root = createInstanceElement({
-    Component,
-    instance: rootInstance,
-    instanceSelector: rootInstanceSelector,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
-        children,
-        scripts
-      ] }, "children")
-    ],
-    components
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_context.ReactSdkContext.Provider,
-    {
-      value: {
-        propsByInstanceIdStore,
-        assetsStore,
-        pagesStore,
-        dataSourceValuesStore,
-        renderer,
-        imageBaseUrl,
-        assetBaseUrl,
-        indexesWithinAncestors,
-        executeEffectfulExpression,
-        setDataSourceValues: onDataSourceUpdate,
-        setBoundDataSourceValue: (instanceId, propName, value) => {
-          const propsByInstanceId = propsByInstanceIdStore.get();
-          const props = propsByInstanceId.get(instanceId);
-          const prop = props?.find((prop2) => prop2.name === propName);
-          if (prop?.type !== "dataSource") {
-            throw Error(`${propName} is not data source`);
-          }
-          const dataSourceId = prop.value;
-          const newValues = /* @__PURE__ */ new Map();
-          newValues.set(dataSourceId, value);
-          onDataSourceUpdate(newValues);
-        }
-      },
-      children: root
-    }
-  );
-};
-const createInstanceChildrenElements = ({
-  instances,
-  instanceSelector,
-  children,
-  Component,
-  components
-}) => {
-  const elements = [];
-  for (const child of children) {
-    if (child.type === "text") {
-      elements.push(child.value);
-      continue;
-    }
-    const childInstance = instances.get(child.value);
-    if (childInstance === void 0) {
-      continue;
-    }
-    const childInstanceSelector = [child.value, ...instanceSelector];
-    const children2 = createInstanceChildrenElements({
-      instances,
-      instanceSelector: childInstanceSelector,
-      children: childInstance.children,
-      Component,
-      components
-    });
-    const element = createInstanceElement({
-      instance: childInstance,
-      instanceSelector: childInstanceSelector,
-      Component,
-      children: children2,
-      components
-    });
-    elements.push(element);
-  }
-  return elements;
-};
-const createInstanceElement = ({
-  Component,
-  instance,
-  instanceSelector,
-  children = [],
-  components
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Component,
-    {
-      instance,
-      instanceSelector,
-      components,
-      children
-    },
-    instance.id
-  );
-};

package/lib/cjs/tree/index.js

@@ -1,20 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var tree_exports = {};
-module.exports = __toCommonJS(tree_exports);
-__reExport(tree_exports, require("./create-elements-tree"), module.exports);
-__reExport(tree_exports, require("./root"), module.exports);
-__reExport(tree_exports, require("./webstudio-component"), module.exports);

package/lib/cjs/tree/root.js

@@ -1,100 +0,0 @@
-"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 root_exports = {};
-__export(root_exports, {
-  InstanceRoot: () => InstanceRoot
-});
-module.exports = __toCommonJS(root_exports);
-var import_react = require("react");
-var import_nanostores = require("nanostores");
-var import_project_build = require("@webstudio-is/project-build");
-var import_create_elements_tree = require("./create-elements-tree");
-var import_webstudio_component = require("./webstudio-component");
-var import_props = require("../props");
-const InstanceRoot = ({
-  data,
-  utils,
-  Component,
-  components,
-  scripts
-}) => {
-  const {
-    indexesWithinAncestors,
-    executeComputingExpressions,
-    executeEffectfulExpression
-  } = utils;
-  const dataSourceVariablesStoreRef = (0, import_react.useRef)(void 0);
-  if (dataSourceVariablesStoreRef.current === void 0) {
-    dataSourceVariablesStoreRef.current = (0, import_nanostores.atom)(/* @__PURE__ */ new Map());
-  }
-  const dataSourceVariablesStore = dataSourceVariablesStoreRef.current;
-  const dataSourceValuesStoreRef = (0, import_react.useRef)(void 0);
-  if (dataSourceValuesStoreRef.current === void 0) {
-    dataSourceValuesStoreRef.current = (0, import_nanostores.computed)(
-      dataSourceVariablesStore,
-      (dataSourceVariables) => {
-        const dataSourceValues = /* @__PURE__ */ new Map();
-        for (const [dataSourceId, dataSource] of data.build.dataSources) {
-          if (dataSource.type === "variable") {
-            const value = dataSourceVariables.get(dataSourceId) ?? dataSource.value.value;
-            dataSourceValues.set(dataSourceId, value);
-          }
-        }
-        try {
-          const result = executeComputingExpressions(dataSourceValues);
-          for (const [id, value] of result) {
-            dataSourceValues.set(id, value);
-          }
-        } catch (error) {
-          console.error(error);
-        }
-        return dataSourceValues;
-      }
-    );
-  }
-  const dataSourceValuesStore = dataSourceValuesStoreRef.current;
-  const onDataSourceUpdate = (0, import_react.useCallback)(
-    (newValues) => {
-      const dataSourceVariables = new Map(dataSourceVariablesStore.get());
-      for (const [dataSourceId, value] of newValues) {
-        dataSourceVariables.set(dataSourceId, value);
-      }
-      dataSourceVariablesStore.set(dataSourceVariables);
-    },
-    [dataSourceVariablesStore]
-  );
-  return (0, import_create_elements_tree.createElementsTree)({
-    imageBaseUrl: data.params?.imageBaseUrl ?? "/",
-    assetBaseUrl: data.params?.assetBaseUrl ?? "/",
-    instances: new Map(data.build.instances),
-    rootInstanceId: data.page.rootInstanceId,
-    propsByInstanceIdStore: (0, import_nanostores.atom)(
-      (0, import_props.getPropsByInstanceId)(new Map(data.build.props))
-    ),
-    assetsStore: (0, import_nanostores.atom)(new Map(data.assets.map((asset) => [asset.id, asset]))),
-    pagesStore: (0, import_nanostores.atom)(new Map(data.pages.map((page) => [page.id, page]))),
-    indexesWithinAncestors,
-    executeEffectfulExpression,
-    dataSourceValuesStore,
-    onDataSourceUpdate,
-    Component: Component ?? import_webstudio_component.WebstudioComponent,
-    components,
-    scripts
-  });
-};