@webstudio-is/react-sdk 0.82.0 → 0.84.0

package/lib/cjs/props.js

@@ -18,6 +18,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var props_exports = {};
 __export(props_exports, {
+  getIndexWithinAncestorFromComponentProps: () => getIndexWithinAncestorFromComponentProps,
   getInstanceIdFromComponentProps: () => getInstanceIdFromComponentProps,
   getPropsByInstanceId: () => getPropsByInstanceId,
   resolveUrlProp: () => resolveUrlProp,
@@ -49,13 +50,18 @@ const useInstanceProps = (instanceId) => {
     dataSourceValuesStore,
     executeEffectfulExpression,
     setDataSourceValues,
-    renderer
+    renderer,
+    indexesWithinAncestors
   } = (0, import_react.useContext)(import_context.ReactSdkContext);
+  const index = indexesWithinAncestors.get(instanceId);
   const instancePropsObjectStore = (0, import_react.useMemo)(() => {
     return (0, import_nanostores.computed)(
       [propsByInstanceIdStore, dataSourceValuesStore],
       (propsByInstanceId, dataSourceValues) => {
         const instancePropsObject2 = {};
+        if (index !== void 0) {
+          instancePropsObject2[import_webstudio_component.indexAttribute] = index.toString();
+        }
         const instanceProps = propsByInstanceId.get(instanceId);
         if (instanceProps === void 0) {
           return instancePropsObject2;
@@ -73,14 +79,19 @@ const useInstanceProps = (instanceId) => {
             continue;
           }
           if (prop.type === "action") {
-            instancePropsObject2[prop.name] = () => {
+            instancePropsObject2[prop.name] = (...args) => {
               if (renderer === "canvas") {
                 return;
               }
               for (const value of prop.value) {
                 if (value.type === "execute") {
+                  const argsMap = /* @__PURE__ */ new Map();
+                  for (const [i, name] of value.args.entries()) {
+                    argsMap.set(name, args[i]);
+                  }
                   const newValues = executeEffectfulExpression(
                     value.code,
+                    argsMap,
                     dataSourceValues
                   );
                   setDataSourceValues(newValues);
@@ -100,7 +111,8 @@ const useInstanceProps = (instanceId) => {
     instanceId,
     renderer,
     executeEffectfulExpression,
-    setDataSourceValues
+    setDataSourceValues,
+    index
   ]);
   const instancePropsObject = (0, import_react2.useStore)(instancePropsObjectStore);
   return instancePropsObject;
@@ -187,3 +199,6 @@ const usePropUrl = (instanceId, name) => {
 const getInstanceIdFromComponentProps = (props) => {
   return props[import_webstudio_component.idAttribute];
 };
+const getIndexWithinAncestorFromComponentProps = (props) => {
+  return props[import_webstudio_component.indexAttribute];
+};

package/lib/cjs/tree/create-elements-tree.js

@@ -23,7 +23,6 @@ __export(create_elements_tree_exports, {
 module.exports = __toCommonJS(create_elements_tree_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_react2 = require("@remix-run/react");
 var import_context = require("../context");
 const createElementsTree = ({
   renderer,
@@ -37,8 +36,10 @@ const createElementsTree = ({
   dataSourceValuesStore,
   executeEffectfulExpression,
   onDataSourceUpdate,
+  indexesWithinAncestors,
   Component,
-  components
+  components,
+  scripts
 }) => {
   const rootInstance = instances.get(rootInstanceId);
   if (rootInstance === void 0) {
@@ -59,8 +60,7 @@ const createElementsTree = ({
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.ScrollRestoration, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Scripts, {})
+        scripts
       ] }, "children")
     ],
     components
@@ -76,6 +76,7 @@ const createElementsTree = ({
         renderer,
         imageBaseUrl,
         assetBaseUrl,
+        indexesWithinAncestors,
         executeEffectfulExpression,
         setDataSourceValues: onDataSourceUpdate,
         setBoundDataSourceValue: (instanceId, propName, value) => {

package/lib/cjs/tree/root.js

@@ -23,15 +23,18 @@ __export(root_exports, {
 module.exports = __toCommonJS(root_exports);
 var import_react = require("react");
 var import_nanostores = require("nanostores");
+var import_project_build = require("@webstudio-is/project-build");
 var import_create_elements_tree = require("./create-elements-tree");
 var import_webstudio_component = require("./webstudio-component");
 var import_props = require("../props");
 const InstanceRoot = ({
   data,
+  indexesWithinAncestors,
   executeComputingExpressions,
   executeEffectfulExpression,
   Component,
-  components
+  components,
+  scripts
 }) => {
   const dataSourceVariablesStoreRef = (0, import_react.useRef)(void 0);
   if (dataSourceVariablesStoreRef.current === void 0) {
@@ -83,10 +86,12 @@ const InstanceRoot = ({
     ),
     assetsStore: (0, import_nanostores.atom)(new Map(data.assets.map((asset) => [asset.id, asset]))),
     pagesStore: (0, import_nanostores.atom)(new Map(data.pages.map((page) => [page.id, page]))),
+    indexesWithinAncestors,
     executeEffectfulExpression,
     dataSourceValuesStore,
     onDataSourceUpdate,
     Component: Component ?? import_webstudio_component.WebstudioComponent,
-    components
+    components,
+    scripts
   });
 };

package/lib/cjs/tree/webstudio-component.js

@@ -22,8 +22,11 @@ __export(webstudio_component_exports, {
   collapsedAttribute: () => collapsedAttribute,
   componentAttribute: () => componentAttribute,
   idAttribute: () => idAttribute,
+  indexAttribute: () => indexAttribute,
   renderWebstudioComponentChildren: () => renderWebstudioComponentChildren,
-  showAttribute: () => showAttribute
+  selectorIdAttribute: () => selectorIdAttribute,
+  showAttribute: () => showAttribute,
+  splitPropsWithWebstudioAttributes: () => splitPropsWithWebstudioAttributes
 });
 module.exports = __toCommonJS(webstudio_component_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -44,13 +47,7 @@ const renderWebstudioComponentChildren = (children) => {
     return typeof child === "string" ? renderText(child) : child;
   });
 };
-const WebstudioComponent = ({
-  instance,
-  instanceSelector,
-  children,
-  components,
-  ...rest
-}) => {
+const WebstudioComponent = (0, import_react.forwardRef)(({ instance, instanceSelector, children, components, ...rest }, ref) => {
   const { [showAttribute]: show = true, ...instanceProps } = (0, import_props.useInstanceProps)(
     instance.id
   );
@@ -67,9 +64,28 @@ const WebstudioComponent = ({
   if (Component === void 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, children: renderWebstudioComponentChildren(children) });
-};
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, ref, children: renderWebstudioComponentChildren(children) });
+});
 const idAttribute = "data-ws-id";
+const selectorIdAttribute = "data-ws-selector";
 const componentAttribute = "data-ws-component";
 const showAttribute = "data-ws-show";
+const indexAttribute = "data-ws-index";
 const collapsedAttribute = "data-ws-collapsed";
+const splitPropsWithWebstudioAttributes = ({
+  [idAttribute]: idAttributeValue,
+  [componentAttribute]: componentAttributeValue,
+  [showAttribute]: showAttributeValue,
+  [collapsedAttribute]: collapsedAttributeValue,
+  [selectorIdAttribute]: parentIdAttributeValue,
+  ...props
+}) => [
+  {
+    [idAttribute]: idAttributeValue,
+    [componentAttribute]: componentAttributeValue,
+    [showAttribute]: showAttributeValue,
+    [collapsedAttribute]: collapsedAttributeValue,
+    [selectorIdAttribute]: parentIdAttributeValue
+  },
+  props
+];

package/lib/component-renderer.js

@@ -0,0 +1,111 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { getStyleDeclKey } from "@webstudio-is/project-build";
+import { generateDataFromEmbedTemplate } from "./embed-template";
+import { generateCssText } from "./css";
+import { InstanceRoot, WebstudioComponent } from "./tree";
+import {
+  decodeVariablesMap,
+  encodeDataSourceVariable,
+  encodeVariablesMap,
+  executeComputingExpressions,
+  executeEffectfulExpression
+} from "./expression";
+import { getIndexesWithinAncestors } from "./instance-utils";
+const renderComponentTemplate = ({
+  name,
+  metas: metasRecord,
+  components
+}) => {
+  const metas = new Map(Object.entries(metasRecord));
+  const data = generateDataFromEmbedTemplate(
+    metas.get(name)?.template ?? [
+      {
+        type: "instance",
+        component: name,
+        children: []
+      }
+    ],
+    "base"
+  );
+  const instances = [
+    [
+      "root",
+      {
+        type: "instance",
+        id: "root",
+        component: "Box",
+        children: data.children
+      }
+    ],
+    ...data.instances.map(
+      (instance) => [instance.id, instance]
+    )
+  ];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: generateCssText(
+      {
+        assets: [],
+        breakpoints: [["base", { id: "base", label: "base" }]],
+        styles: data.styles.map((item) => [getStyleDeclKey(item), item]),
+        styleSourceSelections: data.styleSourceSelections.map((item) => [
+          item.instanceId,
+          item
+        ]),
+        componentMetas: metas
+      },
+      { assetBaseUrl: "/" }
+    ) }),
+    /* @__PURE__ */ jsx(
+      InstanceRoot,
+      {
+        data: {
+          page: {
+            path: "",
+            id: "",
+            name: "",
+            title: "",
+            meta: {},
+            rootInstanceId: "root"
+          },
+          pages: [],
+          assets: [],
+          build: {
+            instances,
+            props: data.props.map((prop) => [prop.id, prop]),
+            dataSources: data.dataSources.map((dataSource) => [
+              dataSource.id,
+              dataSource
+            ])
+          }
+        },
+        executeComputingExpressions: (values) => {
+          const expressions = /* @__PURE__ */ new Map();
+          for (const dataSource of data.dataSources) {
+            const name2 = encodeDataSourceVariable(dataSource.id);
+            if (dataSource.type === "expression") {
+              expressions.set(name2, dataSource.code);
+            }
+          }
+          return decodeVariablesMap(
+            executeComputingExpressions(expressions, encodeVariablesMap(values))
+          );
+        },
+        executeEffectfulExpression: (code, args, values) => {
+          return decodeVariablesMap(
+            executeEffectfulExpression(code, args, encodeVariablesMap(values))
+          );
+        },
+        Component: WebstudioComponent,
+        components: new Map(Object.entries(components)),
+        indexesWithinAncestors: getIndexesWithinAncestors(
+          metas,
+          new Map(instances),
+          ["root"]
+        )
+      }
+    )
+  ] });
+};
+export {
+  renderComponentTemplate
+};

package/lib/components/component-meta.js

@@ -11,6 +11,7 @@ const componentCategories = [
   "text",
   "media",
   "forms",
+  "radix",
   "hidden"
 ];
 const stateCategories = ["states", "component-states"];
@@ -35,7 +36,16 @@ const WsComponentMeta = z.object({
   type: z.enum(["container", "control", "embed", "rich-text-child"]),
   requiredAncestors: z.optional(z.array(z.string())),
   invalidAncestors: z.optional(z.array(z.string())),
+  // when this field is specified component receives
+  // prop with index of same components withiin specified ancestor
+  // important to automatically enumerate collections without
+  // naming every item manually
+  indexWithinAncestor: z.optional(z.string()),
   stylable: z.optional(z.boolean()),
+  // specifies whether the instance can be deleted,
+  // copied or dragged out of its parent instance
+  // true by default
+  detachable: z.optional(z.boolean()),
   label: z.string(),
   description: z.string().optional(),
   icon: z.string(),

package/lib/components/components-utils.js

@@ -0,0 +1 @@
+import { componentAttribute, idAttribute } from "../tree";

package/lib/context.js

@@ -15,7 +15,8 @@ const ReactSdkContext = createContext({
   },
   setBoundDataSourceValue: () => {
     throw Error("React SDK setBoundDataSourceValue is not implemented");
-  }
+  },
+  indexesWithinAncestors: /* @__PURE__ */ new Map()
 });
 export {
   ReactSdkContext

package/lib/css/index.js

@@ -1,4 +1,3 @@
-export * from "./get-browser-style";
 export * from "./global-rules";
 export * from "./style-rules";
 export * from "./css";

package/lib/css/style-rules.js

@@ -49,7 +49,7 @@ const getPresetStyleRules = (component, presetStyle) => {
   const presetStyleRules = /* @__PURE__ */ new Map();
   for (const [tag, styles] of Object.entries(presetStyle)) {
     for (const styleDecl of styles) {
-      const selector = `${tag}:where([${componentAttribute}=${component}])${styleDecl.state ?? ""}`;
+      const selector = `${tag}:where([${componentAttribute}="${component}"])${styleDecl.state ?? ""}`;
       let rule = presetStyleRules.get(selector);
       if (rule === void 0) {
         rule = {};

package/lib/embed-template.js

@@ -1,46 +1,59 @@
 import { z } from "zod";
 import { nanoid } from "nanoid";
+import {
+  Instance,
+  PropsList,
+  StyleSourceSelectionsList,
+  StyleSourcesList,
+  StylesList,
+  Breakpoint,
+  DataSource
+} from "@webstudio-is/project-build";
 import { StyleValue } from "@webstudio-is/css-data";
 import { encodeDataSourceVariable, validateExpression } from "./expression";
 const EmbedTemplateText = z.object({
   type: z.literal("text"),
   value: z.string()
 });
-const DataSourceVariableRef = z.object({
-  type: z.literal("variable"),
-  name: z.string()
-});
-const DataSourceRef = z.union([
-  DataSourceVariableRef,
+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"),
-    name: z.string(),
     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(),
-    dataSourceRef: z.optional(DataSourceRef),
     value: z.number()
   }),
   z.object({
     type: z.literal("string"),
     name: z.string(),
-    dataSourceRef: z.optional(DataSourceRef),
     value: z.string()
   }),
   z.object({
     type: z.literal("boolean"),
     name: z.string(),
-    dataSourceRef: z.optional(DataSourceRef),
     value: z.boolean()
   }),
   z.object({
     type: z.literal("string[]"),
     name: z.string(),
-    dataSourceRef: z.optional(DataSourceRef),
     value: z.array(z.string())
   }),
   z.object({
@@ -49,6 +62,7 @@ const EmbedTemplateProp = z.union([
     value: z.array(
       z.object({
         type: z.literal("execute"),
+        args: z.optional(z.array(z.string())),
         code: z.string()
       })
     )
@@ -66,6 +80,7 @@ const EmbedTemplateInstance = z.lazy(
     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)),
     styles: z.optional(z.array(EmbedTemplateStyleDecl)),
     children: WsEmbedTemplate
@@ -74,11 +89,58 @@ const EmbedTemplateInstance = z.lazy(
 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, 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();
@@ -89,12 +151,17 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
               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);
                     }
@@ -104,51 +171,21 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceB
             });
             continue;
           }
-          if (prop.dataSourceRef === void 0) {
-            props.push({ id: propId, instanceId, ...prop });
-            continue;
-          }
-          let dataSource = dataSourceByRef.get(prop.dataSourceRef.name);
-          if (dataSource === void 0) {
-            const id = nanoid();
-            const { name: propName, dataSourceRef, ...rest } = prop;
-            if (dataSourceRef.type === "variable") {
-              dataSource = {
-                type: "variable",
-                id,
-                // the first instance where data source is appeared in becomes its scope
-                scopeInstanceId: instanceId,
-                name: dataSourceRef.name,
-                value: rest
-              };
-              dataSourceByRef.set(dataSourceRef.name, dataSource);
-            } else if (dataSourceRef.type === "expression") {
-              dataSource = {
-                type: "expression",
-                id,
-                scopeInstanceId: instanceId,
-                name: dataSourceRef.name,
-                // replace all references with variable names
-                code: validateExpression(dataSourceRef.code, {
-                  transformIdentifier: (ref) => {
-                    const id2 = dataSourceByRef.get(ref)?.id ?? ref;
-                    return encodeDataSourceVariable(id2);
-                  }
-                })
-              };
-              dataSourceByRef.set(dataSourceRef.name, dataSource);
-            } else {
-              dataSourceRef;
-              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,
-            type: "dataSource",
-            name: prop.name,
-            value: dataSource.id
-          });
+          props.push({ id: propId, instanceId, ...prop });
         }
       }
       if (item.styles) {
@@ -230,9 +267,55 @@ const generateDataFromEmbedTemplate = (treeTemplate, defaultBreakpointId) => {
     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");
+  });
+};
+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;
+};
 export {
   EmbedTemplateInstance,
   EmbedTemplateStyleDecl,
   WsEmbedTemplate,
-  generateDataFromEmbedTemplate
+  generateDataFromEmbedTemplate,
+  namespaceMeta
 };