@webstudio-is/react-sdk 0.91.0 → 0.93.0

package/src/props.ts

@@ -1,231 +0,0 @@
-import { useContext, useMemo } from "react";
-import { computed } from "nanostores";
-import { useStore } from "@nanostores/react";
-import type { Instance, Page, Prop, Props } from "@webstudio-is/project-build";
-import type { Asset, Assets } from "@webstudio-is/asset-uploader";
-import { ReactSdkContext } from "./context";
-import { idAttribute, indexAttribute } from "./tree/webstudio-component";
-
-export type PropsByInstanceId = Map<Instance["id"], Prop[]>;
-
-export type Pages = Map<Page["id"], Page>;
-
-export const getPropsByInstanceId = (props: Props) => {
-  const propsByInstanceId: PropsByInstanceId = new Map();
-  for (const prop of props.values()) {
-    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 {
-    propsByInstanceIdStore,
-    dataSourceValuesStore,
-    executeEffectfulExpression,
-    setDataSourceValues,
-    indexesWithinAncestors,
-  } = useContext(ReactSdkContext);
-  const index = indexesWithinAncestors.get(instanceId);
-  const instancePropsObjectStore = useMemo(() => {
-    return computed(
-      [propsByInstanceIdStore, dataSourceValuesStore],
-      (propsByInstanceId, dataSourceValues) => {
-        const instancePropsObject: Record<Prop["name"], unknown> = {};
-        if (index !== undefined) {
-          instancePropsObject[indexAttribute] = index.toString();
-        }
-        const instanceProps = propsByInstanceId.get(instanceId);
-        if (instanceProps === undefined) {
-          return instancePropsObject;
-        }
-        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 !== undefined) {
-              instancePropsObject[prop.name] = value;
-            }
-            continue;
-          }
-          if (prop.type === "action") {
-            instancePropsObject[prop.name] = (...args: unknown[]) => {
-              for (const value of prop.value) {
-                if (value.type === "execute") {
-                  const argsMap = new Map<string, unknown>();
-                  for (const [i, name] of value.args.entries()) {
-                    argsMap.set(name, args[i]);
-                  }
-                  const newValues = executeEffectfulExpression(
-                    value.code,
-                    argsMap,
-                    dataSourceValues
-                  );
-                  setDataSourceValues(newValues);
-                }
-              }
-            };
-            continue;
-          }
-          instancePropsObject[prop.name] = prop.value;
-        }
-        return instancePropsObject;
-      }
-    );
-  }, [
-    propsByInstanceIdStore,
-    dataSourceValuesStore,
-    instanceId,
-    executeEffectfulExpression,
-    setDataSourceValues,
-    index,
-  ]);
-  const instancePropsObject = useStore(instancePropsObjectStore);
-  return instancePropsObject;
-};
-
-// this utility is used for image component in both builder 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, assetsStore],
-      (propsByInstanceId, assets) => {
-        const instanceProps = propsByInstanceId.get(instanceId);
-        if (instanceProps === undefined) {
-          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: Instance["id"],
-  name: string,
-  {
-    props,
-    pages,
-    assets,
-  }: { props: PropsByInstanceId; pages: Pages; assets: Assets }
-):
-  | {
-      type: "page";
-      page: Page;
-      instanceId?: Instance["id"];
-      hash?: string;
-    }
-  | { type: "asset"; asset: Asset }
-  | { type: "string"; url: string }
-  | undefined => {
-  const instanceProps = props.get(instanceId);
-  if (instanceProps === undefined) {
-    return;
-  }
-
-  let prop = undefined;
-
-  // We had a bug that some props were duplicated https://github.com/webstudio-is/webstudio-builder/pull/2170
-  // Use the latest prop to ensure consistency with the builder settings panel.
-  for (const intanceProp of instanceProps) {
-    if (intanceProp.name !== name) {
-      continue;
-    }
-    prop = intanceProp;
-  }
-
-  if (prop === undefined) {
-    return;
-  }
-
-  if (prop.type === "page") {
-    if (typeof prop.value === "string") {
-      const page = pages.get(prop.value);
-      return page && { type: "page", page };
-    }
-
-    const { instanceId, pageId } = prop.value;
-
-    const page = pages.get(pageId);
-
-    if (page === undefined) {
-      return;
-    }
-
-    const idProp = props.get(instanceId)?.find((prop) => prop.name === "id");
-
-    return {
-      type: "page",
-      page,
-      instanceId,
-      hash:
-        idProp === undefined || idProp.type !== "string"
-          ? undefined
-          : 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;
-};
-
-// this utility is used for link component in both builder and preview
-// so need to optimize rerenders with computed
-export const usePropUrl = (instanceId: Instance["id"], name: string) => {
-  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: Record<string, unknown>
-) => {
-  return props[idAttribute] as string;
-};
-
-export const getIndexWithinAncestorFromComponentProps = (
-  props: Record<string, unknown>
-) => {
-  return props[indexAttribute] as string | undefined;
-};

package/src/pubsub/create.ts

@@ -1,77 +0,0 @@
-import { createNanoEvents } from "nanoevents";
-import { useCallback, useEffect, useRef } from "react";
-import { batchUpdate } from "./raf-queue";
-
-export const createPubsub = <PublishMap>() => {
-  type Action<Type extends keyof PublishMap> =
-    undefined extends PublishMap[Type]
-      ? { type: Type; payload?: PublishMap[Type] }
-      : { type: Type; payload: PublishMap[Type] };
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const emitter = createNanoEvents<Record<any, any>>();
-
-  if (typeof window === "object") {
-    window.addEventListener(
-      "message",
-      (event: MessageEvent) => {
-        // @todo this has no type safety built in, could be anything from any source.
-        // we could potentially maintain a list of valid event types at runtime
-        // at the very least we could add a brand property or something to our events
-        if (typeof event.data?.type === "string") {
-          // Execute all updates within a single batch to improve performance
-          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<Type extends keyof PublishMap>(action: Action<Type>) {
-      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<HTMLIFrameElement | null>(null);
-      const publishCallback = useCallback(
-        <Type extends keyof PublishMap>(action: Action<Type>) => {
-          const element = iframeRef.current;
-          if (element?.contentWindow == null) {
-            return;
-          }
-          element.contentWindow.postMessage(action, "*");
-          window.postMessage(action, "*");
-        },
-        [iframeRef]
-      );
-      return [publishCallback, iframeRef] as const;
-    },
-
-    /**
-     * To subscribe a message event on the current window.
-     */
-    useSubscribe<Type extends keyof PublishMap>(
-      type: Type,
-      onAction: (payload: PublishMap[Type]) => void
-    ) {
-      useEffect(() => {
-        return emitter.on(type, onAction);
-      }, [type, onAction]);
-    },
-
-    subscribe<Type extends keyof PublishMap>(
-      type: Type,
-      onAction: (payload: PublishMap[Type]) => void
-    ) {
-      return emitter.on(type, onAction);
-    },
-  };
-};

package/src/pubsub/index.ts

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

package/src/pubsub/raf-queue.ts

@@ -1,25 +0,0 @@
-type Task = () => void;
-
-let handle: ReturnType<typeof requestAnimationFrame> | undefined;
-let updateQueue: Task[] = [];
-
-const processUpdates = (updates: Task[]) => {
-  for (const update of updates) {
-    update();
-  }
-};
-
-export const batchUpdate = (update: () => void) => {
-  updateQueue.push(update);
-
-  if (handle !== undefined) {
-    return;
-  }
-
-  handle = requestAnimationFrame(() => {
-    const updates = updateQueue;
-    updateQueue = [];
-    handle = undefined;
-    processUpdates(updates);
-  });
-};

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

@@ -1,186 +0,0 @@
-import {
-  Fragment,
-  type ForwardRefExoticComponent,
-  type RefAttributes,
-  type ReactNode,
-} from "react";
-import type { ReadableAtom } from "nanostores";
-import type { Assets } from "@webstudio-is/asset-uploader";
-import type { Instance, Instances } from "@webstudio-is/project-build";
-import type { Components } from "../components/components-utils";
-import {
-  type Params,
-  type DataSourceValues,
-  ReactSdkContext,
-} from "../context";
-import type { Pages, PropsByInstanceId } from "../props";
-import type { WebstudioComponentProps } from "./webstudio-component";
-import type { IndexesWithinAncestors } from "../instance-utils";
-
-type InstanceSelector = Instance["id"][];
-
-export const createElementsTree = ({
-  renderer,
-  imageBaseUrl,
-  assetBaseUrl,
-  instances,
-  rootInstanceId,
-  propsByInstanceIdStore,
-  assetsStore,
-  pagesStore,
-  dataSourceValuesStore,
-  executeEffectfulExpression,
-  onDataSourceUpdate,
-  indexesWithinAncestors,
-  Component,
-  components,
-  scripts,
-}: Params & {
-  instances: Instances;
-  rootInstanceId: Instance["id"];
-  propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
-  assetsStore: ReadableAtom<Assets>;
-  pagesStore: ReadableAtom<Pages>;
-  executeEffectfulExpression: (
-    expression: string,
-    args: DataSourceValues,
-    values: DataSourceValues
-  ) => DataSourceValues;
-  dataSourceValuesStore: ReadableAtom<DataSourceValues>;
-  onDataSourceUpdate: (newValues: DataSourceValues) => void;
-  indexesWithinAncestors: IndexesWithinAncestors;
-
-  Component: ForwardRefExoticComponent<
-    WebstudioComponentProps & RefAttributes<HTMLElement>
-  >;
-  components: Components;
-  scripts?: ReactNode;
-}) => {
-  const rootInstance = instances.get(rootInstanceId);
-  if (rootInstance === undefined) {
-    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: [
-      <Fragment key="children">
-        {children}
-        {scripts}
-      </Fragment>,
-    ],
-    components,
-  });
-  return (
-    <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((prop) => prop.name === propName);
-          if (prop?.type !== "dataSource") {
-            throw Error(`${propName} is not data source`);
-          }
-          const dataSourceId = prop.value;
-          const newValues = new Map();
-          newValues.set(dataSourceId, value);
-          onDataSourceUpdate(newValues);
-        },
-      }}
-    >
-      {root}
-    </ReactSdkContext.Provider>
-  );
-};
-
-const createInstanceChildrenElements = ({
-  instances,
-  instanceSelector,
-  children,
-  Component,
-  components,
-}: {
-  instances: Instances;
-  instanceSelector: InstanceSelector;
-  children: Instance["children"];
-  Component: ForwardRefExoticComponent<
-    WebstudioComponentProps & RefAttributes<HTMLElement>
-  >;
-  components: 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 === undefined) {
-      continue;
-    }
-    const childInstanceSelector = [child.value, ...instanceSelector];
-    const children = createInstanceChildrenElements({
-      instances,
-      instanceSelector: childInstanceSelector,
-      children: childInstance.children,
-      Component,
-      components,
-    });
-    const element = createInstanceElement({
-      instance: childInstance,
-      instanceSelector: childInstanceSelector,
-      Component,
-      children,
-      components,
-    });
-    elements.push(element);
-  }
-  return elements;
-};
-
-const createInstanceElement = ({
-  Component,
-  instance,
-  instanceSelector,
-  children = [],
-  components,
-}: {
-  instance: Instance;
-  instanceSelector: InstanceSelector;
-  Component: ForwardRefExoticComponent<
-    WebstudioComponentProps & RefAttributes<HTMLElement>
-  >;
-  children?: Array<JSX.Element | string>;
-  components: Components;
-}) => {
-  return (
-    <Component
-      key={instance.id}
-      instance={instance}
-      instanceSelector={instanceSelector}
-      components={components}
-    >
-      {children}
-    </Component>
-  );
-};

package/src/tree/index.ts

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

package/src/tree/root.ts

@@ -1,131 +0,0 @@
-import {
-  useRef,
-  useCallback,
-  type ForwardRefExoticComponent,
-  type RefAttributes,
-  type ReactNode,
-} from "react";
-import {
-  atom,
-  computed,
-  type ReadableAtom,
-  type WritableAtom,
-} from "nanostores";
-import { type Build, type Page } from "@webstudio-is/project-build";
-import type { Asset } from "@webstudio-is/asset-uploader";
-import { createElementsTree } from "./create-elements-tree";
-import {
-  WebstudioComponent,
-  type WebstudioComponentProps,
-} from "./webstudio-component";
-import { getPropsByInstanceId } from "../props";
-import type { Components } from "../components/components-utils";
-import type { Params, DataSourceValues } from "../context";
-import type { GeneratedUtils } from "../generator";
-
-export type Data = {
-  page: Page;
-  pages: Array<Page>;
-  build: Build;
-  assets: Array<Asset>;
-  params?: Params;
-};
-
-export type RootPropsData = Omit<Data, "build"> & {
-  build: Pick<Data["build"], "instances" | "props" | "dataSources">;
-};
-
-type RootProps = {
-  data: RootPropsData;
-  utils: GeneratedUtils;
-  Component?: ForwardRefExoticComponent<
-    WebstudioComponentProps & RefAttributes<HTMLElement>
-  >;
-  components: Components;
-  scripts?: ReactNode;
-};
-
-export const InstanceRoot = ({
-  data,
-  utils,
-  Component,
-  components,
-  scripts,
-}: RootProps): JSX.Element | null => {
-  const {
-    indexesWithinAncestors,
-    executeComputingExpressions,
-    executeEffectfulExpression,
-  } = utils;
-  const dataSourceVariablesStoreRef = useRef<
-    undefined | WritableAtom<DataSourceValues>
-  >(undefined);
-  if (dataSourceVariablesStoreRef.current === undefined) {
-    dataSourceVariablesStoreRef.current = atom(new Map());
-  }
-  const dataSourceVariablesStore = dataSourceVariablesStoreRef.current;
-
-  const dataSourceValuesStoreRef = useRef<
-    undefined | ReadableAtom<DataSourceValues>
-  >(undefined);
-  if (dataSourceValuesStoreRef.current === undefined) {
-    dataSourceValuesStoreRef.current = computed(
-      dataSourceVariablesStore,
-      (dataSourceVariables) => {
-        // set vriables with defaults
-        const dataSourceValues: DataSourceValues = 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);
-          }
-        }
-
-        // set expression values
-        try {
-          const result = executeComputingExpressions(dataSourceValues);
-          for (const [id, value] of result) {
-            dataSourceValues.set(id, value);
-          }
-        } catch (error) {
-          // eslint-disable-next-line no-console
-          console.error(error);
-        }
-
-        return dataSourceValues;
-      }
-    );
-  }
-  const dataSourceValuesStore = dataSourceValuesStoreRef.current;
-
-  const onDataSourceUpdate = useCallback(
-    (newValues: DataSourceValues) => {
-      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,
-  });
-};