@webstudio-is/http-client 0.271.0 → 0.273.0

package/lib/index.js

@@ -1,14 +1,56 @@
 // src/index.ts
 import { createTRPCUntypedClient, httpBatchLink } from "@trpc/client";
+import { Upload } from "tus-js-client";
 import {
-  importProjectBundleResultSchema,
-  publishedProjectBundleSchema
-} from "@webstudio-is/protocol";
-import {
-  getBundleVersion,
-  isAssetFileDataString,
-  bundleVersion
+  importProjectBundleResult,
+  publishedProjectBundle,
+  maxProjectBundleSize,
+  stagedUploadPath,
+  stagedUploadProjectIdHeader
 } from "@webstudio-is/protocol";
+import { getBundleVersion, bundleVersion } from "@webstudio-is/protocol";
+var maxResponsePreviewLength = 500;
+var getResponsePreview = async (response) => {
+  try {
+    const text = await response.clone().text();
+    return text.replace(/\s+/g, " ").trim().slice(0, maxResponsePreviewLength);
+  } catch {
+    return "";
+  }
+};
+var createApiResponseErrorMessage = async (request, response) => {
+  const contentType = response.headers.get("content-type") ?? "unknown";
+  const status = `${response.status} ${response.statusText}`.trim();
+  const url = typeof request === "string" || request instanceof URL ? request.toString() : request.url;
+  const preview = await getResponsePreview(response);
+  const hint = response.status === 413 ? "The request may be too large for the API." : void 0;
+  return [
+    `API returned ${contentType} instead of JSON from ${url}.`,
+    `HTTP status: ${status}.`,
+    preview === "" ? void 0 : `Response preview: ${preview}`,
+    hint
+  ].filter(Boolean).join("\n");
+};
+var fetchJsonResponse = async (request, init) => {
+  const response = await fetch(request, init);
+  const contentType = response.headers.get("content-type");
+  if (contentType?.includes("json") !== true) {
+    throw new Error(await createApiResponseErrorMessage(request, response));
+  }
+  return response;
+};
+var createHeaders = (headers) => {
+  return new Headers(createHeadersObject(headers));
+};
+var createHeadersObject = (headers) => {
+  const result = {};
+  for (const [name, value] of Object.entries(headers)) {
+    if (value !== void 0) {
+      result[name] = value;
+    }
+  }
+  return result;
+};
 var createTrpcClient = (origin, headers) => {
   const { sourceOrigin } = parseBuilderUrl(origin);
   const url = new URL("/trpc", sourceOrigin);
@@ -16,7 +58,8 @@ var createTrpcClient = (origin, headers) => {
     links: [
       httpBatchLink({
         url: url.href,
-        headers
+        headers,
+        fetch: fetchJsonResponse
       })
     ]
   });
@@ -25,6 +68,50 @@ var createAuthTrpcClient = (params) => createTrpcClient(params.origin, {
   ...params.headers,
   "x-auth-token": params.authToken
 });
