@webstudio-is/react-sdk 0.60.0 → 0.62.0

package/src/css/style-rules.ts

@@ -6,6 +6,8 @@ import type {
   StyleSource,
   StyleSourceSelections,
 } from "@webstudio-is/project-build";
+import type { PresetStyle } from "../components/component-meta";
+import { componentAttribute } from "../tree";
 
 type StyleRule = {
   instanceId: string;
@@ -75,3 +77,25 @@ export const getStyleRules = (
 
   return styleRules;
 };
+
+export const getPresetStyleRules = (
+  component: string,
+  presetStyle: PresetStyle
+) => {
+  // group style declarations by selector to render as separate rules
+  const presetStyleRules = new Map<string, Style>();
+  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 === undefined) {
+        rule = {};
+        presetStyleRules.set(selector, rule);
+      }
+      rule[styleDecl.property] = styleDecl.value;
+    }
+  }
+  return presetStyleRules;
+};

package/src/embed-template.test.ts

@@ -0,0 +1,210 @@
+import { expect, test } from "@jest/globals";
+import { generateDataFromEmbedTemplate } from "./embed-template";
+
+const expectString = expect.any(String) as unknown as string;
+
+const defaultBreakpointId = "base";
+
+test("generate data for embedding from instances and text", () => {
+  expect(
+    generateDataFromEmbedTemplate(
+      [
+        { type: "text", value: "hello" },
+        {
+          type: "instance",
+          component: "Box1",
+          children: [
+            { type: "instance", component: "Box2", children: [] },
+            { type: "text", value: "world" },
+          ],
+        },
+      ],
+      defaultBreakpointId
+    )
+  ).toEqual({
+    children: [
+      { type: "text", value: "hello" },
+      { type: "id", value: expectString },
+    ],
+    instances: [
+      {
+        type: "instance",
+        id: expectString,
+        component: "Box1",
+        children: [
+          { type: "id", value: expectString },
+          { type: "text", value: "world" },
+        ],
+      },
+      {
+        type: "instance",
+        id: expectString,
+        component: "Box2",
+        children: [],
+      },
+    ],
+    props: [],
+    styleSourceSelections: [],
+    styleSources: [],
+    styles: [],
+  });
+});
+
+test("generate data for embedding from props", () => {
+  expect(
+    generateDataFromEmbedTemplate(
+      [
+        {
+          type: "instance",
+          component: "Box1",
+          props: [
+            { type: "string", name: "data-prop1", value: "value1" },
+            { type: "string", name: "data-prop2", value: "value2" },
+          ],
+          children: [
+            {
+              type: "instance",
+              component: "Box2",
+              props: [{ type: "string", name: "data-prop3", value: "value3" }],
+              children: [],
+            },
+          ],
+        },
+      ],
+      defaultBreakpointId
+    )
+  ).toEqual({
+    children: [{ type: "id", value: expectString }],
+    instances: [
+      {
+        type: "instance",
+        id: expectString,
+        component: "Box1",
+        children: [{ type: "id", value: expectString }],
+      },
+      {
+        type: "instance",
+        id: expectString,
+        component: "Box2",
+        children: [],
+      },
+    ],
+    props: [
+      {
+        type: "string",
+        id: expectString,
+        instanceId: expectString,
+        name: "data-prop1",
+        value: "value1",
+      },
+      {
+        type: "string",
+        id: expectString,
+        instanceId: expectString,
+        name: "data-prop2",
+        value: "value2",
+      },
+      {
+        type: "string",
+        id: expectString,
+        instanceId: expectString,
+        name: "data-prop3",
+        value: "value3",
+      },
+    ],
+    styleSourceSelections: [],
+    styleSources: [],
+    styles: [],
+  });
+});
+
+test("generate data for embedding from styles", () => {
+  expect(
+    generateDataFromEmbedTemplate(
+      [
+        {
+          type: "instance",
+          component: "Box1",
+          styles: [
+            { property: "width", value: { type: "keyword", value: "auto" } },
+            { property: "height", value: { type: "keyword", value: "auto" } },
+          ],
+          children: [
+            {
+              type: "instance",
+              component: "Box2",
+              styles: [
+                {
+                  property: "color",
+                  value: { type: "keyword", value: "black" },
+                },
+              ],
+              children: [],
+            },
+          ],
+        },
+      ],
+      defaultBreakpointId
+    )
+  ).toEqual({
+    children: [{ type: "id", value: expectString }],
+    instances: [
+      {
+        type: "instance",
+        id: expectString,
+        component: "Box1",
+        children: [{ type: "id", value: expectString }],
+      },
+      {
+        type: "instance",
+        id: expectString,
+        component: "Box2",
+        children: [],
+      },
+    ],
+    props: [],
+    styleSourceSelections: [
+      {
+        instanceId: expectString,
+        values: [expectString],
+      },
+      {
+        instanceId: expectString,
+        values: [expectString],
+      },
+    ],
+    styleSources: [
+      {
+        type: "local",
+        id: expectString,
+      },
+      {
+        type: "local",
+        id: expectString,
+      },
+    ],
+    styles: [
+      {
+        breakpointId: "base",
+        styleSourceId: expectString,
+        state: undefined,
+        property: "width",
+        value: { type: "keyword", value: "auto" },
+      },
+      {
+        breakpointId: "base",
+        styleSourceId: expectString,
+        state: undefined,
+        property: "height",
+        value: { type: "keyword", value: "auto" },
+      },
+      {
+        breakpointId: "base",
+        styleSourceId: expectString,
+        state: undefined,
+        property: "color",
+        value: { type: "keyword", value: "black" },
+      },
+    ],
+  });
+});

