@webstudio-is/sdk 0.167.0 → 0.173.0

package/lib/index.js

@@ -322,6 +322,12 @@ var Prop = z6.union([
     // data source id
     value: z6.string()
   }),
+  z6.object({
+    ...baseProp,
+    type: z6.literal("resource"),
+    // resource id
+    value: z6.string()
+  }),
   z6.object({
     ...baseProp,
     type: z6.literal("expression"),
@@ -487,8 +493,9 @@ var lintExpression = ({
   const addError = (message) => {
     return (node) => {
       diagnostics.push({
-        from: node.start,
-        to: node.end,
+        // tune error position after wrapping expression with parentheses
+        from: node.start - 1,
+        to: node.end - 1,
         severity: "error",
         message
       });
@@ -504,7 +511,7 @@ var lintExpression = ({
     return diagnostics;
   }
   try {
-    const root = parseExpressionAt(expression, 0, {
+    const root = parseExpressionAt(`(${expression})`, 0, {
       ecmaVersion: "latest",
       // support parsing import to forbid explicitly
       sourceType: "module"
@@ -569,10 +576,13 @@ var lintExpression = ({
   } catch (error) {
     const castedError = error;
     diagnostics.push({
-      from: castedError.pos,
-      to: castedError.pos,
+      // tune error position after wrapping expression with parentheses
+      from: castedError.pos - 1,
+      to: castedError.pos - 1,
       severity: "error",
-      message: castedError.message
+      // trim auto generated error location
+      // to not conflict with tuned position
+      message: castedError.message.replaceAll(/\s+\(\d+:\d+\)$/g, "")
     });
   }
   return diagnostics;
@@ -823,7 +833,7 @@ var getStaticSiteMapXml = (pages, updatedAt) => {
 };
 
 // src/scope.ts
-var normalizeName = (name) => {
+var normalizeJsName = (name) => {
   name = name.replaceAll(/[^\w$]/g, "");
   if (name.length === 0) {
     return "_";
@@ -833,7 +843,7 @@ var normalizeName = (name) => {
   }
   return name;
 };
-var createScope = (occupiedIdentifiers = []) => {
+var createScope = (occupiedIdentifiers = [], normalizeName = normalizeJsName, separator = "_") => {
   const freeIndexByPreferredName = /* @__PURE__ */ new Map();
   const scopedNameByIdMap = /* @__PURE__ */ new Map();
   for (const identifier of occupiedIdentifiers) {
@@ -849,7 +859,7 @@ var createScope = (occupiedIdentifiers = []) => {
     freeIndexByPreferredName.set(preferredName, (index ?? 0) + 1);
     let scopedName = preferredName;
     if (index !== void 0) {
-      scopedName = `${preferredName}_${index}`;
+      scopedName = `${preferredName}${separator}${index}`;
     }
     scopedNameByIdMap.set(id, scopedName);
     return scopedName;
@@ -860,8 +870,8 @@ var createScope = (occupiedIdentifiers = []) => {
 };
 
 // src/resource-loader.ts
-var loadResource = async (customFetch, resourceData) => {
-  const { url, method, headers, body } = resourceData;
+var loadResource = async (customFetch, resourceRequest) => {
+  const { url, method, headers, body } = resourceRequest;
   const requestHeaders = new Headers(
     headers.map(({ name, value }) => [name, value])
   );
@@ -881,12 +891,13 @@ var loadResource = async (customFetch, resourceData) => {
     const response = await customFetch(url.trim(), requestInit);
     let data;
     if (response.ok && // accept json by default and when specified explicitly
-    (requestHeaders.has("accept") === false || requestHeaders.get("accept") === "application/json")) {
+    (response.headers.has("content-type") === false || response.headers.get("content-type")?.includes("application/json"))) {
       data = await response.json();
     } else {
       data = await response.text();
     }
     return {
+      ok: response.ok,
       data,
       status: response.status,
       statusText: response.statusText
@@ -894,108 +905,87 @@ var loadResource = async (customFetch, resourceData) => {
   } catch (error) {
     const message = error.message;
     return {
+      ok: false,
       data: void 0,
       status: 500,
       statusText: message
     };
   }
 };
-
-// src/forms-generator.ts
-var generateFormsProperties = (props) => {
-  const formsProperties = /* @__PURE__ */ new Map();
-  for (const prop of props.values()) {
-    if (prop.type === "string") {
-      if (prop.name === "action" || prop.name === "method") {
-        let properties = formsProperties.get(prop.instanceId);
-        if (properties === void 0) {
-          properties = {};
-        }
-        properties[prop.name] = prop.value;
-        formsProperties.set(prop.instanceId, properties);
-      }
-    }
-  }
-  const entriesString = JSON.stringify(Array.from(formsProperties.entries()));
-  let generated = "";
-  generated += `type FormProperties = { method?: string, action?: string }
-`;
-  generated += `export const formsProperties = new Map<string, FormProperties>(${entriesString})
-`;
-  return generated;
+var loadResources = async (customFetch, requests) => {
+  return Object.fromEntries(
+    await Promise.all(
+      Array.from(
+        requests,
+        async ([name, request]) => [name, await loadResource(customFetch, request)]
+      )
+    )
+  );
 };
 
 // src/resources-generator.ts
-var generateResourcesLoader = ({
+var generateResources = ({
   scope,
   page,
   dataSources,
+  props,
   resources
 }) => {
-  let generatedOutput = "";
-  let generatedLoaders = "";
-  let hasResources = false;
   const usedDataSources = /* @__PURE__ */ new Map();
-  for (const dataSource of dataSources.values()) {
-    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},
+  let generatedRequests = "";
+  for (const resource of resources.values()) {
+    let generatedRequest = "";
+    const resourceName = scope.getName(resource.id, resource.name);
+    generatedRequest += `  const ${resourceName}: ResourceRequest = {
 `;
-      generatedLoaders += `loadResource(customFetch, {
+    generatedRequest += `    id: "${resource.id}",
 `;
-      generatedLoaders += `id: "${resource.id}",
+    generatedRequest += `    name: ${JSON.stringify(resource.name)},
 `;
-      generatedLoaders += `name: ${JSON.stringify(resource.name)},
+    const url = generateExpression({
+      expression: resource.url,
+      dataSources,
+      usedDataSources,
+      scope
+    });
+    generatedRequest += `    url: ${url},
 `;
-      const url = generateExpression({
-        expression: resource.url,
+    generatedRequest += `    method: "${resource.method}",
+`;
+    generatedRequest += `    headers: [
+`;
+    for (const header of resource.headers) {
+      const value = generateExpression({
+        expression: header.value,
         dataSources,
         usedDataSources,
         scope
       });
-      generatedLoaders += `url: ${url},
-`;
-      generatedLoaders += `method: "${resource.method}",
-`;
-      generatedLoaders += `headers: [
+      generatedRequest += `      { name: "${header.name}", value: ${value} },
 `;
-      for (const header of resource.headers) {
-        const value = generateExpression({
-          expression: header.value,
-          dataSources,
-          usedDataSources,
-          scope
-        });
-        generatedLoaders += `{ name: "${header.name}", value: ${value} },
-`;
-      }
-      generatedLoaders += `],
-`;
-      if (resource.body !== void 0 && resource.body.length > 0) {
-        const body = generateExpression({
-          expression: resource.body,
-          dataSources,
-          usedDataSources,
-          scope
-        });
-        generatedLoaders += `body: ${body},
+    }
+    generatedRequest += `    ],
 `;
-      }
-      generatedLoaders += `}),
+    if (resource.body !== void 0 && resource.body.length > 0) {
+      const body = generateExpression({
+        expression: resource.body,
+        dataSources,
+        usedDataSources,
+        scope
+      });
+      generatedRequest += `    body: ${body},
 `;
     }
+    generatedRequest += `  }
+`;
+    generatedRequests += generatedRequest;
   }
   let generatedVariables = "";
   for (const dataSource of usedDataSources.values()) {
     if (dataSource.type === "variable") {
       const name = scope.getName(dataSource.id, dataSource.name);
       const value = JSON.stringify(dataSource.value.value);
-      generatedVariables += `let ${name} = ${value}
+      generatedVariables += `  let ${name} = ${value}
 `;
     }
     if (dataSource.type === "parameter") {
@@ -1003,61 +993,108 @@ var generateResourcesLoader = ({
         continue;
       }
       const name = scope.getName(dataSource.id, dataSource.name);
-      generatedVariables += `const ${name} = _props.system
+      generatedVariables += `  const ${name} = _props.system
 `;
     }
   }
   let generated = "";
-  generated += `import { loadResource, isLocalResource, type System } from "@webstudio-is/sdk";
+  generated += `import type { System, ResourceRequest } from "@webstudio-is/sdk";
 `;
-  if (hasResources) {
-    generated += `import { sitemap } from "./$resources.sitemap.xml";
-`;
-  }
-  generated += `export const loadResources = async (_props: { system: System }) => {
+  generated += `export const getResources = (_props: { system: System }) => {
 `;
   generated += generatedVariables;
-  if (hasResources) {
-    generated += `
-    const customFetch: typeof fetch = (input, init) => {
-      if (typeof input !== "string") {
-        return fetch(input, init);
-      }
-
-      if (isLocalResource(input, "sitemap.xml")) {
-        // @todo: dynamic import sitemap ???
-        const response = new Response(JSON.stringify(sitemap));
-        response.headers.set('content-type',  'application/json; charset=utf-8');
-        return Promise.resolve(response);
-      }
-
-      return fetch(input, init);
-    };
-    `;
-    generated += `const [
+  generated += generatedRequests;
+  generated += `  const _data = new Map<string, ResourceRequest>([
 `;
-    generated += generatedOutput;
-    generated += `] = await Promise.all([
+  for (const dataSource of dataSources.values()) {
+    if (dataSource.type === "resource") {
+      const name = scope.getName(dataSource.resourceId, dataSource.name);
+      generated += `    ["${name}", ${name}],
 `;
-    generated += generatedLoaders;
-    generated += `])
+    }
+  }
+  generated += `  ])
+`;
+  generated += `  const _action = new Map<string, ResourceRequest>([
+`;
+  for (const prop of props.values()) {
+    if (prop.type === "resource") {
+      const name = scope.getName(prop.value, prop.name);
+      generated += `    ["${name}", ${name}],
 `;
+    }
   }
-  generated += `return {
+  generated += `  ])
 `;
-  generated += generatedOutput;
-  generated += `} as Record<string, unknown>
+  generated += `  return { data: _data, action: _action }
 `;
   generated += `}
 `;
   return generated;
 };
+var getMethod = (value) => {
+  switch (value?.toLowerCase()) {
+    case "get":
+      return "get";
+    case "delete":
+      return "delete";
+    case "put":
+      return "put";
+    default:
+      return "post";
+  }
+};
+var replaceFormActionsWithResources = ({
+  props,
+  instances,
+  resources
+}) => {
+  const formProps = /* @__PURE__ */ new Map();
+  for (const prop of props.values()) {
+    if (prop.name === "method" && prop.type === "string" && instances.get(prop.instanceId)?.component === "Form") {
+      let data = formProps.get(prop.instanceId);
+      if (data === void 0) {
+        data = {};
+        formProps.set(prop.instanceId, data);
+      }
+      data.method = prop.value;
+      props.delete(prop.id);
+    }
+    if (prop.name === "action" && prop.type === "string" && instances.get(prop.instanceId)?.component === "Form") {
+      let data = formProps.get(prop.instanceId);
+      if (data === void 0) {
+        data = {};
+        formProps.set(prop.instanceId, data);
+      }
+      data.action = prop.value;
+      props.set(prop.id, {
+        id: prop.id,
+        instanceId: prop.instanceId,
+        name: prop.name,
+        type: "resource",
+        value: prop.instanceId
+      });
+    }
+  }
+  for (const [instanceId, { action, method }] of formProps) {
+    if (action) {
+      resources.set(instanceId, {
+        id: instanceId,
+        name: "action",
+        method: getMethod(method),
+        url: JSON.stringify(action),
+        headers: []
+      });
+    }
+  }
+};
 
 // src/page-meta-generator.ts
 var generatePageMeta = ({
   globalScope,
   page,
-  dataSources
+  dataSources,
+  assets
 }) => {
   const localScope = createScope(["system", "resources"]);
   const usedDataSources = /* @__PURE__ */ new Map();
@@ -1085,8 +1122,8 @@ var generatePageMeta = ({
     usedDataSources,
     scope: localScope
   });
-  const socialImageAssetIdExpression = JSON.stringify(
-    page.meta.socialImageAssetId
+  const socialImageAssetNameExpression = JSON.stringify(
+    page.meta.socialImageAssetId ? assets.get(page.meta.socialImageAssetId)?.name : void 0
   );
   const socialImageUrlExpression = generateExpression({
     expression: page.meta.socialImageUrl ?? "undefined",
@@ -1182,7 +1219,7 @@ var generatePageMeta = ({
 `;
   generated += `    language: ${languageExpression},
 `;
-  generated += `    socialImageAssetId: ${socialImageAssetIdExpression},
+  generated += `    socialImageAssetName: ${socialImageAssetNameExpression},
 `;
   generated += `    socialImageUrl: ${socialImageUrlExpression},
 `;
@@ -1249,10 +1286,9 @@ export {
   findTreeInstanceIds,
   findTreeInstanceIdsExcludingSlotDescendants,
   generateExpression,
-  generateFormsProperties,
   generateObjectExpression,
   generatePageMeta,
-  generateResourcesLoader,
+  generateResources,
   getExpressionIdentifiers,
   getPagePath,
   getStaticSiteMapXml,
@@ -1264,9 +1300,11 @@ export {
   isRoot,
   lintExpression,
   loadResource,
+  loadResources,
   matchPathnameParams,
   parseComponentName,
   parseObjectExpression,
+  replaceFormActionsWithResources,
   sitemapResourceUrl,
   transpileExpression
 };

package/lib/types/index.d.ts

@@ -15,7 +15,6 @@ export * from "./page-utils";
 export * from "./scope";
 export * from "./resource-loader";
 export * from "./expression";
-export * from "./forms-generator";
 export * from "./resources-generator";
 export * from "./page-meta-generator";
 export * from "./url-pattern";

package/lib/types/instances-utils.d.ts

@@ -1,36 +1,4 @@
-import type { Instance } from "./schema/instances";
-export declare const findTreeInstanceIds: (instances: Map<string, {
-    type: "instance";
-    id: string;
-    children: ({
-        value: string;
-        type: "text";
-        placeholder?: boolean | undefined;
-    } | {
-        value: string;
-        type: "id";
-    } | {
-        value: string;
-        type: "expression";
-    })[];
-    component: string;
-    label?: string | undefined;
-}>, rootInstanceId: Instance["id"]) => Set<string>;
-export declare const findTreeInstanceIdsExcludingSlotDescendants: (instances: Map<string, {
-    type: "instance";
-    id: string;
-    children: ({
-        value: string;
-        type: "text";
-        placeholder?: boolean | undefined;
-    } | {
-        value: string;
-        type: "id";
-    } | {
-        value: string;
-        type: "expression";
-    })[];
-    component: string;
-    label?: string | undefined;
-}>, rootInstanceId: Instance["id"]) => Set<string>;
+import type { Instance, Instances } from "./schema/instances";
+export declare const findTreeInstanceIds: (instances: Instances, rootInstanceId: Instance["id"]) => Set<string>;
+export declare const findTreeInstanceIdsExcludingSlotDescendants: (instances: Instances, rootInstanceId: Instance["id"]) => Set<string>;
 export declare const parseComponentName: (componentName: string) => readonly [string | undefined, string];

package/lib/types/jsx.d.ts

@@ -0,0 +1,151 @@
+import type { ReactNode } from "react";
+export declare class ExpressionValue {
+    value: string;
+    constructor(expression: string);
+}
+export declare class ParameterValue {
+    value: string;
+    constructor(dataSourceID: string);
+}
+export declare class ResourceValue {
+    value: string;
+    constructor(resourceId: string);
+}
+export declare class ActionValue {
+    value: {
+        type: "execute";
+        args: string[];
+        code: string;
+    };
+    constructor(args: string[], code: string);
+}
+export declare class AssetValue {
+    value: string;
+    constructor(assetId: string);
+}
+export declare class PageValue {
+    value: string | {
+        pageId: string;
+        instanceId: string;
+    };
+    constructor(pageId: string, instanceId?: string);
+}
+export declare const renderJsx: (root: JSX.Element) => {
+    instances: Map<string, {
+        type: "instance";
+        id: string;
+        children: ({
+            value: string;
+            type: "text";
+            placeholder?: boolean | undefined;
+        } | {
+            value: string;
+            type: "id";
+        } | {
+            value: string;
+            type: "expression";
+        })[];
+        component: string;
+        label?: string | undefined;
+    }>;
+    props: Map<string, {
+        value: number;
+        type: "number";
+        id: string;
+        name: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "string";
+        id: string;
+        name: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: boolean;
+        type: "boolean";
+        id: string;
+        name: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        type: "json";
+        id: string;
+        name: string;
+        instanceId: string;
+        value?: unknown;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "asset";
+        id: string;
+        name: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: (string | {
+            instanceId: string;
+            pageId: string;
+        }) & (string | {
+            instanceId: string;
+            pageId: string;
+        } | undefined);
+        type: "page";
+        id: string;
+        name: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string[];
+        type: "string[]";
+        id: string;
+        name: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "parameter";
+        id: string;
+        name: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "resource";
+        id: string;
+        name: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "expression";
+        id: string;
+        name: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    } | {
+        value: {
+            code: string;
+            type: "execute";
+            args: string[];
+        }[];
+        type: "action";
+        id: string;
+        name: string;
+        instanceId: string;
+        required?: boolean | undefined;
+    }>;
+};
+type ComponentProps = Record<string, unknown> & Record<`${string}:expression`, string> & {
+    "ws:id"?: string;
+    "ws:label"?: string;
+    children?: ReactNode;
+};
+type Component = {
+    displayName: string;
+} & ((props: ComponentProps) => ReactNode);
+export declare const createProxy: (prefix: string) => Record<string, Component>;
+export declare const $: Record<string, Component>;
+export declare const ws: Record<string, Component>;
+export {};

package/lib/types/page-meta-generator.d.ts

@@ -1,4 +1,4 @@
-import type { Asset } from "./schema/assets";
+import type { Asset, Assets } from "./schema/assets";
 import type { DataSources } from "./schema/data-sources";
 import type { Page } from "./schema/pages";
 import { type Scope } from "./scope";
@@ -7,7 +7,7 @@ export type PageMeta = {
     description?: string;
     excludePageFromSearch?: boolean;
     language?: string;
-    socialImageAssetId?: Asset["id"];
+    socialImageAssetName?: Asset["name"];
     socialImageUrl?: string;
     status?: number;
     redirect?: string;
@@ -16,8 +16,9 @@ export type PageMeta = {
         content: string;
     }>;
 };
-export declare const generatePageMeta: ({ globalScope, page, dataSources, }: {
+export declare const generatePageMeta: ({ globalScope, page, dataSources, assets, }: {
     globalScope: Scope;
     page: Page;
     dataSources: DataSources;
+    assets: Assets;
 }) => string;

package/lib/types/resource-loader.d.ts

@@ -1,6 +1,15 @@
 import type { ResourceRequest } from "./schema/resources";
-export declare const loadResource: (customFetch: typeof fetch, resourceData: ResourceRequest) => Promise<{
+export declare const loadResource: (customFetch: typeof fetch, resourceRequest: ResourceRequest) => Promise<{
+    ok: boolean;
     data: any;
     status: number;
     statusText: string;
 }>;
+export declare const loadResources: (customFetch: typeof fetch, requests: Map<string, ResourceRequest>) => Promise<{
+    [k: string]: {
+        ok: boolean;
+        data: any;
+        status: number;
+        statusText: string;
+    };
+}>;