@webstudio-is/react-sdk 0.124.0 → 0.126.0

package/lib/index.js

@@ -69,6 +69,10 @@ var addGlobalRules = (sheet, { assets, assetBaseUrl }) => {
 };
 
 // src/props.ts
+import {
+  getPagePath,
+  findPageByIdOrPath
+} from "@webstudio-is/sdk";
 var normalizeProps = ({
   props,
   assetBaseUrl,
@@ -94,22 +98,20 @@ var normalizeProps = ({
       continue;
     }
     if (prop.type === "page") {
-      let page;
       let idProp;
-      if (typeof prop.value === "string") {
-        const pageId = prop.value;
-        page = pages.get(pageId);
-      } else {
-        const { pageId, instanceId } = prop.value;
-        page = pages.get(pageId);
+      const pageId = typeof prop.value === "string" ? prop.value : prop.value.pageId;
+      const page = findPageByIdOrPath(pageId, pages);
+      if (page === void 0) {
+        continue;
+      }
+      if (typeof prop.value !== "string") {
+        const { instanceId } = prop.value;
         idProp = props.find(
           (prop2) => prop2.instanceId === instanceId && prop2.name === "id"
         );
       }
-      if (page === void 0) {
-        continue;
-      }
-      const url = new URL(page.path, "https://any-valid.url");
+      const path = getPagePath(page.id, pages);
+      const url = new URL(path, "https://any-valid.url");
       let value = url.pathname;
       if (idProp?.type === "string") {
         const hash = idProp.value;
@@ -136,6 +138,7 @@ var componentAttribute = "data-ws-component";
 var showAttribute = "data-ws-show";
 var indexAttribute = "data-ws-index";
 var collapsedAttribute = "data-ws-collapsed";
+var textContentAttribute = "data-ws-text-content";
 var getInstanceIdFromComponentProps = (props) => {
   return props[idAttribute];
 };
@@ -285,13 +288,18 @@ import {
 } from "react";
 
 // src/context.tsx
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 var ReactSdkContext = createContext({
   assetBaseUrl: "/",
   imageBaseUrl: "/",
   imageLoader: ({ src }) => src,
-  pagesPaths: /* @__PURE__ */ new Set()
+  pagesPaths: /* @__PURE__ */ new Set(),
+  resources: {}
 });
+var useResource = (name) => {
+  const { resources } = useContext(ReactSdkContext);
+  return resources[name];
+};
 
 // src/tree/create-elements-tree.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -324,7 +332,8 @@ var createElementsTree = ({
         imageLoader,
         pagesPaths: /* @__PURE__ */ new Set(),
         assetBaseUrl,
-        imageBaseUrl
+        imageBaseUrl,
+        resources: {}
       },
       children: root
     }
@@ -350,18 +359,25 @@ var createInstanceChildrenElements = ({
       elements.push(renderText(child.value));
       continue;
     }
-    const childInstance = instances.get(child.value);
-    if (childInstance === void 0) {
+    if (child.type === "expression") {
       continue;
     }
-    const childInstanceSelector = [child.value, ...instanceSelector];
-    const element = createInstanceElement({
-      instance: childInstance,
-      instanceSelector: childInstanceSelector,
-      Component,
-      components
-    });
-    elements.push(element);
+    if (child.type === "id") {
+      const childInstance = instances.get(child.value);
+      if (childInstance === void 0) {
+        continue;
+      }
+      const childInstanceSelector = [child.value, ...instanceSelector];
+      const element = createInstanceElement({
+        instance: childInstance,
+        instanceSelector: childInstanceSelector,
+        Component,
+        components
+      });
+      elements.push(element);
+      continue;
+    }
+    child;
   }
   if (elements.length === 0) {
     return;
@@ -403,15 +419,15 @@ var Root = ({
 };
 
 // src/core-components.ts
-import { ListIcon } from "@webstudio-is/icons/svg";
+import { ListViewIcon } from "@webstudio-is/icons/svg";
 var portalComponent = "Slot";
 var collectionComponent = "ws:collection";
 var collectionMeta = {
-  category: "general",
+  category: "data",
   order: 7,
   type: "container",
   label: "Collection",
-  icon: ListIcon,
+  icon: ListViewIcon,
   stylable: false,
   template: [
     {
@@ -421,24 +437,24 @@ var collectionMeta = {
         {
           name: "data",
           type: "json",
-          value: ["apple", "orange", "banana"]
+          value: [
+            "Collection Item 1",
+            "Collection Item 2",
+            "Collection Item 3"
+          ]
         },
-        { name: "item", type: "parameter", variableName: "collectionItem" }
+        {
+          name: "item",
+          type: "parameter",
+          variableName: "collectionItem",
+          variableAlias: "Collection Item"
+        }
       ],
       children: [
         {
           type: "instance",
           component: "Box",
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              props: [
-                { name: "code", type: "expression", code: "collectionItem" }
-              ],
-              children: []
-            }
-          ]
+          children: [{ type: "expression", value: "collectionItem" }]
         }
       ]
     }
@@ -590,6 +606,12 @@ var Action = z.object({
   type: z.literal("action"),
   defaultValue: z.undefined().optional()
 });
+var TextContent = z.object({
+  ...common,
+  control: z.literal("textContent"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional()
+});
 var PropMeta = z.union([
   Number,
   Range,
@@ -607,7 +629,8 @@ var PropMeta = z.union([
   Url,
   Json,
   Date,
-  Action
+  Action,
+  TextContent
 ]);
 
 // src/components/component-meta.ts
@@ -861,7 +884,12 @@ var EmbedTemplateText = z2.object({
   type: z2.literal("text"),
   value: z2.string()
 });
+var EmbedTemplateExpression = z2.object({
+  type: z2.literal("expression"),
+  value: z2.string()
+});
 var EmbedTemplateVariable = z2.object({
+  alias: z2.optional(z2.string()),
   initialValue: z2.unknown()
 });
 var EmbedTemplateProp = z2.union([
@@ -898,7 +926,8 @@ var EmbedTemplateProp = z2.union([
   z2.object({
     type: z2.literal("parameter"),
     name: z2.string(),
-    variableName: z2.string()
+    variableName: z2.string(),
+    variableAlias: z2.optional(z2.string())
   }),
   z2.object({
     type: z2.literal("action"),
@@ -932,7 +961,9 @@ var EmbedTemplateInstance = z2.lazy(
   })
 );
 var WsEmbedTemplate = z2.lazy(
-  () => z2.array(z2.union([EmbedTemplateInstance, EmbedTemplateText]))
+  () => z2.array(
+    z2.union([EmbedTemplateInstance, EmbedTemplateText, EmbedTemplateExpression])
+  )
 );
 var getVariablValue = (value) => {
   if (typeof value === "string") {
@@ -963,7 +994,7 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
             type: "variable",
             id: generateId(),
             scopeInstanceId: instanceId,
-            name,
+            name: variable.alias ?? name,
             value: getVariablValue(variable.initialValue)
           });
         }
@@ -1020,7 +1051,7 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
               type: "parameter",
               id: dataSourceId,
               scopeInstanceId: instanceId,
-              name: prop.variableName
+              name: prop.variableAlias ?? prop.variableName
             });
             props.push({
               id: propId,
@@ -1116,6 +1147,18 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
         value: item.value
       });
     }
+    if (item.type === "expression") {
+      parentChildren.push({
+        type: "expression",
+        // replace all references with variable names
+        value: validateExpression(item.value, {
+          transformIdentifier: (ref) => {
+            const id = dataSourceByRef.get(ref)?.id ?? ref;
+            return encodeDataSourceVariable(id);
+          }
+        })
+      });
+    }
   }
   return parentChildren;
 };
@@ -1145,7 +1188,10 @@ var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId, g
     dataSources: Array.from(dataSourceByRef.values()),
     styleSourceSelections,
     styleSources,
-    styles
+    styles,
+    assets: [],
+    breakpoints: [],
+    resources: []
   };
 };
 var namespaceEmbedTemplateComponents = (template, namespace, components) => {
@@ -1153,6 +1199,9 @@ var namespaceEmbedTemplateComponents = (template, namespace, components) => {
     if (item.type === "text") {
       return item;
     }
+    if (item.type === "expression") {
+      return item;
+    }
     if (item.type === "instance") {
       const prefix = components.has(item.component) ? `${namespace}:` : "";
       return {
@@ -1203,6 +1252,7 @@ var WsComponentPropsMeta = z3.object({
 var componentCategories = [
   "general",
   "text",
+  "data",
   "media",
   "forms",
   "radix",
@@ -1314,10 +1364,12 @@ var getClosestInstance = (instancePath, currentInstance, closestComponent) => {
 };
 
 // src/generator.ts
+import { getPagePath as getPagePath2 } from "@webstudio-is/sdk";
 var generateUtilsExport = (siteData) => {
   const pagesPaths = [siteData.pages.homePage.path];
   for (const page of siteData.pages.pages) {
-    pagesPaths.push(page.path);
+    const path = getPagePath2(page.id, siteData.pages);
+    pagesPaths.push(path);
   }
   const generatedPagesPaths = `export const pagesPaths = new Set(${JSON.stringify(
     pagesPaths
@@ -1497,6 +1549,16 @@ var generateJsxChildren = ({
 `);
       continue;
     }
+    if (child.type === "expression") {
+      const expression = generateExpression({
+        expression: child.value,
+        dataSources,
+        scope
+      });
+      generatedChildren = `{${expression}}
+`;
+      continue;
+    }
     if (child.type === "id") {
       const instanceId = child.value;
       const instance = instances.get(instanceId);
@@ -1571,7 +1633,8 @@ var generatePageComponent = ({
         dataSource.resourceId,
         dataSource.name
       );
-      generatedDataSources += `let ${valueName}: any = _props.resources["${resourceName}"]
+      const resourceNameString = JSON.stringify(resourceName);
+      generatedDataSources += `let ${valueName} = useResource(${resourceNameString})
 `;
     }
   }
@@ -1596,9 +1659,7 @@ var generatePageComponent = ({
   let generatedComponent = "";
   generatedComponent += `type Params = Record<string, string | undefined>
 `;
-  generatedComponent += `type Resources = Record<string, unknown>
-`;
-  generatedComponent += `const Page = (_props: { params: Params, resources: Resources }) => {
+  generatedComponent += `const Page = (_props: { params: Params }) => {
 `;
   generatedComponent += `${generatedDataSources}`;
   generatedComponent += `return ${generatedJsx}`;
@@ -1758,5 +1819,7 @@ export {
   selectorIdAttribute,
   showAttribute,
   stateCategories,
+  textContentAttribute,
+  useResource,
   validateExpression
 };

package/lib/types/component-generator.d.ts

@@ -127,14 +127,17 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
     instances: Map<string, {
         type: "instance";
         id: string;
-        component: string;
         children: ({
             value: string;
             type: "text";
         } | {
             value: string;
             type: "id";
+        } | {
+            value: string;
+            type: "expression";
         })[];
+        component: string;
         label?: string | undefined;
     }>;
     props: Map<string, {
@@ -260,14 +263,17 @@ export declare const generatePageComponent: ({ scope, page, instances, props, da
     instances: Map<string, {
         type: "instance";
         id: string;
-        component: string;
         children: ({
             value: string;
             type: "text";
         } | {
             value: string;
             type: "id";
+        } | {
+            value: string;
+            type: "expression";
         })[];
+        component: string;
         label?: string | undefined;
     }>;
     props: Map<string, {

package/lib/types/components/component-meta.d.ts

@@ -387,6 +387,27 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         defaultValue?: undefined;
         label?: string | undefined;
         description?: string | undefined;
+    }>, z.ZodObject<{
+        control: z.ZodLiteral<"textContent">;
+        type: z.ZodLiteral<"string">;
+        defaultValue: z.ZodOptional<z.ZodString>;
+        label: z.ZodOptional<z.ZodString>;
+        description: z.ZodOptional<z.ZodString>;
+        required: z.ZodBoolean;
+    }, "strip", z.ZodTypeAny, {
+        type: "string";
+        required: boolean;
+        control: "textContent";
+        defaultValue?: string | undefined;
+        label?: string | undefined;
+        description?: string | undefined;
+    }, {
+        type: "string";
+        required: boolean;
+        control: "textContent";
+        defaultValue?: string | undefined;
+        label?: string | undefined;
+        description?: string | undefined;
     }>]>>;
     initialProps: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
 }, "strip", z.ZodTypeAny, {
@@ -518,6 +539,13 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         defaultValue?: undefined;
         label?: string | undefined;
         description?: string | undefined;
+    } | {
+        type: "string";
+        required: boolean;
+        control: "textContent";
+        defaultValue?: string | undefined;
+        label?: string | undefined;
+        description?: string | undefined;
     }>;
     initialProps?: string[] | undefined;
 }, {
@@ -649,11 +677,18 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         defaultValue?: undefined;
         label?: string | undefined;
         description?: string | undefined;
+    } | {
+        type: "string";
+        required: boolean;
+        control: "textContent";
+        defaultValue?: string | undefined;
+        label?: string | undefined;
+        description?: string | undefined;
     }>;
     initialProps?: string[] | undefined;
 }>;
 export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
-export declare const componentCategories: readonly ["general", "text", "media", "forms", "radix", "hidden"];
+export declare const componentCategories: readonly ["general", "text", "data", "media", "forms", "radix", "hidden"];
 export declare const stateCategories: readonly ["states", "component-states"];
 export declare const ComponentState: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["states", "component-states"]>>;
@@ -671,7 +706,7 @@ export declare const ComponentState: z.ZodObject<{
 export type ComponentState = z.infer<typeof ComponentState>;
 export declare const defaultStates: ComponentState[];
 export declare const WsComponentMeta: z.ZodObject<{
-    category: z.ZodOptional<z.ZodEnum<["general", "text", "media", "forms", "radix", "hidden"]>>;
+    category: z.ZodOptional<z.ZodEnum<["general", "text", "data", "media", "forms", "radix", "hidden"]>>;
     type: z.ZodEnum<["container", "control", "embed", "rich-text-child"]>;
     requiredAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
     invalidAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
@@ -1986,12 +2021,21 @@ export declare const WsComponentMeta: z.ZodObject<{
     }, {
         value: string;
         type: "text";
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"expression">;
+        value: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        value: string;
+        type: "expression";
+    }, {
+        value: string;
+        type: "expression";
     }>]>, "many">>>;
     order: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
     type: "embed" | "control" | "container" | "rich-text-child";
     icon: string;
-    category?: "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;
@@ -2436,12 +2480,15 @@ export declare const WsComponentMeta: z.ZodObject<{
     template?: ({
         value: string;
         type: "text";
+    } | {
+        value: string;
+        type: "expression";
     } | import("../embed-template").EmbedTemplateInstance)[] | undefined;
     order?: number | undefined;
 }, {
     type: "embed" | "control" | "container" | "rich-text-child";
     icon: string;
-    category?: "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;
@@ -2886,6 +2933,9 @@ export declare const WsComponentMeta: z.ZodObject<{
     template?: ({
         value: string;
         type: "text";
+    } | {
+        value: string;
+        type: "expression";
     } | import("../embed-template").EmbedTemplateInstance)[] | undefined;
     order?: number | undefined;
 }>;

package/lib/types/context.d.ts

@@ -35,4 +35,6 @@ export declare const ReactSdkContext: import("react").Context<Params & {
      * always empty for builder which handle anchor clicks globally
      */
     pagesPaths: Set<Page["path"]>;
+    resources: Record<string, any>;
 }>;
+export declare const useResource: (name: string) => any;

package/lib/types/core-components.d.ts

@@ -134,6 +134,13 @@ export declare const corePropsMetas: {
             defaultValue?: undefined;
             label?: string | undefined;
             description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "textContent";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
         }>;
         initialProps?: string[] | undefined;
     };

package/lib/types/embed-template.d.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import type { Instance, Breakpoint } from "@webstudio-is/sdk";
+import type { Instance, Breakpoint, WebstudioFragment } from "@webstudio-is/sdk";
 import { type StyleProperty } from "@webstudio-is/css-engine";
 import type { Simplify } from "type-fest";
 import type { WsComponentMeta } from "./components/component-meta";
@@ -14,11 +14,25 @@ declare const EmbedTemplateText: z.ZodObject<{
     type: "text";
 }>;
 type EmbedTemplateText = z.infer<typeof EmbedTemplateText>;
+declare const EmbedTemplateExpression: z.ZodObject<{
+    type: z.ZodLiteral<"expression">;
+    value: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    value: string;
+    type: "expression";
+}, {
+    value: string;
+    type: "expression";
+}>;
+type EmbedTemplateExpression = z.infer<typeof EmbedTemplateExpression>;
 declare const EmbedTemplateVariable: z.ZodObject<{
+    alias: z.ZodOptional<z.ZodString>;
     initialValue: z.ZodUnknown;
 }, "strip", z.ZodTypeAny, {
+    alias?: string | undefined;
     initialValue?: unknown;
 }, {
+    alias?: string | undefined;
     initialValue?: unknown;
 }>;
 type EmbedTemplateVariable = z.infer<typeof EmbedTemplateVariable>;
@@ -98,14 +112,17 @@ export declare const EmbedTemplateProp: z.ZodUnion<[z.ZodObject<{
     type: z.ZodLiteral<"parameter">;
     name: z.ZodString;
     variableName: z.ZodString;
+    variableAlias: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     type: "parameter";
     name: string;
     variableName: string;
+    variableAlias?: string | undefined;
 }, {
     type: "parameter";
     name: string;
     variableName: string;
+    variableAlias?: string | undefined;
 }>, z.ZodObject<{
     type: z.ZodLiteral<"action">;
     name: z.ZodString;
@@ -2191,7 +2208,7 @@ export type EmbedTemplateInstance = {
     props?: EmbedTemplateProp[];
     tokens?: string[];
     styles?: EmbedTemplateStyleDecl[];
-    children: Array<EmbedTemplateInstance | EmbedTemplateText>;
+    children: Array<EmbedTemplateInstance | EmbedTemplateText | EmbedTemplateExpression>;
 };
 export declare const EmbedTemplateInstance: z.ZodType<EmbedTemplateInstance>;
 export declare const WsEmbedTemplate: z.ZodLazy<z.ZodArray<z.ZodUnion<[z.ZodType<EmbedTemplateInstance, z.ZodTypeDef, EmbedTemplateInstance>, z.ZodObject<{
@@ -2203,375 +2220,24 @@ export declare const WsEmbedTemplate: z.ZodLazy<z.ZodArray<z.ZodUnion<[z.ZodType
 }, {
     value: string;
     type: "text";
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"expression">;
+    value: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    value: string;
+    type: "expression";
+}, {
+    value: string;
+    type: "expression";
 }>]>, "many">>;
 export type WsEmbedTemplate = z.infer<typeof WsEmbedTemplate>;
 export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
     value: string;
     type: "text";
-} | EmbedTemplateInstance)[], metas: Map<Instance["component"], WsComponentMeta>, defaultBreakpointId: Breakpoint["id"], generateId?: () => string) => {
-    children: ({
-        value: string;
-        type: "text";
-    } | {
-        value: string;
-        type: "id";
-    })[];
-    instances: {
-        type: "instance";
-        id: string;
-        component: string;
-        children: ({
-            value: string;
-            type: "text";
-        } | {
-            value: string;
-            type: "id";
-        })[];
-        label?: string | undefined;
-    }[];
-    props: ({
-        value: number;
-        type: "number";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "string";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: boolean;
-        type: "boolean";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        type: "json";
-        name: string;
-        id: string;
-        instanceId: string;
-        value?: unknown;
-        required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "asset";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: (string | {
-            instanceId: string;
-            pageId: string;
-        }) & (string | {
-            instanceId: string;
-            pageId: string;
-        } | undefined);
-        type: "page";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: string[];
-        type: "string[]";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "parameter";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "expression";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: {
-            code: string;
-            type: "execute";
-            args: string[];
-        }[];
-        type: "action";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    })[];
-    dataSources: ({
-        value: {
-            value: number;
-            type: "number";
-        } | {
-            value: string;
-            type: "string";
-        } | {
-            value: boolean;
-            type: "boolean";
-        } | {
-            value: string[];
-            type: "string[]";
-        } | {
-            type: "json";
-            value?: unknown;
-        };
-        type: "variable";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
-    } | {
-        type: "parameter";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
-    } | {
-        type: "resource";
-        name: string;
-        id: string;
-        resourceId: string;
-        scopeInstanceId?: string | undefined;
-    })[];
-    styleSourceSelections: {
-        values: string[];
-        instanceId: string;
-    }[];
-    styleSources: ({
-        type: "token";
-        name: string;
-        id: string;
-    } | {
-        type: "local";
-        id: string;
-    })[];
-    styles: {
-        value: {
-            value: number;
-            type: "unit";
-            unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
-        } | {
-            value: string;
-            type: "keyword";
-        } | {
-            value: string;
-            type: "unparsed";
-            hidden?: boolean | undefined;
-        } | {
-            value: string[];
-            type: "fontFamily";
-        } | {
-            type: "rgb";
-            r: number;
-            g: number;
-            b: number;
-            alpha: number;
-        } | {
-            value: {
-                value: string;
-                type: "asset";
-            } | {
-                type: "url";
-                url: string;
-            };
-            type: "image";
-            hidden?: boolean | undefined;
-        } | {
-            value: string;
-            type: "invalid";
-        } | {
-            value: "";
-            type: "unset";
-        } | {
-            value: ({
-                value: number;
-                type: "unit";
-                unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
-            } | {
-                value: string;
-                type: "keyword";
-            } | {
-                value: string;
-                type: "unparsed";
-                hidden?: boolean | undefined;
-            } | {
-                type: "rgb";
-                r: number;
-                g: number;
-                b: number;
-                alpha: number;
-            })[];
-            type: "tuple";
-            hidden?: boolean | undefined;
-        } | {
-            value: ({
-                value: number;
-                type: "unit";
-                unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
-            } | {
-                value: string;
-                type: "keyword";
-            } | {
-                value: string;
-                type: "unparsed";
-                hidden?: boolean | undefined;
-            } | {
-                value: {
-                    value: string;
-                    type: "asset";
-                } | {
-                    type: "url";
-                    url: string;
-                };
-                type: "image";
-                hidden?: boolean | undefined;
-            } | {
-                value: string;
-                type: "invalid";
-            } | {
-                value: ({
-                    value: number;
-                    type: "unit";
-                    unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
-                } | {
-                    value: string;
-                    type: "keyword";
-                } | {
-                    value: string;
-                    type: "unparsed";
-                    hidden?: boolean | undefined;
-                } | {
-                    type: "rgb";
-                    r: number;
-                    g: number;
-                    b: number;
-                    alpha: number;
-                })[];
-                type: "tuple";
-                hidden?: boolean | undefined;
-            })[];
-            type: "layers";
-        } | {
-            value: string;
-            type: "var";
-            fallbacks: ({
-                value: number;
-                type: "unit";
-                unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
-            } | {
-                value: string;
-                type: "keyword";
-            } | {
-                value: string;
-                type: "unparsed";
-                hidden?: boolean | undefined;
-            } | {
-                value: string[];
-                type: "fontFamily";
-            } | {
-                type: "rgb";
-                r: number;
-                g: number;
-                b: number;
-                alpha: number;
-            } | {
-                value: {
-                    value: string;
-                    type: "asset";
-                } | {
-                    type: "url";
-                    url: string;
-                };
-                type: "image";
-                hidden?: boolean | undefined;
-            } | {
-                value: ({
-                    value: number;
-                    type: "unit";
-                    unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
-                } | {
-                    value: string;
-                    type: "keyword";
-                } | {
-                    value: string;
-                    type: "unparsed";
-                    hidden?: boolean | undefined;
-                } | {
-                    type: "rgb";
-                    r: number;
-                    g: number;
-                    b: number;
-                    alpha: number;
-                })[];
-                type: "tuple";
-                hidden?: boolean | undefined;
-            } | {
-                value: ({
-                    value: number;
-                    type: "unit";
-                    unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
-                } | {
-                    value: string;
-                    type: "keyword";
-                } | {
-                    value: string;
-                    type: "unparsed";
-                    hidden?: boolean | undefined;
-                } | {
-                    value: {
-                        value: string;
-                        type: "asset";
-                    } | {
-                        type: "url";
-                        url: string;
-                    };
-                    type: "image";
-                    hidden?: boolean | undefined;
-                } | {
-                    value: string;
-                    type: "invalid";
-                } | {
-                    value: ({
-                        value: number;
-                        type: "unit";
-                        unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
-                    } | {
-                        value: string;
-                        type: "keyword";
-                    } | {
-                        value: string;
-                        type: "unparsed";
-                        hidden?: boolean | undefined;
-                    } | {
-                        type: "rgb";
-                        r: number;
-                        g: number;
-                        b: number;
-                        alpha: number;
-                    })[];
-                    type: "tuple";
-                    hidden?: boolean | undefined;
-                })[];
-                type: "layers";
-            })[];
-        };
-        styleSourceId: string;
-        breakpointId: string;
-        state?: string | undefined;
-        property: StyleProperty;
-    }[];
-};
-export type EmbedTemplateData = ReturnType<typeof generateDataFromEmbedTemplate>;
+} | {
+    value: string;
+    type: "expression";
+} | EmbedTemplateInstance)[], metas: Map<Instance["component"], WsComponentMeta>, defaultBreakpointId: Breakpoint["id"], generateId?: () => string) => WebstudioFragment;
 export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, components: Set<EmbedTemplateInstance["component"]>) => {
     type: "embed" | "control" | "container" | "rich-text-child";
     description?: string | undefined;
@@ -2580,8 +2246,11 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
     template?: ({
         value: string;
         type: "text";
+    } | {
+        value: string;
+        type: "expression";
     } | EmbedTemplateInstance)[] | undefined;
-    category?: "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;

package/lib/types/generator.d.ts

@@ -1,4 +1,4 @@
-import type { Pages, Props } from "@webstudio-is/sdk";
+import { type Pages, type Props } from "@webstudio-is/sdk";
 type PageData = {
     pages: Pages;
     props: Props;

package/lib/types/hook.d.ts

@@ -28,14 +28,17 @@ export type Hook = {
 export declare const getClosestInstance: (instancePath: InstancePath, currentInstance: Instance, closestComponent: Instance["component"]) => {
     type: "instance";
     id: string;
-    component: string;
     children: ({
         value: string;
         type: "text";
     } | {
         value: string;
         type: "id";
+    } | {
+        value: string;
+        type: "expression";
     })[];
+    component: string;
     label?: string | undefined;
 } | undefined;
 export {};

package/lib/types/index.d.ts

@@ -8,7 +8,7 @@ export { PropMeta } from "./prop-meta";
 export { type WsComponentPropsMeta, type ComponentState, type PresetStyle, WsComponentMeta, componentCategories, stateCategories, defaultStates, } from "./components/component-meta";
 export * from "./embed-template";
 export * from "./props";
-export { type Params, ReactSdkContext } from "./context";
+export * from "./context";
 export { validateExpression, encodeDataSourceVariable, decodeDataSourceVariable, generateDataSources, } from "./expression";
 export { getIndexesWithinAncestors } from "./instance-utils";
 export * from "./hook";

package/lib/types/instance-utils.d.ts

@@ -4,13 +4,16 @@ export type IndexesWithinAncestors = Map<Instance["id"], number>;
 export declare const getIndexesWithinAncestors: (metas: Map<Instance["component"], WsComponentMeta>, instances: Map<string, {
     type: "instance";
     id: string;
-    component: string;
     children: ({
         value: string;
         type: "text";
     } | {
         value: string;
         type: "id";
+    } | {
+        value: string;
+        type: "expression";
     })[];
+    component: string;
     label?: string | undefined;
 }>, rootIds: Instance["id"][]) => IndexesWithinAncestors;

package/lib/types/prop-meta.d.ts

@@ -392,5 +392,26 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
     defaultValue?: undefined;
     label?: string | undefined;
     description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"textContent">;
+    type: z.ZodLiteral<"string">;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    type: "string";
+    required: boolean;
+    control: "textContent";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "string";
+    required: boolean;
+    control: "textContent";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
 }>]>;
 export type PropMeta = z.infer<typeof PropMeta>;

package/lib/types/props.d.ts

@@ -1,5 +1,4 @@
-import type { Page, Prop, Assets } from "@webstudio-is/sdk";
-export type Pages = Map<Page["id"], Page>;
+import { type Prop, type Assets, type Pages } from "@webstudio-is/sdk";
 export declare const normalizeProps: ({ props, assetBaseUrl, assets, pages, }: {
     props: Prop[];
     assetBaseUrl: string;
@@ -139,5 +138,6 @@ export declare const componentAttribute: "data-ws-component";
 export declare const showAttribute: "data-ws-show";
 export declare const indexAttribute: "data-ws-index";
 export declare const collapsedAttribute: "data-ws-collapsed";
+export declare const textContentAttribute: "data-ws-text-content";
 export declare const getInstanceIdFromComponentProps: (props: Record<string, unknown>) => string;
 export declare const getIndexWithinAncestorFromComponentProps: (props: Record<string, unknown>) => string | undefined;

package/lib/types/tree/create-elements-tree.d.ts

@@ -13,14 +13,17 @@ export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl
     instances: Map<string, {
         type: "instance";
         id: string;
-        component: string;
         children: ({
             value: string;
             type: "text";
         } | {
             value: string;
             type: "id";
+        } | {
+            value: string;
+            type: "expression";
         })[];
+        component: string;
         label?: string | undefined;
     }>;
     imageLoader: ImageLoader;
@@ -32,14 +35,17 @@ export declare const createInstanceChildrenElements: ({ instances, instanceSelec
     instances: Map<string, {
         type: "instance";
         id: string;
-        component: string;
         children: ({
             value: string;
             type: "text";
         } | {
             value: string;
             type: "id";
+        } | {
+            value: string;
+            type: "expression";
         })[];
+        component: string;
         label?: string | undefined;
     }>;
     instanceSelector: InstanceSelector;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.124.0",
+  "version": "0.126.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -16,8 +16,8 @@
     "type-fest": "^4.3.1",
     "typescript": "5.2.2",
     "zod": "^3.21.4",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/jest-config": "1.0.7"
+    "@webstudio-is/jest-config": "1.0.7",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
     "@remix-run/react": "^1.19.1",
@@ -33,11 +33,11 @@
     "jsep": "^1.3.8",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/fonts": "0.124.0",
-    "@webstudio-is/css-engine": "0.124.0",
-    "@webstudio-is/image": "0.124.0",
-    "@webstudio-is/icons": "^0.124.0",
-    "@webstudio-is/sdk": "0.124.0"
+    "@webstudio-is/fonts": "0.126.0",
+    "@webstudio-is/image": "0.126.0",
+    "@webstudio-is/css-engine": "0.126.0",
+    "@webstudio-is/icons": "^0.126.0",
+    "@webstudio-is/sdk": "0.126.0"
   },
   "exports": {
     ".": {