@webstudio-is/react-sdk 0.95.0 → 0.96.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.95.0",
+  "version": "0.96.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -30,14 +30,13 @@
     "@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.96.0",
+    "@webstudio-is/fonts": "^0.96.0",
+    "@webstudio-is/sdk": "^0.96.0"
   },
   "exports": {
     ".": {
@@ -61,8 +60,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;
-};

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

@@ -1,149 +0,0 @@
-"use strict";
-import { test, expect } from "@jest/globals";
-import {
-  getStyleDeclKey
-} from "@webstudio-is/sdk";
-import { getStyleRules } from "./style-rules";
-const createStyleDeclPair = (styleDecl) => {
-  return [getStyleDeclKey(styleDecl), styleDecl];
-};
-test("compute styles from different style sources", () => {
-  const styles = new Map([
-    createStyleDeclPair({
-      breakpointId: "a",
-      styleSourceId: "styleSource1",
-      property: "width",
-      value: { type: "unit", value: 10, unit: "px" }
-    }),
-    createStyleDeclPair({
-      breakpointId: "a",
-      styleSourceId: "styleSource2",
-      property: "display",
-      value: { type: "keyword", value: "block" }
-    }),
-    createStyleDeclPair({
-      breakpointId: "a",
-      styleSourceId: "styleSource4",
-      property: "color",
-      value: { type: "keyword", value: "green" }
-    }),
-    createStyleDeclPair({
-      breakpointId: "a",
-      styleSourceId: "styleSource4",
-      property: "width",
-      value: { type: "keyword", value: "min-content" }
-    }),
-    createStyleDeclPair({
-      breakpointId: "a",
-      styleSourceId: "styleSource3",
-      property: "color",
-      value: { type: "keyword", value: "red" }
-    }),
-    createStyleDeclPair({
-      breakpointId: "b",
-      styleSourceId: "styleSource5",
-      property: "color",
-      value: { type: "keyword", value: "orange" }
-    }),
-    createStyleDeclPair({
-      breakpointId: "a",
-      styleSourceId: "styleSource6",
-      property: "color",
-      value: { type: "keyword", value: "blue" }
-    }),
-    createStyleDeclPair({
-      breakpointId: "a",
-      styleSourceId: "styleSource6",
-      state: ":hover",
-      property: "color",
-      value: { type: "keyword", value: "blue" }
-    })
-  ]);
-  const styleSourceSelections = /* @__PURE__ */ new Map([
-    [
-      "instance1",
-      {
-        instanceId: "instance1",
-        values: ["styleSource1"]
-      }
-    ],
-    [
-      "instance2",
-      {
-        instanceId: "instance2",
-        values: ["styleSource4", "styleSource5", "styleSource3"]
-      }
-    ],
-    [
-      "instance3",
-      {
-        instanceId: "instance3",
-        values: ["styleSource6"]
-      }
-    ]
-  ]);
-  expect(getStyleRules(styles, styleSourceSelections)).toMatchInlineSnapshot(`
-    [
-      {
-        "breakpointId": "a",
-        "instanceId": "instance1",
-        "state": undefined,
-        "style": {
-          "width": {
-            "type": "unit",
-            "unit": "px",
-            "value": 10,
-          },
-        },
-      },
-      {
-        "breakpointId": "a",
-        "instanceId": "instance2",
-        "state": undefined,
-        "style": {
-          "color": {
-            "type": "keyword",
-            "value": "red",
-          },
-          "width": {
-            "type": "keyword",
-            "value": "min-content",
-          },
-        },
-      },
-      {
-        "breakpointId": "b",
-        "instanceId": "instance2",
-        "state": undefined,
-        "style": {
-          "color": {
-            "type": "keyword",
-            "value": "orange",
-          },
-        },
-      },
-      {
-        "breakpointId": "a",
-        "instanceId": "instance3",
-        "state": undefined,
-        "style": {
-          "color": {
-            "type": "keyword",
-            "value": "blue",
-          },
-        },
-      },
-      {
-        "breakpointId": "a",
-        "instanceId": "instance3",
-        "state": ":hover",
-        "style": {
-          "color": {
-            "type": "keyword",
-            "value": "blue",
-          },
-        },
-      },
-    ]
-  `);
-});