package/src/embed-template.ts

@@ -0,0 +1,187 @@
+import { z } from "zod";
+import { nanoid } from "nanoid";
+import {
+  type Instance,
+  type InstancesList,
+  PropsList,
+  StyleSourceSelectionsList,
+  StyleSourcesList,
+  StylesList,
+  Breakpoint,
+} from "@webstudio-is/project-build";
+import { StyleValue, type StyleProperty } from "@webstudio-is/css-data";
+
+const EmbedTemplateText = z.object({
+  type: z.literal("text"),
+  value: z.string(),
+});
+
+type EmbedTemplateText = z.infer<typeof EmbedTemplateText>;
+
+const EmbedTemplateProp = z.union([
+  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()),
+  }),
+]);
+
+type EmbedTemplateProp = z.infer<typeof EmbedTemplateProp>;
+
+export const EmbedTemplateStyleDecl = z.object({
+  state: z.optional(z.string()),
+  property: z.string() as z.ZodType<StyleProperty>,
+  value: StyleValue,
+});
+
+export type EmbedTemplateStyleDecl = z.infer<typeof EmbedTemplateStyleDecl>;
+
+export type EmbedTemplateInstance = {
+  type: "instance";
+  component: string;
+  props?: EmbedTemplateProp[];
+  styles?: EmbedTemplateStyleDecl[];
+  children: Array<EmbedTemplateInstance | EmbedTemplateText>;
+};
+
+export const EmbedTemplateInstance: z.ZodType<EmbedTemplateInstance> = z.lazy(
+  () =>
+    z.object({
+      type: z.literal("instance"),
+      component: z.string(),
+      props: z.optional(z.array(EmbedTemplateProp)),
+      styles: z.optional(z.array(EmbedTemplateStyleDecl)),
+      children: WsEmbedTemplate,
+    })
+);
+
+export const WsEmbedTemplate = z.lazy(() =>
+  z.array(z.union([EmbedTemplateInstance, EmbedTemplateText]))
+);
+
+export type WsEmbedTemplate = z.infer<typeof WsEmbedTemplate>;
+
+const createInstancesFromTemplate = (
+  treeTemplate: WsEmbedTemplate,
+  instances: InstancesList,
+  props: PropsList,
+  styleSourceSelections: StyleSourceSelectionsList,
+  styleSources: StyleSourcesList,
+  styles: StylesList,
+  defaultBreakpointId: Breakpoint["id"]
+) => {
+  const parentChildren: Instance["children"] = [];
+  for (const item of treeTemplate) {
+    if (item.type === "instance") {
+      const instanceId = nanoid();
+
+      // populate props
+      if (item.props) {
+        for (const prop of item.props) {
+          props.push({
+            id: nanoid(),
+            instanceId,
+            ...prop,
+          });
+        }
+      }
+
+      // populate styles
+      if (item.styles) {
+        const styleSourceId = nanoid();
+        styleSources.push({
+          type: "local",
+          id: styleSourceId,
+        });
+        styleSourceSelections.push({
+          instanceId,
+          values: [styleSourceId],
+        });
+        for (const styleDecl of item.styles) {
+          styles.push({
+            breakpointId: defaultBreakpointId,
+            styleSourceId,
+            state: styleDecl.state,
+            property: styleDecl.property,
+            value: styleDecl.value,
+          });
+        }
+      }
+
+      // populate instances
+      const instance: Instance = {
+        type: "instance",
+        id: instanceId,
+        component: item.component,
+        children: [],
+      };
+      instances.push(instance);
+      // traverse children after to preserve top down order
+      instance.children = createInstancesFromTemplate(
+        item.children,
+        instances,
+        props,
+        styleSourceSelections,
+        styleSources,
+        styles,
+        defaultBreakpointId
+      );
+      parentChildren.push({
+        type: "id",
+        value: instanceId,
+      });
+    }
+
+    if (item.type === "text") {
+      parentChildren.push({
+        type: "text",
+        value: item.value,
+      });
+    }
+  }
+  return parentChildren;
+};
+
+export const generateDataFromEmbedTemplate = (
+  treeTemplate: WsEmbedTemplate,
+  defaultBreakpointId: Breakpoint["id"]
+) => {
+  const instances: InstancesList = [];
+  const props: PropsList = [];
+  const styleSourceSelections: StyleSourceSelectionsList = [];
+  const styleSources: StyleSourcesList = [];
+  const styles: StylesList = [];
+
+  const children = createInstancesFromTemplate(
+    treeTemplate,
+    instances,
+    props,
+    styleSourceSelections,
+    styleSources,
+    styles,
+    defaultBreakpointId
+  );
+  return {
+    children,
+    instances,
+    props,
+    styleSourceSelections,
+    styleSources,
+    styles,
+  };
+};

package/src/index.ts

@@ -16,3 +16,4 @@ export {
   type ComponentState,
   componentCategories,
 } from "./components/component-meta";
+export * from "./embed-template";