@webstudio-is/react-sdk 0.123.0 → 0.125.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);
   }
 };
 
@@ -82,6 +136,7 @@ var componentAttribute = "data-ws-component";
 var showAttribute = "data-ws-show";
 var indexAttribute = "data-ws-index";
 var collapsedAttribute = "data-ws-collapsed";
+var textContentAttribute = "data-ws-text-content";
 var getInstanceIdFromComponentProps = (props) => {
   return props[idAttribute];
 };
@@ -153,14 +208,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 +229,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 +248,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
@@ -280,18 +351,25 @@ var createInstanceChildrenElements = ({
       elements.push(renderText(child.value));
       continue;
     }
-    const childInstance = instances.get(child.value);
-    if (childInstance === void 0) {
+    if (child.type === "expression") {
       continue;
     }
-    const childInstanceSelector = [child.value, ...instanceSelector];
-    const element = createInstanceElement({
-      instance: childInstance,
-      instanceSelector: childInstanceSelector,
-      Component,
-      components
-    });
-    elements.push(element);
+    if (child.type === "id") {
+      const childInstance = instances.get(child.value);
+      if (childInstance === void 0) {
+        continue;
+      }
+      const childInstanceSelector = [child.value, ...instanceSelector];
+      const element = createInstanceElement({
+        instance: childInstance,
+        instanceSelector: childInstanceSelector,
+        Component,
+        components
+      });
+      elements.push(element);
+      continue;
+    }
+    child;
   }
   if (elements.length === 0) {
     return;
@@ -333,7 +411,7 @@ var Root = ({
 };
 
 // src/core-components.ts
-import { ListIcon } from "@webstudio-is/icons/svg";
+import { ListViewIcon } from "@webstudio-is/icons/svg";
 var portalComponent = "Slot";
 var collectionComponent = "ws:collection";
 var collectionMeta = {
@@ -341,7 +419,7 @@ var collectionMeta = {
   order: 7,
   type: "container",
   label: "Collection",
-  icon: ListIcon,
+  icon: ListViewIcon,
   stylable: false,
   template: [
     {
@@ -520,6 +598,12 @@ var Action = z.object({
   type: z.literal("action"),
   defaultValue: z.undefined().optional()
 });
+var TextContent = z.object({
+  ...common,
+  control: z.literal("textContent"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional()
+});
 var PropMeta = z.union([
   Number,
   Range,
@@ -537,7 +621,8 @@ var PropMeta = z.union([
   Url,
   Json,
   Date,
-  Action
+  Action,
+  TextContent
 ]);
 
 // src/components/component-meta.ts
@@ -689,6 +774,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 +1381,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 +1398,8 @@ var generateJsxElement = ({
   props,
   dataSources,
   indexesWithinAncestors,
-  children
+  children,
+  classesMap
 }) => {
   let generatedProps = "";
   generatedProps += `
@@ -1317,6 +1416,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 +1441,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 +1466,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 +1501,8 @@ var generateJsxChildren = ({
   instances,
   props,
   dataSources,
-  indexesWithinAncestors
+  indexesWithinAncestors,
+  classesMap
 }) => {
   let generatedChildren = "";
   for (const child of children) {
@@ -1401,6 +1512,16 @@ var generateJsxChildren = ({
 `);
       continue;
     }
+    if (child.type === "expression") {
+      const expression = generateExpression({
+        expression: child.value,
+        dataSources,
+        scope
+      });
+      generatedChildren = `{${expression}}
+`;
+      continue;
+    }
     if (child.type === "id") {
       const instanceId = child.value;
       const instance = instances.get(instanceId);
@@ -1413,7 +1534,9 @@ var generateJsxChildren = ({
         props,
         dataSources,
         indexesWithinAncestors,
+        classesMap,
         children: generateJsxChildren({
+          classesMap,
           scope,
           children: instance.children,
           instances,
@@ -1430,27 +1553,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 +1607,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 +1631,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 +1759,15 @@ export {
   decodeDataSourceVariable,
   defaultStates,
   encodeDataSourceVariable,
-  generateCssText,
+  generateCss,
   generateDataFromEmbedTemplate,
   generateDataSources,
   generateJsxChildren,
   generateJsxElement,
   generatePageComponent,
+  generateRemixParams,
+  generateRemixRoute,
+  generateResourcesLoader,
   generateUtilsExport,
   getClosestInstance,
   getIndexWithinAncestorFromComponentProps,
@@ -1520,5 +1783,6 @@ export {
   selectorIdAttribute,
   showAttribute,
   stateCategories,
+  textContentAttribute,
   validateExpression
 };

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,24 +110,34 @@ 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, {
         type: "instance";
         id: string;
-        component: string;
         children: ({
             value: string;
             type: "text";
         } | {
             value: string;
             type: "id";
+        } | {
+            value: string;
+            type: "expression";
         })[];
+        component: string;
         label?: string | undefined;
     }>;
     props: Map<string, {
@@ -237,23 +247,33 @@ 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;
-        component: string;
         children: ({
             value: string;
             type: "text";
         } | {
             value: string;
             type: "id";
+        } | {
+            value: string;
+            type: "expression";
         })[];
+        component: string;
         label?: string | undefined;
     }>;
     props: Map<string, {
@@ -363,6 +383,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/components/component-meta.d.ts

@@ -387,6 +387,27 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         defaultValue?: undefined;
         label?: string | undefined;
         description?: string | undefined;
+    }>, z.ZodObject<{
+        control: z.ZodLiteral<"textContent">;
+        type: z.ZodLiteral<"string">;
+        defaultValue: z.ZodOptional<z.ZodString>;
+        label: z.ZodOptional<z.ZodString>;
+        description: z.ZodOptional<z.ZodString>;
+        required: z.ZodBoolean;
+    }, "strip", z.ZodTypeAny, {
+        type: "string";
+        required: boolean;
+        control: "textContent";
+        defaultValue?: string | undefined;
+        label?: string | undefined;
+        description?: string | undefined;
+    }, {
+        type: "string";
+        required: boolean;
+        control: "textContent";
+        defaultValue?: string | undefined;
+        label?: string | undefined;
+        description?: string | undefined;
     }>]>>;
     initialProps: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
 }, "strip", z.ZodTypeAny, {
@@ -518,6 +539,13 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         defaultValue?: undefined;
         label?: string | undefined;
         description?: string | undefined;
+    } | {
+        type: "string";
+        required: boolean;
+        control: "textContent";
+        defaultValue?: string | undefined;
+        label?: string | undefined;
+        description?: string | undefined;
     }>;
     initialProps?: string[] | undefined;
 }, {
@@ -649,6 +677,13 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         defaultValue?: undefined;
         label?: string | undefined;
         description?: string | undefined;
+    } | {
+        type: "string";
+        required: boolean;
+        control: "textContent";
+        defaultValue?: string | undefined;
+        label?: string | undefined;
+        description?: string | undefined;
     }>;
     initialProps?: string[] | undefined;
 }>;

package/lib/types/core-components.d.ts

@@ -134,6 +134,13 @@ export declare const corePropsMetas: {
             defaultValue?: undefined;
             label?: string | undefined;
             description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "textContent";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
         }>;
         initialProps?: string[] | undefined;
     };

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

@@ -2215,18 +2215,24 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
     } | {
         value: string;
         type: "id";
+    } | {
+        value: string;
+        type: "expression";
     })[];
     instances: {
         type: "instance";
         id: string;
-        component: string;
         children: ({
             value: string;
             type: "text";
         } | {
             value: string;
             type: "id";
+        } | {
+            value: string;
+            type: "expression";
         })[];
+        component: string;
         label?: string | undefined;
     }[];
     props: ({
@@ -2336,6 +2342,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/hook.d.ts

@@ -28,14 +28,17 @@ export type Hook = {
 export declare const getClosestInstance: (instancePath: InstancePath, currentInstance: Instance, closestComponent: Instance["component"]) => {
     type: "instance";
     id: string;
-    component: string;
     children: ({
         value: string;
         type: "text";
     } | {
         value: string;
         type: "id";
+    } | {
+        value: string;
+        type: "expression";
     })[];
+    component: string;
     label?: string | undefined;
 } | undefined;
 export {};

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/instance-utils.d.ts

@@ -4,13 +4,16 @@ export type IndexesWithinAncestors = Map<Instance["id"], number>;
 export declare const getIndexesWithinAncestors: (metas: Map<Instance["component"], WsComponentMeta>, instances: Map<string, {
     type: "instance";
     id: string;
-    component: string;
     children: ({
         value: string;
         type: "text";
     } | {
         value: string;
         type: "id";
+    } | {
+        value: string;
+        type: "expression";
     })[];
+    component: string;
     label?: string | undefined;
 }>, rootIds: Instance["id"][]) => IndexesWithinAncestors;

package/lib/types/prop-meta.d.ts

@@ -392,5 +392,26 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
     defaultValue?: undefined;
     label?: string | undefined;
     description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"textContent">;
+    type: z.ZodLiteral<"string">;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    type: "string";
+    required: boolean;
+    control: "textContent";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "string";
+    required: boolean;
+    control: "textContent";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
 }>]>;
 export type PropMeta = z.infer<typeof PropMeta>;

package/lib/types/props.d.ts

@@ -139,5 +139,6 @@ export declare const componentAttribute: "data-ws-component";
 export declare const showAttribute: "data-ws-show";
 export declare const indexAttribute: "data-ws-index";
 export declare const collapsedAttribute: "data-ws-collapsed";
+export declare const textContentAttribute: "data-ws-text-content";
 export declare const getInstanceIdFromComponentProps: (props: Record<string, unknown>) => string;
 export declare const getIndexWithinAncestorFromComponentProps: (props: Record<string, unknown>) => string | undefined;

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/lib/types/tree/create-elements-tree.d.ts

@@ -13,14 +13,17 @@ export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl
     instances: Map<string, {
         type: "instance";
         id: string;
-        component: string;
         children: ({
             value: string;
             type: "text";
         } | {
             value: string;
             type: "id";
+        } | {
+            value: string;
+            type: "expression";
         })[];
+        component: string;
         label?: string | undefined;
     }>;
     imageLoader: ImageLoader;
@@ -32,14 +35,17 @@ export declare const createInstanceChildrenElements: ({ instances, instanceSelec
     instances: Map<string, {
         type: "instance";
         id: string;
-        component: string;
         children: ({
             value: string;
             type: "text";
         } | {
             value: string;
             type: "id";
+        } | {
+            value: string;
+            type: "expression";
         })[];
+        component: string;
         label?: string | undefined;
     }>;
     instanceSelector: InstanceSelector;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.123.0",
+  "version": "0.125.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.125.0",
+    "@webstudio-is/icons": "^0.125.0",
+    "@webstudio-is/image": "0.125.0",
+    "@webstudio-is/sdk": "0.125.0",
+    "@webstudio-is/css-engine": "0.125.0"
   },
   "exports": {
     ".": {