@webstudio-is/react-sdk 0.95.0 → 0.97.0

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",
-          },
-        },
-      },
-    ]
-  `);
-});

package/lib/embed-template.js

@@ -1,341 +0,0 @@
-"use strict";
-import { z } from "zod";
-import { nanoid } from "nanoid";
-import { titleCase } from "title-case";
-import { noCase } from "no-case";
-import { StyleValue } from "@webstudio-is/css-engine";
-import { encodeDataSourceVariable, validateExpression } from "./expression";
-const EmbedTemplateText = z.object({
-  type: z.literal("text"),
-  value: z.string()
-});
-const EmbedTemplateDataSource = z.union([
-  z.object({
-    type: z.literal("variable"),
-    initialValue: z.union([
-      z.string(),
-      z.number(),
-      z.boolean(),
-      z.array(z.string())
-    ])
-  }),
-  z.object({
-    type: z.literal("expression"),
-    code: z.string()
-  })
-]);
-const EmbedTemplateProp = z.union([
-  z.object({
-    type: z.literal("dataSource"),
-    name: z.string(),
-    dataSourceName: z.string()
-  }),
-  z.object({
-    type: z.literal("number"),
-    name: z.string(),
-    value: z.number()
-  }),
-  z.object({
-    type: z.literal("string"),
-    name: z.string(),
-    value: z.string()
-  }),
-  z.object({
-    type: z.literal("boolean"),
-    name: z.string(),
-    value: z.boolean()
-  }),
-  z.object({
-    type: z.literal("string[]"),
-    name: z.string(),
-    value: z.array(z.string())
-  }),
-  z.object({
-    type: z.literal("action"),
-    name: z.string(),
-    value: z.array(
-      z.object({
-        type: z.literal("execute"),
-        args: z.optional(z.array(z.string())),
-        code: z.string()
-      })
-    )
-  })
-]);
-const EmbedTemplateStyleDeclRaw = z.object({
-  // State selector, e.g. :hover
-  state: z.optional(z.string()),
-  property: z.string(),
-  value: StyleValue
-});
-export const EmbedTemplateStyleDecl = EmbedTemplateStyleDeclRaw;
-export const EmbedTemplateInstance = z.lazy(
-  () => z.object({
-    type: z.literal("instance"),
-    component: z.string(),
-    label: z.optional(z.string()),
-    dataSources: z.optional(z.record(z.string(), EmbedTemplateDataSource)),
-    props: z.optional(z.array(EmbedTemplateProp)),
-    tokens: z.optional(z.array(z.string())),
-    styles: z.optional(z.array(EmbedTemplateStyleDecl)),
-    children: WsEmbedTemplate
-  })
-);
-export const WsEmbedTemplate = z.lazy(
-  () => z.array(z.union([EmbedTemplateInstance, EmbedTemplateText]))
-);
-const getDataSourceValue = (value) => {
-  if (typeof value === "string") {
-    return { type: "string", value };
-  }
-  if (typeof value === "number") {
-    return { type: "number", value };
-  }
-  if (typeof value === "boolean") {
-    return { type: "boolean", value };
-  }
-  if (Array.isArray(value)) {
-    return { type: "string[]", value };
-  }
-  value;
-  throw Error("Impossible case");
-};
-const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByRef, styleSourceSelections, styleSources, styles, metas, defaultBreakpointId) => {
-  const parentChildren = [];
-  for (const item of treeTemplate) {
-    if (item.type === "instance") {
-      const instanceId = nanoid();
-      if (item.dataSources) {
-        for (const [name, dataSource] of Object.entries(item.dataSources)) {
-          if (dataSourceByRef.has(name)) {
-            throw Error(`${name} data source already defined`);
-          }
-          if (dataSource.type === "variable") {
-            dataSourceByRef.set(name, {
-              type: "variable",
-              id: nanoid(),
-              scopeInstanceId: instanceId,
-              name,
-              value: getDataSourceValue(dataSource.initialValue)
-            });
-          }
-          if (dataSource.type === "expression") {
-            dataSourceByRef.set(name, {
-              type: "expression",
-              id: nanoid(),
-              scopeInstanceId: instanceId,
-              name,
-              // replace all references with variable names
-              code: validateExpression(dataSource.code, {
-                transformIdentifier: (ref) => {
-                  const id = dataSourceByRef.get(ref)?.id ?? ref;
-                  return encodeDataSourceVariable(id);
-                }
-              })
-            });
-          }
-        }
-      }
-      if (item.props) {
-        for (const prop of item.props) {
-          const propId = nanoid();
-          if (prop.type === "action") {
-            props.push({
-              id: propId,
-              instanceId,
-              type: "action",
-              name: prop.name,
-              value: prop.value.map((value) => {
-                const args = value.args ?? [];
-                return {
-                  type: "execute",
-                  args,
-                  // replace all references with variable names
-                  code: validateExpression(value.code, {
-                    effectful: true,
-                    transformIdentifier: (ref) => {
-                      if (args.includes(ref)) {
-                        return ref;
-                      }
-                      const id = dataSourceByRef.get(ref)?.id ?? ref;
-                      return encodeDataSourceVariable(id);
-                    }
-                  })
-                };
-              })
-            });
-            continue;
-          }
-          if (prop.type === "dataSource") {
-            const dataSource = dataSourceByRef.get(prop.dataSourceName);
-            if (dataSource === void 0) {
-              throw Error(`${prop.dataSourceName} data source is not defined`);
-            }
-            props.push({
-              id: propId,
-              instanceId,
-              type: "dataSource",
-              name: prop.name,
-              value: dataSource.id
-            });
-            continue;
-          }
-          props.push({ id: propId, instanceId, ...prop });
-        }
-      }
-      const styleSourceIds = [];
-      if (item.tokens) {
-        const meta = metas.get(item.component);
-        if (meta?.presetTokens) {
-          for (const name of item.tokens) {
-            const tokenValue = meta.presetTokens[name];
-            if (tokenValue) {
-              const styleSourceId = `${item.component}:${name}`;
-              styleSourceIds.push(styleSourceId);
-              styleSources.push({
-                type: "token",
-                id: styleSourceId,
-                name: titleCase(noCase(name))
-              });
-              for (const styleDecl of tokenValue.styles) {
-                styles.push({
-                  breakpointId: defaultBreakpointId,
-                  styleSourceId,
-                  state: styleDecl.state,
-                  property: styleDecl.property,
-                  value: styleDecl.value
-                });
-              }
-            }
-          }
-        }
-      }
-      if (item.styles) {
-        const styleSourceId = nanoid();
-        styleSources.push({
-          type: "local",
-          id: styleSourceId
-        });
-        styleSourceIds.push(styleSourceId);
-        for (const styleDecl of item.styles) {
-          styles.push({
-            breakpointId: defaultBreakpointId,
-            styleSourceId,
-            state: styleDecl.state,
-            property: styleDecl.property,
-            value: styleDecl.value
-          });
-        }
-      }
-      if (styleSourceIds.length > 0) {
-        styleSourceSelections.push({
-          instanceId,
-          values: styleSourceIds
-        });
-      }
-      const instance = {
-        type: "instance",
-        id: instanceId,
-        label: item.label,
-        component: item.component,
-        children: []
-      };
-      instances.push(instance);
-      instance.children = createInstancesFromTemplate(
-        item.children,
-        instances,
-        props,
-        dataSourceByRef,
-        styleSourceSelections,
-        styleSources,
-        styles,
-        metas,
-        defaultBreakpointId
-      );
-      parentChildren.push({
-        type: "id",
-        value: instanceId
-      });
-    }
-    if (item.type === "text") {
-      parentChildren.push({
-        type: "text",
-        value: item.value
-      });
-    }
-  }
-  return parentChildren;
-};
-export const generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId) => {
-  const instances = [];
-  const props = [];
-  const dataSourceByRef = /* @__PURE__ */ new Map();
-  const styleSourceSelections = [];
-  const styleSources = [];
-  const styles = [];
-  const children = createInstancesFromTemplate(
-    treeTemplate,
-    instances,
-    props,
-    dataSourceByRef,
-    styleSourceSelections,
-    styleSources,
-    styles,
-    metas,
-    defaultBreakpointId
-  );
-  return {
-    children,
-    instances,
-    props,
-    dataSources: Array.from(dataSourceByRef.values()),
-    styleSourceSelections,
-    styleSources,
-    styles
-  };
-};
-const namespaceEmbedTemplateComponents = (template, namespace, components) => {
-  return template.map((item) => {
-    if (item.type === "text") {
-      return item;
-    }
-    if (item.type === "instance") {
-      const prefix = components.has(item.component) ? `${namespace}:` : "";
-      return {
-        ...item,
-        component: `${prefix}${item.component}`,
-        children: namespaceEmbedTemplateComponents(
-          item.children,
-          namespace,
-          components
-        )
-      };
-    }
-    item;
-    throw Error("Impossible case");
-  });
-};
-export const namespaceMeta = (meta, namespace, components) => {
-  const newMeta = { ...meta };
-  if (newMeta.requiredAncestors) {
-    newMeta.requiredAncestors = newMeta.requiredAncestors.map(
-      (component) => components.has(component) ? `${namespace}:${component}` : component
-    );
-  }
-  if (newMeta.invalidAncestors) {
-    newMeta.invalidAncestors = newMeta.invalidAncestors.map(
-      (component) => components.has(component) ? `${namespace}:${component}` : component
-    );
-  }
-  if (newMeta.indexWithinAncestor) {
-    newMeta.indexWithinAncestor = components.has(newMeta.indexWithinAncestor) ? `${namespace}:${newMeta.indexWithinAncestor}` : newMeta.indexWithinAncestor;
-  }
-  if (newMeta.template) {
-    newMeta.template = namespaceEmbedTemplateComponents(
-      newMeta.template,
-      namespace,
-      components
-    );
-  }
-  return newMeta;
-};