@webstudio-is/react-sdk 0.87.1 → 0.88.0

package/lib/cjs/component-renderer.js

@@ -56,7 +56,7 @@ const renderComponentTemplate = ({
       throw new Error(`Unsupported prop ${props} with value ${value}`);
     });
   }
-  const data = (0, import_embed_template.generateDataFromEmbedTemplate)(template, "base");
+  const data = (0, import_embed_template.generateDataFromEmbedTemplate)(template, metas, "base");
   const instances = [
     [
       "root",

package/lib/cjs/components/component-meta.js

@@ -46,6 +46,10 @@ const ComponentState = import_zod.z.object({
   selector: import_zod.z.string(),
   label: import_zod.z.string()
 });
+const ComponentToken = import_zod.z.object({
+  variant: import_zod.z.optional(import_zod.z.string()),
+  styles: import_zod.z.array(import_embed_template.EmbedTemplateStyleDecl)
+});
 const defaultStates = [
   { selector: ":hover", label: "Hover" },
   { selector: ":active", label: "Active" },
@@ -76,6 +80,7 @@ const WsComponentMeta = import_zod.z.object({
   description: import_zod.z.string().optional(),
   icon: import_zod.z.string(),
   presetStyle: import_zod.z.optional(import_zod.z.record(import_zod.z.string(), import_embed_template.EmbedTemplateStyleDecl)),
+  presetTokens: import_zod.z.optional(import_zod.z.record(import_zod.z.string(), ComponentToken)),
   states: import_zod.z.optional(import_zod.z.array(ComponentState)),
   template: import_zod.z.optional(import_embed_template.WsEmbedTemplate),
   order: import_zod.z.number().optional()

package/lib/cjs/embed-template.js

@@ -27,6 +27,8 @@ __export(embed_template_exports, {
 module.exports = __toCommonJS(embed_template_exports);
 var import_zod = require("zod");
 var import_nanoid = require("nanoid");
+var import_title_case = require("title-case");
+var import_no_case = require("no-case");
 var import_project_build = require("@webstudio-is/project-build");
 var import_css_data = require("@webstudio-is/css-data");
 var import_expression = require("./expression");
@@ -101,6 +103,7 @@ const EmbedTemplateInstance = import_zod.z.lazy(
     label: import_zod.z.optional(import_zod.z.string()),
     dataSources: import_zod.z.optional(import_zod.z.record(import_zod.z.string(), EmbedTemplateDataSource)),
     props: import_zod.z.optional(import_zod.z.array(EmbedTemplateProp)),
+    tokens: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
     styles: import_zod.z.optional(import_zod.z.array(EmbedTemplateStyleDecl)),
     children: WsEmbedTemplate
   })
@@ -124,7 +127,7 @@ const getDataSourceValue = (value) => {
   value;
   throw Error("Impossible case");
 };
-const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByRef, styleSourceSelections, styleSources, styles, defaultBreakpointId) => {
+const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByRef, styleSourceSelections, styleSources, styles, metas, defaultBreakpointId) => {
   const parentChildren = [];
   for (const item of treeTemplate) {
     if (item.type === "instance") {
@@ -207,16 +210,40 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
           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: (0, import_title_case.titleCase)((0, import_no_case.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 = (0, import_nanoid.nanoid)();
         styleSources.push({
           type: "local",
           id: styleSourceId
         });
-        styleSourceSelections.push({
-          instanceId,
-          values: [styleSourceId]
-        });
+        styleSourceIds.push(styleSourceId);
         for (const styleDecl of item.styles) {
           styles.push({
             breakpointId: defaultBreakpointId,
@@ -227,6 +254,12 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
           });
         }
       }
+      if (styleSourceIds.length > 0) {
+        styleSourceSelections.push({
+          instanceId,
+          values: styleSourceIds
+        });
+      }
       const instance = {
         type: "instance",
         id: instanceId,
@@ -243,6 +276,7 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
         styleSourceSelections,
         styleSources,
         styles,
+        metas,
         defaultBreakpointId
       );
       parentChildren.push({
@@ -259,7 +293,7 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
   }
   return parentChildren;
 };
-const generateDataFromEmbedTemplate = (treeTemplate, defaultBreakpointId) => {
+const generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId) => {
   const instances = [];
   const props = [];
   const dataSourceByRef = /* @__PURE__ */ new Map();
@@ -274,6 +308,7 @@ const generateDataFromEmbedTemplate = (treeTemplate, defaultBreakpointId) => {
     styleSourceSelections,
     styleSources,
     styles,
+    metas,
     defaultBreakpointId
   );
   return {

package/lib/cjs/props.js

@@ -50,7 +50,6 @@ const useInstanceProps = (instanceId) => {
     dataSourceValuesStore,
     executeEffectfulExpression,
     setDataSourceValues,
-    renderer,
     indexesWithinAncestors
   } = (0, import_react.useContext)(import_context.ReactSdkContext);
   const index = indexesWithinAncestors.get(instanceId);
@@ -80,9 +79,6 @@ const useInstanceProps = (instanceId) => {
           }
           if (prop.type === "action") {
             instancePropsObject2[prop.name] = (...args) => {
-              if (renderer === "canvas") {
-                return;
-              }
               for (const value of prop.value) {
                 if (value.type === "execute") {
                   const argsMap = /* @__PURE__ */ new Map();
@@ -109,7 +105,6 @@ const useInstanceProps = (instanceId) => {
     propsByInstanceIdStore,
     dataSourceValuesStore,
     instanceId,
-    renderer,
     executeEffectfulExpression,
     setDataSourceValues,
     index
@@ -148,42 +143,47 @@ const resolveUrlProp = (instanceId, name, {
   if (instanceProps === void 0) {
     return;
   }
-  for (const prop of instanceProps) {
-    if (prop.name !== name) {
+  let prop = void 0;
+  for (const intanceProp of instanceProps) {
+    if (intanceProp.name !== name) {
       continue;
     }
-    if (prop.type === "page") {
-      if (typeof prop.value === "string") {
-        const page2 = pages.get(prop.value);
-        return page2 && { type: "page", page: page2 };
-      }
-      const { instanceId: instanceId2, pageId } = prop.value;
-      const page = pages.get(pageId);
-      if (page === void 0) {
-        return;
-      }
-      const idProp = props.get(instanceId2)?.find((prop2) => prop2.name === "id");
-      return {
-        type: "page",
-        page,
-        instanceId: instanceId2,
-        hash: idProp === void 0 || idProp.type !== "string" ? void 0 : idProp.value
-      };
+    prop = intanceProp;
+  }
+  if (prop === void 0) {
+    return;
+  }
+  if (prop.type === "page") {
+    if (typeof prop.value === "string") {
+      const page2 = pages.get(prop.value);
+      return page2 && { type: "page", page: page2 };
     }
-    if (prop.type === "string") {
-      for (const page of pages.values()) {
-        if (page.path === prop.value) {
-          return { type: "page", page };
-        }
-      }
-      return { type: "string", url: prop.value };
+    const { instanceId: instanceId2, pageId } = prop.value;
+    const page = pages.get(pageId);
+    if (page === void 0) {
+      return;
     }
-    if (prop.type === "asset") {
-      const asset = assets.get(prop.value);
-      return asset && { type: "asset", asset };
+    const idProp = props.get(instanceId2)?.find((prop2) => prop2.name === "id");
+    return {
+      type: "page",
+      page,
+      instanceId: instanceId2,
+      hash: idProp === void 0 || idProp.type !== "string" ? void 0 : idProp.value
+    };
+  }
+  if (prop.type === "string") {
+    for (const page of pages.values()) {
+      if (page.path === prop.value) {
+        return { type: "page", page };
+      }
     }
-    return;
+    return { type: "string", url: prop.value };
+  }
+  if (prop.type === "asset") {
+    const asset = assets.get(prop.value);
+    return asset && { type: "asset", asset };
   }
+  return;
 };
 const usePropUrl = (instanceId, name) => {
   const { propsByInstanceIdStore, pagesStore, assetsStore } = (0, import_react.useContext)(import_context.ReactSdkContext);

package/lib/component-renderer.js

@@ -42,7 +42,7 @@ const renderComponentTemplate = ({
       throw new Error(`Unsupported prop ${props} with value ${value}`);
     });
   }
-  const data = generateDataFromEmbedTemplate(template, "base");
+  const data = generateDataFromEmbedTemplate(template, metas, "base");
   const instances = [
     [
       "root",

package/lib/components/component-meta.js

@@ -20,6 +20,10 @@ const ComponentState = z.object({
   selector: z.string(),
   label: z.string()
 });
+const ComponentToken = z.object({
+  variant: z.optional(z.string()),
+  styles: z.array(EmbedTemplateStyleDecl)
+});
 const defaultStates = [
   { selector: ":hover", label: "Hover" },
   { selector: ":active", label: "Active" },
@@ -50,6 +54,7 @@ const WsComponentMeta = z.object({
   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/embed-template.js

@@ -1,5 +1,7 @@
 import { z } from "zod";
 import { nanoid } from "nanoid";
+import { titleCase } from "title-case";
+import { noCase } from "no-case";
 import {
   Instance,
   PropsList,
@@ -82,6 +84,7 @@ const EmbedTemplateInstance = z.lazy(
     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
   })
@@ -105,7 +108,7 @@ const getDataSourceValue = (value) => {
   value;
   throw Error("Impossible case");
 };
-const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByRef, styleSourceSelections, styleSources, styles, defaultBreakpointId) => {
+const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByRef, styleSourceSelections, styleSources, styles, metas, defaultBreakpointId) => {
   const parentChildren = [];
   for (const item of treeTemplate) {
     if (item.type === "instance") {
@@ -188,16 +191,40 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
           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
         });
-        styleSourceSelections.push({
-          instanceId,
-          values: [styleSourceId]
-        });
+        styleSourceIds.push(styleSourceId);
         for (const styleDecl of item.styles) {
           styles.push({
             breakpointId: defaultBreakpointId,
@@ -208,6 +235,12 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
           });
         }
       }
+      if (styleSourceIds.length > 0) {
+        styleSourceSelections.push({
+          instanceId,
+          values: styleSourceIds
+        });
+      }
       const instance = {
         type: "instance",
         id: instanceId,
@@ -224,6 +257,7 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
         styleSourceSelections,
         styleSources,
         styles,
+        metas,
         defaultBreakpointId
       );
       parentChildren.push({
@@ -240,7 +274,7 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
   }
   return parentChildren;
 };
-const generateDataFromEmbedTemplate = (treeTemplate, defaultBreakpointId) => {
+const generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId) => {
   const instances = [];
   const props = [];
   const dataSourceByRef = /* @__PURE__ */ new Map();
@@ -255,6 +289,7 @@ const generateDataFromEmbedTemplate = (treeTemplate, defaultBreakpointId) => {
     styleSourceSelections,
     styleSources,
     styles,
+    metas,
     defaultBreakpointId
   );
   return {

package/lib/props.js

@@ -21,7 +21,6 @@ const useInstanceProps = (instanceId) => {
     dataSourceValuesStore,
     executeEffectfulExpression,
     setDataSourceValues,
-    renderer,
     indexesWithinAncestors
   } = useContext(ReactSdkContext);
   const index = indexesWithinAncestors.get(instanceId);
@@ -51,9 +50,6 @@ const useInstanceProps = (instanceId) => {
           }
           if (prop.type === "action") {
             instancePropsObject2[prop.name] = (...args) => {
-              if (renderer === "canvas") {
-                return;
-              }
               for (const value of prop.value) {
                 if (value.type === "execute") {
                   const argsMap = /* @__PURE__ */ new Map();
@@ -80,7 +76,6 @@ const useInstanceProps = (instanceId) => {
     propsByInstanceIdStore,
     dataSourceValuesStore,
     instanceId,
-    renderer,
     executeEffectfulExpression,
     setDataSourceValues,
     index
@@ -119,42 +114,47 @@ const resolveUrlProp = (instanceId, name, {
   if (instanceProps === void 0) {
     return;
   }
-  for (const prop of instanceProps) {
-    if (prop.name !== name) {
+  let prop = void 0;
+  for (const intanceProp of instanceProps) {
+    if (intanceProp.name !== name) {
       continue;
     }
-    if (prop.type === "page") {
-      if (typeof prop.value === "string") {
-        const page2 = pages.get(prop.value);
-        return page2 && { type: "page", page: page2 };
-      }
-      const { instanceId: instanceId2, pageId } = prop.value;
-      const page = pages.get(pageId);
-      if (page === void 0) {
-        return;
-      }
-      const idProp = props.get(instanceId2)?.find((prop2) => prop2.name === "id");
-      return {
-        type: "page",
-        page,
-        instanceId: instanceId2,
-        hash: idProp === void 0 || idProp.type !== "string" ? void 0 : idProp.value
-      };
+    prop = intanceProp;
+  }
+  if (prop === void 0) {
+    return;
+  }
+  if (prop.type === "page") {
+    if (typeof prop.value === "string") {
+      const page2 = pages.get(prop.value);
+      return page2 && { type: "page", page: page2 };
     }
-    if (prop.type === "string") {
-      for (const page of pages.values()) {
-        if (page.path === prop.value) {
-          return { type: "page", page };
-        }
-      }
-      return { type: "string", url: prop.value };
+    const { instanceId: instanceId2, pageId } = prop.value;
+    const page = pages.get(pageId);
+    if (page === void 0) {
+      return;
     }
-    if (prop.type === "asset") {
-      const asset = assets.get(prop.value);
-      return asset && { type: "asset", asset };
+    const idProp = props.get(instanceId2)?.find((prop2) => prop2.name === "id");
+    return {
+      type: "page",
+      page,
+      instanceId: instanceId2,
+      hash: idProp === void 0 || idProp.type !== "string" ? void 0 : idProp.value
+    };
+  }
+  if (prop.type === "string") {
+    for (const page of pages.values()) {
+      if (page.path === prop.value) {
+        return { type: "page", page };
+      }
     }
-    return;
+    return { type: "string", url: prop.value };
+  }
+  if (prop.type === "asset") {
+    const asset = assets.get(prop.value);
+    return asset && { type: "asset", asset };
   }
+  return;
 };
 const usePropUrl = (instanceId, name) => {
   const { propsByInstanceIdStore, pagesStore, assetsStore } = useContext(ReactSdkContext);