@webstudio-is/react-sdk 0.81.0 → 0.83.0

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

@@ -37,6 +37,7 @@ const componentCategories = [
   "text",
   "media",
   "forms",
+  "radix",
   "hidden"
 ];
 const stateCategories = ["states", "component-states"];
@@ -62,6 +63,10 @@ const WsComponentMeta = import_zod.z.object({
   requiredAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
   invalidAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
   stylable: import_zod.z.optional(import_zod.z.boolean()),
+  // specifies whether the instance can be deleted,
+  // copied or dragged out of its parent instance
+  // true by default
+  detachable: import_zod.z.optional(import_zod.z.boolean()),
   label: import_zod.z.string(),
   description: import_zod.z.string().optional(),
   icon: import_zod.z.string(),

package/lib/cjs/components/components-utils.js

@@ -14,3 +14,4 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var components_utils_exports = {};
 module.exports = __toCommonJS(components_utils_exports);
+var import_tree = require("../tree");

package/lib/cjs/css/index.js

@@ -15,7 +15,6 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var css_exports = {};
 module.exports = __toCommonJS(css_exports);
-__reExport(css_exports, require("./get-browser-style"), module.exports);
 __reExport(css_exports, require("./global-rules"), module.exports);
 __reExport(css_exports, require("./style-rules"), module.exports);
 __reExport(css_exports, require("./css"), module.exports);

package/lib/cjs/embed-template.js

@@ -21,11 +21,13 @@ __export(embed_template_exports, {
   EmbedTemplateInstance: () => EmbedTemplateInstance,
   EmbedTemplateStyleDecl: () => EmbedTemplateStyleDecl,
   WsEmbedTemplate: () => WsEmbedTemplate,
-  generateDataFromEmbedTemplate: () => generateDataFromEmbedTemplate
+  generateDataFromEmbedTemplate: () => generateDataFromEmbedTemplate,
+  namespaceEmbedTemplateComponents: () => namespaceEmbedTemplateComponents
 });
 module.exports = __toCommonJS(embed_template_exports);
 var import_zod = require("zod");
 var import_nanoid = require("nanoid");
+var import_project_build = require("@webstudio-is/project-build");
 var import_css_data = require("@webstudio-is/css-data");
 var import_expression = require("./expression");
 const EmbedTemplateText = import_zod.z.object({
@@ -75,6 +77,7 @@ const EmbedTemplateProp = import_zod.z.union([
     value: import_zod.z.array(
       import_zod.z.object({
         type: import_zod.z.literal("execute"),
+        args: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
         code: import_zod.z.string()
       })
     )
@@ -115,12 +118,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: (0, import_expression.validateExpression)(value.code, {
                     effectful: true,
                     transformIdentifier: (ref) => {
+                      if (args.includes(ref)) {
+                        return ref;
+                      }
                       const id = dataSourceByRef.get(ref)?.id ?? ref;
                       return (0, import_expression.encodeDataSourceVariable)(id);
                     }
@@ -256,3 +264,24 @@ 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");
+  });
+};

package/lib/cjs/expression.js

@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var expression_exports = {};
 __export(expression_exports, {
+  computeExpressionsDependencies: () => computeExpressionsDependencies,
   decodeDataSourceVariable: () => decodeDataSourceVariable,
   decodeVariablesMap: () => decodeVariablesMap,
   encodeDataSourceVariable: () => encodeDataSourceVariable,
@@ -249,12 +250,15 @@ const executeComputingExpressions = (expressions, variables) => {
   const values = executeFn(variables);
   return values;
 };
-const generateEffectfulExpression = (code, allowedVariables) => {
+const generateEffectfulExpression = (code, args, allowedVariables) => {
   const inputVariables = /* @__PURE__ */ new Set();
   const outputVariables = /* @__PURE__ */ new Set();
   validateExpression(code, {
     effectful: true,
     transformIdentifier: (identifier, assignee) => {
+      if (args.has(identifier)) {
+        return identifier;
+      }
       if (allowedVariables.has(identifier)) {
         if (assignee) {
           outputVariables.add(identifier);
@@ -267,6 +271,10 @@ const generateEffectfulExpression = (code, allowedVariables) => {
     }
   });
   let generatedCode = "";
+  for (const id of args) {
+    generatedCode += `let ${id} = _args.get('${id}');
+`;
+  }
   for (const id of inputVariables) {
     generatedCode += `let ${id} = _variables.get('${id}');
 `;
@@ -288,15 +296,50 @@ const generateEffectfulExpression = (code, allowedVariables) => {
   generatedCode += `]);`;
   return generatedCode;
 };
-const executeEffectfulExpression = (code, variables) => {
+const executeEffectfulExpression = (code, args, variables) => {
   const generatedCode = generateEffectfulExpression(
     code,
+    new Set(args.keys()),
     new Set(variables.keys())
   );
-  const executeFn = new Function("_variables", generatedCode);
-  const values = executeFn(variables);
+  const executeFn = new Function("_variables", "_args", generatedCode);
+  const values = executeFn(variables, args);
   return values;
 };
+const computeExpressionDependencies = (expressions, expressionId, dependencies) => {
+  const depsById = dependencies.get(expressionId);
+  if (depsById) {
+    return depsById;
+  }
+  const parentDeps = /* @__PURE__ */ new Set();
+  const code = expressions.get(expressionId);
+  if (code === void 0) {
+    return parentDeps;
+  }
+  dependencies.set(expressionId, parentDeps);
+  validateExpression(code, {
+    transformIdentifier: (id) => {
+      parentDeps.add(id);
+      const childDeps = computeExpressionDependencies(
+        expressions,
+        id,
+        dependencies
+      );
+      for (const depId of childDeps) {
+        parentDeps.add(depId);
+      }
+      return id;
+    }
+  });
+  return parentDeps;
+};
+const computeExpressionsDependencies = (expressions) => {
+  const dependencies = /* @__PURE__ */ new Map();
+  for (const id of expressions.keys()) {
+    computeExpressionDependencies(expressions, id, dependencies);
+  }
+  return dependencies;
+};
 const dataSourceVariablePrefix = "$ws$dataSource$";
 const encodeDataSourceVariable = (id) => {
   const encoded = id.replaceAll("-", "__DASH__");

package/lib/cjs/index.js

@@ -21,6 +21,7 @@ var src_exports = {};
 __export(src_exports, {
   ReactSdkContext: () => import_context.ReactSdkContext,
   componentCategories: () => import_component_meta.componentCategories,
+  computeExpressionsDependencies: () => import_expression.computeExpressionsDependencies,
   decodeDataSourceVariable: () => import_expression.decodeDataSourceVariable,
   decodeVariablesMap: () => import_expression.decodeVariablesMap,
   defaultStates: () => import_component_meta.defaultStates,

package/lib/cjs/props.js

@@ -73,14 +73,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);

package/lib/cjs/tree/root.js

@@ -23,6 +23,7 @@ __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");

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

@@ -23,7 +23,9 @@ __export(webstudio_component_exports, {
   componentAttribute: () => componentAttribute,
   idAttribute: () => idAttribute,
   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 +46,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 +63,27 @@ 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 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/components/component-meta.js

@@ -11,6 +11,7 @@ const componentCategories = [
   "text",
   "media",
   "forms",
+  "radix",
   "hidden"
 ];
 const stateCategories = ["states", "component-states"];
@@ -36,6 +37,10 @@ const WsComponentMeta = z.object({
   requiredAncestors: z.optional(z.array(z.string())),
   invalidAncestors: z.optional(z.array(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/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/embed-template.js

@@ -1,5 +1,14 @@
 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({
@@ -49,6 +58,7 @@ const EmbedTemplateProp = z.union([
     value: z.array(
       z.object({
         type: z.literal("execute"),
+        args: z.optional(z.array(z.string())),
         code: z.string()
       })
     )
@@ -89,12 +99,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);
                     }
@@ -230,9 +245,31 @@ 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");
+  });
+};
 export {
   EmbedTemplateInstance,
   EmbedTemplateStyleDecl,
   WsEmbedTemplate,
-  generateDataFromEmbedTemplate
+  generateDataFromEmbedTemplate,
+  namespaceEmbedTemplateComponents
 };

package/lib/expression.js

@@ -208,12 +208,15 @@ const executeComputingExpressions = (expressions, variables) => {
   const values = executeFn(variables);
   return values;
 };
-const generateEffectfulExpression = (code, allowedVariables) => {
+const generateEffectfulExpression = (code, args, allowedVariables) => {
   const inputVariables = /* @__PURE__ */ new Set();
   const outputVariables = /* @__PURE__ */ new Set();
   validateExpression(code, {
     effectful: true,
     transformIdentifier: (identifier, assignee) => {
+      if (args.has(identifier)) {
+        return identifier;
+      }
       if (allowedVariables.has(identifier)) {
         if (assignee) {
           outputVariables.add(identifier);
@@ -226,6 +229,10 @@ const generateEffectfulExpression = (code, allowedVariables) => {
     }
   });
   let generatedCode = "";
+  for (const id of args) {
+    generatedCode += `let ${id} = _args.get('${id}');
+`;
+  }
   for (const id of inputVariables) {
     generatedCode += `let ${id} = _variables.get('${id}');
 `;
@@ -247,15 +254,50 @@ const generateEffectfulExpression = (code, allowedVariables) => {
   generatedCode += `]);`;
   return generatedCode;
 };
-const executeEffectfulExpression = (code, variables) => {
+const executeEffectfulExpression = (code, args, variables) => {
   const generatedCode = generateEffectfulExpression(
     code,
+    new Set(args.keys()),
     new Set(variables.keys())
   );
-  const executeFn = new Function("_variables", generatedCode);
-  const values = executeFn(variables);
+  const executeFn = new Function("_variables", "_args", generatedCode);
+  const values = executeFn(variables, args);
   return values;
 };
+const computeExpressionDependencies = (expressions, expressionId, dependencies) => {
+  const depsById = dependencies.get(expressionId);
+  if (depsById) {
+    return depsById;
+  }
+  const parentDeps = /* @__PURE__ */ new Set();
+  const code = expressions.get(expressionId);
+  if (code === void 0) {
+    return parentDeps;
+  }
+  dependencies.set(expressionId, parentDeps);
+  validateExpression(code, {
+    transformIdentifier: (id) => {
+      parentDeps.add(id);
+      const childDeps = computeExpressionDependencies(
+        expressions,
+        id,
+        dependencies
+      );
+      for (const depId of childDeps) {
+        parentDeps.add(depId);
+      }
+      return id;
+    }
+  });
+  return parentDeps;
+};
+const computeExpressionsDependencies = (expressions) => {
+  const dependencies = /* @__PURE__ */ new Map();
+  for (const id of expressions.keys()) {
+    computeExpressionDependencies(expressions, id, dependencies);
+  }
+  return dependencies;
+};
 const dataSourceVariablePrefix = "$ws$dataSource$";
 const encodeDataSourceVariable = (id) => {
   const encoded = id.replaceAll("-", "__DASH__");
@@ -286,6 +328,7 @@ const decodeVariablesMap = (values) => {
   return decodedValues;
 };
 export {
+  computeExpressionsDependencies,
   decodeDataSourceVariable,
   decodeVariablesMap,
   encodeDataSourceVariable,

package/lib/index.js

@@ -22,6 +22,7 @@ import {
   executeComputingExpressions,
   generateEffectfulExpression,
   executeEffectfulExpression,
+  computeExpressionsDependencies,
   encodeDataSourceVariable,
   encodeVariablesMap,
   decodeDataSourceVariable,
@@ -30,6 +31,7 @@ import {
 export {
   ReactSdkContext,
   componentCategories,
+  computeExpressionsDependencies,
   decodeDataSourceVariable,
   decodeVariablesMap,
   defaultStates,

package/lib/props.js

@@ -45,14 +45,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);

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

@@ -1,5 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
+import {
+  Fragment
+} from "react";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
 import {
   ReactSdkContext

package/lib/tree/root.js

@@ -1,10 +1,16 @@
-import { useRef, useCallback } from "react";
+import {
+  useRef,
+  useCallback
+} from "react";
 import {
   atom,
   computed
 } from "nanostores";
+import {} from "@webstudio-is/project-build";
 import { createElementsTree } from "./create-elements-tree";
-import { WebstudioComponent } from "./webstudio-component";
+import {
+  WebstudioComponent
+} from "./webstudio-component";
 import { getPropsByInstanceId } from "../props";
 const InstanceRoot = ({
   data,

package/lib/tree/webstudio-component.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment2 } from "react";
+import { Fragment as Fragment2, forwardRef } from "react";
 import { useInstanceProps } from "../props";
 const renderText = (text) => {
   const lines = text.split("\n");
@@ -16,13 +16,7 @@ const renderWebstudioComponentChildren = (children) => {
     return typeof child === "string" ? renderText(child) : child;
   });
 };
-const WebstudioComponent = ({
-  instance,
-  instanceSelector,
-  children,
-  components,
-  ...rest
-}) => {
+const WebstudioComponent = forwardRef(({ instance, instanceSelector, children, components, ...rest }, ref) => {
   const { [showAttribute]: show = true, ...instanceProps } = useInstanceProps(
     instance.id
   );
@@ -39,17 +33,37 @@ const WebstudioComponent = ({
   if (Component === void 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
-  return /* @__PURE__ */ jsx(Component, { ...props, children: renderWebstudioComponentChildren(children) });
-};
+  return /* @__PURE__ */ 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 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
+];
 export {
   WebstudioComponent,
   collapsedAttribute,
   componentAttribute,
   idAttribute,
   renderWebstudioComponentChildren,
-  showAttribute
+  selectorIdAttribute,
+  showAttribute,
+  splitPropsWithWebstudioAttributes
 };

package/lib/types/app/root.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { Outlet as DefaultOutlet } from "@remix-run/react";
 /**
  * We are using Outlet prop from index layout when user renders site from a subdomain.
  */
 export declare const Root: ({ Outlet, }: {
     Outlet: typeof DefaultOutlet;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;