@webstudio-is/react-sdk 0.56.0 → 0.58.0

package/lib/app/custom-components/image.js

@@ -17,14 +17,14 @@ const Image = forwardRef(
         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 /* @__PURE__ */ jsx(SdkImage, { ...props, src, ref }, src);
     }

package/lib/app/custom-components/shared/remix-link.js

@@ -5,10 +5,14 @@ import { usePropUrl, getInstanceIdFromComponentProps } from "../../../props";
 const wrapLinkComponent = (BaseLink) => {
   const Component = forwardRef((props, ref) => {
     const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
-    if (typeof href === "string" || href === void 0) {
-      return /* @__PURE__ */ jsx(BaseLink, { ...props, ref });
+    if (href?.type === "page") {
+      let to = href.page.path;
+      if (href.hash !== void 0) {
+        to += `#${href.hash}`;
+      }
+      return /* @__PURE__ */ jsx(RemixLink, { ...props, to, ref });
     }
-    return /* @__PURE__ */ jsx(RemixLink, { ...props, to: href.path, ref });
+    return /* @__PURE__ */ jsx(BaseLink, { ...props, ref });
   });
   Component.displayName = BaseLink.displayName;
   return Component;

package/lib/app/params.js

@@ -1,5 +1,7 @@
-let params = {};
-const emptyParams = {};
+let params;
+const emptyParams = {
+  assetBaseUrl: "/"
+};
 const getParams = () => params ?? emptyParams;
 const setParams = (newParams) => {
   params = newParams;

package/lib/cjs/app/custom-components/image.js

@@ -37,14 +37,14 @@ const Image = (0, import_react.forwardRef)(
         return null;
       }
       if (asset.location === "REMOTE") {
-        return import_image.loaders.cloudflareImageLoader(params);
+        return import_image.loaders.cloudflareImageLoader({
+          resizeOrigin: params.resizeOrigin,
+          cdnUrl: params.assetBaseUrl
+        });
       }
-      return import_image.loaders.localImageLoader(params);
+      return import_image.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 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image2.Image, { ...props, src, ref }, src);
     }

package/lib/cjs/app/custom-components/shared/remix-link.js

@@ -28,10 +28,14 @@ var import_props = require("../../../props");
 const wrapLinkComponent = (BaseLink) => {
   const Component = (0, import_react2.forwardRef)((props, ref) => {
     const href = (0, import_props.usePropUrl)((0, import_props.getInstanceIdFromComponentProps)(props), "href");
-    if (typeof href === "string" || href === void 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseLink, { ...props, ref });
+    if (href?.type === "page") {
+      let to = href.page.path;
+      if (href.hash !== void 0) {
+        to += `#${href.hash}`;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Link, { ...props, to, ref });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Link, { ...props, to: href.path, ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseLink, { ...props, ref });
   });
   Component.displayName = BaseLink.displayName;
   return Component;

package/lib/cjs/app/params.js

@@ -22,8 +22,10 @@ __export(params_exports, {
   setParams: () => setParams
 });
 module.exports = __toCommonJS(params_exports);
-let params = {};
-const emptyParams = {};
+let params;
+const emptyParams = {
+  assetBaseUrl: "/"
+};
 const getParams = () => params ?? emptyParams;
 const setParams = (newParams) => {
   params = newParams;

package/lib/cjs/components/link.js

@@ -25,16 +25,25 @@ module.exports = __toCommonJS(link_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_props = require("../props");
+var import_params = require("../app/params");
 const defaultTag = "a";
 const Link = (0, import_react.forwardRef)((props, ref) => {
   const href = (0, import_props.usePropUrl)((0, import_props.getInstanceIdFromComponentProps)(props), "href");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "a",
-    {
-      ...props,
-      href: typeof href === "string" ? href : href?.path,
-      ref
-    }
-  );
+  const { assetBaseUrl } = (0, import_params.getParams)();
+  let url = "#";
+  switch (href?.type) {
+    case "page":
+      url = href.page.path;
+      if (href.hash !== void 0) {
+        url += `#${href.hash}`;
+      }
+      break;
+    case "asset":
+      url = `${assetBaseUrl}${href.asset.name}`;
+      break;
+    case "string":
+      url = href.url;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { ...props, href: url, ref });
 });
 Link.displayName = "Link";

package/lib/cjs/css/css.js

@@ -34,8 +34,8 @@ const createImageValueTransformer = (assets, options) => (styleValue) => {
     if (asset === void 0) {
       return { type: "keyword", value: "none" };
     }
-    const { publicPath = "/" } = options;
-    const url = asset.location === "REMOTE" ? asset.path : `${publicPath}${asset.name}`;
+    const { assetBaseUrl } = options;
+    const url = `${assetBaseUrl}${asset.name}`;
     return {
       type: "image",
       value: {
@@ -54,7 +54,10 @@ const generateCssText = (data, options) => {
   const styles = new Map(data.styles);
   const styleSourceSelections = new Map(data.styleSourceSelections);
   const engine = (0, import_css_engine.createCssEngine)({ name: "ssr" });
-  (0, import_global_rules.addGlobalRules)(engine, { assets });
+  (0, import_global_rules.addGlobalRules)(engine, {
+    assets,
+    assetBaseUrl: options.assetBaseUrl
+  });
   for (const breakpoint of breakpoints.values()) {
     engine.addMediaRule(breakpoint.id, breakpoint);
   }
@@ -73,9 +76,9 @@ const generateCssText = (data, options) => {
     }
   }
   const styleRules = (0, import_style_rules.getStyleRules)(styles, styleSourceSelections);
-  for (const { breakpointId, instanceId, style } of styleRules) {
+  for (const { breakpointId, instanceId, state, style } of styleRules) {
     engine.addStyleRule(
-      `[${import_tree.idAttribute}="${instanceId}"]`,
+      `[${import_tree.idAttribute}="${instanceId}"]${state ?? ""}`,
       {
         breakpoint: breakpointId,
         style

package/lib/cjs/css/global-rules.js

@@ -22,15 +22,15 @@ __export(global_rules_exports, {
 });
 module.exports = __toCommonJS(global_rules_exports);
 var import_fonts = require("@webstudio-is/fonts");
-const addGlobalRules = (engine, { assets }) => {
+const addGlobalRules = (engine, { assets, assetBaseUrl }) => {
   engine.addPlaintextRule("html {margin: 0; height: 100%}");
   const fontAssets = [];
   for (const asset of assets.values()) {
-    if (asset && import_fonts.FONT_FORMATS.has(asset.format)) {
+    if (asset?.type === "font") {
       fontAssets.push(asset);
     }
   }
-  const fontFaces = (0, import_fonts.getFontFaces)(fontAssets);
+  const fontFaces = (0, import_fonts.getFontFaces)(fontAssets, { assetBaseUrl });
   for (const fontFace of fontFaces) {
     engine.addFontFaceRule(fontFace);
   }

package/lib/cjs/css/style-rules.js

@@ -43,15 +43,22 @@ const getStyleRules = (styles, styleSourceSelections) => {
       if (styleSourceStyles === void 0) {
         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 ?? ""}`;
+        let styleRule = styleRuleByBreakpointId.get(key);
         if (styleRule === void 0) {
           styleRule = {
             instanceId,
             breakpointId,
+            state,
             style: {}
           };
-          styleRuleByBreakpointId.set(breakpointId, styleRule);
+          styleRuleByBreakpointId.set(key, styleRule);
         }
         styleRule.style[property] = value;
       }

package/lib/cjs/props.js

@@ -50,7 +50,7 @@ const useInstanceProps = (instanceId) => {
   const instancePropsObject = {};
   if (instanceProps) {
     for (const prop of instanceProps) {
-      if (prop.type !== "asset") {
+      if (prop.type !== "asset" && prop.type !== "page") {
         instancePropsObject[prop.name] = prop.value;
       }
     }
@@ -79,8 +79,12 @@ const usePropAsset = (instanceId, name) => {
   const asset = (0, import_react2.useStore)(assetStore);
   return asset;
 };
-const resolveUrlProp = (instanceId, name, propsByInstanceId, pages) => {
-  const instanceProps = propsByInstanceId.get(instanceId);
+const resolveUrlProp = (instanceId, name, {
+  props,
+  pages,
+  assets
+}) => {
+  const instanceProps = props.get(instanceId);
   if (instanceProps === void 0) {
     return;
   }
@@ -89,29 +93,48 @@ const resolveUrlProp = (instanceId, name, propsByInstanceId, pages) => {
       continue;
     }
     if (prop.type === "page") {
-      return pages.get(prop.value);
+      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 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;
   }
 };
 const usePropUrl = (instanceId, name) => {
-  const { propsByInstanceIdStore, pagesStore } = (0, import_react.useContext)(import_context.ReactSdkContext);
-  const pageStore = (0, import_react.useMemo)(
+  const { propsByInstanceIdStore, pagesStore, assetsStore } = (0, import_react.useContext)(import_context.ReactSdkContext);
+  const store = (0, import_react.useMemo)(
     () => (0, import_nanostores.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 (0, import_react2.useStore)(pageStore);
+  return (0, import_react2.useStore)(store);
 };
 const getInstanceIdFromComponentProps = (props) => {
   return props[import_webstudio_component.idAttribute];

package/lib/cjs/pubsub/raf-queue.js

@@ -21,15 +21,12 @@ __export(raf_queue_exports, {
   batchUpdate: () => batchUpdate
 });
 module.exports = __toCommonJS(raf_queue_exports);
-var import_react_dom = require("react-dom");
 let handle;
 let updateQueue = [];
 const processUpdates = (updates) => {
-  (0, import_react_dom.unstable_batchedUpdates)(() => {
-    for (const update of updates) {
-      update();
-    }
-  });
+  for (const update of updates) {
+    update();
+  }
 };
 const batchUpdate = (update) => {
   updateQueue.push(update);

package/lib/cjs/tree/root.js

@@ -34,7 +34,7 @@ const InstanceRoot = ({
   customComponents = import_custom_components.customComponents,
   getComponent
 }) => {
-  (0, import_params.setParams)(data.params ?? null);
+  (0, import_params.setParams)(data.params);
   (0, import_components.registerComponents)(customComponents);
   return (0, import_create_elements_tree.createElementsTree)({
     instances: new Map(data.build.instances),

package/lib/components/link.js

@@ -1,17 +1,26 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { usePropUrl, getInstanceIdFromComponentProps } from "../props";
+import { getParams } from "../app/params";
 const defaultTag = "a";
 const Link = forwardRef((props, ref) => {
   const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      ...props,
-      href: typeof href === "string" ? href : href?.path,
-      ref
-    }
-  );
+  const { assetBaseUrl } = getParams();
+  let url = "#";
+  switch (href?.type) {
+    case "page":
+      url = href.page.path;
+      if (href.hash !== void 0) {
+        url += `#${href.hash}`;
+      }
+      break;
+    case "asset":
+      url = `${assetBaseUrl}${href.asset.name}`;
+      break;
+    case "string":
+      url = href.url;
+  }
+  return /* @__PURE__ */ jsx("a", { ...props, href: url, ref });
 });
 Link.displayName = "Link";
 export {

package/lib/css/css.js

@@ -10,8 +10,8 @@ const createImageValueTransformer = (assets, options) => (styleValue) => {
     if (asset === void 0) {
       return { type: "keyword", value: "none" };
     }
-    const { publicPath = "/" } = options;
-    const url = asset.location === "REMOTE" ? asset.path : `${publicPath}${asset.name}`;
+    const { assetBaseUrl } = options;
+    const url = `${assetBaseUrl}${asset.name}`;
     return {
       type: "image",
       value: {
@@ -30,7 +30,10 @@ const generateCssText = (data, options) => {
   const styles = new Map(data.styles);
   const styleSourceSelections = new Map(data.styleSourceSelections);
   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);
   }
@@ -49,9 +52,9 @@ const generateCssText = (data, options) => {
     }
   }
   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/lib/css/global-rules.js

@@ -1,16 +1,13 @@
-import {
-  FONT_FORMATS,
-  getFontFaces
-} from "@webstudio-is/fonts";
-const addGlobalRules = (engine, { assets }) => {
+import { getFontFaces } from "@webstudio-is/fonts";
+const addGlobalRules = (engine, { assets, assetBaseUrl }) => {
   engine.addPlaintextRule("html {margin: 0; height: 100%}");
   const fontAssets = [];
   for (const asset of assets.values()) {
-    if (asset && FONT_FORMATS.has(asset.format)) {
+    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/lib/css/style-rules.js

@@ -20,15 +20,22 @@ const getStyleRules = (styles, styleSourceSelections) => {
       if (styleSourceStyles === void 0) {
         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 ?? ""}`;
+        let styleRule = styleRuleByBreakpointId.get(key);
         if (styleRule === void 0) {
           styleRule = {
             instanceId,
             breakpointId,
+            state,
             style: {}
           };
-          styleRuleByBreakpointId.set(breakpointId, styleRule);
+          styleRuleByBreakpointId.set(key, styleRule);
         }
         styleRule.style[property] = value;
       }

package/lib/props.js

@@ -22,7 +22,7 @@ const useInstanceProps = (instanceId) => {
   const instancePropsObject = {};
   if (instanceProps) {
     for (const prop of instanceProps) {
-      if (prop.type !== "asset") {
+      if (prop.type !== "asset" && prop.type !== "page") {
         instancePropsObject[prop.name] = prop.value;
       }
     }
@@ -51,8 +51,12 @@ const usePropAsset = (instanceId, name) => {
   const asset = useStore(assetStore);
   return asset;
 };
-const resolveUrlProp = (instanceId, name, propsByInstanceId, pages) => {
-  const instanceProps = propsByInstanceId.get(instanceId);
+const resolveUrlProp = (instanceId, name, {
+  props,
+  pages,
+  assets
+}) => {
+  const instanceProps = props.get(instanceId);
   if (instanceProps === void 0) {
     return;
   }
@@ -61,29 +65,48 @@ const resolveUrlProp = (instanceId, name, propsByInstanceId, pages) => {
       continue;
     }
     if (prop.type === "page") {
-      return pages.get(prop.value);
+      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 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;
   }
 };
 const usePropUrl = (instanceId, name) => {
-  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);
 };
 const getInstanceIdFromComponentProps = (props) => {
   return props[idAttribute];

package/lib/pubsub/raf-queue.js

@@ -1,12 +1,9 @@
-import { unstable_batchedUpdates as batchedUpdates } from "react-dom";
 let handle;
 let updateQueue = [];
 const processUpdates = (updates) => {
-  batchedUpdates(() => {
-    for (const update of updates) {
-      update();
-    }
-  });
+  for (const update of updates) {
+    update();
+  }
 };
 const batchUpdate = (update) => {
   updateQueue.push(update);

package/lib/tree/root.js

@@ -11,7 +11,7 @@ const InstanceRoot = ({
   customComponents = defaultCustomComponents,
   getComponent
 }) => {
-  setParams(data.params ?? null);
+  setParams(data.params);
   registerComponents(customComponents);
   return createElementsTree({
     instances: new Map(data.build.instances),

package/lib/types/app/custom-components/image.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare const Image: import("react").ForwardRefExoticComponent<Pick<Pick<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & {
+export declare const Image: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & {
     quality?: number | undefined;
     optimize?: boolean | undefined;
     loader: import("@webstudio-is/image").ImageLoader;
-}, "key" | keyof import("react").ImgHTMLAttributes<HTMLImageElement> | "quality" | "loader" | "optimize"> & import("react").RefAttributes<HTMLImageElement>, "key" | keyof import("react").ImgHTMLAttributes<HTMLImageElement> | "quality" | "loader" | "optimize"> & import("react").RefAttributes<HTMLImageElement>>;
+}, "ref"> & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;