@webstudio-is/react-sdk 0.81.0 → 0.83.0

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

@@ -218,13 +218,16 @@ declare const EmbedTemplateProp: z.ZodUnion<[z.ZodObject<{
     name: z.ZodString;
     value: z.ZodArray<z.ZodObject<{
         type: z.ZodLiteral<"execute">;
+        args: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
         code: z.ZodString;
     }, "strip", z.ZodTypeAny, {
         code: string;
         type: "execute";
+        args?: string[] | undefined;
     }, {
         code: string;
         type: "execute";
+        args?: string[] | undefined;
     }>, "many">;
 }, "strip", z.ZodTypeAny, {
     name: string;
@@ -232,6 +235,7 @@ declare const EmbedTemplateProp: z.ZodUnion<[z.ZodObject<{
     value: {
         code: string;
         type: "execute";
+        args?: string[] | undefined;
     }[];
 }, {
     name: string;
@@ -239,6 +243,7 @@ declare const EmbedTemplateProp: z.ZodUnion<[z.ZodObject<{
     value: {
         code: string;
         type: "execute";
+        args?: string[] | undefined;
     }[];
 }>]>;
 type EmbedTemplateProp = z.infer<typeof EmbedTemplateProp>;
@@ -2390,6 +2395,7 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         value: {
             code: string;
             type: "execute";
+            args: string[];
         }[];
         id: string;
         instanceId: string;
@@ -2645,8 +2651,15 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         styleSourceId: string;
         breakpointId: string;
         state?: string | undefined;
-        property: "filter" | "float" | "fontFamily" | "width" | "height" | "clip" | "top" | "right" | `--${string}` | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationTimeline" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "printColorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex";
+        property: "filter" | "float" | "fontFamily" | "width" | "height" | "clip" | "top" | "right" | `--${string}` | "WebkitFontSmoothing" | "MozOsxFontSmoothing" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationTimeline" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "printColorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex";
     }[];
 };
 export type EmbedTemplateData = ReturnType<typeof generateDataFromEmbedTemplate>;
+export declare const namespaceEmbedTemplateComponents: (template: ({
+    type: "text";
+    value: string;
+} | EmbedTemplateInstance)[], namespace: string, components: Set<EmbedTemplateInstance["component"]>) => ({
+    type: "text";
+    value: string;
+} | EmbedTemplateInstance)[];
 export {};

package/lib/types/expression.d.ts

@@ -9,8 +9,9 @@ export declare const validateExpression: (code: string, options?: {
  */
 export declare const generateComputingExpressions: (expressions: Map<string, string>, allowedVariables: Set<string>) => string;
 export declare const executeComputingExpressions: (expressions: Map<string, string>, variables: Map<string, unknown>) => Map<string, unknown>;
-export declare const generateEffectfulExpression: (code: string, allowedVariables: Set<string>) => string;
-export declare const executeEffectfulExpression: (code: string, variables: Map<string, unknown>) => Map<string, unknown>;
+export declare const generateEffectfulExpression: (code: string, args: Set<string>, allowedVariables: Set<string>) => string;
+export declare const executeEffectfulExpression: (code: string, args: Map<string, unknown>, variables: Map<string, unknown>) => Map<string, unknown>;
+export declare const computeExpressionsDependencies: (expressions: Map<string, string>) => Map<string, Set<string>>;
 type Values = Map<string, unknown>;
 export declare const encodeDataSourceVariable: (id: string) => string;
 export declare const encodeVariablesMap: (values: Values) => Values;

package/lib/types/index.d.ts

@@ -7,4 +7,4 @@ export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, t
 export * from "./embed-template";
 export { useInstanceProps, usePropUrl, usePropAsset, getInstanceIdFromComponentProps, } from "./props";
 export { type Params, ReactSdkContext } from "./context";
-export { validateExpression, generateComputingExpressions, executeComputingExpressions, generateEffectfulExpression, executeEffectfulExpression, encodeDataSourceVariable, encodeVariablesMap, decodeDataSourceVariable, decodeVariablesMap, } from "./expression";
+export { validateExpression, generateComputingExpressions, executeComputingExpressions, generateEffectfulExpression, executeEffectfulExpression, computeExpressionsDependencies, encodeDataSourceVariable, encodeVariablesMap, decodeDataSourceVariable, decodeVariablesMap, } from "./expression";

package/lib/types/props.d.ts

@@ -63,6 +63,7 @@ export declare const getPropsByInstanceId: (props: Map<string, {
     value: {
         code: string;
         type: "execute";
+        args: string[];
     }[];
     id: string;
     instanceId: string;

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

@@ -1,11 +1,11 @@
-import { type ComponentProps } from "react";
+import { type ForwardRefExoticComponent, type RefAttributes } from "react";
 import type { ReadableAtom } from "nanostores";
 import type { Assets } from "@webstudio-is/asset-uploader";
 import type { Instance, Instances } from "@webstudio-is/project-build";
 import type { Components } from "../components/components-utils";
 import { type Params, type DataSourceValues } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
-import type { WebstudioComponent } from "./webstudio-component";
+import type { WebstudioComponentProps } from "./webstudio-component";
 export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, dataSourceValuesStore, executeEffectfulExpression, onDataSourceUpdate, Component, components, }: Params & {
     instances: Map<string, {
         type: "instance";
@@ -24,9 +24,9 @@ export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;
-    executeEffectfulExpression: (expression: string, values: DataSourceValues) => DataSourceValues;
+    executeEffectfulExpression: (expression: string, args: DataSourceValues, values: DataSourceValues) => DataSourceValues;
     dataSourceValuesStore: ReadableAtom<DataSourceValues>;
     onDataSourceUpdate: (newValues: DataSourceValues) => void;
-    Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
+    Component: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;
     components: Components;
-}) => JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,7 +1,7 @@
-import { type ComponentProps } from "react";
+import { type ForwardRefExoticComponent, type RefAttributes } from "react";
 import { type Build, type Page } from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
-import { WebstudioComponent } from "./webstudio-component";
+import { type WebstudioComponentProps } from "./webstudio-component";
 import type { Components } from "../components/components-utils";
 import type { Params, DataSourceValues } from "../context";
 export type Data = {
@@ -17,8 +17,8 @@ export type RootPropsData = Omit<Data, "build"> & {
 type RootProps = {
     data: RootPropsData;
     executeComputingExpressions: (values: DataSourceValues) => DataSourceValues;
-    executeEffectfulExpression: (expression: string, values: DataSourceValues) => DataSourceValues;
-    Component?: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
+    executeEffectfulExpression: (expression: string, args: DataSourceValues, values: DataSourceValues) => DataSourceValues;
+    Component?: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;
     components: Components;
 };
 export declare const InstanceRoot: ({ data, executeComputingExpressions, executeEffectfulExpression, Component, components, }: RootProps) => JSX.Element | null;

package/lib/types/tree/webstudio-component.d.ts

@@ -2,15 +2,23 @@
 import type { Instance } from "@webstudio-is/project-build";
 import type { Components } from "../components/components-utils";
 export declare const renderWebstudioComponentChildren: (children: Array<JSX.Element | string> | undefined) => Array<JSX.Element | string | Array<JSX.Element | string>> | undefined;
-type WebstudioComponentProps = {
+export type WebstudioComponentProps = {
     instance: Instance;
     instanceSelector: Instance["id"][];
     children: Array<JSX.Element | string>;
     components: Components;
 };
-export declare const WebstudioComponent: ({ instance, instanceSelector, children, components, ...rest }: WebstudioComponentProps) => JSX.Element;
-export declare const idAttribute = "data-ws-id";
-export declare const componentAttribute = "data-ws-component";
-export declare const showAttribute = "data-ws-show";
-export declare const collapsedAttribute = "data-ws-collapsed";
-export {};
+export declare const WebstudioComponent: import("react").ForwardRefExoticComponent<WebstudioComponentProps & import("react").RefAttributes<HTMLElement>>;
+export declare const idAttribute: "data-ws-id";
+export declare const selectorIdAttribute: "data-ws-selector";
+export declare const componentAttribute: "data-ws-component";
+export declare const showAttribute: "data-ws-show";
+export declare const collapsedAttribute: "data-ws-collapsed";
+export type WebstudioAttributes = {
+    [idAttribute]?: string | undefined;
+    [selectorIdAttribute]?: string | undefined;
+    [componentAttribute]?: string | undefined;
+    [showAttribute]?: string | undefined;
+    [collapsedAttribute]?: string | undefined;
+};
+export declare const splitPropsWithWebstudioAttributes: <P extends WebstudioAttributes>({ [idAttribute]: idAttributeValue, [componentAttribute]: componentAttributeValue, [showAttribute]: showAttributeValue, [collapsedAttribute]: collapsedAttributeValue, [selectorIdAttribute]: parentIdAttributeValue, ...props }: P) => [WebstudioAttributes, Omit<P, keyof WebstudioAttributes>];

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.81.0",
+  "version": "0.83.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "devDependencies": {
-    "@jest/globals": "^29.6.1",
+    "@jest/globals": "^29.6.2",
     "@remix-run/react": "^1.18.1",
-    "@types/react": "^18.0.35",
-    "@types/react-dom": "^18.0.11",
-    "jest": "^29.6.1",
+    "@types/react": "^18.2.16",
+    "@types/react-dom": "^18.2.7",
+    "jest": "^29.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "type-fest": "^3.7.1",
-    "typescript": "5.1.3",
+    "typescript": "5.1.6",
     "zod": "^3.21.4",
     "@webstudio-is/jest-config": "^1.0.6",
     "@webstudio-is/scripts": "^0.0.0",
@@ -29,18 +29,17 @@
   "dependencies": {
     "@jsep-plugin/assignment": "^1.2.1",
     "@nanostores/react": "^0.7.1",
-    "detect-font": "^0.1.5",
     "html-tags": "^3.3.1",
     "jsep": "^1.3.8",
     "nanoevents": "^8.0.0",
     "nanoid": "^4.0.2",
     "nanostores": "^0.9.3",
-    "@webstudio-is/asset-uploader": "^0.81.0",
-    "@webstudio-is/css-data": "^0.81.0",
-    "@webstudio-is/css-engine": "^0.81.0",
-    "@webstudio-is/fonts": "^0.81.0",
-    "@webstudio-is/generate-arg-types": "^0.81.0",
-    "@webstudio-is/project-build": "^0.81.0"
+    "@webstudio-is/asset-uploader": "^0.83.0",
+    "@webstudio-is/css-data": "^0.83.0",
+    "@webstudio-is/css-engine": "^0.83.0",
+    "@webstudio-is/fonts": "^0.83.0",
+    "@webstudio-is/generate-arg-types": "^0.83.0",
+    "@webstudio-is/project-build": "^0.83.0"
   },
   "exports": {
     ".": {
@@ -61,7 +60,7 @@
     "src/*",
     "!*.test.*"
   ],
-  "license": "MIT",
+  "license": "AGPL-3.0-or-later",
   "private": false,
   "sideEffects": false,
   "scripts": {
@@ -69,7 +68,7 @@
     "build": "build-package",
     "build:args": "generate-arg-types './src/components/*.tsx ./src/app/custom-components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
     "dts": "tsc --project tsconfig.dts.json",
-    "typecheck": "tsc --noEmit --emitDeclarationOnly false",
+    "typecheck": "tsc",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
     "checks": "pnpm typecheck && pnpm test"
   }

package/src/components/component-meta.ts

@@ -22,6 +22,7 @@ export const componentCategories = [
   "text",
   "media",
   "forms",
+  "radix",
   "hidden",
 ] as const;
 
@@ -53,6 +54,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/src/context.tsx

@@ -41,6 +41,7 @@ export const ReactSdkContext = createContext<
     dataSourceValuesStore: ReadableAtom<DataSourceValues>;
     executeEffectfulExpression: (
       expression: string,
+      args: DataSourceValues,
       values: DataSourceValues
     ) => DataSourceValues;
     setDataSourceValues: (newValues: DataSourceValues) => void;

package/src/css/index.ts

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

package/src/embed-template.test.ts

@@ -1,5 +1,8 @@
 import { expect, test } from "@jest/globals";
-import { generateDataFromEmbedTemplate } from "./embed-template";
+import {
+  generateDataFromEmbedTemplate,
+  namespaceEmbedTemplateComponents,
+} from "./embed-template";
 import { showAttribute } from "./tree";
 
 const expectString = expect.any(String);
@@ -407,6 +410,17 @@ test("generate data for embedding from action props", () => {
                   name: "onClick",
                   value: [{ type: "execute", code: `boxState = 'success'` }],
                 },
+                {
+                  type: "action",
+                  name: "onChange",
+                  value: [
+                    {
+                      type: "execute",
+                      args: ["value"],
+                      code: `boxState = value`,
+                    },
+                  ],
+                },
               ],
               children: [],
             },
@@ -442,10 +456,24 @@ test("generate data for embedding from action props", () => {
         value: [
           {
             type: "execute",
+            args: [],
             code: expect.stringMatching(/\$ws\$dataSource\$\w+ = 'success'/),
           },
         ],
       },
+      {
+        id: expectString,
+        instanceId: expectString,
+        type: "action",
+        name: "onChange",
+        value: [
+          {
+            type: "execute",
+            args: ["value"],
+            code: expect.stringMatching(/\$ws\$dataSource\$\w+ = value/),
+          },
+        ],
+      },
     ],
     dataSources: [
       {
@@ -464,3 +492,51 @@ test("generate data for embedding from action props", () => {
     styles: [],
   });
 });
+
+test("add namespace to selected components in embed template", () => {
+  expect(
+    namespaceEmbedTemplateComponents(
+      [
+        {
+          type: "instance",
+          component: "Tooltip",
+          children: [
+            { type: "text", value: "Some text" },
+            {
+              type: "instance",
+              component: "Box",
+              children: [
+                {
+                  type: "instance",
+                  component: "Button",
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      "my-namespace",
+      new Set(["Tooltip", "Button"])
+    )
+  ).toEqual([
+    {
+      type: "instance",
+      component: "my-namespace:Tooltip",
+      children: [
+        { type: "text", value: "Some text" },
+        {
+          type: "instance",
+          component: "Box",
+          children: [
+            {
+              type: "instance",
+              component: "my-namespace:Button",
+              children: [],
+            },
+          ],
+        },
+      ],
+    },
+  ]);
+});

package/src/embed-template.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { nanoid } from "nanoid";
 import {
-  type Instance,
+  Instance,
   type InstancesList,
   PropsList,
   StyleSourceSelectionsList,
@@ -66,6 +66,7 @@ const EmbedTemplateProp = z.union([
     value: z.array(
       z.object({
         type: z.literal("execute"),
+        args: z.optional(z.array(z.string())),
         code: z.string(),
       })
     ),
@@ -144,12 +145,18 @@ const createInstancesFromTemplate = (
               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) => {
+                      // bypass arguments without changes
+                      if (args.includes(ref)) {
+                        return ref;
+                      }
                       const id = dataSourceByRef.get(ref)?.id ?? ref;
                       return encodeDataSourceVariable(id);
                     },
@@ -301,3 +308,29 @@ export const generateDataFromEmbedTemplate = (
 export type EmbedTemplateData = ReturnType<
   typeof generateDataFromEmbedTemplate
 >;
+
+export const namespaceEmbedTemplateComponents = (
+  template: WsEmbedTemplate,
+  namespace: string,
+  components: Set<EmbedTemplateInstance["component"]>
+): WsEmbedTemplate => {
+  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 satisfies never;
+    throw Error("Impossible case");
+  });
+};

package/src/expression.test.ts

@@ -4,6 +4,7 @@ import {
   encodeDataSourceVariable,
   executeComputingExpressions,
   executeEffectfulExpression,
+  computeExpressionsDependencies,
   generateComputingExpressions,
   generateEffectfulExpression,
   validateExpression,
@@ -186,7 +187,11 @@ test("encode/decode variable names", () => {
 
 test("generate effectful expression", () => {
   expect(
-    generateEffectfulExpression(`var0 = var0 + var1`, new Set(["var0", "var1"]))
+    generateEffectfulExpression(
+      `var0 = var0 + var1`,
+      new Set(),
+      new Set(["var0", "var1"])
+    )
   ).toMatchInlineSnapshot(`
     "let var0 = _variables.get('var0');
     let var1 = _variables.get('var1');
@@ -197,7 +202,11 @@ test("generate effectful expression", () => {
   `);
 
   expect(
-    generateEffectfulExpression(`var0 = var1 + 1`, new Set(["var0", "var1"]))
+    generateEffectfulExpression(
+      `var0 = var1 + 1`,
+      new Set(),
+      new Set(["var0", "var1"])
+    )
   ).toMatchInlineSnapshot(`
     "let var1 = _variables.get('var1');
     let var0;
@@ -212,6 +221,7 @@ test("add only used variables in effectful expression", () => {
   expect(
     generateEffectfulExpression(
       `var0 = var1 + 1`,
+      new Set(),
       new Set(["var0", "var1", "var2"])
     )
   ).toMatchInlineSnapshot(`
@@ -224,10 +234,34 @@ test("add only used variables in effectful expression", () => {
   `);
 });
 
-test("forbid not allowed variables in effectful expression", () => {
+test("support effectful expression arguments", () => {
+  expect(
+    generateEffectfulExpression(
+      `var0 = arg0 + 1`,
+      new Set(["arg0"]),
+      new Set(["var0"])
+    )
+  ).toMatchInlineSnapshot(`
+    "let arg0 = _args.get('arg0');
+    let var0;
+    var0 = arg0 + 1;
+    return new Map([
+      ['var0', var0],
+    ]);"
+  `);
+});
+
+test("forbid not allowed variables or arguments in effectful expression", () => {
   expect(() => {
-    generateEffectfulExpression(`var0 = var0 + var1`, new Set(["var0"]));
+    generateEffectfulExpression(
+      `var0 = var0 + var1`,
+      new Set(),
+      new Set(["var0"])
+    );
   }).toThrowError(/Unknown dependency "var1"/);
+  expect(() => {
+    generateEffectfulExpression(`var0 = arg0`, new Set(), new Set(["var0"]));
+  }).toThrowError(/Unknown dependency "arg0"/);
 });
 
 test("execute effectful expression", () => {
@@ -235,7 +269,41 @@ test("execute effectful expression", () => {
     ["var0", 2],
     ["var1", 3],
   ]);
-  expect(executeEffectfulExpression(`var0 = var0 + var1`, variables)).toEqual(
-    new Map([["var0", 5]])
+  expect(
+    executeEffectfulExpression(`var0 = var0 + var1`, new Map(), variables)
+  ).toEqual(new Map([["var0", 5]]));
+
+  expect(
+    executeEffectfulExpression(`arg0 = 5`, new Map([["arg0", 0]]), new Map())
+  ).toEqual(new Map());
+});
+
+test("compute expressions dependencies", () => {
+  const expressions = new Map([
+    ["exp1", `var1`],
+    ["exp2", `exp1 + exp1`],
+    ["exp3", `exp1 + exp2`],
+    ["exp4", `var1 + exp1`],
+  ]);
+  expect(computeExpressionsDependencies(expressions)).toEqual(
+    new Map([
+      ["exp4", new Set(["var1", "exp1"])],
+      ["exp3", new Set(["var1", "exp1", "exp2"])],
+      ["exp2", new Set(["var1", "exp1"])],
+      ["exp1", new Set(["var1"])],
+    ])
+  );
+});
+
+test("handle cyclic dependencies", () => {
+  const expressions = new Map([
+    ["exp1", `exp2 + var1`],
+    ["exp2", `exp1 + var1`],
+  ]);
+  expect(computeExpressionsDependencies(expressions)).toEqual(
+    new Map([
+      ["exp2", new Set(["var1", "exp1", "exp2"])],
+      ["exp1", new Set(["var1", "exp1", "exp2"])],
+    ])
   );
 });