@webstudio-is/react-sdk 0.96.0 → 0.98.0

package/lib/index.js

@@ -23,8 +23,9 @@ import {
 import { atom } from "nanostores";
 import { createContext } from "react";
 var ReactSdkContext = createContext({
-  imageBaseUrl: "/",
   assetBaseUrl: "/",
+  imageBaseUrl: "/",
+  imageLoader: ({ src }) => src,
   propsByInstanceIdStore: atom(/* @__PURE__ */ new Map()),
   assetsStore: atom(/* @__PURE__ */ new Map()),
   pagesStore: atom(/* @__PURE__ */ new Map()),
@@ -45,8 +46,9 @@ var ReactSdkContext = createContext({
 import { jsx, jsxs } from "react/jsx-runtime";
 var createElementsTree = ({
   renderer,
-  imageBaseUrl,
   assetBaseUrl,
+  imageBaseUrl,
+  imageLoader,
   instances,
   rootInstanceId,
   propsByInstanceIdStore,
@@ -93,8 +95,9 @@ var createElementsTree = ({
         pagesStore,
         dataSourceValuesStore,
         renderer,
-        imageBaseUrl,
+        imageLoader,
         assetBaseUrl,
+        imageBaseUrl,
         indexesWithinAncestors,
         executeEffectfulExpression: executeEffectfulExpression2,
         setDataSourceValues: onDataSourceUpdate,
@@ -424,7 +427,8 @@ var InstanceRoot = ({
   utils,
   Component,
   components,
-  scripts
+  scripts,
+  imageLoader
 }) => {
   const {
     indexesWithinAncestors,
@@ -472,6 +476,7 @@ var InstanceRoot = ({
     [dataSourceVariablesStore]
   );
   return createElementsTree({
+    imageLoader,
     imageBaseUrl: data.params?.imageBaseUrl ?? "/",
     assetBaseUrl: data.params?.assetBaseUrl ?? "/",
     instances: new Map(data.build.instances),
@@ -1571,7 +1576,8 @@ var renderComponentTemplate = ({
   name,
   metas: metasRecord,
   components,
-  props
+  props,
+  imageLoader
 }) => {
   const metas = new Map(Object.entries(metasRecord));
   const template = metas.get(name)?.template ?? [
@@ -1675,7 +1681,8 @@ var renderComponentTemplate = ({
           }
         },
         Component: WebstudioComponent,
-        components: new Map(Object.entries(components))
+        components: new Map(Object.entries(components)),
+        imageLoader: imageLoader ?? (({ src }) => src)
       }
     )
   ] });

package/lib/types/component-renderer.d.ts

@@ -1,9 +1,11 @@
 import type { ExoticComponent } from "react";
 import type { Instance } from "@webstudio-is/sdk";
 import type { WsComponentMeta } from "./components/component-meta";
-export declare const renderComponentTemplate: ({ name, metas: metasRecord, components, props, }: {
+import type { ImageLoader } from "@webstudio-is/image";
+export declare const renderComponentTemplate: ({ name, metas: metasRecord, components, props, imageLoader, }: {
     name: Instance["component"];
     metas: Record<string, WsComponentMeta>;
     props?: Record<string, unknown> | undefined;
     components: Record<string, ExoticComponent<any>>;
+    imageLoader?: ImageLoader | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/lib/types/context.d.ts

@@ -3,6 +3,7 @@ import { type ReadableAtom } from "nanostores";
 import type { DataSource, Instance, Prop, Assets } from "@webstudio-is/sdk";
 import type { Pages, PropsByInstanceId } from "./props";
 import type { IndexesWithinAncestors } from "./instance-utils";
+import type { ImageLoader } from "@webstudio-is/image";
 export type Params = {
     renderer?: "canvas" | "preview";
     /**
@@ -31,6 +32,7 @@ export type Params = {
 };
 export type DataSourceValues = Map<DataSource["id"], unknown>;
 export declare const ReactSdkContext: import("react").Context<Params & {
+    imageLoader: ImageLoader;
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;

package/lib/types/tree/create-elements-tree.d.ts

@@ -6,7 +6,8 @@ import { type Params, type DataSourceValues } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponentProps } from "./webstudio-component";
 import type { IndexesWithinAncestors } from "../instance-utils";
-export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, dataSourceValuesStore, executeEffectfulExpression, onDataSourceUpdate, indexesWithinAncestors, Component, components, scripts, }: Params & {
+import type { ImageLoader } from "@webstudio-is/image";
+export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl, imageLoader, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, dataSourceValuesStore, executeEffectfulExpression, onDataSourceUpdate, indexesWithinAncestors, Component, components, scripts, }: Params & {
     instances: Map<string, {
         type: "instance";
         id: string;
@@ -20,6 +21,7 @@ export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl
         })[];
         label?: string | undefined;
     }>;
+    imageLoader: ImageLoader;
     rootInstanceId: Instance["id"];
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;

package/lib/types/tree/root.d.ts

@@ -4,6 +4,7 @@ import { type WebstudioComponentProps } from "./webstudio-component";
 import type { Components } from "../components/components-utils";
 import type { Params } from "../context";
 import type { GeneratedUtils } from "../generator";
+import type { ImageLoader } from "@webstudio-is/image";
 export type RootPropsData = {
     params?: Params;
     page: Page;
@@ -21,6 +22,7 @@ type RootProps = {
     Component?: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;
     components: Components;
     scripts?: ReactNode;
+    imageLoader: ImageLoader;
 };
-export declare const InstanceRoot: ({ data, utils, Component, components, scripts, }: RootProps) => JSX.Element | null;
+export declare const InstanceRoot: ({ data, utils, Component, components, scripts, imageLoader, }: RootProps) => JSX.Element | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.96.0",
+  "version": "0.98.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -34,9 +34,10 @@
     "nanostores": "^0.9.3",
     "no-case": "^3.0.4",
     "title-case": "^3.0.3",
-    "@webstudio-is/css-engine": "^0.96.0",
-    "@webstudio-is/fonts": "^0.96.0",
-    "@webstudio-is/sdk": "^0.96.0"
+    "@webstudio-is/css-engine": "^0.98.0",
+    "@webstudio-is/fonts": "^0.98.0",
+    "@webstudio-is/image": "^0.98.0",
+    "@webstudio-is/sdk": "^0.98.0"
   },
   "exports": {
     ".": {