@webstudio-is/react-sdk 0.8.0 → 0.10.0

package/src/pubsub/create.ts

@@ -0,0 +1,84 @@
+import mitt from "mitt";
+import { useCallback, useEffect, useRef } from "react";
+
+export const createPubsub = <PublishMap>() => {
+  type Action<Type extends keyof PublishMap> =
+    undefined extends PublishMap[Type]
+      ? { type: Type; payload?: PublishMap[Type] }
+      : { type: Type; payload: PublishMap[Type] };
+
+  // `mitt` has a somewhat annoying overload for `*` type that makes it hard to wrap in a generic context
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const emitter = mitt<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") {
+          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(() => {
+        emitter.on(type, onAction);
+        return () => {
+          emitter.off(type, onAction);
+        };
+      }, [type, onAction]);
+    },
+
+    useSubscribeAll(
+      onAction: <Type extends keyof PublishMap>(
+        type: Type,
+        payload: PublishMap[Type]
+      ) => void
+    ) {
+      useEffect(() => {
+        emitter.on("*", onAction);
+        return () => {
+          emitter.off("*", onAction);
+        };
+      }, [onAction]);
+    },
+  };
+};

package/src/pubsub/index.ts

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

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

@@ -0,0 +1,102 @@
+import { type ComponentProps, Fragment } from "react";
+import type { Instance } from "../db";
+import { WrapperComponent } from "./wrapper-component";
+import { Scripts, ScrollRestoration } from "@remix-run/react";
+import { SessionStoragePolyfill } from "./session-storage-polyfill";
+
+export type ChildrenUpdates = Array<
+  | string
+  | {
+      id: undefined | Instance["id"];
+      component: Instance["component"];
+      children: ChildrenUpdates;
+    }
+>;
+
+export type OnChangeChildren = (change: {
+  instanceId: Instance["id"];
+  updates: ChildrenUpdates;
+}) => void;
+
+export const createElementsTree = ({
+  sandbox,
+  instance,
+  Component,
+  onChangeChildren,
+}: {
+  sandbox?: boolean;
+  instance: Instance;
+  Component: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
+  onChangeChildren?: OnChangeChildren;
+}) => {
+  const children = createInstanceChildrenElements({
+    Component,
+    children: instance.children,
+    onChangeChildren,
+  });
+  const body = createInstanceElement({
+    Component,
+    instance,
+    children: [
+      <Fragment key="children">
+        {children}
+        {sandbox && <SessionStoragePolyfill />}
+        <ScrollRestoration />
+        <Scripts />
+      </Fragment>,
+    ],
+  });
+  return body;
+};
+
+const createInstanceChildrenElements = ({
+  children,
+  Component,
+  onChangeChildren,
+}: {
+  children: Instance["children"];
+  Component: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
+  onChangeChildren?: OnChangeChildren;
+}) => {
+  const elements = [];
+  for (const child of children) {
+    if (typeof child === "string") {
+      elements.push(child);
+      continue;
+    }
+    const children = createInstanceChildrenElements({
+      children: child.children,
+      Component,
+      onChangeChildren,
+    });
+    const element = createInstanceElement({
+      instance: child,
+      Component,
+      onChangeChildren,
+      children,
+    });
+    elements.push(element);
+  }
+  return elements;
+};
+
+const createInstanceElement = ({
+  Component,
+  instance,
+  children = [],
+  onChangeChildren,
+}: {
+  instance: Instance;
+  Component: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
+  onChangeChildren?: OnChangeChildren;
+  children?: Array<JSX.Element | string>;
+}) => {
+  const props = {
+    instance,
+    children,
+    key: instance.id,
+    onChangeChildren,
+  };
+
+  return <Component {...props} />;
+};

package/{lib/tree/index.d.ts → src/tree/index.ts}

@@ -1,4 +1,3 @@
 export * from "./create-elements-tree";
 export * from "./root";
 export * from "./wrapper-component";
-//# sourceMappingURL=index.d.ts.map

package/src/tree/root.ts

