@webstudio-is/react-sdk 0.95.0 → 0.97.0

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/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./css";
 export * from "./tree";
-export * from "./pubsub";
 export * from "./app";
 export * from "./components/components-utils";
 export { PropMeta } from "./prop-meta";

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.95.0",
+  "version": "0.97.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -30,14 +30,14 @@
     "@nanostores/react": "^0.7.1",
     "html-tags": "^3.3.1",
     "jsep": "^1.3.8",
-    "nanoevents": "^8.0.0",
     "nanoid": "^4.0.2",
     "nanostores": "^0.9.3",
     "no-case": "^3.0.4",
     "title-case": "^3.0.3",
-    "@webstudio-is/css-engine": "^0.95.0",
-    "@webstudio-is/fonts": "^0.95.0",
-    "@webstudio-is/sdk": "^0.95.0"
+    "@webstudio-is/css-engine": "^0.97.0",
+    "@webstudio-is/fonts": "^0.97.0",
+    "@webstudio-is/image": "^0.97.0",
+    "@webstudio-is/sdk": "^0.97.0"
   },
   "exports": {
     ".": {
@@ -61,8 +61,8 @@
   "private": false,
   "sideEffects": false,
   "scripts": {
-    "dev": "pnpm build --watch",
-    "build": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib",
+    "dev": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib --watch",
+    "build": "rm -rf lib && esbuild src/index.ts ./src/css/normalize.ts --outdir=lib --bundle --format=esm --packages=external",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",

package/lib/app/index.js

@@ -1,2 +0,0 @@
-"use strict";
-export * from "./root";

package/lib/app/root.js

@@ -1,18 +0,0 @@
-"use strict";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Links, Meta, Outlet as DefaultOutlet } from "@remix-run/react";
-export const Root = ({
-  Outlet = DefaultOutlet
-}) => {
-  return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
-    /* @__PURE__ */ jsxs("head", { children: [
-      /* @__PURE__ */ jsx("meta", { charSet: "utf-8" }),
-      /* @__PURE__ */ jsx("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }),
-      /* @__PURE__ */ jsx("link", { rel: "icon", href: "/favicon.ico", type: "image/x-icon" }),
-      /* @__PURE__ */ jsx("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }),
-      /* @__PURE__ */ jsx(Meta, {}),
-      /* @__PURE__ */ jsx(Links, {})
-    ] }),
-    /* @__PURE__ */ jsx(Outlet, {})
-  ] });
-};

package/lib/component-renderer.js

@@ -1,130 +0,0 @@
-"use strict";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { getStyleDeclKey } from "@webstudio-is/sdk";
-import {
-  WsEmbedTemplate,
-  generateDataFromEmbedTemplate
-} from "./embed-template";
-import { generateCssText } from "./css";
-import { InstanceRoot, WebstudioComponent } from "./tree";
-import {
-  decodeVariablesMap,
-  encodeDataSourceVariable,
-  encodeVariablesMap,
-  executeComputingExpressions,
-  executeEffectfulExpression
-} from "./expression";
-import { getIndexesWithinAncestors } from "./instance-utils";
-export const renderComponentTemplate = ({
-  name,
-  metas: metasRecord,
-  components,
-  props
-}) => {
-  const metas = new Map(Object.entries(metasRecord));
-  const template = metas.get(name)?.template ?? [
-    {
-      type: "instance",
-      component: name,
-      children: []
-    }
-  ];
-  if (template[0].type === "instance" && props !== void 0) {
-    template[0].props = Object.entries(props).map(([prop, value]) => {
-      if (typeof value === "string") {
-        return { type: "string", name: prop, value };
-      }
-      if (typeof value === "number") {
-        return { type: "number", name: prop, value };
-      }
-      if (typeof value === "boolean") {
-        return { type: "boolean", name: prop, value };
-      }
-      throw new Error(`Unsupported prop ${props} with value ${value}`);
-    });
-  }
-  const data = generateDataFromEmbedTemplate(template, metas, "base");
-  const instances = [
-    [
-      "root",
-      {
-        type: "instance",
-        id: "root",
-        component: "Box",
-        children: data.children
-      }
-    ],
-    ...data.instances.map(
-      (instance) => [instance.id, instance]
-    )
-  ];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { children: generateCssText(
-      {
-        assets: [],
-        breakpoints: [["base", { id: "base", label: "base" }]],
-        styles: data.styles.map((item) => [getStyleDeclKey(item), item]),
-        styleSourceSelections: data.styleSourceSelections.map((item) => [
-          item.instanceId,
-          item
-        ]),
-        componentMetas: metas
-      },
-      { assetBaseUrl: "/" }
-    ) }),
-    /* @__PURE__ */ jsx(
-      InstanceRoot,
-      {
-        data: {
-          page: {
-            path: "",
-            id: "",
-            name: "",
-            title: "",
-            meta: {},
-            rootInstanceId: "root"
-          },
-          pages: [],
-          assets: [],
-          build: {
-            instances,
-            props: data.props.map((prop) => [prop.id, prop]),
-            dataSources: data.dataSources.map((dataSource) => [
-              dataSource.id,
-              dataSource
-            ])
-          }
-        },
-        utils: {
-          indexesWithinAncestors: getIndexesWithinAncestors(
-            metas,
-            new Map(instances),
-            ["root"]
-          ),
-          executeComputingExpressions: (values) => {
-            const expressions = /* @__PURE__ */ new Map();
-            for (const dataSource of data.dataSources) {
-              const name2 = encodeDataSourceVariable(dataSource.id);
-              if (dataSource.type === "expression") {
-                expressions.set(name2, dataSource.code);
-              }
-            }
-            return decodeVariablesMap(
-              executeComputingExpressions(
-                expressions,
-                encodeVariablesMap(values)
-              )
-            );
-          },
-          executeEffectfulExpression: (code, args, values) => {
-            return decodeVariablesMap(
-              executeEffectfulExpression(code, args, encodeVariablesMap(values))
-            );
-          }
-        },
-        Component: WebstudioComponent,
-        components: new Map(Object.entries(components))
-      }
-    )
-  ] });
-};

