@webstudio-is/react-sdk 0.82.0 → 0.84.0

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/hook.js

@@ -0,0 +1,14 @@
+const getClosestInstance = (instanceSelection, currentInstance, closestComponent) => {
+  let matched = false;
+  for (const instance of instanceSelection) {
+    if (currentInstance === instance) {
+      matched = true;
+    }
+    if (matched && instance.component === closestComponent) {
+      return instance;
+    }
+  }
+};
+export {
+  getClosestInstance
+};

package/lib/index.js

@@ -13,7 +13,8 @@ import {
   useInstanceProps,
   usePropUrl,
   usePropAsset,
-  getInstanceIdFromComponentProps
+  getInstanceIdFromComponentProps,
+  getIndexWithinAncestorFromComponentProps
 } from "./props";
 import { ReactSdkContext } from "./context";
 import {
@@ -22,14 +23,19 @@ import {
   executeComputingExpressions,
   generateEffectfulExpression,
   executeEffectfulExpression,
+  computeExpressionsDependencies,
   encodeDataSourceVariable,
   encodeVariablesMap,
   decodeDataSourceVariable,
   decodeVariablesMap
 } from "./expression";
+import { renderComponentTemplate } from "./component-renderer";
+import { getIndexesWithinAncestors } from "./instance-utils";
+export * from "./hook";
 export {
   ReactSdkContext,
   componentCategories,
+  computeExpressionsDependencies,
   decodeDataSourceVariable,
   decodeVariablesMap,
   defaultStates,
@@ -39,7 +45,10 @@ export {
   executeEffectfulExpression,
   generateComputingExpressions,
   generateEffectfulExpression,
+  getIndexWithinAncestorFromComponentProps,
+  getIndexesWithinAncestors,
   getInstanceIdFromComponentProps,
+  renderComponentTemplate,
   stateCategories,
   useInstanceProps,
   usePropAsset,

package/lib/instance-utils.js

@@ -0,0 +1,45 @@
+const getIndexesWithinAncestors = (metas, instances, rootIds) => {
+  const ancestors = /* @__PURE__ */ new Set();
+  for (const meta of metas.values()) {
+    if (meta.indexWithinAncestor !== void 0) {
+      ancestors.add(meta.indexWithinAncestor);
+    }
+  }
+  const indexes = /* @__PURE__ */ new Map();
+  const traverseInstances = (instances2, instanceId, latestIndexes2 = /* @__PURE__ */ new Map()) => {
+    const instance = instances2.get(instanceId);
+    if (instance === void 0) {
+      return;
+    }
+    const meta = metas.get(instance.component);
+    if (meta === void 0) {
+      return;
+    }
+    if (ancestors.has(instance.component)) {
+      latestIndexes2 = new Map(latestIndexes2);
+      latestIndexes2.set(instance.component, /* @__PURE__ */ new Map());
+    }
+    if (meta.indexWithinAncestor !== void 0) {
+      const ancestorIndexes = latestIndexes2.get(meta.indexWithinAncestor);
+      if (ancestorIndexes !== void 0) {
+        let index = ancestorIndexes.get(instance.component) ?? -1;
+        index += 1;
+        ancestorIndexes.set(instance.component, index);
+        indexes.set(instance.id, index);
+      }
+    }
+    for (const child of instance.children) {
+      if (child.type === "id") {
+        traverseInstances(instances2, child.value, latestIndexes2);
+      }
+    }
+  };
+  const latestIndexes = /* @__PURE__ */ new Map();
+  for (const instanceId of rootIds) {
+    traverseInstances(instances, instanceId, latestIndexes);
+  }
+  return indexes;
+};
+export {
+  getIndexesWithinAncestors
+};

package/lib/props.js

@@ -2,7 +2,7 @@ import { useContext, useMemo } from "react";
 import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import { ReactSdkContext } from "./context";
-import { idAttribute } from "./tree/webstudio-component";
+import { idAttribute, indexAttribute } from "./tree/webstudio-component";
 const getPropsByInstanceId = (props) => {
   const propsByInstanceId = /* @__PURE__ */ new Map();
   for (const prop of props.values()) {
@@ -21,13 +21,18 @@ const useInstanceProps = (instanceId) => {
     dataSourceValuesStore,
     executeEffectfulExpression,
     setDataSourceValues,
-    renderer
+    renderer,
+    indexesWithinAncestors
   } = useContext(ReactSdkContext);
+  const index = indexesWithinAncestors.get(instanceId);
   const instancePropsObjectStore = useMemo(() => {
     return computed(
       [propsByInstanceIdStore, dataSourceValuesStore],
       (propsByInstanceId, dataSourceValues) => {
         const instancePropsObject2 = {};
+        if (index !== void 0) {
+          instancePropsObject2[indexAttribute] = index.toString();
+        }
         const instanceProps = propsByInstanceId.get(instanceId);
         if (instanceProps === void 0) {
           return instancePropsObject2;
@@ -45,14 +50,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);
@@ -72,7 +82,8 @@ const useInstanceProps = (instanceId) => {
     instanceId,
     renderer,
     executeEffectfulExpression,
-    setDataSourceValues
+    setDataSourceValues,
+    index
   ]);
   const instancePropsObject = useStore(instancePropsObjectStore);
   return instancePropsObject;
@@ -159,7 +170,11 @@ const usePropUrl = (instanceId, name) => {
 const getInstanceIdFromComponentProps = (props) => {
   return props[idAttribute];
 };
+const getIndexWithinAncestorFromComponentProps = (props) => {
+  return props[indexAttribute];
+};
 export {
+  getIndexWithinAncestorFromComponentProps,
   getInstanceIdFromComponentProps,
   getPropsByInstanceId,
   resolveUrlProp,

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
-import { Scripts, ScrollRestoration } from "@remix-run/react";
+import {
+  Fragment
+} from "react";
 import {
   ReactSdkContext
 } from "../context";
@@ -16,8 +17,10 @@ const createElementsTree = ({
   dataSourceValuesStore,
   executeEffectfulExpression,
   onDataSourceUpdate,
+  indexesWithinAncestors,
   Component,
-  components
+  components,
+  scripts
 }) => {
   const rootInstance = instances.get(rootInstanceId);
   if (rootInstance === void 0) {
@@ -38,8 +41,7 @@ const createElementsTree = ({
     children: [
       /* @__PURE__ */ jsxs(Fragment, { children: [
         children,
-        /* @__PURE__ */ jsx(ScrollRestoration, {}),
-        /* @__PURE__ */ jsx(Scripts, {})
+        scripts
       ] }, "children")
     ],
     components
@@ -55,6 +57,7 @@ const createElementsTree = ({
         renderer,
         imageBaseUrl,
         assetBaseUrl,
+        indexesWithinAncestors,
         executeEffectfulExpression,
         setDataSourceValues: onDataSourceUpdate,
         setBoundDataSourceValue: (instanceId, propName, value) => {

package/lib/tree/root.js

@@ -1,17 +1,25 @@
-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,
+  indexesWithinAncestors,
   executeComputingExpressions,
   executeEffectfulExpression,
   Component,
-  components
+  components,
+  scripts
 }) => {
   const dataSourceVariablesStoreRef = useRef(void 0);
   if (dataSourceVariablesStoreRef.current === void 0) {
@@ -63,11 +71,13 @@ const InstanceRoot = ({
     ),
     assetsStore: atom(new Map(data.assets.map((asset) => [asset.id, asset]))),
     pagesStore: atom(new Map(data.pages.map((page) => [page.id, page]))),
+    indexesWithinAncestors,
     executeEffectfulExpression,
     dataSourceValuesStore,
     onDataSourceUpdate,
     Component: Component ?? WebstudioComponent,
-    components
+    components,
+    scripts
   });
 };
 export {

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,39 @@ 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 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
+];
 export {
   WebstudioComponent,
   collapsedAttribute,
   componentAttribute,
   idAttribute,
+  indexAttribute,
   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;

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

@@ -0,0 +1,8 @@
+import type { ExoticComponent } from "react";
+import type { Instance } from "@webstudio-is/project-build";
+import type { WsComponentMeta } from "./components/component-meta";
+export declare const renderComponentTemplate: ({ name, metas: metasRecord, components, }: {
+    name: Instance["component"];
+    metas: Record<string, WsComponentMeta>;
+    components: Record<string, ExoticComponent<any>>;
+}) => import("react/jsx-runtime").JSX.Element;