@@ -0,0 +1,45 @@
+import { useAllUserProps } from "../user-props/";
+import type { Tree, InstanceProps } from "../db";
+import { createElementsTree } from "./create-elements-tree";
+import { WrapperComponent } from "./wrapper-component";
+import type { Asset } from "@webstudio-is/asset-uploader";
+import { type ComponentProps } from "react";
+import type { Breakpoint } from "@webstudio-is/css-data";
+import { registerComponents } from "../components";
+import { customComponents as defaultCustomComponents } from "../app/custom-components";
+import { setParams, type Params } from "../app/params";
+import type { DesignToken } from "@webstudio-is/design-tokens";
+
+export type Data = {
+  tree: Tree | null;
+  breakpoints: Array<Breakpoint>;
+  designTokens: Array<DesignToken>;
+  props: Array<InstanceProps>;
+  assets: Array<Asset>;
+  params?: Params;
+};
+
+type RootProps = {
+  data: Data;
+  Component?: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
+  customComponents?: Parameters<typeof registerComponents>[0];
+};
+
+export const InstanceRoot = ({
+  data,
+  Component,
+  customComponents = defaultCustomComponents,
+}: RootProps): JSX.Element | null => {
+  if (data.tree === null) {
+    throw new Error("Tree is null");
+  }
+  useAllUserProps(data.props);
+  setParams(data.params ?? null);
+
+  registerComponents(customComponents);
+
+  return createElementsTree({
+    instance: data.tree.root,
+    Component: Component ?? WrapperComponent,
+  });
+};

package/src/tree/session-storage-polyfill.tsx

@@ -0,0 +1,50 @@
+// This is a temporary work around for https://github.com/remix-run/remix/issues/3659
+
+// The code is based on this discussion https://bugs.chromium.org/p/chromium/issues/detail?id=357625
+const polyfill = function () {
+  try {
+    const key = "__session_storage_availability_test__";
+    sessionStorage.setItem(key, "test"); // test
+    sessionStorage.removeItem(key); // cleanup
+  } catch (error) {
+    alert(
+      'It looks like you have disabled cookies in your browser. Webstudio designer may not work properly.\n\nTo enable cookies, go to "Setting" > "Privacy and security" > "Cookies and other site data", and make sure neither "Block all cookies" nor "Block third-party cookies" are selected.\n\nRead more at https://support.google.com/chrome/answer/95647'
+    );
+    const data = new Map();
+    Object.defineProperty(window, "sessionStorage", {
+      value: {
+        setItem: (key: string, val: unknown) => {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `Session storage is unavailable due to Error "${
+              (error as Error).message
+            }". A polyfill is used to set value of "${key}". The value will be lost when the page is reloaded.`
+          );
+          data.set(key, String(val));
+        },
+        getItem: (key: string) => {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `Session storage is unavailable due to Error "${
+              (error as Error).message
+            }". A polyfill is used to get value of "${key}". The value will be undefined if the page was reloaded after it was set.`
+          );
+          return data.get(key);
+        },
+        removeItem: (key: string) => {
+          data.delete(key);
+        },
+        clear: () => {
+          data.clear();
+        },
+      },
+    });
+  }
+}.toString();
+
+export const SessionStoragePolyfill = () => (
+  <script
+    dangerouslySetInnerHTML={{ __html: `(${polyfill})()` }}
+    suppressHydrationWarning
+  />
+);

package/src/tree/wrapper-component.tsx