+var stagedUploadChunkSize = 3 * 1024 * 1024;
+var formatMebibytes = (bytes) => `${Math.round(bytes / 1024 / 1024)} MiB`;
+var getAssetUploadUrl = ({
+  asset,
+  origin,
+  projectId
+}) => {
+  const { sourceOrigin } = parseBuilderUrl(origin);
+  const url = new URL(
+    `/rest/assets/${encodeURIComponent(asset.name)}`,
+    sourceOrigin
+  );
+  url.searchParams.set("projectId", projectId);
+  url.searchParams.set("type", asset.type);
+  if (asset.type === "image") {
+    url.searchParams.set("width", String(asset.meta.width));
+    url.searchParams.set("height", String(asset.meta.height));
+    url.searchParams.set("format", asset.format);
+  }
+  return url;
+};
+var uploadAsset = async (params) => {
+  const { authToken, headers, origin, projectId, upload } = params;
+  const response = await fetchJsonResponse(
+    getAssetUploadUrl({
+      asset: upload.asset,
+      origin,
+      projectId
+    }),
+    {
+      method: "POST",
+      body: upload.data,
+      headers: createHeaders({
+        ...headers,
+        "x-auth-token": authToken,
+        "content-type": "application/octet-stream"
+      })
+    }
+  );
+  const result = await response.json();
+  if (typeof result === "object" && result !== null && "errors" in result && typeof result.errors === "string") {
+    throw new Error(result.errors);
+  }
+};
 var loadProjectBundleByBuildId = async (params) => {
   const headers = "serviceToken" in params ? { Authorization: params.serviceToken } : { "x-auth-token": params.authToken };
   const data = await createTrpcClient(params.origin, {
@@ -33,7 +120,7 @@ var loadProjectBundleByBuildId = async (params) => {
   }).query("build.loadProjectBundleByBuildId", {
     buildId: params.buildId
   });
-  return publishedProjectBundleSchema.parse(data);
+  return publishedProjectBundle.parse(data);
 };
 var loadProjectBundleByProjectId = async (params) => {
   const data = await createAuthTrpcClient(params).query(
@@ -42,7 +129,7 @@ var loadProjectBundleByProjectId = async (params) => {
       projectId: params.projectId
     }
   );
-  return publishedProjectBundleSchema.parse(data);
+  return publishedProjectBundle.parse(data);
 };
 var checkProjectBuildPermission = async (params) => {
   await createAuthTrpcClient(params).query(
@@ -52,17 +139,59 @@ var checkProjectBuildPermission = async (params) => {
     }
   );
 };
+var getUploadIdFromUrl = (uploadUrl) => {
+  if (uploadUrl === null) {
+    throw new Error("Project bundle upload did not return an upload URL.");
+  }
+  const { pathname } = new URL(uploadUrl);
+  const uploadId = pathname.split("/").filter(Boolean).at(-1);
+  if (uploadId === void 0) {
+    throw new Error("Project bundle upload did not return an upload id.");
+  }
+  return decodeURIComponent(uploadId);
+};
+var uploadProjectBundleData = async (params) => {
+  const { sourceOrigin } = parseBuilderUrl(params.origin);
+  const endpoint = new URL(stagedUploadPath, sourceOrigin);
+  const data = JSON.stringify(params.data);
+  if (new TextEncoder().encode(data).byteLength > maxProjectBundleSize) {
+    throw new Error(
+      `Project bundle is too large to import. Maximum size is ${formatMebibytes(maxProjectBundleSize)}.`
+    );
+  }
+  const file = typeof Buffer === "undefined" ? new Blob([data], { type: "application/json" }) : Buffer.from(data);
+  return await new Promise((resolve, reject) => {
+    const upload = new Upload(file, {
+      endpoint: endpoint.href,
+      chunkSize: stagedUploadChunkSize,
+      retryDelays: [0, 1e3],
+      removeFingerprintOnSuccess: true,
+      storeFingerprintForResuming: false,
+      headers: createHeadersObject({
+        ...params.headers,
+        "x-auth-token": params.authToken,
+        [stagedUploadProjectIdHeader]: params.projectId
+      }),
+      metadata: {
+        projectId: params.projectId
+      },
+      onError: reject,
+      onSuccess: () => resolve(getUploadIdFromUrl(upload.url))
+    });
+    upload.start();
+  });
+};
 var importProjectBundle = async (params) => {
+  const uploadId = await uploadProjectBundleData(params);
   const result = await createAuthTrpcClient(params).mutation(
     "build.importProjectBundle",
     {
       projectId: params.projectId,
-      data: params.data,
-      assetFiles: params.assetFiles,
+      uploadId,
       ignoreVersionCheck: params.ignoreVersionCheck
     }
   );
-  return importProjectBundleResultSchema.parse(result);
+  return importProjectBundleResult.parse(result);
 };
 var buildProjectDomainPrefix = "p-";
 var parseBuilderUrl = (urlStr) => {
@@ -99,8 +228,8 @@ export {
   checkProjectBuildPermission,
   getBundleVersion,
   importProjectBundle,
-  isAssetFileDataString,
   loadProjectBundleByBuildId,
   loadProjectBundleByProjectId,
-  parseBuilderUrl
+  parseBuilderUrl,
+  uploadAsset
 };

package/lib/types/index.d.ts

@@ -1,35 +1,36 @@
-import { type AssetFileData, type ImportProjectBundleResult, type PublishedProjectBundle } from "@webstudio-is/protocol";
-export { getBundleVersion, isAssetFileDataString, bundleVersion, } from "@webstudio-is/protocol";
-export type { AssetFileData, PublishedProjectBundle, ProjectBundle, } from "@webstudio-is/protocol";
+import { type ImportProjectBundleResult, type PublishedProjectBundle } from "@webstudio-is/protocol";
+export { getBundleVersion, bundleVersion } from "@webstudio-is/protocol";
+export type { PublishedProjectBundle, ProjectBundle, } from "@webstudio-is/protocol";
+type RequestHeaders = Record<string, string | undefined>;
+type AuthProjectParams = {
+    projectId: string;
+    origin: string;
+    authToken: string;
+    headers?: RequestHeaders;
+};
+type Asset = PublishedProjectBundle["assets"][number];
+type BinaryAssetData = Blob | ArrayBuffer | ArrayBufferView<ArrayBuffer>;
+type AssetUpload = {
+    asset: Asset;
+    data: BinaryAssetData;
+};
+export declare const uploadAsset: (params: AuthProjectParams & {
+    upload: AssetUpload;
+}) => Promise<void>;
 export declare const loadProjectBundleByBuildId: (params: {
     buildId: string;
     origin: string;
-    headers?: Record<string, string | undefined>;
+    headers?: RequestHeaders;
 } & ({
     serviceToken: string;
 } | {
     authToken: string;
 })) => Promise<PublishedProjectBundle>;
-export declare const loadProjectBundleByProjectId: (params: {
-    projectId: string;
-    origin: string;
-    authToken: string;
-    headers?: Record<string, string | undefined>;
-}) => Promise<PublishedProjectBundle>;
-export declare const checkProjectBuildPermission: (params: {
-    projectId: string;
-    origin: string;
-    authToken: string;
-    headers?: Record<string, string | undefined>;
-}) => Promise<void>;
-export declare const importProjectBundle: (params: {
-    projectId: string;
-    origin: string;
-    authToken: string;
+export declare const loadProjectBundleByProjectId: (params: AuthProjectParams) => Promise<PublishedProjectBundle>;
+export declare const checkProjectBuildPermission: (params: AuthProjectParams) => Promise<void>;
+export declare const importProjectBundle: (params: AuthProjectParams & {
     data: PublishedProjectBundle;
-    assetFiles?: AssetFileData[];
     ignoreVersionCheck?: boolean;
-    headers?: Record<string, string | undefined>;
 }) => Promise<ImportProjectBundleResult>;
 export declare const parseBuilderUrl: (urlStr: string) => {
     projectId: undefined;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@webstudio-is/http-client",
-  "version": "0.271.0",
+  "version": "0.273.0",
   "description": "Webstudio HTTP Client",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "dependencies": {
     "@trpc/client": "^10.45.2",
-    "@webstudio-is/protocol": "0.271.0"
+    "tus-js-client": "^4.3.1",
+    "@webstudio-is/protocol": "0.273.0"
   },
   "devDependencies": {
     "vitest": "^3.1.2",