@webstudio-is/react-sdk 0.99.1-e132cba.0 → 0.100.0

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

@@ -0,0 +1,324 @@
+import type { Instances, Instance, Props, Scope, DataSources } from "@webstudio-is/sdk";
+import type { IndexesWithinAncestors } from "./instance-utils";
+export declare const generateJsxElement: ({ scope, instance, props, dataSources, indexesWithinAncestors, children, }: {
+    scope: Scope;
+    instance: Instance;
+    props: Map<string, {
+        value: number;
+        type: "number";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "string";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: boolean;
+        type: "boolean";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "asset";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: (string | {
+            instanceId: string;
+            pageId: string;
+        }) & (string | {
+            instanceId: string;
+            pageId: string;
+        } | undefined);
+        type: "page";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string[];
+        type: "string[]";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "dataSource";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: {
+            code: string;
+            type: "execute";
+            args: string[];
+        }[];
+        type: "action";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    }>;
+    dataSources: Map<string, {
+        value: {
+            value: number;
+            type: "number";
+        } | {
+            value: string;
+            type: "string";
+        } | {
+            value: boolean;
+            type: "boolean";
+        } | {
+            value: string[];
+            type: "string[]";
+        };
+        type: "variable";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        code: string;
+        type: "expression";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    }>;
+    indexesWithinAncestors: IndexesWithinAncestors;
+    children: string;
+}) => string;
+/**
+ * Jsx element and children are generated separately to be able
+ * to inject some scripts into Body if necessary
+ */
+export declare const generateJsxChildren: ({ scope, children, instances, props, dataSources, indexesWithinAncestors, }: {
+    scope: Scope;
+    children: Instance["children"];
+    instances: Map<string, {
+        type: "instance";
+        id: string;
+        component: string;
+        children: ({
+            value: string;
+            type: "text";
+        } | {
+            value: string;
+            type: "id";
+        })[];
+        label?: string | undefined;
+    }>;
+    props: Map<string, {
+        value: number;
+        type: "number";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "string";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: boolean;
+        type: "boolean";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "asset";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: (string | {
+            instanceId: string;
+            pageId: string;
+        }) & (string | {
+            instanceId: string;
+            pageId: string;
+        } | undefined);
+        type: "page";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string[];
+        type: "string[]";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "dataSource";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: {
+            code: string;
+            type: "execute";
+            args: string[];
+        }[];
+        type: "action";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    }>;
+    dataSources: Map<string, {
+        value: {
+            value: number;
+            type: "number";
+        } | {
+            value: string;
+            type: "string";
+        } | {
+            value: boolean;
+            type: "boolean";
+        } | {
+            value: string[];
+            type: "string[]";
+        };
+        type: "variable";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        code: string;
+        type: "expression";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    }>;
+    indexesWithinAncestors: IndexesWithinAncestors;
+}) => string;
+export declare const generatePageComponent: ({ scope, rootInstanceId, instances, props, dataSources, indexesWithinAncestors, }: {
+    scope: Scope;
+    rootInstanceId: Instance["id"];
+    instances: Map<string, {
+        type: "instance";
+        id: string;
+        component: string;
+        children: ({
+            value: string;
+            type: "text";
+        } | {
+            value: string;
+            type: "id";
+        })[];
+        label?: string | undefined;
+    }>;
+    props: Map<string, {
+        value: number;
+        type: "number";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "string";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: boolean;
+        type: "boolean";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "asset";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: (string | {
+            instanceId: string;
+            pageId: string;
+        }) & (string | {
+            instanceId: string;
+            pageId: string;
+        } | undefined);
+        type: "page";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string[];
+        type: "string[]";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "dataSource";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: {
+            code: string;
+            type: "execute";
+            args: string[];
+        }[];
+        type: "action";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    }>;
+    dataSources: Map<string, {
+        value: {
+            value: number;
+            type: "number";
+        } | {
+            value: string;
+            type: "string";
+        } | {
+            value: boolean;
+            type: "boolean";
+        } | {
+            value: string[];
+            type: "string[]";
+        };
+        type: "variable";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        code: string;
+        type: "expression";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    }>;
+    indexesWithinAncestors: IndexesWithinAncestors;
+}) => string;

