@webstudio-is/react-sdk 0.56.0 → 0.58.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.56.0",
+  "version": "0.58.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -13,23 +13,23 @@
     "@remix-run/server-runtime": "1.15.0",
     "@storybook/react": "^6.5.16",
     "@types/node": "^18.11.18",
-    "@types/react": "^17.0.24",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.35",
+    "@types/react-dom": "^18.0.11",
     "jest": "^29.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "5.0.3",
     "zod": "^3.19.1",
-    "@webstudio-is/jest-config": "^1.0.2",
+    "@webstudio-is/jest-config": "^1.0.5",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
-    "@webstudio-is/tsconfig": "^1.0.3"
+    "@webstudio-is/tsconfig": "^1.0.5"
   },
   "peerDependencies": {
     "@remix-run/react": "1.9.0",
     "@remix-run/server-runtime": "1.9.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "zod": "^3.19.1"
   },
   "dependencies": {
@@ -38,16 +38,16 @@
     "html-tags": "^3.2.0",
     "nanoevents": "^7.0.1",
     "nanostores": "^0.7.1",
-    "@webstudio-is/asset-uploader": "^0.56.0",
-    "@webstudio-is/css-data": "^0.56.0",
-    "@webstudio-is/css-engine": "^0.56.0",
-    "@webstudio-is/css-vars": "^0.56.0",
-    "@webstudio-is/fonts": "^0.56.0",
-    "@webstudio-is/generate-arg-types": "^0.56.0",
-    "@webstudio-is/icons": "^0.56.0",
-    "@webstudio-is/image": "^0.56.0",
-    "@webstudio-is/prisma-client": "^0.56.0",
-    "@webstudio-is/project-build": "^0.56.0"
+    "@webstudio-is/asset-uploader": "^0.58.0",
+    "@webstudio-is/css-data": "^0.58.0",
+    "@webstudio-is/css-engine": "^0.58.0",
+    "@webstudio-is/css-vars": "^0.58.0",
+    "@webstudio-is/fonts": "^0.58.0",
+    "@webstudio-is/generate-arg-types": "^0.58.0",
+    "@webstudio-is/icons": "^0.58.0",
+    "@webstudio-is/image": "^0.58.0",
+    "@webstudio-is/prisma-client": "^0.58.0",
+    "@webstudio-is/project-build": "^0.58.0"
   },
   "exports": {
     ".": {
@@ -69,8 +69,8 @@
     "dev": "build-package --watch",
     "build": "build-package",
     "build:args": "generate-arg-types './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
-    "dts": "tsc --emitDeclarationOnly --declaration --declarationDir lib/types",
-    "typecheck": "tsc --noEmit",
+    "dts": "tsc --declarationDir lib/types",
+    "typecheck": "tsc --noEmit --emitDeclarationOnly false",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "checks": "pnpm typecheck && pnpm lint && pnpm test",

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

@@ -23,16 +23,15 @@ export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
         return null;
       }
       if (asset.location === "REMOTE") {
-        return loaders.cloudflareImageLoader(params);
+        return loaders.cloudflareImageLoader({
+          resizeOrigin: params.resizeOrigin,
+          cdnUrl: params.assetBaseUrl,
+        });
       }
-      return loaders.localImageLoader(params);
+      return loaders.localImageLoader({ publicPath: params.assetBaseUrl });
     }, [asset, params]);
 