@@ -0,0 +1,48 @@
+import { Fragment } from "react";
+import type { Instance } from "../db";
+import { getComponent } from "../components";
+import { useUserProps } from "../user-props/use-user-props";
+import type { OnChangeChildren } from "./create-elements-tree";
+
+const renderText = (text: string): Array<JSX.Element> => {
+  const lines = text.split("\n");
+  return lines.map((line, index) => (
+    <Fragment key={index}>
+      {line}
+      {index < lines.length - 1 ? <br /> : null}
+    </Fragment>
+  ));
+};
+
+export const renderWrapperComponentChildren = (
+  children: Array<JSX.Element | string> | undefined
+): Array<JSX.Element | string | Array<JSX.Element | string>> | undefined => {
+  // Some elements like input can't have children
+  // @todo needs to be made impossible to drag element into input
+  if (children === undefined || children.length === 0) return;
+  return children.map((child) => {
+    return typeof child === "string" ? renderText(child) : child;
+  });
+};
+
+type WrapperComponentProps = {
+  instance: Instance;
+  children: Array<JSX.Element | string>;
+  onChangeChildren?: OnChangeChildren;
+};
+
+export const WrapperComponent = ({
+  instance,
+  onChangeChildren, // prevent it from passing to sdk component
+  children,
+  ...rest
+}: WrapperComponentProps) => {
+  const Component = getComponent(instance.component);
+  const userProps = useUserProps(instance.id);
+  const props = { ...userProps, ...rest, [idAttribute]: instance.id };
+  return (
+    <Component {...props}>{renderWrapperComponentChildren(children)}</Component>
+  );
+};
+
+export const idAttribute = "data-ws-id";

package/src/user-props/all-user-props.ts

@@ -0,0 +1,22 @@
+import { useRef } from "react";
+import { createValueContainer, useValue } from "react-nano-state";
+import type { InstanceProps, Instance } from "../db";
+
+export type AllUserProps = { [id: Instance["id"]]: InstanceProps };
+
+export const allUserPropsContainer = createValueContainer<AllUserProps>({});
+
+export const useAllUserProps = (initialUserProps?: Array<InstanceProps>) => {
+  // @todo ssr workaround for https://github.com/webstudio-is/webstudio-designer/issues/213
+  const ref = useRef(false);
+  if (ref.current === false && initialUserProps !== undefined) {
+    const propsMap: AllUserProps = {};
+    for (const props of initialUserProps) {
+      propsMap[props.instanceId] = props;
+    }
+    //We don't need to trigger rerender when setting the initial value
+    allUserPropsContainer.value = propsMap;
+    ref.current = true;
+  }
+  return useValue(allUserPropsContainer);
+};

package/{lib/cjs/user-props/index.d.ts → src/user-props/index.ts}

@@ -2,4 +2,3 @@ export * from "./all-user-props";
 export * from "./use-user-props";
 export * from "./types";
 export * from "./schema";
-//# sourceMappingURL=index.d.ts.map

package/src/user-props/schema.ts

@@ -0,0 +1,35 @@
+import { z } from "zod";
+import { Asset } from "@webstudio-is/asset-uploader";
+
+const baseUserProps = {
+  id: z.string(),
+  prop: z.string(),
+  required: z.optional(z.boolean()),
+};
+
+export const UserProp = z.discriminatedUnion("type", [
+  z.object({
+    ...baseUserProps,
+    type: z.literal("number"),
+    value: z.number(),
+  }),
+  z.object({
+    ...baseUserProps,
+    type: z.literal("string"),
+    value: z.string(),
+  }),
+  z.object({
+    ...baseUserProps,
+    type: z.literal("boolean"),
+    value: z.boolean(),
+  }),
+  z.object({
+    ...baseUserProps,
+    type: z.literal("asset"),
+    value: Asset,
+  }),
+]);
+
+export const UserProps = z.array(UserProp);
+
+export type UserProp = z.infer<typeof UserProp>;

package/src/user-props/types.ts

@@ -0,0 +1,14 @@
+import type { InstanceProps, Instance } from "../db";
+import { UserProp } from "./schema";
+
+export type UserPropsUpdates = {
+  treeId: InstanceProps["treeId"];
+  propsId: InstanceProps["id"];
+  instanceId: Instance["id"];
+  updates: Array<UserProp>;
+};
+
+export type DeleteProp = {
+  instanceId: Instance["id"];
+  propId: UserProp["id"];
+};

package/src/user-props/use-user-props-asset.ts