package/lib/types/component-generator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/component-meta.d.ts

@@ -670,7 +670,7 @@ export declare const ComponentState: z.ZodObject<{
 }>;
 export type ComponentState = z.infer<typeof ComponentState>;
 export declare const defaultStates: ComponentState[];
-declare const WsComponentMeta: z.ZodObject<{
+export declare const WsComponentMeta: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["general", "text", "media", "forms", "radix", "hidden"]>>;
     type: z.ZodEnum<["container", "control", "embed", "rich-text-child"]>;
     requiredAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
@@ -681,7 +681,7 @@ declare const WsComponentMeta: z.ZodObject<{
     label: z.ZodOptional<z.ZodString>;
     description: z.ZodOptional<z.ZodString>;
     icon: z.ZodString;
-    presetStyle: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodType<{
+    presetStyle: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodType<{
         value: {
             value: number;
             type: "unit";
@@ -1105,7 +1105,7 @@ declare const WsComponentMeta: z.ZodObject<{
         };
         state?: string | undefined;
         property: import("@webstudio-is/css-engine").StyleProperty;
-    }>>>;
+    }>, "many">>>;
     presetTokens: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodObject<{
         variant: z.ZodOptional<z.ZodString>;
         styles: z.ZodArray<z.ZodType<{
@@ -2211,7 +2211,7 @@ declare const WsComponentMeta: z.ZodObject<{
         };
         state?: string | undefined;
         property: import("@webstudio-is/css-engine").StyleProperty;
-    }> | undefined;
+    }[]> | undefined;
     presetTokens?: Record<string, {
         styles: {
             value: {
@@ -2661,7 +2661,7 @@ declare const WsComponentMeta: z.ZodObject<{
         };
         state?: string | undefined;
         property: import("@webstudio-is/css-engine").StyleProperty;
-    }> | undefined;
+    }[]> | undefined;
     presetTokens?: Record<string, {
         styles: {
             value: {

package/lib/types/context.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type ReadableAtom } from "nanostores";
-import type { DataSource, Assets } from "@webstudio-is/sdk";
+import type { Assets } from "@webstudio-is/sdk";
 import type { Pages, PropsByInstanceId } from "./props";
 import type { IndexesWithinAncestors } from "./instance-utils";
 import type { ImageLoader } from "@webstudio-is/image";
@@ -30,14 +30,11 @@ export type Params = {
      */
     assetBaseUrl: string;
 };
-export type DataSourceValues = Map<DataSource["id"], unknown>;
 export declare const ReactSdkContext: import("react").Context<Params & {
     imageLoader: ImageLoader;
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;
-    dataSourceValuesStore: ReadableAtom<DataSourceValues>;
-    executeEffectfulExpression: (expression: string, args: DataSourceValues, values: DataSourceValues) => DataSourceValues;
-    setDataSourceValues: (newValues: DataSourceValues) => void;
+    dataSourcesLogicStore: ReadableAtom<Map<string, unknown>>;
     indexesWithinAncestors: IndexesWithinAncestors;
 }>;

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

@@ -2196,7 +2196,7 @@ export type WsEmbedTemplate = z.infer<typeof WsEmbedTemplate>;
 export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
     value: string;
     type: "text";
-} | EmbedTemplateInstance)[], metas: Map<Instance["component"], WsComponentMeta>, defaultBreakpointId: Breakpoint["id"]) => {
+} | EmbedTemplateInstance)[], metas: Map<Instance["component"], WsComponentMeta>, defaultBreakpointId: Breakpoint["id"], generateId?: () => string) => {
     children: ({
         value: string;
         type: "text";

package/lib/types/expression.d.ts

@@ -1,20 +1,115 @@
+import type { DataSources, Props, Scope } from "@webstudio-is/sdk";
 type TransformIdentifier = (id: string, assignee: boolean) => string;
 export declare const validateExpression: (code: string, options?: {
     effectful?: boolean;
     transformIdentifier?: TransformIdentifier;
 }) => string;
-/**
- * Generates a function body expecting map as _variables argument
- * and outputing map of results
- */
-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, 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;
 export declare const decodeDataSourceVariable: (name: string) => string | undefined;
-export declare const decodeVariablesMap: (values: Values) => Values;
+type VariableName = string;
+export declare const generateDataSources: ({ scope, typed, dataSources, props, }: {
+    scope: Scope;
+    typed?: boolean | undefined;
+    dataSources: Map<string, {
+        value: {
+            value: number;
+            type: "number";
+        } | {
+            value: string;
+            type: "string";
+        } | {
+            value: boolean;
+            type: "boolean";
+        } | {
+            value: string[];
+            type: "string[]";
+        };
+        type: "variable";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        code: string;
+        type: "expression";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    }>;
+    props: Map<string, {
+        value: number;
+        type: "number";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "string";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: boolean;
+        type: "boolean";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "asset";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: (string | {
+            instanceId: string;
+            pageId: string;
+        }) & (string | {
+            instanceId: string;
+            pageId: string;
+        } | undefined);
+        type: "page";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string[];
+        type: "string[]";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "dataSource";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: {
+            code: string;
+            type: "execute";
+            args: string[];
+        }[];
+        type: "action";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    }>;
+}) => {
+    variables: Map<string, {
+        valueName: VariableName;
+        setterName: VariableName;
+        initialValue: unknown;
+    }>;
+    body: string;
+    output: Map<string, string>;
+};
 export {};

package/lib/types/generator.d.ts

@@ -1,7 +1,6 @@
-import type { DataSources, Instance, Instances, Page, Props } from "@webstudio-is/sdk";
+import { type DataSources, type Instance, type Instances, type Page, type Props } from "@webstudio-is/sdk";
 import type { WsComponentMeta } from "./components/component-meta";
 import { type IndexesWithinAncestors } from "./instance-utils";
-import type { DataSourceValues } from "./context";
 type PageData = {
     page: Page;
     metas: Map<Instance["component"], WsComponentMeta>;
@@ -11,8 +10,7 @@ type PageData = {
 };
 export type GeneratedUtils = {
     indexesWithinAncestors: IndexesWithinAncestors;
-    executeComputingExpressions: (values: DataSourceValues) => DataSourceValues;
-    executeEffectfulExpression: (expression: string, args: DataSourceValues, values: DataSourceValues) => DataSourceValues;
+    getDataSourcesLogic: (getVariable: (id: string) => unknown, setVariable: (id: string, value: unknown) => void) => Map<string, unknown>;
 };
 /**
  * Generates data based utilities at build time

package/lib/types/index.d.ts

@@ -1,14 +1,14 @@
-export * from "./css";
-export * from "./tree";
-export * from "./app";
+export * from "./css/index";
+export * from "./tree/index";
+export * from "./app/index";
 export * from "./components/components-utils";
 export { PropMeta } from "./prop-meta";
-export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, type PresetStyle, componentCategories, stateCategories, defaultStates, } from "./components/component-meta";
+export { type WsComponentPropsMeta, type ComponentState, type PresetStyle, WsComponentMeta, componentCategories, stateCategories, defaultStates, } from "./components/component-meta";
 export * from "./embed-template";
 export { useInstanceProps, usePropUrl, usePropAsset, getInstanceIdFromComponentProps, getIndexWithinAncestorFromComponentProps, } from "./props";
 export { type Params, ReactSdkContext } from "./context";
-export { validateExpression, generateComputingExpressions, executeComputingExpressions, generateEffectfulExpression, executeEffectfulExpression, computeExpressionsDependencies, encodeDataSourceVariable, encodeVariablesMap, decodeDataSourceVariable, decodeVariablesMap, } from "./expression";
-export { renderComponentTemplate } from "./component-renderer";
+export { validateExpression, computeExpressionsDependencies, encodeDataSourceVariable, decodeDataSourceVariable, generateDataSources, } from "./expression";
 export { getIndexesWithinAncestors } from "./instance-utils";
 export * from "./hook";
 export { generateUtilsExport } from "./generator";
+export { generatePageComponent } from "./component-generator";

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

@@ -2,12 +2,12 @@ import { type ForwardRefExoticComponent, type RefAttributes, type ReactNode } fr
 import type { ReadableAtom } from "nanostores";
 import type { Instance, Instances, Assets } from "@webstudio-is/sdk";
 import type { Components } from "../components/components-utils";
-import { type Params, type DataSourceValues } from "../context";
+import { type Params } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponentProps } from "./webstudio-component";
 import type { IndexesWithinAncestors } from "../instance-utils";
 import type { ImageLoader } from "@webstudio-is/image";
-export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl, imageLoader, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, dataSourceValuesStore, executeEffectfulExpression, onDataSourceUpdate, indexesWithinAncestors, Component, components, scripts, }: Params & {
+export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl, imageLoader, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, dataSourcesLogicStore, indexesWithinAncestors, Component, components, scripts, }: Params & {
     instances: Map<string, {
         type: "instance";
         id: string;
@@ -26,9 +26,7 @@ export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;
-    executeEffectfulExpression: (expression: string, args: DataSourceValues, values: DataSourceValues) => DataSourceValues;
-    dataSourceValuesStore: ReadableAtom<DataSourceValues>;
-    onDataSourceUpdate: (newValues: DataSourceValues) => void;
+    dataSourcesLogicStore: ReadableAtom<Map<string, unknown>>;
     indexesWithinAncestors: IndexesWithinAncestors;
     Component: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;
     components: Components;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.99.1-e132cba.0",
+  "version": "0.100.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -13,11 +13,12 @@
     "jest": "^29.6.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "strip-indent": "^4.0.0",
     "type-fest": "^4.3.1",
     "typescript": "5.2.2",
     "zod": "^3.21.4",
-    "@webstudio-is/jest-config": "^1.0.8-e132cba.0",
-    "@webstudio-is/tsconfig": "^1.0.8-e132cba.0"
+    "@webstudio-is/jest-config": "1.0.7",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
     "@remix-run/react": "^1.19.1",
@@ -34,10 +35,10 @@
     "nanostores": "^0.9.3",
     "no-case": "^3.0.4",
     "title-case": "^3.0.3",
-    "@webstudio-is/css-engine": "^0.99.1-e132cba.0",
-    "@webstudio-is/fonts": "^0.99.1-e132cba.0",
-    "@webstudio-is/image": "^0.99.1-e132cba.0",
-    "@webstudio-is/sdk": "^0.99.1-e132cba.0"
+    "@webstudio-is/css-engine": "0.100.0",
+    "@webstudio-is/fonts": "0.100.0",
+    "@webstudio-is/image": "0.100.0",
+    "@webstudio-is/sdk": "0.100.0"
   },
   "exports": {
     ".": {

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

@@ -1,11 +0,0 @@
-import type { ExoticComponent } from "react";
-import type { Instance } from "@webstudio-is/sdk";
-import type { WsComponentMeta } from "./components/component-meta";
-import type { ImageLoader } from "@webstudio-is/image";
-export declare const renderComponentTemplate: ({ name, metas: metasRecord, components, props, imageLoader, }: {
-    name: Instance["component"];
-    metas: Record<string, WsComponentMeta>;
-    props?: Record<string, unknown> | undefined;
-    components: Record<string, ExoticComponent<any>>;
-    imageLoader?: ImageLoader | undefined;
-}) => import("react/jsx-runtime").JSX.Element;