-    let src = props.src;
-
-    if (asset != null) {
-      src = asset.path;
-    }
+    const src = asset?.name ?? props.src;
 
     if (asset == null || loader == null) {
       return <SdkImage key={src} {...props} src={src} ref={ref} />;

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

@@ -11,11 +11,15 @@ export const wrapLinkComponent = (BaseLink: LinkComponent) => {
   const Component: LinkComponent = forwardRef((props: LinkProps, ref) => {
     const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
 
-    if (typeof href === "string" || href === undefined) {
-      return <BaseLink {...props} ref={ref} />;
+    if (href?.type === "page") {
+      let to = href.page.path;
+      if (href.hash !== undefined) {
+        to += `#${href.hash}`;
+      }
+      return <RemixLink {...props} to={to} ref={ref} />;
     }
 
-    return <RemixLink {...props} to={href.path} ref={ref} />;
+    return <BaseLink {...props} ref={ref} />;
   });
 
   Component.displayName = BaseLink.displayName;

package/src/app/params.ts

@@ -1,14 +1,16 @@
 export type Params = {
   resizeOrigin?: string;
-  publicPath?: string;
+  assetBaseUrl: string;
 };
 
-let params: Params | null = {};
+let params: undefined | Params;
 
-const emptyParams: Params = {};
+const emptyParams: Params = {
+  assetBaseUrl: "/",
+};
 
 export const getParams = (): Params => params ?? emptyParams;
 
-export const setParams = (newParams: Params | null) => {
+export const setParams = (newParams: undefined | Params) => {
   params = newParams;
 };

package/src/components/link.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, type ComponentProps } from "react";
 import { usePropUrl, getInstanceIdFromComponentProps } from "../props";
+import { getParams } from "../app/params";
 
 export const defaultTag = "a";
 
@@ -15,13 +16,26 @@ type Props = Omit<ComponentProps<"a">, "href" | "target"> & {
 
 export const Link = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
   const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
-  return (
-    <a
-      {...props}
-      href={typeof href === "string" ? href : href?.path}
-      ref={ref}
-    />
-  );
+
+  const { assetBaseUrl } = getParams();
+
+  let url = "#";
+
+  switch (href?.type) {
+    case "page":
+      url = href.page.path;
+      if (href.hash !== undefined) {
+        url += `#${href.hash}`;
+      }
+      break;
+    case "asset":
+      url = `${assetBaseUrl}${href.asset.name}`;
+      break;
+    case "string":
+      url = href.url;
+  }
+
+  return <a {...props} href={url} ref={ref} />;
 });
 
 Link.displayName = "Link";

package/src/css/css.ts

@@ -15,7 +15,7 @@ type Data = {
 };
 
 type CssOptions = {
-  publicPath?: string;
+  assetBaseUrl: string;
 };
 
 export const createImageValueTransformer =
@@ -28,9 +28,8 @@ export const createImageValueTransformer =
       }
 
       // @todo reuse image loaders and generate image-set
-      const { publicPath = "/" } = options;
-      const url =
-        asset.location === "REMOTE" ? asset.path : `${publicPath}${asset.name}`;
+      const { assetBaseUrl } = options;
+      const url = `${assetBaseUrl}${asset.name}`;
 
       return {
         type: "image",
@@ -53,7 +52,10 @@ export const generateCssText = (data: Data, options: CssOptions) => {
 
   const engine = createCssEngine({ name: "ssr" });
 
-  addGlobalRules(engine, { assets });
+  addGlobalRules(engine, {
+    assets,
+    assetBaseUrl: options.assetBaseUrl,
+  });
 
   for (const breakpoint of breakpoints.values()) {
     engine.addMediaRule(breakpoint.id, breakpoint);
@@ -75,9 +77,9 @@ export const generateCssText = (data: Data, options: CssOptions) => {
   }
 
   const styleRules = getStyleRules(styles, styleSourceSelections);
-  for (const { breakpointId, instanceId, style } of styleRules) {
+  for (const { breakpointId, instanceId, state, style } of styleRules) {
     engine.addStyleRule(
-      `[${idAttribute}="${instanceId}"]`,
+      `[${idAttribute}="${instanceId}"]${state ?? ""}`,
       {
         breakpoint: breakpointId,
         style,

package/src/css/global-rules.ts

@@ -1,28 +1,24 @@
 import type { CssEngine } from "@webstudio-is/css-engine";
 import type { Assets, FontAsset } from "@webstudio-is/asset-uploader";
-import {
-  type FontFormat,
-  FONT_FORMATS,
-  getFontFaces,
-} from "@webstudio-is/fonts";
+import { getFontFaces } from "@webstudio-is/fonts";
 
 export const addGlobalRules = (
   engine: CssEngine,
-  { assets }: { assets: Assets }
+  { assets, assetBaseUrl }: { assets: Assets; assetBaseUrl: string }
 ) => {
   // @todo we need to figure out all global resets while keeping
   // the engine aware of all of them.
   // Ideally, the user is somehow aware and in control of the reset
   engine.addPlaintextRule("html {margin: 0; height: 100%}");
 
-  const fontAssets: Array<FontAsset> = [];
+  const fontAssets: FontAsset[] = [];
   for (const asset of assets.values()) {
-    if (asset && FONT_FORMATS.has(asset.format as FontFormat)) {
-      fontAssets.push(asset as FontAsset);
+    if (asset?.type === "font") {
+      fontAssets.push(asset);
     }
   }
 
-  const fontFaces = getFontFaces(fontAssets);
+  const fontFaces = getFontFaces(fontAssets, { assetBaseUrl });
   for (const fontFace of fontFaces) {
     engine.addFontFaceRule(fontFace);
   }

package/src/css/style-rules.test.ts

@@ -55,6 +55,13 @@ test("compute styles from different style sources", () => {
       property: "color",
       value: { type: "keyword", value: "blue" },
     }),
+    createStyleDeclPair({
+      breakpointId: "a",
+      styleSourceId: "styleSource6",
+      state: ":hover",
+      property: "color",
+      value: { type: "keyword", value: "blue" },
+    }),
   ]);
   const styleSourceSelections: StyleSourceSelections = new Map([
     [
@@ -85,6 +92,7 @@ test("compute styles from different style sources", () => {
       {
         "breakpointId": "a",
         "instanceId": "instance1",
+        "state": undefined,
         "style": {
           "width": {
             "type": "unit",
@@ -96,6 +104,7 @@ test("compute styles from different style sources", () => {
       {
         "breakpointId": "a",
         "instanceId": "instance2",
+        "state": undefined,
         "style": {
           "color": {
             "type": "keyword",
@@ -110,6 +119,7 @@ test("compute styles from different style sources", () => {
       {
         "breakpointId": "b",
         "instanceId": "instance2",
+        "state": undefined,
         "style": {
           "color": {
             "type": "keyword",
@@ -120,6 +130,18 @@ test("compute styles from different style sources", () => {
       {
         "breakpointId": "a",
         "instanceId": "instance3",
+        "state": undefined,
+        "style": {
+          "color": {
+            "type": "keyword",
+            "value": "blue",
+          },
+        },
+      },
+      {
+        "breakpointId": "a",
+        "instanceId": "instance3",
+        "state": ":hover",
         "style": {
           "color": {
             "type": "keyword",

package/src/css/style-rules.ts

@@ -10,6 +10,7 @@ import type {
 type StyleRule = {
   instanceId: string;
   breakpointId: string;
+  state: undefined | string;
   style: Style;
 };
 
@@ -38,7 +39,10 @@ export const getStyleRules = (
 
   const styleRules: StyleRule[] = [];
   for (const { instanceId, values } of styleSourceSelections.values()) {
-    const styleRuleByBreakpointId = new Map<Breakpoint["id"], StyleRule>();
+    const styleRuleByBreakpointId = new Map<
+      `${Breakpoint["id"]}:${string}`,
+      StyleRule
+    >();
 
     for (const styleSourceId of values) {
       const styleSourceStyles = stylesByStyleSourceId.get(styleSourceId);
@@ -46,15 +50,22 @@ export const getStyleRules = (
       if (styleSourceStyles === undefined) {
         continue;
       }
-      for (const { breakpointId, property, value } of styleSourceStyles) {
-        let styleRule = styleRuleByBreakpointId.get(breakpointId);
+      for (const {
+        breakpointId,
+        state,
+        property,
+        value,
+      } of styleSourceStyles) {
+        const key = `${breakpointId}:${state ?? ""}` as const;
+        let styleRule = styleRuleByBreakpointId.get(key);
         if (styleRule === undefined) {
           styleRule = {
             instanceId,
             breakpointId,
+            state,
             style: {},
           };
-          styleRuleByBreakpointId.set(breakpointId, styleRule);
+          styleRuleByBreakpointId.set(key, styleRule);
         }
         styleRule.style[property] = value;
       }

package/src/props.test.ts

@@ -1,11 +1,13 @@
 import { describe, test, expect } from "@jest/globals";
 import { resolveUrlProp, type Pages, type PropsByInstanceId } from "./props";
 import type { Page, Prop } from "@webstudio-is/project-build";
+import type { Asset, Assets } from "@webstudio-is/asset-uploader";
 
 const unique = () => Math.random().toString();
 
 describe("resolveUrlProp", () => {
   const instanceId = unique();
+  const projectId = unique();
 
   const page1: Page = {
     id: unique(),
@@ -25,6 +27,27 @@ describe("resolveUrlProp", () => {
     rootInstanceId: "0",
   };
 
+  const asset1: Asset = {
+    id: unique(),
+    name: unique(),
+    type: "image",
+    location: "REMOTE",
+    projectId,
+    format: "png",
+    size: 100000,
+    createdAt: new Date().toISOString(),
+    description: null,
+    meta: { width: 128, height: 180 },
+  };
+
+  const assetProp: Prop = {
+    type: "asset",
+    id: unique(),
+    instanceId,
+    name: unique(),
+    value: asset1.id,
+  };
+
   const pageByIdProp: Prop = {
     type: "page",
     id: unique(),
@@ -33,6 +56,22 @@ describe("resolveUrlProp", () => {
     value: page1.id,
   };
 
+  const instnaceIdProp: Prop = {
+    type: "string",
+    id: unique(),
+    instanceId: unique(),
+    name: "id",
+    value: unique(),
+  };
+
+  const pageSectionProp: Prop = {
+    type: "page",
+    id: unique(),
+    instanceId,
+    name: unique(),
+    value: { pageId: page1.id, instanceId: instnaceIdProp.instanceId },
+  };
+
   const pageByPathProp: Prop = {
     type: "string",
     id: unique(),
@@ -49,8 +88,18 @@ describe("resolveUrlProp", () => {
     value: unique(),
   };
 
-  const propsByInstanceId: PropsByInstanceId = new Map([
-    [instanceId, [pageByIdProp, pageByPathProp, arbitraryUrlProp]],
+  const props: PropsByInstanceId = new Map([
+    [
+      instanceId,
+      [
+        pageByIdProp,
+        pageByPathProp,
+        arbitraryUrlProp,
+        assetProp,
+        pageSectionProp,
+      ],
+    ],
+    [instnaceIdProp.instanceId, [instnaceIdProp]],
   ]);
 
   const pages: Pages = new Map([
@@ -58,38 +107,54 @@ describe("resolveUrlProp", () => {
     [page2.id, page2],
   ]);
 
+  const assets: Assets = new Map([[asset1.id, asset1]]);
+
+  const stores = { props, pages, assets };
+
   test("if instanceId is unknown returns undefined", () => {
     expect(
-      resolveUrlProp("unknown", pageByIdProp.name, propsByInstanceId, pages)
+      resolveUrlProp("unknown", pageByIdProp.name, stores)
     ).toBeUndefined();
   });
 
   test("if prop name is unknown returns undefined", () => {
-    expect(
-      resolveUrlProp(instanceId, "unknown", propsByInstanceId, pages)
-    ).toBeUndefined();
+    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, propsByInstanceId, pages)
-    ).toBe(page1);
+    expect(resolveUrlProp(instanceId, pageByIdProp.name, stores)).toEqual({
+      type: "page",
+      page: page1,
+    });
   });
 
   test("page by path", () => {
-    expect(
-      resolveUrlProp(instanceId, pageByPathProp.name, propsByInstanceId, pages)
-    ).toBe(page2);
+    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,
-        propsByInstanceId,
-        pages
-      )
-    ).toBe(arbitraryUrlProp.value);
+    expect(resolveUrlProp(instanceId, arbitraryUrlProp.name, stores)).toEqual({
+      type: "string",
+      url: arbitraryUrlProp.value,
+    });
   });
 });

package/src/props.ts

@@ -2,6 +2,7 @@ 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 } from "./tree/webstudio-component";
 
@@ -31,7 +32,7 @@ export const useInstanceProps = (instanceId: Instance["id"]) => {
   const instancePropsObject: Record<Prop["name"], Prop["value"]> = {};
   if (instanceProps) {
     for (const prop of instanceProps) {
-      if (prop.type !== "asset") {
+      if (prop.type !== "asset" && prop.type !== "page") {
         instancePropsObject[prop.name] = prop.value;
       }
     }
@@ -67,10 +68,22 @@ export const usePropAsset = (instanceId: Instance["id"], name: string) => {
 export const resolveUrlProp = (
   instanceId: Instance["id"],
   name: string,
-  propsByInstanceId: PropsByInstanceId,
-  pages: Pages
-): Page | string | undefined => {
-  const instanceProps = propsByInstanceId.get(instanceId);
+  {
+    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;
   }
@@ -80,16 +93,44 @@ export const resolveUrlProp = (
     }
 
     if (prop.type === "page") {
-      return pages.get(prop.value);
+      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 page;
+          return { type: "page", page };
         }
       }
-      return prop.value;
+      return { type: "string", url: prop.value };
+    }
+
+    if (prop.type === "asset") {
+      const asset = assets.get(prop.value);
+      return asset && { type: "asset", asset };
     }
 
     return;
@@ -99,17 +140,18 @@ export const resolveUrlProp = (
 // 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 } = useContext(ReactSdkContext);
-  const pageStore = useMemo(
+  const { propsByInstanceIdStore, pagesStore, assetsStore } =
+    useContext(ReactSdkContext);
+  const store = useMemo(
     () =>
       computed(
-        [propsByInstanceIdStore, pagesStore],
-        (propsByInstanceId, pages) =>
-          resolveUrlProp(instanceId, name, propsByInstanceId, pages)
+        [propsByInstanceIdStore, pagesStore, assetsStore],
+        (props, pages, assets) =>
+          resolveUrlProp(instanceId, name, { props, pages, assets })
       ),
-    [propsByInstanceIdStore, pagesStore, instanceId, name]
+    [propsByInstanceIdStore, pagesStore, assetsStore, instanceId, name]
   );
-  return useStore(pageStore);
+  return useStore(store);
 };
 
 export const getInstanceIdFromComponentProps = (

package/src/pubsub/raf-queue.ts

@@ -1,18 +1,12 @@
-import { unstable_batchedUpdates as batchedUpdates } from "react-dom";
-
 type Task = () => void;
 
 let handle: ReturnType<typeof requestAnimationFrame> | undefined;
 let updateQueue: Task[] = [];
 
 const processUpdates = (updates: Task[]) => {
-  // Prior to React v18, updates not called within React event handlers would not be batched
-  // To ensure all updates are batched into a single React update, we wrap them in a batchedUpdates callback
-  batchedUpdates(() => {
-    for (const update of updates) {
-      update();
-    }
-  });
+  for (const update of updates) {
+    update();
+  }
 };
 
 export const batchUpdate = (update: () => void) => {