package/lib/components/component-meta.js

@@ -1,62 +0,0 @@
-"use strict";
-import { z } from "zod";
-import { PropMeta } from "../prop-meta";
-import { EmbedTemplateStyleDecl, WsEmbedTemplate } from "../embed-template";
-const WsComponentPropsMeta = z.object({
-  props: z.record(PropMeta),
-  // Props that will be always visible in properties panel.
-  initialProps: z.array(z.string()).optional()
-});
-export const componentCategories = [
-  "general",
-  "text",
-  "media",
-  "forms",
-  "radix",
-  "hidden"
-];
-export const stateCategories = ["states", "component-states"];
-export const ComponentState = z.object({
-  category: z.enum(stateCategories).optional(),
-  selector: z.string(),
-  label: z.string()
-});
-const ComponentToken = z.object({
-  variant: z.optional(z.string()),
-  styles: z.array(EmbedTemplateStyleDecl)
-});
-export const defaultStates = [
-  { selector: ":hover", label: "Hover" },
-  { selector: ":active", label: "Active" },
-  { selector: ":focus", label: "Focus" },
-  { selector: ":focus-visible", label: "Focus Visible" },
-  { selector: ":focus-within", label: "Focus Within" }
-];
-const WsComponentMeta = z.object({
-  category: z.enum(componentCategories).optional(),
-  // container - can accept other components with dnd or be edited as text
-  // control - usually form controls like inputs, without children
-  // embed - images, videos or other embeddable components, without children
-  // rich-text-child - formatted text fragment, not listed in components list
-  type: z.enum(["container", "control", "embed", "rich-text-child"]),
-  requiredAncestors: z.optional(z.array(z.string())),
-  invalidAncestors: z.optional(z.array(z.string())),
-  // when this field is specified component receives
-  // prop with index of same components withiin specified ancestor
-  // important to automatically enumerate collections without
-  // naming every item manually
-  indexWithinAncestor: z.optional(z.string()),
-  stylable: z.optional(z.boolean()),
-  // specifies whether the instance can be deleted,
-  // copied or dragged out of its parent instance
-  // true by default
-  detachable: z.optional(z.boolean()),
-  label: z.optional(z.string()),
-  description: z.string().optional(),
-  icon: z.string(),
-  presetStyle: z.optional(z.record(z.string(), EmbedTemplateStyleDecl)),
-  presetTokens: z.optional(z.record(z.string(), ComponentToken)),
-  states: z.optional(z.array(ComponentState)),
-  template: z.optional(WsEmbedTemplate),
-  order: z.number().optional()
-});

