@webstudio-is/react-sdk 0.95.0 → 0.97.0

package/lib/props.js

@@ -1,176 +0,0 @@
-"use strict";
-import { useContext, useMemo } from "react";
-import { computed } from "nanostores";
-import { useStore } from "@nanostores/react";
-import { ReactSdkContext } from "./context";
-import { idAttribute, indexAttribute } from "./tree/webstudio-component";
-export 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;
-};
-export const useInstanceProps = (instanceId) => {
-  const {
-    propsByInstanceIdStore,
-    dataSourceValuesStore,
-    executeEffectfulExpression,
-    setDataSourceValues,
-    indexesWithinAncestors
-  } = useContext(ReactSdkContext);
-  const index = indexesWithinAncestors.get(instanceId);
-  const instancePropsObjectStore = useMemo(() => {
-    return computed(
-      [propsByInstanceIdStore, dataSourceValuesStore],
-      (propsByInstanceId, dataSourceValues) => {
-        const instancePropsObject2 = {};
-        if (index !== void 0) {
-          instancePropsObject2[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 = useStore(instancePropsObjectStore);
-  return instancePropsObject;
-};
-export const usePropAsset = (instanceId, name) => {
-  const { propsByInstanceIdStore, assetsStore } = useContext(ReactSdkContext);
-  const assetStore = useMemo(() => {
-    return 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 = useStore(assetStore);
-  return asset;
-};
-export 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;
-};
-export const usePropUrl = (instanceId, name) => {
-  const { propsByInstanceIdStore, pagesStore, assetsStore } = useContext(ReactSdkContext);
-  const store = useMemo(
-    () => computed(
-      [propsByInstanceIdStore, pagesStore, assetsStore],
-      (props, pages, assets) => resolveUrlProp(instanceId, name, { props, pages, assets })
-    ),
-    [propsByInstanceIdStore, pagesStore, assetsStore, instanceId, name]
-  );
-  return useStore(store);
-};
-export const getInstanceIdFromComponentProps = (props) => {
-  return props[idAttribute];
-};
-export const getIndexWithinAncestorFromComponentProps = (props) => {
-  return props[indexAttribute];
-};

package/lib/props.test.js

@@ -1,159 +0,0 @@
-"use strict";
-import { describe, test, expect } from "@jest/globals";
-import { resolveUrlProp } from "./props";
-const unique = () => Math.random().toString();
-describe("resolveUrlProp", () => {
-  const instanceId = unique();
-  const projectId = unique();
-  const page1 = {
-    id: unique(),
-    path: `/${unique()}`,
-    name: "",
-    title: "",
-    meta: {},
-    rootInstanceId: "0"
-  };
-  const page2 = {
-    id: unique(),
-    path: `/${unique()}`,
-    name: "",
-    title: "",
-    meta: {},
-    rootInstanceId: "0"
-  };
-  const asset1 = {
-    id: unique(),
-    name: unique(),
-    type: "image",
-    projectId,
-    format: "png",
-    size: 1e5,
-    createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-    description: null,
-    meta: { width: 128, height: 180 }
-  };
-  const assetProp = {
-    type: "asset",
-    id: unique(),
-    instanceId,
-    name: unique(),
-    value: asset1.id
-  };
-  const pageByIdProp = {
-    type: "page",
-    id: unique(),
-    instanceId,
-    name: unique(),
-    value: page1.id
-  };
-  const instnaceIdProp = {
-    type: "string",
-    id: unique(),
-    instanceId: unique(),
-    name: "id",
-    value: unique()
-  };
-  const pageSectionProp = {
-    type: "page",
-    id: unique(),
-    instanceId,
-    name: unique(),
-    value: { pageId: page1.id, instanceId: instnaceIdProp.instanceId }
-  };
-  const pageByPathProp = {
-    type: "string",
-    id: unique(),
-    instanceId,
-    name: unique(),
-    value: page2.path
-  };
-  const arbitraryUrlProp = {
-    type: "string",
-    id: unique(),
-    instanceId,
-    name: unique(),
-    value: unique()
-  };
-  const duplicatePropName = unique();
-  const duplicateUrlPropFirst = {
-    type: "string",
-    id: unique(),
-    instanceId,
-    name: duplicatePropName,
-    value: unique()
-  };
-  const duplicateUrlPropSecond = {
-    type: "string",
-    id: unique(),
-    instanceId,
-    name: duplicatePropName,
-    value: unique()
-  };
-  const props = /* @__PURE__ */ new Map([
-    [
-      instanceId,
-      [
-        pageByIdProp,
-        pageByPathProp,
-        arbitraryUrlProp,
-        assetProp,
-        pageSectionProp,
-        duplicateUrlPropFirst,
-        duplicateUrlPropSecond
-      ]
-    ],
-    [instnaceIdProp.instanceId, [instnaceIdProp]]
-  ]);
-  const pages = /* @__PURE__ */ new Map([
-    [page1.id, page1],
-    [page2.id, page2]
-  ]);
-  const assets = /* @__PURE__ */ new Map([[asset1.id, asset1]]);
-  const stores = { props, pages, assets };
-  test("if instanceId is unknown returns undefined", () => {
-    expect(
-      resolveUrlProp("unknown", pageByIdProp.name, stores)
-    ).toBeUndefined();
-  });
-  test("if prop name is unknown returns undefined", () => {
-    expect(resolveUrlProp(instanceId, "unknown", stores)).toBeUndefined();
-  });
-  test("asset by id", () => {
-    expect(resolveUrlProp(instanceId, assetProp.name, stores)).toEqual({
-      type: "asset",
-      asset: asset1
-    });
-  });
-  test("page by id", () => {
-    expect(resolveUrlProp(instanceId, pageByIdProp.name, stores)).toEqual({
-      type: "page",
-      page: page1
-    });
-  });
-  test("page by path", () => {
-    expect(resolveUrlProp(instanceId, pageByPathProp.name, stores)).toEqual({
-      type: "page",
-      page: page2
-    });
-  });
-  test("section on a page", () => {
-    expect(resolveUrlProp(instanceId, pageSectionProp.name, stores)).toEqual({
-      type: "page",
-      page: page1,
-      instanceId: instnaceIdProp.instanceId,
-      hash: instnaceIdProp.value
-    });
-  });
-  test("arbitrary url", () => {
-    expect(resolveUrlProp(instanceId, arbitraryUrlProp.name, stores)).toEqual({
-      type: "string",
-      url: arbitraryUrlProp.value
-    });
-  });
-  test("duplicate prop name", () => {
-    expect(resolveUrlProp(instanceId, duplicatePropName, stores)).toEqual({
-      type: "string",
-      url: duplicateUrlPropSecond.value
-    });
-  });
-});

package/lib/pubsub/create.js

@@ -1,56 +0,0 @@
-"use strict";
-import { createNanoEvents } from "nanoevents";
-import { useCallback, useEffect, useRef } from "react";
-import { batchUpdate } from "./raf-queue";
-export const createPubsub = () => {
-  const emitter = createNanoEvents();
-  if (typeof window === "object") {
-    window.addEventListener(
-      "message",
-      (event) => {
-        if (typeof event.data?.type === "string") {
-          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 = useRef(null);
-      const publishCallback = 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) {
-      useEffect(() => {
-        return emitter.on(type, onAction);
-      }, [type, onAction]);
-    },
-    subscribe(type, onAction) {
-      return emitter.on(type, onAction);
-    }
-  };
-};

package/lib/pubsub/index.js

@@ -1,2 +0,0 @@
-"use strict";
-export * from "./create";

package/lib/pubsub/raf-queue.js

@@ -1,20 +0,0 @@
-"use strict";
-let handle;
-let updateQueue = [];
-const processUpdates = (updates) => {
-  for (const update of updates) {
-    update();
-  }
-};
-export const batchUpdate = (update) => {
-  updateQueue.push(update);
-  if (handle !== void 0) {
-    return;
-  }
-  handle = requestAnimationFrame(() => {
-    const updates = updateQueue;
-    updateQueue = [];
-    handle = void 0;
-    processUpdates(updates);
-  });
-};

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

@@ -1,134 +0,0 @@
-"use strict";
-import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  Fragment
-} from "react";
-import {
-  ReactSdkContext
-} from "../context";
-export 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__ */ jsxs(Fragment, { children: [
-        children,
-        scripts
-      ] }, "children")
-    ],
-    components
-  });
-  return /* @__PURE__ */ jsx(
-    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__ */ jsx(
-    Component,
-    {
-      instance,
-      instanceSelector,
-      components,
-      children
-    },
-    instance.id
-  );
-};

package/lib/tree/index.js

@@ -1,4 +0,0 @@
-"use strict";
-export * from "./create-elements-tree";
-export * from "./root";
-export * from "./webstudio-component";

package/lib/tree/root.js

@@ -1,85 +0,0 @@
-"use strict";
-import {
-  useRef,
-  useCallback
-} from "react";
-import {
-  atom,
-  computed
-} from "nanostores";
-import { createElementsTree } from "./create-elements-tree";
-import {
-  WebstudioComponent
-} from "./webstudio-component";
-import { getPropsByInstanceId } from "../props";
-export const InstanceRoot = ({
-  data,
-  utils,
-  Component,
-  components,
-  scripts
-}) => {
-  const {
-    indexesWithinAncestors,
-    executeComputingExpressions,
-    executeEffectfulExpression
-  } = utils;
-  const dataSourceVariablesStoreRef = useRef(void 0);
-  if (dataSourceVariablesStoreRef.current === void 0) {
-    dataSourceVariablesStoreRef.current = atom(/* @__PURE__ */ new Map());
-  }
-  const dataSourceVariablesStore = dataSourceVariablesStoreRef.current;
-  const dataSourceValuesStoreRef = useRef(void 0);
-  if (dataSourceValuesStoreRef.current === void 0) {
-    dataSourceValuesStoreRef.current = 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 = useCallback(
-    (newValues) => {
-      const dataSourceVariables = new Map(dataSourceVariablesStore.get());
-      for (const [dataSourceId, value] of newValues) {
-        dataSourceVariables.set(dataSourceId, value);
-      }
-      dataSourceVariablesStore.set(dataSourceVariables);
-    },
-    [dataSourceVariablesStore]
-  );
-  return createElementsTree({
-    imageBaseUrl: data.params?.imageBaseUrl ?? "/",
-    assetBaseUrl: data.params?.assetBaseUrl ?? "/",
-    instances: new Map(data.build.instances),
-    rootInstanceId: data.page.rootInstanceId,
-    propsByInstanceIdStore: atom(
-      getPropsByInstanceId(new Map(data.build.props))
-    ),
-    assetsStore: atom(new Map(data.assets.map((asset) => [asset.id, asset]))),
-    pagesStore: atom(new Map(data.pages.map((page) => [page.id, page]))),
-    indexesWithinAncestors,
-    executeEffectfulExpression,
-    dataSourceValuesStore,
-    onDataSourceUpdate,
-    Component: Component ?? WebstudioComponent,
-    components,
-    scripts
-  });
-};

package/lib/tree/webstudio-component.js

@@ -1,61 +0,0 @@
-"use strict";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment2, forwardRef } from "react";
-import { useInstanceProps } from "../props";
-const renderText = (text) => {
-  const lines = text.split("\n");
-  return lines.map((line, index) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-    line,
-    index < lines.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
-  ] }, index));
-};
-export const renderWebstudioComponentChildren = (children) => {
-  if (children === void 0 || children.length === 0) {
-    return;
-  }
-  return children.map((child) => {
-    return typeof child === "string" ? renderText(child) : child;
-  });
-};
-export const WebstudioComponent = forwardRef(({ instance, instanceSelector, children, components, ...rest }, ref) => {
-  const { [showAttribute]: show = true, ...instanceProps } = useInstanceProps(
-    instance.id
-  );
-  const props = {
-    ...instanceProps,
-    ...rest,
-    [idAttribute]: instance.id,
-    [componentAttribute]: instance.component
-  };
-  if (show === false) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  const Component = components.get(instance.component);
-  if (Component === void 0) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  return /* @__PURE__ */ jsx(Component, { ...props, ref, children: renderWebstudioComponentChildren(children) });
-});
-export const idAttribute = "data-ws-id";
-export const selectorIdAttribute = "data-ws-selector";
-export const componentAttribute = "data-ws-component";
-export const showAttribute = "data-ws-show";
-export const indexAttribute = "data-ws-index";
-export const collapsedAttribute = "data-ws-collapsed";
-export const splitPropsWithWebstudioAttributes = ({
-  [idAttribute]: idAttributeValue,
-  [componentAttribute]: componentAttributeValue,
-  [showAttribute]: showAttributeValue,
-  [collapsedAttribute]: collapsedAttributeValue,
-  [selectorIdAttribute]: parentIdAttributeValue,
-  ...props
-}) => [
-  {
-    [idAttribute]: idAttributeValue,
-    [componentAttribute]: componentAttributeValue,
-    [showAttribute]: showAttributeValue,
-    [collapsedAttribute]: collapsedAttributeValue,
-    [selectorIdAttribute]: parentIdAttributeValue
-  },
-  props
-];