@webstudio-is/react-sdk 0.9.0 → 0.10.0

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

@@ -1,50 +1,76 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
 import { SessionStoragePolyfill } from "./session-storage-polyfill";
-export const createElementsTree = ({ sandbox, instance, Component, onChangeChildren, }) => {
-    const children = createInstanceChildrenElements({
-        Component,
-        children: instance.children,
-        onChangeChildren,
-    });
-    const body = createInstanceElement({
-        Component,
-        instance,
+const createElementsTree = ({
+  sandbox,
+  instance,
+  Component,
+  onChangeChildren
+}) => {
+  const children = createInstanceChildrenElements({
+    Component,
+    children: instance.children,
+    onChangeChildren
+  });
+  const body = createInstanceElement({
+    Component,
+    instance,
+    children: [
+      /* @__PURE__ */ jsxs(Fragment, {
         children: [
-            _jsxs(Fragment, { children: [children, sandbox && _jsx(SessionStoragePolyfill, {}), _jsx(ScrollRestoration, {}), _jsx(Scripts, {})] }, "children"),
-        ],
-    });
-    return body;
+          children,
+          sandbox && /* @__PURE__ */ jsx(SessionStoragePolyfill, {}),
+          /* @__PURE__ */ jsx(ScrollRestoration, {}),
+          /* @__PURE__ */ jsx(Scripts, {})
+        ]
+      }, "children")
+    ]
+  });
+  return body;
 };
-const createInstanceChildrenElements = ({ children, Component, 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);
+const createInstanceChildrenElements = ({
+  children,
+  Component,
+  onChangeChildren
+}) => {
+  const elements = [];
+  for (const child of children) {
+    if (typeof child === "string") {
+      elements.push(child);
+      continue;
     }
-    return elements;
+    const children2 = createInstanceChildrenElements({
+      children: child.children,
+      Component,
+      onChangeChildren
+    });
+    const element = createInstanceElement({
+      instance: child,
+      Component,
+      onChangeChildren,
+      children: children2
+    });
+    elements.push(element);
+  }
+  return elements;
+};
+const createInstanceElement = ({
+  Component,
+  instance,
+  children = [],
+  onChangeChildren
+}) => {
+  const props = {
+    instance,
+    children,
+    key: instance.id,
+    onChangeChildren
+  };
+  return /* @__PURE__ */ jsx(Component, {
+    ...props
+  });
 };
-const createInstanceElement = ({ Component, instance, children = [], onChangeChildren, }) => {
-    const props = {
-        instance,
-        children,
-        key: instance.id,
-        onChangeChildren,
-    };
-    return _jsx(Component, { ...props });
+export {
+  createElementsTree
 };

package/lib/tree/root.js

@@ -2,17 +2,24 @@ import { useAllUserProps } from "../user-props/";
 import { createElementsTree } from "./create-elements-tree";
 import { WrapperComponent } from "./wrapper-component";
 import { registerComponents } from "../components";
-import * as customComponents from "../app/custom-components";
+import { customComponents as defaultCustomComponents } from "../app/custom-components";
 import { setParams } from "../app/params";
-export const InstanceRoot = ({ data, Component, }) => {
-    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,
-    });
+const InstanceRoot = ({
+  data,
+  Component,
+  customComponents = defaultCustomComponents
+}) => {
+  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
+  });
+};
+export {
+  InstanceRoot
 };

package/lib/tree/session-storage-polyfill.js

@@ -1,35 +1,42 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// 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, val) => {
-                    // eslint-disable-next-line no-console
-                    console.warn(`Session storage is unavailable due to Error "${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) => {
-                    // eslint-disable-next-line no-console
-                    console.warn(`Session storage is unavailable due to Error "${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) => {
-                    data.delete(key);
-                },
-                clear: () => {
-                    data.clear();
-                },
-            },
-        });
-    }
+import { jsx } from "react/jsx-runtime";
+const polyfill = function() {
+  try {
+    const key = "__session_storage_availability_test__";
+    sessionStorage.setItem(key, "test");
+    sessionStorage.removeItem(key);
+  } 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 = /* @__PURE__ */ new Map();
+    Object.defineProperty(window, "sessionStorage", {
+      value: {
+        setItem: (key, val) => {
+          console.warn(
+            `Session storage is unavailable due to Error "${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) => {
+          console.warn(
+            `Session storage is unavailable due to Error "${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) => {
+          data.delete(key);
+        },
+        clear: () => {
+          data.clear();
+        }
+      }
+    });
+  }
 }.toString();