package/lib/components/components-utils.js

@@ -1,2 +0,0 @@
-"use strict";
-import { componentAttribute, idAttribute } from "../tree";

package/lib/context.js

@@ -1,21 +0,0 @@
-"use strict";
-import { atom } from "nanostores";
-import { createContext } from "react";
-export const ReactSdkContext = createContext({
-  imageBaseUrl: "/",
-  assetBaseUrl: "/",
-  propsByInstanceIdStore: atom(/* @__PURE__ */ new Map()),
-  assetsStore: atom(/* @__PURE__ */ new Map()),
-  pagesStore: atom(/* @__PURE__ */ new Map()),
-  dataSourceValuesStore: atom(/* @__PURE__ */ new Map()),
-  executeEffectfulExpression: () => {
-    throw Error("React SDK executeEffectfulExpression is not implemented");
-  },
-  setDataSourceValues: () => {
-    throw Error("React SDK setBoundDataSourceValue is not implemented");
-  },
-  setBoundDataSourceValue: () => {
-    throw Error("React SDK setBoundDataSourceValue is not implemented");
-  },
-  indexesWithinAncestors: /* @__PURE__ */ new Map()
-});

package/lib/css/css.js

@@ -1,59 +0,0 @@
-"use strict";
-import { createCssEngine } from "@webstudio-is/css-engine";
-import { idAttribute } from "../tree";
-import { addGlobalRules } from "./global-rules";
-import { getPresetStyleRules, getStyleRules } from "./style-rules";
-export const createImageValueTransformer = (assets, options) => (styleValue) => {
-  if (styleValue.type === "image" && styleValue.value.type === "asset") {
-    const asset = assets.get(styleValue.value.value);
-    if (asset === void 0) {
-      return { type: "keyword", value: "none" };
-    }
-    const { assetBaseUrl } = options;
-    const url = `${assetBaseUrl}${asset.name}`;
-    return {
-      type: "image",
-      value: {
-        type: "url",
-        url
-      },
-      hidden: styleValue.hidden
-    };
-  }
-};
-export const generateCssText = (data, options) => {
-  const assets = new Map(data.assets.map((asset) => [asset.id, asset]));
-  const breakpoints = new Map(data.breakpoints);
-  const styles = new Map(data.styles);
-  const styleSourceSelections = new Map(data.styleSourceSelections);
-  const engine = createCssEngine({ name: "ssr" });
-  addGlobalRules(engine, {
-    assets,
-    assetBaseUrl: options.assetBaseUrl
-  });
-  for (const breakpoint of breakpoints.values()) {
-    engine.addMediaRule(breakpoint.id, breakpoint);
-  }
-  for (const [component, meta] of data.componentMetas) {
-    const presetStyle = meta.presetStyle;
-    if (presetStyle === void 0) {
-      continue;
-    }
-    const rules = getPresetStyleRules(component, presetStyle);
-    for (const [selector, style] of rules) {
-      engine.addStyleRule(selector, { style });
-    }
-  }
-  const styleRules = getStyleRules(styles, styleSourceSelections);
-  for (const { breakpointId, instanceId, state, style } of styleRules) {
-    engine.addStyleRule(
-      `[${idAttribute}="${instanceId}"]${state ?? ""}`,
-      {
-        breakpoint: breakpointId,
-        style
-      },
-      createImageValueTransformer(assets, options)
-    );
-  }
-  return engine.cssText;
-};

