@webstudio-is/react-sdk 0.91.0 → 0.93.0

package/lib/app/index.js

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

package/lib/app/root.js

@@ -1,6 +1,7 @@
+"use strict";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Links, Meta, Outlet as DefaultOutlet } from "@remix-run/react";
-const Root = ({
+export const Root = ({
   Outlet = DefaultOutlet
 }) => {
   return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
@@ -15,6 +16,3 @@ const Root = ({
     /* @__PURE__ */ jsx(Outlet, {})
   ] });
 };
-export {
-  Root
-};

package/lib/component-renderer.js

@@ -1,5 +1,6 @@
+"use strict";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { getStyleDeclKey } from "@webstudio-is/project-build";
+import { getStyleDeclKey } from "@webstudio-is/sdk";
 import {
   WsEmbedTemplate,
   generateDataFromEmbedTemplate
@@ -14,7 +15,7 @@ import {
   executeEffectfulExpression
 } from "./expression";
 import { getIndexesWithinAncestors } from "./instance-utils";
-const renderComponentTemplate = ({
+export const renderComponentTemplate = ({
   name,
   metas: metasRecord,
   components,
@@ -127,6 +128,3 @@ const renderComponentTemplate = ({
     )
   ] });
 };
-export {
-  renderComponentTemplate
-};

package/lib/components/component-meta.js

@@ -1,12 +1,13 @@
+"use strict";
 import { z } from "zod";
-import { PropMeta } from "@webstudio-is/generate-arg-types";
+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()
 });
-const componentCategories = [
+export const componentCategories = [
   "general",
   "text",
   "media",
@@ -14,8 +15,8 @@ const componentCategories = [
   "radix",
   "hidden"
 ];
-const stateCategories = ["states", "component-states"];
-const ComponentState = z.object({
+export const stateCategories = ["states", "component-states"];
+export const ComponentState = z.object({
   category: z.enum(stateCategories).optional(),
   selector: z.string(),
   label: z.string()
@@ -24,7 +25,7 @@ const ComponentToken = z.object({
   variant: z.optional(z.string()),
   styles: z.array(EmbedTemplateStyleDecl)
 });
-const defaultStates = [
+export const defaultStates = [
   { selector: ":hover", label: "Hover" },
   { selector: ":active", label: "Active" },
   { selector: ":focus", label: "Focus" },
@@ -59,9 +60,3 @@ const WsComponentMeta = z.object({
   template: z.optional(WsEmbedTemplate),
   order: z.number().optional()
 });
-export {
-  ComponentState,
-  componentCategories,
-  defaultStates,
-  stateCategories
-};

package/lib/components/components-utils.js

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

package/lib/context.js

@@ -1,6 +1,7 @@
+"use strict";
 import { atom } from "nanostores";
 import { createContext } from "react";
-const ReactSdkContext = createContext({
+export const ReactSdkContext = createContext({
   imageBaseUrl: "/",
   assetBaseUrl: "/",
   propsByInstanceIdStore: atom(/* @__PURE__ */ new Map()),
@@ -18,6 +19,3 @@ const ReactSdkContext = createContext({
   },
   indexesWithinAncestors: /* @__PURE__ */ new Map()
 });
-export {
-  ReactSdkContext
-};

package/lib/css/css.js

@@ -1,8 +1,9 @@
+"use strict";
 import { createCssEngine } from "@webstudio-is/css-engine";
 import { idAttribute } from "../tree";
 import { addGlobalRules } from "./global-rules";
 import { getPresetStyleRules, getStyleRules } from "./style-rules";
-const createImageValueTransformer = (assets, options) => (styleValue) => {
+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) {
@@ -20,10 +21,8 @@ const createImageValueTransformer = (assets, options) => (styleValue) => {
     };
   }
 };
-const generateCssText = (data, options) => {
-  const assets = new Map(
-    data.assets.map((asset) => [asset.id, asset])
-  );
+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);
@@ -58,7 +57,3 @@ const generateCssText = (data, options) => {
   }
   return engine.cssText;
 };
-export {
-  createImageValueTransformer,
-  generateCssText
-};

package/lib/css/global-rules.js

@@ -1,9 +1,10 @@
+"use strict";
 import { getFontFaces } from "@webstudio-is/fonts";
-const addGlobalRules = (engine, { assets, assetBaseUrl }) => {
+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") {
+    if (asset.type === "font") {
       fontAssets.push(asset);
     }
   }
@@ -12,6 +13,3 @@ const addGlobalRules = (engine, { assets, assetBaseUrl }) => {
     engine.addFontFaceRule(fontFace);
   }
 };
-export {
-  addGlobalRules
-};

package/lib/css/index.js

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

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

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

package/lib/css/normalize.js

@@ -1,36 +1,37 @@
+"use strict";
 import { borders, outline } from "./presets";
 const boxSizing = {
   property: "boxSizing",
   value: { type: "keyword", value: "border-box" }
 };
 const baseStyle = [boxSizing, ...borders, ...outline];
-const div = baseStyle;
-const address = baseStyle;
-const article = baseStyle;
-const aside = baseStyle;
-const figure = baseStyle;
-const footer = baseStyle;
-const header = baseStyle;
-const main = baseStyle;
-const nav = baseStyle;
-const section = baseStyle;
-const form = baseStyle;
-const label = baseStyle;
-const h1 = baseStyle;
-const h2 = baseStyle;
-const h3 = baseStyle;
-const h4 = baseStyle;
-const h5 = baseStyle;
-const h6 = baseStyle;
-const i = baseStyle;
-const img = baseStyle;
-const a = baseStyle;
-const li = baseStyle;
-const ul = baseStyle;
-const ol = baseStyle;
-const p = baseStyle;
-const span = baseStyle;
-const html = [
+export const div = baseStyle;
+export const address = baseStyle;
+export const article = baseStyle;
+export const aside = baseStyle;
+export const figure = baseStyle;
+export const footer = baseStyle;
+export const header = baseStyle;
+export const main = baseStyle;
+export const nav = baseStyle;
+export const section = baseStyle;
+export const form = baseStyle;
+export const label = baseStyle;
+export const h1 = baseStyle;
+export const h2 = baseStyle;
+export const h3 = baseStyle;
+export const h4 = baseStyle;
+export const h5 = baseStyle;
+export const h6 = baseStyle;
+export const i = baseStyle;
+export const img = baseStyle;
+export const a = baseStyle;
+export const li = baseStyle;
+export const ul = baseStyle;
+export const ol = baseStyle;
+export const p = baseStyle;
+export const span = baseStyle;
+export const html = [
   /* 1 */
   {
     property: "lineHeight",
@@ -49,7 +50,7 @@ const html = [
   boxSizing,
   ...borders
 ];
-const body = [
+export const body = [
   /* 1 */
   {
     property: "marginTop",
@@ -86,7 +87,7 @@ const body = [
   boxSizing,
   ...borders
 ];
-const hr = [
+export const hr = [
   /* 1 */
   {
     property: "height",
@@ -100,7 +101,7 @@ const hr = [
   boxSizing,
   ...borders
 ];
-const b = [
+export const b = [
   {
     property: "fontWeight",
     value: { type: "keyword", value: "700" }
@@ -108,8 +109,8 @@ const b = [
   boxSizing,
   ...borders
 ];
-const strong = b;
-const code = [
+export const strong = b;
+export const code = [
   /* 1 */
   {
     property: "fontFamily",
@@ -126,10 +127,10 @@ const code = [
   boxSizing,
   ...borders
 ];
-const kbd = code;
-const samp = code;
-const pre = code;
-const small = [
+export const kbd = code;
+export const samp = code;
+export const pre = code;
+export const small = [
   {
     property: "fontSize",
     value: { type: "unit", value: 80, unit: "%" }
@@ -157,21 +158,21 @@ const subSupBase = [
   boxSizing,
   ...borders
 ];
-const sub = [
+export const sub = [
   ...subSupBase,
   {
     property: "bottom",
     value: { type: "unit", value: -0.25, unit: "em" }
   }
 ];
-const sup = [
+export const sup = [
   ...subSupBase,
   {
     property: "top",
     value: { type: "unit", value: -0.5, unit: "em" }
   }
 ];
-const table = [
+export const table = [
   /* 1 */
   {
     property: "textIndent",
@@ -231,18 +232,18 @@ const buttonBase = [
   boxSizing,
   ...borders
 ];
-const input = buttonBase;
-const optgroup = buttonBase;
-const textarea = buttonBase;
-const button = [
+export const input = buttonBase;
+export const optgroup = buttonBase;
+export const textarea = buttonBase;
+export const button = [
   ...buttonBase,
   {
     property: "textTransform",
     value: { type: "keyword", value: "none" }
   }
 ];
-const select = button;
-const legend = [
+export const select = button;
+export const legend = [
   {
     property: "paddingTop",
     value: { type: "unit", value: 0, unit: "number" }
@@ -262,7 +263,7 @@ const legend = [
   boxSizing,
   ...borders
 ];
-const progress = [
+export const progress = [
   {
     property: "verticalAlign",
     value: { type: "keyword", value: "baseline" }
@@ -270,7 +271,7 @@ const progress = [
   boxSizing,
   ...borders
 ];
-const summary = [
+export const summary = [
   {
     property: "display",
     value: { type: "keyword", value: "list-item" }
@@ -278,52 +279,3 @@ const summary = [
   boxSizing,
   ...borders
 ];
-export {
-  a,
-  address,
-  article,
-  aside,
-  b,
-  body,
-  button,
-  code,
-  div,
-  figure,
-  footer,
-  form,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  header,
-  hr,
-  html,
-  i,
-  img,
-  input,
-  kbd,
-  label,
-  legend,
-  li,
-  main,
-  nav,
-  ol,
-  optgroup,
-  p,
-  pre,
-  progress,
-  samp,
-  section,
-  select,
-  small,
-  span,
-  strong,
-  sub,
-  summary,
-  sup,
-  table,
-  textarea,
-  ul
-};

package/lib/css/presets.js

@@ -1,4 +1,5 @@
-const borders = [
+"use strict";
+export const borders = [
   {
     property: "borderTopWidth",
     value: { type: "unit", value: 1, unit: "px" }
@@ -16,13 +17,9 @@ const borders = [
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
-const outline = [
+export const outline = [
   {
     property: "outlineWidth",
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
-export {
-  borders,
-  outline
-};

package/lib/css/style-rules.js

@@ -1,5 +1,6 @@
+"use strict";
 import { componentAttribute } from "../tree";
-const getStyleRules = (styles, styleSourceSelections) => {
+export const getStyleRules = (styles, styleSourceSelections) => {
   if (styles === void 0 || styleSourceSelections === void 0) {
     return [];
   }
@@ -45,7 +46,7 @@ const getStyleRules = (styles, styleSourceSelections) => {
   }
   return styleRules;
 };
-const getPresetStyleRules = (component, presetStyle) => {
+export const getPresetStyleRules = (component, presetStyle) => {
   const presetStyleRules = /* @__PURE__ */ new Map();
   for (const [tag, styles] of Object.entries(presetStyle)) {
     for (const styleDecl of styles) {
@@ -60,7 +61,3 @@ const getPresetStyleRules = (component, presetStyle) => {
   }
   return presetStyleRules;
 };
-export {
-  getPresetStyleRules,
-  getStyleRules
-};

package/{src/css/style-rules.test.ts → lib/css/style-rules.test.js}

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

package/lib/embed-template.js

@@ -1,17 +1,9 @@
+"use strict";
 import { z } from "zod";
 import { nanoid } from "nanoid";
 import { titleCase } from "title-case";
 import { noCase } from "no-case";
-import {
-  Instance,
-  PropsList,
-  StyleSourceSelectionsList,
-  StyleSourcesList,
-  StylesList,
-  Breakpoint,
-  DataSource
-} from "@webstudio-is/project-build";
-import { StyleValue } from "@webstudio-is/css-data";
+import { StyleValue } from "@webstudio-is/css-engine";
 import { encodeDataSourceVariable, validateExpression } from "./expression";
 const EmbedTemplateText = z.object({
   type: z.literal("text"),
@@ -76,8 +68,8 @@ const EmbedTemplateStyleDeclRaw = z.object({
   property: z.string(),
   value: StyleValue
 });
-const EmbedTemplateStyleDecl = EmbedTemplateStyleDeclRaw;
-const EmbedTemplateInstance = z.lazy(
+export const EmbedTemplateStyleDecl = EmbedTemplateStyleDeclRaw;
+export const EmbedTemplateInstance = z.lazy(
   () => z.object({
     type: z.literal("instance"),
     component: z.string(),
@@ -89,7 +81,7 @@ const EmbedTemplateInstance = z.lazy(
     children: WsEmbedTemplate
   })
 );
-const WsEmbedTemplate = z.lazy(
+export const WsEmbedTemplate = z.lazy(
   () => z.array(z.union([EmbedTemplateInstance, EmbedTemplateText]))
 );
 const getDataSourceValue = (value) => {
@@ -274,7 +266,7 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
   }
   return parentChildren;
 };
-const generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId) => {
+export const generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId) => {
   const instances = [];
   const props = [];
   const dataSourceByRef = /* @__PURE__ */ new Map();
@@ -323,7 +315,7 @@ const namespaceEmbedTemplateComponents = (template, namespace, components) => {
     throw Error("Impossible case");
   });
 };
-const namespaceMeta = (meta, namespace, components) => {
+export const namespaceMeta = (meta, namespace, components) => {
   const newMeta = { ...meta };
   if (newMeta.requiredAncestors) {
     newMeta.requiredAncestors = newMeta.requiredAncestors.map(
@@ -347,10 +339,3 @@ const namespaceMeta = (meta, namespace, components) => {
   }
   return newMeta;
 };
-export {
-  EmbedTemplateInstance,
-  EmbedTemplateStyleDecl,
-  WsEmbedTemplate,
-  generateDataFromEmbedTemplate,
-  namespaceMeta
-};