@@ -0,0 +1,31 @@
+import { useMemo } from "react";
+import { type Instance } from "../db";
+import { type UserProp } from "./schema";
+import { useAllUserProps } from "./all-user-props";
+import type { Asset } from "@webstudio-is/asset-uploader";
+
+/**
+ * Get asset for prop, like src on the Image component
+ */
+export const useUserPropsAsset = (
+  instanceId: Instance["id"],
+  propName: UserProp["prop"]
+): Asset | undefined => {
+  const [allUserProps] = useAllUserProps();
+
+  const propsData = allUserProps[instanceId];
+  const asset = useMemo(() => {
+    if (propsData == null) return undefined;
+    const prop = propsData.props.find((prop) => prop.prop === propName);
+
+    if (prop == null) return undefined;
+
+    if (prop.type === "asset") {
+      return prop.value;
+    }
+
+    return undefined;
+  }, [propName, propsData]);
+
+  return asset;
+};

package/src/user-props/use-user-props.ts

@@ -0,0 +1,30 @@
+import { useMemo } from "react";
+import { type Instance } from "../db";
+import { type UserProp } from "./schema";
+import { useAllUserProps } from "./all-user-props";
+
+type UserProps = { [prop: UserProp["prop"]]: string | number | boolean };
+
+/**
+ * User props mapped in prop:value format,
+ * up to date with props panel.
+ */
+export const useUserProps = (instanceId: Instance["id"]) => {
+  const [allUserProps] = useAllUserProps();
+
+  const propsData = allUserProps[instanceId];
+  const props = useMemo(() => {
+    if (propsData == null) return {};
+    const result: UserProps = {};
+
+    for (const userProp of propsData.props) {
+      if (userProp.type !== "asset") {
+        result[userProp.prop] = userProp.value;
+      }
+    }
+
+    return result;
+  }, [propsData]);
+
+  return props;
+};

package/lib/arg-types/utils.d.ts

@@ -1,10 +0,0 @@
-import { PropItem } from "react-docgen-typescript";
-export declare type FilterPredicate = (prop: PropItem) => boolean;
-export declare const propsToArgTypes: (props: Record<string, PropItem>, filter?: FilterPredicate) => Record<string, any>;
-export declare const getArgType: (propItem: any) => {
-    type: string;
-    defaultValue: any;
-    options: any;
-    required: any;
-} | null | undefined;
-//# sourceMappingURL=utils.d.ts.map

package/lib/arg-types/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/arg-types/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,oBAAY,eAAe,GAAG,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;AAa1D,eAAO,MAAM,eAAe,UACnB,OAAO,MAAM,EAAE,QAAQ,CAAC,WACtB,eAAe,wBAqBzB,CAAC;AAQF,eAAO,MAAM,UAAU,aAAc,GAAG;;;;;oBAqDvC,CAAC"}

package/lib/arg-types/utils.js

@@ -1,83 +0,0 @@
-const validAttributes = (prop) => {
-    if (prop.parent) {
-        // Pass *HTML (both ButtonHTMLAttributes and HTMLAttributes), Aria, and SVG attributes through
-        const matcher = /.?(HTML|SVG|Aria)Attributes/;
-        // TODO: Add a test for this
-        return prop.parent.name.match(matcher);
-    }
-    // Always allow component's own props
-    return true;
-};
-export const propsToArgTypes = (props, filter) => {
-    const filterFn = filter ?? validAttributes;
-    const entries = Object.entries(props);
-    return entries.reduce((result, current) => {
-        // @todo need halp
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const [propName, prop] = current;
-        // Filter out props
-        if (!filterFn(prop)) {
-            return result;
-        }
-        const argType = getArgType(prop);
-        if (argType != null) {
-            result[propName] = argType;
-        }
-        return result;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    }, {});
-};
-const matchers = {
-    color: new RegExp("(background|color)", "i"),
-    date: /Date$/,
-};
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const getArgType = (propItem) => {
-    const { type, name } = propItem;
-    if (!type) {
-        return undefined;
-    }
-    const overrides = {
-        defaultValue: propItem.defaultValue?.value ?? null,
-        options: propItem.options,
-        required: propItem.required,
-    };
-    // args that end with background or color e.g. iconColor
-    if (matchers.color && matchers.color.test(name)) {
-        const controlType = propItem.type.name;
-        if (controlType === "string") {
-            return { ...overrides, type: "color" };
-        }
-    }
-    // args that end with date e.g. purchaseDate
-    if (matchers.date && matchers.date.test(name)) {
-        return { ...overrides, type: "date" };
-    }
-    switch (type?.name) {
-        case "array":
-            return { ...overrides, type: "object" };
-        case "boolean":
-        case "Booleanish":
-            return { ...overrides, type: "boolean" };
-        case "string":
-            return { ...overrides, type: "text" };
-        case "number":
-            return { ...overrides, type: "number" };
-        case "enum": {
-            const { value } = type;
-            // Remove additional quotes from enum values
-            // @ts-expect-error Original type has `any` type
-            const values = value.map((val) => val.value.replace(/^"(.+)"$/, "$1"));
-            return {
-                ...overrides,
-                type: values?.length <= 5 ? "radio" : "select",
-                options: values,
-            };
-        }
-        case "function":
-        case "symbol":
-            return null;
-        default:
-            return { ...overrides, type: "text" };
-    }
-};