-export const SessionStoragePolyfill = () => (_jsx("script", { dangerouslySetInnerHTML: { __html: `(${polyfill})()` }, suppressHydrationWarning: true }));
+const SessionStoragePolyfill = () => /* @__PURE__ */ jsx("script", {
+  dangerouslySetInnerHTML: { __html: `(${polyfill})()` },
+  suppressHydrationWarning: true
+});
+export {
+  SessionStoragePolyfill
+};

package/lib/tree/wrapper-component.js

@@ -1,25 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { getComponent } from "../components";
 import { useUserProps } from "../user-props/use-user-props";
 const renderText = (text) => {
-    const lines = text.split("\n");
-    return lines.map((line, index) => (_jsxs(Fragment, { children: [line, index < lines.length - 1 ? _jsx("br", {}) : null] }, index)));
+  const lines = text.split("\n");
+  return lines.map((line, index) => /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      line,
+      index < lines.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
+    ]
+  }, index));
 };
-export const renderWrapperComponentChildren = (children) => {
-    // 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;
-    });
+const renderWrapperComponentChildren = (children) => {
+  if (children === void 0 || children.length === 0)
+    return;
+  return children.map((child) => {
+    return typeof child === "string" ? renderText(child) : child;
+  });
 };
-export const WrapperComponent = ({ instance, onChangeChildren, // prevent it from passing to sdk component
-children, ...rest }) => {
-    const Component = getComponent(instance.component);
-    const userProps = useUserProps(instance.id);
-    const props = { ...userProps, ...rest, [idAttribute]: instance.id };
-    return (_jsx(Component, { ...props, children: renderWrapperComponentChildren(children) }));
+const WrapperComponent = ({
+  instance,
+  onChangeChildren,
+  children,
+  ...rest
+}) => {
+  const Component = getComponent(instance.component);
+  const userProps = useUserProps(instance.id);
+  const props = { ...userProps, ...rest, [idAttribute]: instance.id };
+  return /* @__PURE__ */ jsx(Component, {
+    ...props,
+    children: renderWrapperComponentChildren(children)
+  });
+};
+const idAttribute = "data-ws-id";
+export {
+  WrapperComponent,
+  idAttribute,
+  renderWrapperComponentChildren
 };
-export const idAttribute = "data-ws-id";

package/lib/user-props/all-user-props.js

@@ -1,17 +1,19 @@
 import { useRef } from "react";
 import { createValueContainer, useValue } from "react-nano-state";
-export const allUserPropsContainer = createValueContainer({});
-export const useAllUserProps = (initialUserProps) => {
-    // @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 = {};
-        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;
+const allUserPropsContainer = createValueContainer({});
+const useAllUserProps = (initialUserProps) => {
+  const ref = useRef(false);
+  if (ref.current === false && initialUserProps !== void 0) {
+    const propsMap = {};
+    for (const props of initialUserProps) {
+      propsMap[props.instanceId] = props;
     }
-    return useValue(allUserPropsContainer);
+    allUserPropsContainer.value = propsMap;
+    ref.current = true;
+  }
+  return useValue(allUserPropsContainer);
+};
+export {
+  allUserPropsContainer,
+  useAllUserProps
 };

package/lib/user-props/schema.js

@@ -1,30 +1,34 @@
 import { z } from "zod";
-const UserPropDb = z.object({
-    id: z.string(),
-    prop: z.string(),
-    value: z.union([z.string(), z.boolean()]),
-    assetId: z.optional(z.string()),
-    required: z.optional(z.boolean()),
-});
-export const UserDbProps = z.array(UserPropDb);
-const UserUserProp = z
-    .object({
-    id: z.string(),
-    prop: z.string(),
-    value: z.union([z.string(), z.boolean()]),
-    // We are not interested in Props data does any other props on asset exists
-    asset: z.optional(z.object({ id: z.string() })),
-    required: z.optional(z.boolean()),
-})
-    .transform(({ id, prop, value, asset, required }) => {
-    // Check with infer that we are transforming to UserPropDb
-    const res = {
-        id,
-        prop,
-        value,
-        assetId: asset?.id,
-        required,
-    };
-    return res;
-});
-export const UserUserProps = z.array(UserUserProp);
+import { Asset } from "@webstudio-is/asset-uploader";
+const baseUserProps = {
+  id: z.string(),
+  prop: z.string(),
+  required: z.optional(z.boolean())
+};
+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
+  })
+]);
+const UserProps = z.array(UserProp);
+export {
+  UserProp,
+  UserProps
+};