package/lib/css/global-rules.js

@@ -1,15 +0,0 @@
-"use strict";
-import { getFontFaces } from "@webstudio-is/fonts";
-export const addGlobalRules = (engine, { assets, assetBaseUrl }) => {
-  engine.addPlaintextRule("html {margin: 0; display: grid; min-height: 100%}");
-  const fontAssets = [];
-  for (const asset of assets.values()) {
-    if (asset.type === "font") {
-      fontAssets.push(asset);
-    }
-  }
-  const fontFaces = getFontFaces(fontAssets, { assetBaseUrl });
-  for (const fontFace of fontFaces) {
-    engine.addFontFaceRule(fontFace);
-  }
-};

package/lib/css/index.js

@@ -1,4 +0,0 @@
-"use strict";
-export * from "./global-rules";
-export * from "./style-rules";
-export * from "./css";

package/lib/css/normalize-type-check.js

@@ -1,4 +0,0 @@
-"use strict";
-import * as normalize from "./normalize";
-const normalizeWithKeyof = { ...normalize };
-normalizeWithKeyof;

package/lib/css/presets.js

@@ -1,25 +0,0 @@
-"use strict";
-export const borders = [
-  {
-    property: "borderTopWidth",
-    value: { type: "unit", value: 1, unit: "px" }
-  },
-  {
-    property: "borderRightWidth",
-    value: { type: "unit", value: 1, unit: "px" }
-  },
-  {
-    property: "borderBottomWidth",
-    value: { type: "unit", value: 1, unit: "px" }
-  },
-  {
-    property: "borderLeftWidth",
-    value: { type: "unit", value: 1, unit: "px" }
-  }
-];
-export const outline = [
-  {
-    property: "outlineWidth",
-    value: { type: "unit", value: 1, unit: "px" }
-  }
-];

package/lib/css/style-rules.js

@@ -1,63 +0,0 @@
-"use strict";
-import { componentAttribute } from "../tree";
-export const getStyleRules = (styles, styleSourceSelections) => {
-  if (styles === void 0 || styleSourceSelections === void 0) {
-    return [];
-  }
-  const stylesByStyleSourceId = /* @__PURE__ */ new Map();
-  for (const styleDecl of styles.values()) {
-    const { styleSourceId } = styleDecl;
-    let styleSourceStyles = stylesByStyleSourceId.get(styleSourceId);
-    if (styleSourceStyles === void 0) {
-      styleSourceStyles = [];
-      stylesByStyleSourceId.set(styleSourceId, styleSourceStyles);
-    }
-    styleSourceStyles.push(styleDecl);
-  }
-  const styleRules = [];
-  for (const { instanceId, values } of styleSourceSelections.values()) {
-    const styleRuleByBreakpointId = /* @__PURE__ */ new Map();
-    for (const styleSourceId of values) {
-      const styleSourceStyles = stylesByStyleSourceId.get(styleSourceId);
-      if (styleSourceStyles === void 0) {
-        continue;
-      }
-      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(key, styleRule);
-        }
-        styleRule.style[property] = value;
-      }
-    }
-    styleRules.push(...styleRuleByBreakpointId.values());
-  }
-  return styleRules;
-};
-export const getPresetStyleRules = (component, presetStyle) => {
-  const presetStyleRules = /* @__PURE__ */ new Map();
-  for (const [tag, styles] of Object.entries(presetStyle)) {
-    for (const styleDecl of styles) {
-      const selector = `${tag}:where([${componentAttribute}="${component}"])${styleDecl.state ?? ""}`;
-      let rule = presetStyleRules.get(selector);
-      if (rule === void 0) {
-        rule = {};
-        presetStyleRules.set(selector, rule);
-      }
-      rule[styleDecl.property] = styleDecl.value;
-    }
-  }
-  return presetStyleRules;
-};