package/lib/cjs/arg-types/utils.cjs

@@ -1,88 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getArgType = exports.propsToArgTypes = void 0;
-const validAttributes = (prop) => {
-    if (prop.parent) {
-        // Pass *HTML (both ButtonHTMLAttributes and HTMLAttributes), Aria, and SVG attributes through
-        const matcher = /.?(HTML|SVG|Aria)Attributes/;
-        // TODO: Add a test for this
-        return prop.parent.name.match(matcher);
-    }
-    // Always allow component's own props
-    return true;
-};
-const propsToArgTypes = (props, filter) => {
-    const filterFn = filter ?? validAttributes;
-    const entries = Object.entries(props);
-    return entries.reduce((result, current) => {
-        // @todo need halp
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const [propName, prop] = current;
-        // Filter out props
-        if (!filterFn(prop)) {
-            return result;
-        }
-        const argType = (0, exports.getArgType)(prop);
-        if (argType != null) {
-            result[propName] = argType;
-        }
-        return result;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    }, {});
-};
-exports.propsToArgTypes = propsToArgTypes;
-const matchers = {
-    color: new RegExp("(background|color)", "i"),
-    date: /Date$/,
-};
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getArgType = (propItem) => {
-    const { type, name } = propItem;
-    if (!type) {
-        return undefined;
-    }
-    const overrides = {
-        defaultValue: propItem.defaultValue?.value ?? null,
-        options: propItem.options,
-        required: propItem.required,
-    };
-    // args that end with background or color e.g. iconColor
-    if (matchers.color && matchers.color.test(name)) {
-        const controlType = propItem.type.name;
-        if (controlType === "string") {
-            return { ...overrides, type: "color" };
-        }
-    }
-    // args that end with date e.g. purchaseDate
-    if (matchers.date && matchers.date.test(name)) {
-        return { ...overrides, type: "date" };
-    }
-    switch (type?.name) {
-        case "array":
-            return { ...overrides, type: "object" };
-        case "boolean":
-        case "Booleanish":
-            return { ...overrides, type: "boolean" };
-        case "string":
-            return { ...overrides, type: "text" };
-        case "number":
-            return { ...overrides, type: "number" };
-        case "enum": {
-            const { value } = type;
-            // Remove additional quotes from enum values
-            // @ts-expect-error Original type has `any` type
-            const values = value.map((val) => val.value.replace(/^"(.+)"$/, "$1"));
-            return {
-                ...overrides,
-                type: values?.length <= 5 ? "radio" : "select",
-                options: values,
-            };
-        }
-        case "function":
-        case "symbol":
-            return null;
-        default:
-            return { ...overrides, type: "text" };
-    }
-};
-exports.getArgType = getArgType;

package/lib/cjs/arg-types/utils.d.ts

@@ -1,10 +0,0 @@
-import { PropItem } from "react-docgen-typescript";
-export declare type FilterPredicate = (prop: PropItem) => boolean;
-export declare const propsToArgTypes: (props: Record<string, PropItem>, filter?: FilterPredicate) => Record<string, any>;
-export declare const getArgType: (propItem: any) => {
-    type: string;
-    defaultValue: any;
-    options: any;
-    required: any;
-} | null | undefined;
-//# sourceMappingURL=utils.d.ts.map