package/lib/user-props/types.js

@@ -1 +0,0 @@
-export {};

package/lib/user-props/use-user-props-asset.js

@@ -1,18 +1,21 @@
 import { useMemo } from "react";
 import { useAllUserProps } from "./all-user-props";
-/**
- * Get asset for prop, like src on the Image component
- */
-export const useUserPropsAsset = (instanceId, propName) => {
-    const [allUserProps] = useAllUserProps();
-    const propsData = allUserProps[instanceId];
-    const asset = useMemo(() => {
-        if (propsData == null)
-            return null;
-        const prop = propsData.props.find((prop) => prop.prop === propName);
-        if (prop == null)
-            return null;
-        return prop.asset ?? null;
-    }, [propName, propsData]);
-    return asset;
+const useUserPropsAsset = (instanceId, propName) => {
+  const [allUserProps] = useAllUserProps();
+  const propsData = allUserProps[instanceId];
+  const asset = useMemo(() => {
+    if (propsData == null)
+      return void 0;
+    const prop = propsData.props.find((prop2) => prop2.prop === propName);
+    if (prop == null)
+      return void 0;
+    if (prop.type === "asset") {
+      return prop.value;
+    }
+    return void 0;
+  }, [propName, propsData]);
+  return asset;
+};
+export {
+  useUserPropsAsset
 };

package/lib/user-props/use-user-props.js

@@ -1,19 +1,21 @@
 import { useMemo } from "react";
 import { useAllUserProps } from "./all-user-props";
-/**
- * User props mapped in prop:value format,
- * up to date with props panel.
- */
-export const useUserProps = (instanceId) => {
-    const [allUserProps] = useAllUserProps();
-    const propsData = allUserProps[instanceId];
-    const props = useMemo(() => {
-        if (propsData == null)
-            return {};
-        return propsData.props.reduce((props, { prop, value }) => {
-            props[prop] = value;
-            return props;
-        }, {});
-    }, [propsData]);
-    return props;
+const useUserProps = (instanceId) => {
+  const [allUserProps] = useAllUserProps();
+  const propsData = allUserProps[instanceId];
+  const props = useMemo(() => {
+    if (propsData == null)
+      return {};
+    const result = {};
+    for (const userProp of propsData.props) {
+      if (userProp.type !== "asset") {
+        result[userProp.prop] = userProp.value;
+      }
+    }
+    return result;
+  }, [propsData]);
+  return props;
+};
+export {
+  useUserProps
 };

package/package.json

@@ -1,21 +1,19 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "scripts": {
-    "dev": "tsup --watch",
-    "build": "yarn build:lib",
+    "dev": "build-package --watch",
+    "build": "build-package",
     "build:args": "generate-arg-types './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.json\"",
     "typecheck": "tsc --noEmit",
-    "build:cjs": "tsc --module commonjs --outDir lib/cjs && find lib/cjs -name '*.js' | while read NAME; do mv $NAME ${NAME%.js}.cjs; done",
-    "build:lib": "rm -fr lib tsconfig.tsbuildinfo && tsc && yarn build:cjs",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "checks": "yarn typecheck && yarn lint && yarn test",
-    "prepublishOnly": "yarn checks && yarn build:lib",
+    "prepublishOnly": "yarn checks && yarn build",
     "storybook:run": "start-storybook -p 6006",
     "storybook:build": "build-storybook",
     "publish-to-npm": "bash ../../bin/publish-to-npm.sh"
@@ -34,15 +32,16 @@
     "@storybook/react": "^6.5.6",
     "@storybook/testing-library": "^0.0.11",
     "@types/node": "^17.0.21",
-    "@webstudio-is/jest-config": "*",
     "@webstudio-is/generate-arg-types": "*",
+    "@webstudio-is/jest-config": "*",
+    "@webstudio-is/scripts": "*",
+    "@webstudio-is/design-tokens": "*",
     "babel-loader": "^8.2.5",
     "esbuild": "^0.14.25",
     "esbuild-node-externals": "^1.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "remix-utils": "^4.1.0",
-    "tsup": "^6.1.3",
     "tsx": "^3.9.0",
     "typescript": "4.7.4",
     "zod": "^3.19.1"
@@ -57,12 +56,12 @@
     "zod": "^3.19.1"
   },
   "dependencies": {
-    "detect-font": "^0.1.5",
     "@webstudio-is/asset-uploader": "^*",
     "@webstudio-is/css-data": "*",
     "@webstudio-is/icons": "*",
     "@webstudio-is/image": "*",
     "@webstudio-is/prisma-client": "*",
+    "detect-font": "^0.1.5",
     "immer": "^9.0.12",
     "mitt": "^3.0.0",
     "react-nano-state": "^0.4.0",
@@ -72,20 +71,13 @@
     "import": "./lib/index.js",
     "require": "./lib/cjs/index.cjs"
   },
-  "types": "lib/index.d.ts",
+  "types": "src/index.ts",
   "files": [
     "lib/*",
-    "README.md",
+    "src/*",
     "!*.test.*"
   ],
   "license": "MIT",
   "private": false,
-  "sideEffects": false,
-  "tsup": {
-    "entry": [
-      "src/index.ts"
-    ],
-    "format": "esm",
-    "outDir": "lib"
-  }
+  "sideEffects": false
 }

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

@@ -0,0 +1,62 @@
+import {
+  forwardRef,
+  useMemo,
+  type ComponentProps,
+  type ElementRef,
+} 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 { idAttribute } from "../../tree/wrapper-component";
+import { getParams } from "../params";
+
+const defaultTag = "img";
+
+type Props = ComponentProps<typeof WebstudioImage> & { [idAttribute]: string };
+
+export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  (props, ref) => {
+    const componentId = props[idAttribute] as string;
+
+    const asset = useUserPropsAsset(componentId, "src");
+    const params = getParams();
+
+    const loader = useMemo(() => {
+      if (asset == null) return null;
+      if (asset.location === "REMOTE")
+        return loaders.cloudflareImageLoader(params);
+      return loaders.localImageLoader();
+    }, [asset, params]);
+
+    let src = props.src;
+
+    if (asset != null) {
+      src = asset.path;
+    }
+
+    if (asset == null || loader == null) {
+      return <SdkImage key={src} {...props} src={src} ref={ref} />;
+    }
+
+    return (
+      <WebstudioImage
+        /**
+         * `key` is needed to recreate the image in case of asset change in designer,
+         * this gives immediate feedback when an asset is changed.
+         * Also, it visually fixes image distortion when another asset has a seriously different  aspectRatio
+         * (we change aspectRatio CSS prop on asset change)
+         *
+         * In non-designer mode, key on images are usually also a good idea,
+         * prevents showing outdated images on route change.
+         **/
+        key={src}
+        {...props}
+        loader={loader}
+        src={src}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Image.displayName = "Image";

package/src/app/custom-components/index.ts

@@ -0,0 +1,17 @@
+import { Image } from "./image";
+import { Link } from "./link";
+import { RichTextLink } from "./rich-text-link";
+import { imageProps } from "@webstudio-is/image";
+import type { MetaProps } from "../../components/component-type";
+
+export const customComponents = {
+  Image,
+  Link,
+  RichTextLink,
+};
+
+export const customComponentsMeta = {
+  Image: {
+    props: imageProps as MetaProps,
+  },
+};

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

@@ -0,0 +1,4 @@
+import { Link as BaseLink } from "../../components/link";
+import { wrapLinkComponent } from "./shared/remix-link";
+
+export const Link = wrapLinkComponent(BaseLink);

package/src/app/custom-components/rich-text-link.tsx

@@ -0,0 +1,4 @@
+import { RichTextLink as BaseLink } from "../../components/rich-text-link";
+import { wrapLinkComponent } from "./shared/remix-link";
+
+export const RichTextLink = wrapLinkComponent(BaseLink);