@webstudio-is/react-sdk 0.124.0 → 0.125.0

package/lib/index.js

@@ -136,6 +136,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];
 };
@@ -350,18 +351,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,7 +411,7 @@ 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 = {
@@ -411,7 +419,7 @@ var collectionMeta = {
   order: 7,
   type: "container",
   label: "Collection",
-  icon: ListIcon,
+  icon: ListViewIcon,
   stylable: false,
   template: [
     {
@@ -590,6 +598,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 +621,8 @@ var PropMeta = z.union([
   Url,
   Json,
   Date,
-  Action
+  Action,
+  TextContent
 ]);
 
 // src/components/component-meta.ts
@@ -1497,6 +1512,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);
@@ -1758,5 +1783,6 @@ export {
   selectorIdAttribute,
   showAttribute,
   stateCategories,
+  textContentAttribute,
   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,6 +677,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;
 }>;

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

@@ -2215,18 +2215,24 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
     } | {
         value: string;
         type: "id";
+    } | {
+        value: string;
+        type: "expression";
     })[];
     instances: {
         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: ({

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/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

@@ -139,5 +139,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.125.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -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.125.0",
+    "@webstudio-is/icons": "^0.125.0",
+    "@webstudio-is/image": "0.125.0",
+    "@webstudio-is/sdk": "0.125.0",
+    "@webstudio-is/css-engine": "0.125.0"
   },
   "exports": {
     ".": {