@webstudio-is/react-sdk 0.123.0 → 0.124.0

package/README.md

@@ -1,4 +1,4 @@
 # Webstudio SDK
 
-Webstudio SDK is a TypeScript API that lets you use your Webstudio site or some components in your custom codebase or just render a complete Remix Document.
+Webstudio SDK is a TypeScript API that lets you use your Webstudio project or some components in your custom codebase or just render a complete Remix Document.
 It is currently under development, but feel free to play with the the current [landing site](https://github.com/webstudio-is/webstudio-landing)

package/lib/index.js

@@ -1,7 +1,61 @@
+// src/remix.ts
+var getRemixSegment = (segment) => {
+  if (segment === "*") {
+    return "$";
+  }
+  const match = segment.match(/^:(?<name>\w+)(?<modifier>\*|\?)?$/);
+  const name = match?.groups?.name;
+  const modifier = match?.groups?.modifier;
+  if (name) {
+    if (modifier === "*") {
+      return "$";
+    }
+    if (modifier === "?") {
+      return `($${name})`;
+    }
+    return `$${name}`;
+  }
+  return `[${segment}]`;
+};
+var generateRemixRoute = (pathname) => {
+  if (pathname.startsWith("/")) {
+    pathname = pathname.slice(1);
+  }
+  if (pathname === "") {
+    return `_index`;
+  }
+  const base = pathname.split("/").map(getRemixSegment).join(".");
+  const tail = pathname.endsWith("*") ? "" : "._index";
+  return `${base}${tail}`;
+};
+var generateRemixParams = (pathname) => {
+  const name = pathname.match(/:(?<name>\w+)\*$/)?.groups?.name;
+  let generated = "";
+  generated += `export const getRemixParams = ({ ...params }: Params): Params => {
+`;
+  if (name) {
+    generated += `  params["${name}"] = params["*"]
+`;
+    generated += `  delete params["*"]
+`;
+  }
+  if (pathname.endsWith("/*")) {
+    generated += `  params[0] = params["*"]
+`;
+    generated += `  delete params["*"]
+`;
+  }
+  generated += `  return params
+`;
+  generated += `}
+`;
+  return generated;
+};
+
 // src/css/global-rules.ts
 import { getFontFaces } from "@webstudio-is/fonts";
-var addGlobalRules = (engine, { assets, assetBaseUrl }) => {
-  engine.addPlaintextRule("html {margin: 0; display: grid; min-height: 100%}");
+var addGlobalRules = (sheet, { assets, assetBaseUrl }) => {
+  sheet.addPlaintextRule("html {margin: 0; display: grid; min-height: 100%}");
   const fontAssets = [];
   for (const asset of assets.values()) {
     if (asset.type === "font") {
@@ -10,7 +64,7 @@ var addGlobalRules = (engine, { assets, assetBaseUrl }) => {
   }
   const fontFaces = getFontFaces(fontAssets, { assetBaseUrl });
   for (const fontFace of fontFaces) {
-    engine.addFontFaceRule(fontFace);
+    sheet.addFontFaceRule(fontFace);
   }
 };
 
@@ -153,14 +207,16 @@ var getPresetStyleRules = (component, presetStyle) => {
 };
 
 // src/css/css.ts
-import { createCssEngine } from "@webstudio-is/css-engine";
-var createImageValueTransformer = (assets, options) => (styleValue) => {
+import {
+  createRegularStyleSheet,
+  createAtomicStyleSheet
+} from "@webstudio-is/css-engine";
+var createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) => {
   if (styleValue.type === "image" && styleValue.value.type === "asset") {
     const asset = assets.get(styleValue.value.value);
     if (asset === void 0) {
       return { type: "keyword", value: "none" };
     }
-    const { assetBaseUrl } = options;
     const url = `${assetBaseUrl}${asset.name}`;
     return {
       type: "image",
@@ -172,18 +228,17 @@ var createImageValueTransformer = (assets, options) => (styleValue) => {
     };
   }
 };
-var generateCssText = (data, options) => {
+var generateCss = (data, { assetBaseUrl, atomic = false }) => {
   const assets = new Map(data.assets.map((asset) => [asset.id, asset]));
   const breakpoints = new Map(data.breakpoints);
   const styles = new Map(data.styles);
   const styleSourceSelections = new Map(data.styleSourceSelections);
-  const engine = createCssEngine({ name: "ssr" });
-  addGlobalRules(engine, {
-    assets,
-    assetBaseUrl: options.assetBaseUrl
-  });
+  const classesMap = /* @__PURE__ */ new Map();
+  const regularSheet = createRegularStyleSheet({ name: "ssr-regular" });
+  const atomicSheet = atomic ? createAtomicStyleSheet({ name: "ssr-atomic" }) : void 0;
+  addGlobalRules(regularSheet, { assets, assetBaseUrl });
   for (const breakpoint of breakpoints.values()) {
-    engine.addMediaRule(breakpoint.id, breakpoint);
+    (atomicSheet ?? regularSheet).addMediaRule(breakpoint.id, breakpoint);
   }
   for (const [component, meta] of data.componentMetas) {
     const presetStyle = meta.presetStyle;
@@ -192,21 +247,36 @@ var generateCssText = (data, options) => {
     }
     const rules = getPresetStyleRules(component, presetStyle);
     for (const [selector, style] of rules) {
-      engine.addStyleRule(selector, { style });
+      regularSheet.addStyleRule({ style }, selector);
     }
   }
   const styleRules = getStyleRules(styles, styleSourceSelections);
+  const imageValueTransformer = createImageValueTransformer(assets, {
+    assetBaseUrl
+  });
   for (const { breakpointId, instanceId, state, style } of styleRules) {
-    engine.addStyleRule(
+    if (atomicSheet) {
+      const { classes } = atomicSheet.addStyleRule(
+        { breakpoint: breakpointId, style },
+        state,
+        imageValueTransformer
+      );
+      classesMap.set(instanceId, [
+        ...classesMap.get(instanceId) ?? [],
+        ...classes
+      ]);
+      continue;
+    }
+    regularSheet.addStyleRule(
+      { breakpoint: breakpointId, style },
       `[${idAttribute}="${instanceId}"]${state ?? ""}`,
-      {
-        breakpoint: breakpointId,
-        style
-      },
-      createImageValueTransformer(assets, options)
+      imageValueTransformer
     );
   }
-  return engine.cssText;
+  return {
+    cssText: regularSheet.cssText + (atomicSheet?.cssText ?? ""),
+    classesMap
+  };
 };
 
 // src/tree/create-elements-tree.tsx
@@ -689,6 +759,26 @@ var decodeDataSourceVariable = (name) => {
   }
   return;
 };
+var generateExpression = ({
+  expression,
+  dataSources,
+  scope
+}) => {
+  return validateExpression(expression, {
+    // parse any expression
+    effectful: true,
+    // transpile to safely executable member expressions
+    optional: true,
+    transformIdentifier: (identifier) => {
+      const depId = decodeDataSourceVariable(identifier);
+      const dep = depId ? dataSources.get(depId) : void 0;
+      if (dep) {
+        return scope.getName(dep.id, dep.name);
+      }
+      return identifier;
+    }
+  });
+};
 var generateDataSources = ({
   scope,
   typed = false,
@@ -1276,17 +1366,10 @@ var generatePropValue = ({
     return scope.getName(dataSource.id, dataSource.name);
   }
   if (prop.type === "expression") {
-    return validateExpression(prop.value, {
-      // transpile to safely executable member expressions
-      optional: true,
-      transformIdentifier: (identifier) => {
-        const depId = decodeDataSourceVariable(identifier);
-        const dep = depId ? dataSources.get(depId) : void 0;
-        if (dep) {
-          return scope.getName(dep.id, dep.name);
-        }
-        return identifier;
-      }
+    return generateExpression({
+      expression: prop.value,
+      dataSources,
+      scope
     });
   }
   if (prop.type === "action") {
@@ -1300,7 +1383,8 @@ var generateJsxElement = ({
   props,
   dataSources,
   indexesWithinAncestors,
-  children
+  children,
+  classesMap
 }) => {
   let generatedProps = "";
   generatedProps += `
@@ -1317,6 +1401,7 @@ ${indexAttribute}="${index}"`;
   let conditionValue;
   let collectionDataValue;
   let collectionItemValue;
+  const classes = Array.from(classesMap?.get(instance.id) ?? []);
   for (const prop of props.values()) {
     if (prop.instanceId !== instance.id) {
       continue;
@@ -1341,11 +1426,21 @@ ${indexAttribute}="${index}"`;
       }
       continue;
     }
+    if (prop.name === "className") {
+      if (prop.type === "string") {
+        classes.push(prop.value);
+      }
+      continue;
+    }
     if (propValue !== void 0) {
       generatedProps += `
 ${prop.name}={${propValue}}`;
     }
   }
+  if (classes.length !== 0) {
+    generatedProps += `
+className=${JSON.stringify(classes.join(" "))}`;
+  }
   let generatedElement = "";
   if (conditionValue) {
     generatedElement += `{(${conditionValue}) &&
@@ -1356,7 +1451,7 @@ ${prop.name}={${propValue}}`;
       return "";
     }
     const indexVariable = scope.getName(`${instance.id}-index`, "index");
-    generatedElement += `{${collectionDataValue}.map((${collectionItemValue}, ${indexVariable}) =>
+    generatedElement += `{${collectionDataValue}?.map((${collectionItemValue}: any, ${indexVariable}: number) =>
 `;
     generatedElement += `<Fragment key={${indexVariable}}>
 `;
@@ -1391,7 +1486,8 @@ var generateJsxChildren = ({
   instances,
   props,
   dataSources,
-  indexesWithinAncestors
+  indexesWithinAncestors,
+  classesMap
 }) => {
   let generatedChildren = "";
   for (const child of children) {
@@ -1413,7 +1509,9 @@ var generateJsxChildren = ({
         props,
         dataSources,
         indexesWithinAncestors,
+        classesMap,
         children: generateJsxChildren({
+          classesMap,
           scope,
           children: instance.children,
           instances,
@@ -1430,27 +1528,52 @@ var generateJsxChildren = ({
 };
 var generatePageComponent = ({
   scope,
-  rootInstanceId,
+  page,
   instances,
   props,
   dataSources,
-  indexesWithinAncestors
+  indexesWithinAncestors,
+  classesMap
 }) => {
-  const instance = instances.get(rootInstanceId);
+  const instance = instances.get(page.rootInstanceId);
   if (instance === void 0) {
     return "";
   }
-  const { variables, body: dataSourcesBody } = generateDataSources({
+  const { body: dataSourcesBody } = generateDataSources({
     typed: true,
     scope,
     dataSources,
     props
   });
   let generatedDataSources = "";
-  for (const { valueName, setterName, initialValue } of variables.values()) {
-    const initialValueString = JSON.stringify(initialValue);
-    generatedDataSources += `let [${valueName}, ${setterName}] = useState<any>(${initialValueString})
+  for (const dataSource of dataSources.values()) {
+    if (dataSource.type === "variable") {
+      const valueName = scope.getName(dataSource.id, dataSource.name);
+      const setterName = scope.getName(
+        `set$${dataSource.id}`,
+        `set$${dataSource.name}`
+      );
+      const initialValue = dataSource.value.value;
+      const initialValueString = JSON.stringify(initialValue);
+      generatedDataSources += `let [${valueName}, ${setterName}] = useState<any>(${initialValueString})
+`;
+    }
+    if (dataSource.type === "parameter") {
+      if (dataSource.id === page.pathVariableId) {
+        const valueName = scope.getName(dataSource.id, dataSource.name);
+        generatedDataSources += `let ${valueName} = _props.params
 `;
+      }
+    }
+    if (dataSource.type === "resource") {
+      const valueName = scope.getName(dataSource.id, dataSource.name);
+      const resourceName = scope.getName(
+        dataSource.resourceId,
+        dataSource.name
+      );
+      generatedDataSources += `let ${valueName}: any = _props.resources["${resourceName}"]
+`;
+    }
   }
   generatedDataSources += dataSourcesBody;
   const generatedJsx = generateJsxElement({
@@ -1459,17 +1582,23 @@ var generatePageComponent = ({
     props,
     dataSources,
     indexesWithinAncestors,
+    classesMap,
     children: generateJsxChildren({
       scope,
       children: instance.children,
       instances,
       props,
       dataSources,
-      indexesWithinAncestors
+      indexesWithinAncestors,
+      classesMap
     })
   });
   let generatedComponent = "";
-  generatedComponent += `const Page = () => {
+  generatedComponent += `type Params = Record<string, string | undefined>
+`;
+  generatedComponent += `type Resources = Record<string, unknown>
+`;
+  generatedComponent += `const Page = (_props: { params: Params, resources: Resources }) => {
 `;
   generatedComponent += `${generatedDataSources}`;
   generatedComponent += `return ${generatedJsx}`;
@@ -1477,6 +1606,112 @@ var generatePageComponent = ({
 `;
   return generatedComponent;
 };
+
+// src/resources-generator.ts
+var generateResourcesLoader = ({
+  scope,
+  page,
+  dataSources,
+  resources
+}) => {
+  let generatedVariables = "";
+  let generatedOutput = "";
+  let generatedLoaders = "";
+  let hasResources = false;
+  for (const dataSource of dataSources.values()) {
+    if (dataSource.type === "variable") {
+      const name = scope.getName(dataSource.id, dataSource.name);
+      const value = JSON.stringify(dataSource.value.value);
+      generatedVariables += `let ${name} = ${value}
+`;
+    }
+    if (dataSource.type === "parameter") {
+      if (dataSource.id !== page.pathVariableId) {
+        continue;
+      }
+      const name = scope.getName(dataSource.id, dataSource.name);
+      generatedVariables += `const ${name} = _props.params
+`;
+    }
+    if (dataSource.type === "resource") {
+      const resource = resources.get(dataSource.resourceId);
+      if (resource === void 0) {
+        continue;
+      }
+      hasResources = true;
+      const resourceName = scope.getName(resource.id, dataSource.name);
+      generatedOutput += `${resourceName},
+`;
+      generatedLoaders += `loadResource({
+`;
+      generatedLoaders += `id: "${resource.id}",
+`;
+      generatedLoaders += `name: ${JSON.stringify(resource.name)},
+`;
+      const url = generateExpression({
+        expression: resource.url,
+        dataSources,
+        scope
+      });
+      generatedLoaders += `url: ${url},
+`;
+      generatedLoaders += `method: "${resource.method}",
+`;
+      generatedLoaders += `headers: [
+`;
+      for (const header of resource.headers) {
+        const value = generateExpression({
+          expression: header.value,
+          dataSources,
+          scope
+        });
+        generatedLoaders += `{ name: "${header.name}", value: ${value} },
+`;
+      }
+      generatedLoaders += `],
+`;
+      if (resource.body !== void 0 && resource.body.length > 0) {
+        const body = generateExpression({
+          expression: resource.body,
+          dataSources,
+          scope
+        });
+        generatedLoaders += `body: ${body},
+`;
+      }
+      generatedLoaders += `}),
+`;
+    }
+  }
+  let generated = "";
+  if (hasResources) {
+    generated += `import { loadResource } from "@webstudio-is/sdk";
+`;
+  }
+  generated += `type Params = Record<string, string | undefined>
+`;
+  generated += `export const loadResources = async (_props: { params: Params }) => {
+`;
+  if (hasResources) {
+    generated += generatedVariables;
+    generated += `const [
+`;
+    generated += generatedOutput;
+    generated += `] = await Promise.all([
+`;
+    generated += generatedLoaders;
+    generated += `])
+`;
+  }
+  generated += `return {
+`;
+  generated += generatedOutput;
+  generated += `} as Record<string, unknown>
+`;
+  generated += `}
+`;
+  return generated;
+};
 export {
   EmbedTemplateInstance,
   EmbedTemplateProp,
@@ -1499,12 +1734,15 @@ export {
   decodeDataSourceVariable,
   defaultStates,
   encodeDataSourceVariable,
-  generateCssText,
+  generateCss,
   generateDataFromEmbedTemplate,
   generateDataSources,
   generateJsxChildren,
   generateJsxElement,
   generatePageComponent,
+  generateRemixParams,
+  generateRemixRoute,
+  generateResourcesLoader,
   generateUtilsExport,
   getClosestInstance,
   getIndexWithinAncestorFromComponentProps,

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

@@ -1,6 +1,6 @@
 import { Outlet as DefaultOutlet } from "@remix-run/react";
 /**
- * We are using Outlet prop from index layout when user renders site from a subdomain.
+ * We are using Outlet prop from index layout when user renders project from a subdomain.
  */
 export declare const Root: ({ Outlet, }: {
     Outlet: typeof DefaultOutlet;

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

@@ -1,6 +1,6 @@
-import type { Instances, Instance, Props, Scope, DataSources } from "@webstudio-is/sdk";
+import type { Instances, Instance, Props, Scope, DataSources, Page } from "@webstudio-is/sdk";
 import type { IndexesWithinAncestors } from "./instance-utils";
-export declare const generateJsxElement: ({ scope, instance, props, dataSources, indexesWithinAncestors, children, }: {
+export declare const generateJsxElement: ({ scope, instance, props, dataSources, indexesWithinAncestors, children, classesMap, }: {
     scope: Scope;
     instance: Instance;
     props: Map<string, {
@@ -110,11 +110,18 @@ export declare const generateJsxElement: ({ scope, instance, props, dataSources,
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
+    } | {
+        type: "resource";
+        name: string;
+        id: string;
+        resourceId: string;
+        scopeInstanceId?: string | undefined;
     }>;
     indexesWithinAncestors: IndexesWithinAncestors;
     children: string;
+    classesMap?: Map<string, string[]> | undefined;
 }) => string;
-export declare const generateJsxChildren: ({ scope, children, instances, props, dataSources, indexesWithinAncestors, }: {
+export declare const generateJsxChildren: ({ scope, children, instances, props, dataSources, indexesWithinAncestors, classesMap, }: {
     scope: Scope;
     children: Instance["children"];
     instances: Map<string, {
@@ -237,12 +244,19 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
+    } | {
+        type: "resource";
+        name: string;
+        id: string;
+        resourceId: string;
+        scopeInstanceId?: string | undefined;
     }>;
     indexesWithinAncestors: IndexesWithinAncestors;
+    classesMap?: Map<string, string[]> | undefined;
 }) => string;
-export declare const generatePageComponent: ({ scope, rootInstanceId, instances, props, dataSources, indexesWithinAncestors, }: {
+export declare const generatePageComponent: ({ scope, page, instances, props, dataSources, indexesWithinAncestors, classesMap, }: {
     scope: Scope;
-    rootInstanceId: Instance["id"];
+    page: Page;
     instances: Map<string, {
         type: "instance";
         id: string;
@@ -363,6 +377,13 @@ export declare const generatePageComponent: ({ scope, rootInstanceId, instances,
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
+    } | {
+        type: "resource";
+        name: string;
+        id: string;
+        resourceId: string;
+        scopeInstanceId?: string | undefined;
     }>;
     indexesWithinAncestors: IndexesWithinAncestors;
+    classesMap: Map<string, Array<string>>;
 }) => string;

package/lib/types/css/css.d.ts

@@ -10,6 +10,7 @@ type Data = {
 };
 type CssOptions = {
     assetBaseUrl: string;
+    atomic: boolean;
 };
 export declare const createImageValueTransformer: (assets: Map<string, {
     type: "font";
@@ -58,6 +59,11 @@ export declare const createImageValueTransformer: (assets: Map<string, {
     size: number;
     description: string | null;
     createdAt: string;
-}>, options: CssOptions) => TransformValue;
-export declare const generateCssText: (data: Data, options: CssOptions) => string;
+}>, { assetBaseUrl }: {
+    assetBaseUrl: string;
+}) => TransformValue;
+export declare const generateCss: (data: Data, { assetBaseUrl, atomic }: CssOptions) => {
+    cssText: string;
+    classesMap: Map<string, string[]>;
+};
 export {};

package/lib/types/css/global-rules.d.ts

@@ -1,6 +1,6 @@
-import type { CssEngine } from "@webstudio-is/css-engine";
+import type { StyleSheetAtomic, StyleSheetRegular } from "@webstudio-is/css-engine";
 import type { Assets } from "@webstudio-is/sdk";
-export declare const addGlobalRules: (engine: CssEngine, { assets, assetBaseUrl }: {
+export declare const addGlobalRules: (sheet: StyleSheetRegular | StyleSheetAtomic, { assets, assetBaseUrl }: {
     assets: Map<string, {
         type: "font";
         name: string;

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

@@ -2336,6 +2336,12 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
+    } | {
+        type: "resource";
+        name: string;
+        id: string;
+        resourceId: string;
+        scopeInstanceId?: string | undefined;
     })[];
     styleSourceSelections: {
         values: string[];

package/lib/types/expression.d.ts

@@ -14,6 +14,43 @@ export declare const validateExpression: (code: string, options?: {
 }) => string;
 export declare const encodeDataSourceVariable: (id: string) => string;
 export declare const decodeDataSourceVariable: (name: string) => string | undefined;
+export declare const generateExpression: ({ expression, dataSources, scope, }: {
+    expression: string;
+    dataSources: Map<string, {
+        value: {
+            value: number;
+            type: "number";
+        } | {
+            value: string;
+            type: "string";
+        } | {
+            value: boolean;
+            type: "boolean";
+        } | {
+            value: string[];
+            type: "string[]";
+        } | {
+            type: "json";
+            value?: unknown;
+        };
+        type: "variable";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        type: "parameter";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        type: "resource";
+        name: string;
+        id: string;
+        resourceId: string;
+        scopeInstanceId?: string | undefined;
+    }>;
+    scope: Scope;
+}) => string;
 type VariableName = string;
 export declare const generateDataSources: ({ scope, typed, dataSources, props, }: {
     scope: Scope;
@@ -44,6 +81,12 @@ export declare const generateDataSources: ({ scope, typed, dataSources, props, }
         name: string;
         id: string;
         scopeInstanceId?: string | undefined;
+    } | {
+        type: "resource";
+        name: string;
+        id: string;
+        resourceId: string;
+        scopeInstanceId?: string | undefined;
     }>;
     props: Map<string, {
         value: number;

package/lib/types/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./remix";
 export * from "./css/index";
 export * from "./tree/index";
 export * from "./app/index";
@@ -13,3 +14,4 @@ export { getIndexesWithinAncestors } from "./instance-utils";
 export * from "./hook";
 export { generateUtilsExport } from "./generator";
 export { generatePageComponent, generateJsxElement, generateJsxChildren, } from "./component-generator";
+export { generateResourcesLoader } from "./resources-generator";

package/lib/types/remix.d.ts

@@ -0,0 +1,20 @@
+/**
+ * transforms url pattern subset to remix route format
+ *
+ * /:name/ -> .$name. - named dynamic segment
+ * /:name?/ -> .($name). - optional dynamic segment
+ * /* -> .$ - splat in the end of pattern
+ * /:name* -> .$ - named splat which gets specified name at runtime
+ *
+ */
+export declare const generateRemixRoute: (pathname: string) => string;
+/**
+ * generates a function to convert remix params to compatible with url pattern groups
+ *
+ * for /:name* pattern
+ * params["*"] is replaced with params["name"]
+ *
+ * for /* pattern
+ * params["*"] is replaced with params[0]
+ */
+export declare const generateRemixParams: (pathname: string) => string;

package/lib/types/remix.test.d.ts

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

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

@@ -0,0 +1,49 @@
+import type { DataSources, Page, Resources, Scope } from "@webstudio-is/sdk";
+export declare const generateResourcesLoader: ({ scope, page, dataSources, resources, }: {
+    scope: Scope;
+    page: Page;
+    dataSources: Map<string, {
+        value: {
+            value: number;
+            type: "number";
+        } | {
+            value: string;
+            type: "string";
+        } | {
+            value: boolean;
+            type: "boolean";
+        } | {
+            value: string[];
+            type: "string[]";
+        } | {
+            type: "json";
+            value?: unknown;
+        };
+        type: "variable";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        type: "parameter";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        type: "resource";
+        name: string;
+        id: string;
+        resourceId: string;
+        scopeInstanceId?: string | undefined;
+    }>;
+    resources: Map<string, {
+        name: string;
+        id: string;
+        method: "get" | "post" | "put" | "delete";
+        url: string;
+        headers: {
+            value: string;
+            name: string;
+        }[];
+        body?: string | undefined;
+    }>;
+}) => string;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.123.0",
+  "version": "0.124.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -33,11 +33,11 @@
     "jsep": "^1.3.8",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/css-engine": "0.123.0",
-    "@webstudio-is/icons": "^0.123.0",
-    "@webstudio-is/fonts": "0.123.0",
-    "@webstudio-is/image": "0.123.0",
-    "@webstudio-is/sdk": "0.123.0"
+    "@webstudio-is/fonts": "0.124.0",
+    "@webstudio-is/css-engine": "0.124.0",
+    "@webstudio-is/image": "0.124.0",
+    "@webstudio-is/icons": "^0.124.0",
+    "@webstudio-is/sdk": "0.124.0"
   },
   "exports": {
     ".": {