@webstudio-is/sdk 0.228.0 → 0.230.0

package/lib/index.js

@@ -254,11 +254,6 @@ var Method = z5.union([
   z5.literal("put"),
   z5.literal("delete")
 ]);
-var Header = z5.object({
-  name: z5.string(),
-  // expression
-  value: z5.string()
-});
 var Resource = z5.object({
   id: ResourceId,
   name: z5.string(),
@@ -266,16 +261,41 @@ var Resource = z5.object({
   method: Method,
   // expression
   url: z5.string(),
-  headers: z5.array(Header),
+  searchParams: z5.array(
+    z5.object({
+      name: z5.string(),
+      // expression
+      value: z5.string()
+    })
+  ).optional(),
+  headers: z5.array(
+    z5.object({
+      name: z5.string(),
+      // expression
+      value: z5.string()
+    })
+  ),
   // expression
   body: z5.optional(z5.string())
 });
 var ResourceRequest = z5.object({
-  id: ResourceId,
   name: z5.string(),
   method: Method,
   url: z5.string(),
-  headers: z5.array(Header),
+  searchParams: z5.array(
+    z5.object({
+      name: z5.string(),
+      // can be string or object which should be serialized
+      value: z5.unknown()
+    })
+  ),
+  headers: z5.array(
+    z5.object({
+      name: z5.string(),
+      // can be string or object which should be serialized
+      value: z5.unknown()
+    })
+  ),
   body: z5.optional(z5.unknown())
 });
 var Resources = z5.map(ResourceId, Resource);
@@ -2310,8 +2330,6 @@ var generateResources = ({
     let generatedRequest = "";
     const resourceName = scope.getName(resource.id, resource.name);
     generatedRequest += `  const ${resourceName}: ResourceRequest = {
-`;
-    generatedRequest += `    id: "${resource.id}",
 `;
     generatedRequest += `    name: ${JSON.stringify(resource.name)},
 `;
@@ -2322,6 +2340,20 @@ var generateResources = ({
       scope
     });
     generatedRequest += `    url: ${url},
+`;
+    generatedRequest += `    searchParams: [
+`;
+    for (const searchParam of resource.searchParams ?? []) {
+      const value = generateExpression({
+        expression: searchParam.value,
+        dataSources,
+        usedDataSources,
+        scope
+      });
+      generatedRequest += `      { name: "${searchParam.name}", value: ${value} },
+`;
+    }
+    generatedRequest += `    ],
 `;
     generatedRequest += `    method: "${resource.method}",
 `;

package/lib/runtime.js

@@ -1,3 +1,33 @@
+// src/resource-loader.ts
+import hash from "@emotion/hash";
+
+// src/to-string.ts
+var createJsonStringifyProxy = (target) => {
+  return new Proxy(target, {
+    get(target2, prop, receiver) {
+      if (prop === "toString") {
+        return function() {
+          return JSON.stringify(target2);
+        };
+      }
+      const value = Reflect.get(target2, prop, receiver);
+      if (typeof value === "object" && value !== null) {
+        return createJsonStringifyProxy(value);
+      }
+      return value;
+    }
+  });
+};
+var isPlainObject = (value) => {
+  return Object.prototype.toString.call(value) === "[object Object]" && (Object.getPrototypeOf(value) === null || Object.getPrototypeOf(value) === Object.prototype);
+};
+var serializeValue = (value) => {
+  if (typeof value === "string") {
+    return value;
+  }
+  return JSON.stringify(value);
+};
+
 // src/resource-loader.ts
 var LOCAL_RESOURCE_PREFIX = "$resources";
 var isLocalResource = (pathname, resourceName) => {
@@ -9,24 +39,33 @@ var isLocalResource = (pathname, resourceName) => {
 };
 var sitemapResourceUrl = `/${LOCAL_RESOURCE_PREFIX}/sitemap.xml`;
 var loadResource = async (customFetch, resourceRequest) => {
-  const { url, method, headers, body } = resourceRequest;
-  const requestHeaders = new Headers(
-    headers.map(({ name, value }) => [name, value])
-  );
-  const requestInit = {
-    method,
-    headers: requestHeaders
-  };
-  if (method !== "get" && body !== void 0) {
-    if (typeof body === "string") {
-      requestInit.body = body;
+  try {
+    const { method, searchParams, headers, body } = resourceRequest;
+    let href = resourceRequest.url;
+    try {
+      const url = new URL(resourceRequest.url.trim());
+      if (searchParams) {
+        for (const { name, value } of searchParams) {
+          url.searchParams.append(name, serializeValue(value));
+        }
+      }
+      href = url.href;
+    } catch {
     }
-    if (typeof body === "object") {
-      requestInit.body = JSON.stringify(body);
+    const requestHeaders = new Headers(
+      headers.map(({ name, value }) => [
+        name,
+        serializeValue(value)
+      ])
+    );
+    const requestInit = {
+      method,
+      headers: requestHeaders
+    };
+    if (method !== "get" && body !== void 0) {
+      requestInit.body = serializeValue(body);
     }
-  }
-  try {
-    const response = await customFetch(url.trim(), requestInit);
+    const response = await customFetch(href, requestInit);
     let data = await response.text();
     try {
       data = JSON.parse(data);
@@ -34,14 +73,14 @@ var loadResource = async (customFetch, resourceRequest) => {
     }
     if (!response.ok) {
       console.error(
-        `Failed to load resource: ${url} - ${response.status}: ${JSON.stringify(data).slice(0, 300)}`
+        `Failed to load resource: ${href} - ${response.status}: ${JSON.stringify(data).slice(0, 300)}`
       );
     }
     return {
       ok: response.ok,
-      data,
       status: response.status,
-      statusText: response.statusText
+      statusText: response.statusText,
+      data
     };
   } catch (error) {
     console.error(error);
@@ -64,26 +103,38 @@ var loadResources = async (customFetch, requests) => {
     )
   );
 };
-
-// src/to-string.ts
-var createJsonStringifyProxy = (target) => {
-  return new Proxy(target, {
-    get(target2, prop, receiver) {
-      if (prop === "toString") {
-        return function() {
-          return JSON.stringify(target2);
-        };
-      }
-      const value = Reflect.get(target2, prop, receiver);
-      if (typeof value === "object" && value !== null) {
-        return createJsonStringifyProxy(value);
-      }
-      return value;
-    }
-  });
+var getCacheKey = async (request) => {
+  const url = new URL(request.url);
+  const method = request.method;
+  const body = await request.clone().text();
+  const cacheControl = request.headers.get("Cache-Control");
+  const resourceHash = hash(`${method}:${body}:${cacheControl}`);
+  url.searchParams.set("ws-resource-hash", resourceHash);
+  return url;
 };
-var isPlainObject = (value) => {
-  return Object.prototype.toString.call(value) === "[object Object]" && (Object.getPrototypeOf(value) === null || Object.getPrototypeOf(value) === Object.prototype);
+var cachedFetch = async (namespace, input, init) => {
+  if (globalThis.caches) {
+    const request = new Request(input, init);
+    const requestCacheControl = request.headers.get("Cache-Control");
+    if (!requestCacheControl) {
+      return fetch(input, init);
+    }
+    const cache = await caches.open(namespace);
+    const cacheKey = await getCacheKey(request);
+    let response = await cache.match(cacheKey);
+    if (response) {
+      return new Response(response.body, response);
+    }
+    response = await fetch(request);
+    if (!response.ok) {
+      return response;
+    }
+    response = new Response(response.body, response);
+    response.headers.set("Cache-Control", requestCacheControl);
+    await cache.put(cacheKey, response.clone());
+    return response;
+  }
+  return fetch(input, init);
 };
 
 // src/form-fields.ts
@@ -102,6 +153,7 @@ var getIndexWithinAncestorFromProps = (props) => {
 var animationCanPlayOnCanvasProperty = "data-ws-animation-can-play-on-canvas";
 export {
   animationCanPlayOnCanvasProperty,
+  cachedFetch,
   createJsonStringifyProxy,
   formBotFieldName,
   formIdFieldName,
@@ -112,6 +164,7 @@ export {
   isPlainObject,
   loadResource,
   loadResources,
+  serializeValue,
   sitemapResourceUrl,
   tagProperty
 };

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

@@ -6,9 +6,9 @@ export declare const isLocalResource: (pathname: string, resourceName?: string)
 export declare const sitemapResourceUrl = "/$resources/sitemap.xml";
 export declare const loadResource: (customFetch: typeof fetch, resourceRequest: ResourceRequest) => Promise<{
     ok: boolean;
-    data: string;
     status: number;
     statusText: string;
+    data: string;
 } | {
     ok: boolean;
     data: undefined;
@@ -18,9 +18,9 @@ export declare const loadResource: (customFetch: typeof fetch, resourceRequest:
 export declare const loadResources: (customFetch: typeof fetch, requests: Map<string, ResourceRequest>) => Promise<{
     [k: string]: {
         ok: boolean;
-        data: string;
         status: number;
         statusText: string;
+        data: string;
     } | {
         ok: boolean;
         data: undefined;
@@ -28,3 +28,4 @@ export declare const loadResources: (customFetch: typeof fetch, requests: Map<st
         statusText: string;
     };
 }>;
+export declare const cachedFetch: (namespace: string, input: RequestInfo | URL, init?: RequestInit) => Promise<Response>;

package/lib/types/schema/resources.d.ts

@@ -5,6 +5,16 @@ export declare const Resource: z.ZodObject<{
     control: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"system">, z.ZodLiteral<"graphql">]>>;
     method: z.ZodUnion<[z.ZodLiteral<"get">, z.ZodLiteral<"post">, z.ZodLiteral<"put">, z.ZodLiteral<"delete">]>;
     url: z.ZodString;
+    searchParams: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        value: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        value: string;
+        name: string;
+    }, {
+        value: string;
+        name: string;
+    }>, "many">>;
     headers: z.ZodArray<z.ZodObject<{
         name: z.ZodString;
         value: z.ZodString;
@@ -27,6 +37,10 @@ export declare const Resource: z.ZodObject<{
     }[];
     body?: string | undefined;
     control?: "system" | "graphql" | undefined;
+    searchParams?: {
+        value: string;
+        name: string;
+    }[] | undefined;
 }, {
     name: string;
     url: string;
@@ -38,42 +52,61 @@ export declare const Resource: z.ZodObject<{
     }[];
     body?: string | undefined;
     control?: "system" | "graphql" | undefined;
+    searchParams?: {
+        value: string;
+        name: string;
+    }[] | undefined;
 }>;
 export type Resource = z.infer<typeof Resource>;
 export declare const ResourceRequest: z.ZodObject<{
-    id: z.ZodString;
     name: z.ZodString;
     method: z.ZodUnion<[z.ZodLiteral<"get">, z.ZodLiteral<"post">, z.ZodLiteral<"put">, z.ZodLiteral<"delete">]>;
     url: z.ZodString;
+    searchParams: z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        value: z.ZodUnknown;
+    }, "strip", z.ZodTypeAny, {
+        name: string;
+        value?: unknown;
+    }, {
+        name: string;
+        value?: unknown;
+    }>, "many">;
     headers: z.ZodArray<z.ZodObject<{
         name: z.ZodString;
-        value: z.ZodString;
+        value: z.ZodUnknown;
     }, "strip", z.ZodTypeAny, {
-        value: string;
         name: string;
+        value?: unknown;
     }, {
-        value: string;
         name: string;
+        value?: unknown;
     }>, "many">;
     body: z.ZodOptional<z.ZodUnknown>;
 }, "strip", z.ZodTypeAny, {
     name: string;
     url: string;
-    id: string;
     method: "get" | "post" | "put" | "delete";
+    searchParams: {
+        name: string;
+        value?: unknown;
+    }[];
     headers: {
-        value: string;
         name: string;
+        value?: unknown;
     }[];
     body?: unknown;
 }, {
     name: string;
     url: string;
-    id: string;
     method: "get" | "post" | "put" | "delete";
+    searchParams: {
+        name: string;
+        value?: unknown;
+    }[];
     headers: {
-        value: string;
         name: string;
+        value?: unknown;
     }[];
     body?: unknown;
 }>;
@@ -84,6 +117,16 @@ export declare const Resources: z.ZodMap<z.ZodString, z.ZodObject<{
     control: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"system">, z.ZodLiteral<"graphql">]>>;
     method: z.ZodUnion<[z.ZodLiteral<"get">, z.ZodLiteral<"post">, z.ZodLiteral<"put">, z.ZodLiteral<"delete">]>;
     url: z.ZodString;
+    searchParams: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        name: z.ZodString;
+        value: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        value: string;
+        name: string;
+    }, {
+        value: string;
+        name: string;
+    }>, "many">>;
     headers: z.ZodArray<z.ZodObject<{
         name: z.ZodString;
         value: z.ZodString;
@@ -106,6 +149,10 @@ export declare const Resources: z.ZodMap<z.ZodString, z.ZodObject<{
     }[];
     body?: string | undefined;
     control?: "system" | "graphql" | undefined;
+    searchParams?: {
+        value: string;
+        name: string;
+    }[] | undefined;
 }, {
     name: string;
     url: string;
@@ -117,5 +164,9 @@ export declare const Resources: z.ZodMap<z.ZodString, z.ZodObject<{
     }[];
     body?: string | undefined;
     control?: "system" | "graphql" | undefined;
+    searchParams?: {
+        value: string;
+        name: string;
+    }[] | undefined;
 }>>;
 export type Resources = z.infer<typeof Resources>;

package/lib/types/schema/webstudio.d.ts

@@ -402,6 +402,16 @@ export declare const WebstudioFragment: z.ZodObject<{
         control: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"system">, z.ZodLiteral<"graphql">]>>;
         method: z.ZodUnion<[z.ZodLiteral<"get">, z.ZodLiteral<"post">, z.ZodLiteral<"put">, z.ZodLiteral<"delete">]>;
         url: z.ZodString;
+        searchParams: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            name: z.ZodString;
+            value: z.ZodString;
+        }, "strip", z.ZodTypeAny, {
+            value: string;
+            name: string;
+        }, {
+            value: string;
+            name: string;
+        }>, "many">>;
         headers: z.ZodArray<z.ZodObject<{
             name: z.ZodString;
             value: z.ZodString;
@@ -424,6 +434,10 @@ export declare const WebstudioFragment: z.ZodObject<{
         }[];
         body?: string | undefined;
         control?: "system" | "graphql" | undefined;
+        searchParams?: {
+            value: string;
+            name: string;
+        }[] | undefined;
     }, {
         name: string;
         url: string;
@@ -435,6 +449,10 @@ export declare const WebstudioFragment: z.ZodObject<{
         }[];
         body?: string | undefined;
         control?: "system" | "graphql" | undefined;
+        searchParams?: {
+            value: string;
+            name: string;
+        }[] | undefined;
     }>, "many">;
     props: z.ZodArray<z.ZodUnion<[z.ZodObject<{
         type: z.ZodLiteral<"number">;
@@ -22544,6 +22562,10 @@ export declare const WebstudioFragment: z.ZodObject<{
         }[];
         body?: string | undefined;
         control?: "system" | "graphql" | undefined;
+        searchParams?: {
+            value: string;
+            name: string;
+        }[] | undefined;
     }[];
     breakpoints: {
         label: string;
@@ -24704,6 +24726,10 @@ export declare const WebstudioFragment: z.ZodObject<{
         }[];
         body?: string | undefined;
         control?: "system" | "graphql" | undefined;
+        searchParams?: {
+            value: string;
+            name: string;
+        }[] | undefined;
     }[];
     breakpoints: {
         label: string;

package/lib/types/to-string.d.ts

@@ -1,2 +1,3 @@
 export declare const createJsonStringifyProxy: <T extends object>(target: T) => T;
 export declare const isPlainObject: (value: unknown) => value is object;
+export declare const serializeValue: (value: unknown) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk",
-  "version": "0.228.0",
+  "version": "0.230.0",
   "description": "Webstudio project data schema",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -34,22 +34,23 @@
   ],
   "sideEffects": false,
   "dependencies": {
+    "@emotion/hash": "^0.9.2",
     "acorn": "^8.14.1",
     "acorn-walk": "^8.3.4",
     "change-case": "^5.4.4",
     "reserved-identifiers": "^1.0.0",
     "type-fest": "^4.37.0",
     "zod": "^3.24.2",
-    "@webstudio-is/css-engine": "0.228.0",
-    "@webstudio-is/fonts": "0.228.0",
-    "@webstudio-is/icons": "0.228.0"
+    "@webstudio-is/css-engine": "0.230.0",
+    "@webstudio-is/fonts": "0.230.0",
+    "@webstudio-is/icons": "0.230.0"
   },
   "devDependencies": {
     "html-tags": "^4.0.0",
     "vitest": "^3.1.2",
+    "@webstudio-is/template": "0.230.0",
     "@webstudio-is/css-data": "0.0.0",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/template": "0.228.0"
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "typecheck": "tsc",