Move build data sync to tRPC

Author: kof

apps/builder/app/routes/rest.build-version.ts

@@ -9,10 +9,16 @@ const isServiceRequest = (request: Request) => {
   return isServiceAuthorization(request.headers.get("Authorization"));
 };
 
+const isAuthTokenRequest = (request: Request) => {
+  return request.headers.has("x-auth-token");
+};
+
 export const action = async ({ request }: ActionFunctionArgs) => {
   if (isServiceRequest(request) === false) {
     preventCrossOriginCookie(request);
-    await checkCsrf(request);
+    if (isAuthTokenRequest(request) === false) {
+      await checkCsrf(request);
+    }
   }
 
   // https://trpc.io/docs/server/adapters/fetch

apps/builder/app/routes/rest.build.$buildId.tsx

@@ -18,6 +18,10 @@ import {
 } from "~/shared/sync/patch/patch-service.server";
 import { normalizePatchRequest } from "~/shared/sync/patch/patch-normalize.server";
 import type { BuildPatchTransaction } from "@webstudio-is/project/index.server";
+import {
+  loadPublishedProjectDataByBuildId,
+  loadPublishedProjectDataByProjectId,
+} from "~/shared/db";
 
 const patchEntryInput = z.object({
   seq: z.number().optional(),
@@ -93,6 +97,18 @@ const assertRelayPatchContext = (
 };
 
 export const buildRouter = router({
+  loadProjectDataByBuildId: procedure
+    .input(z.object({ buildId: z.string() }))
+    .query(async ({ ctx, input }) => {
+      return await loadPublishedProjectDataByBuildId(input.buildId, ctx);
+    }),
+
+  loadProjectDataByProjectId: procedure
+    .input(z.object({ projectId: z.string() }))
+    .query(async ({ ctx, input }) => {
+      return await loadPublishedProjectDataByProjectId(input.projectId, ctx);
+    }),
+
   createCollabToken: procedure
     .input(
       z.object({

apps/builder/app/routes/rest.buildId.$projectId.tsx

@@ -9,16 +9,26 @@ import {
   serializePages,
 } from "@webstudio-is/sdk";
 import * as projectApi from "@webstudio-is/project/index.server";
+import { getUserById, type User } from "./user.server";
+
+export type PublishedProjectData = Data & {
+  user: { email: User["email"] } | undefined;
+  projectDomain: string;
+  projectTitle: string;
+};
 
 const getPair = <Item extends { id: string }>(item: Item): [string, Item] => [
   item.id,
   item,
 ];
 
-export const loadProductionCanvasData = async (
+type Project = NonNullable<Awaited<ReturnType<typeof projectApi.loadById>>>;
+
+const loadProductionCanvasDataAndProject = async (
   buildId: string,
-  context: AppContext
-): Promise<Data> => {
+  context: AppContext,
+  project?: Project
+): Promise<{ data: Data; project: Project }> => {
   const build = await loadBuildById(context, buildId);
 
   if (build === undefined) {
@@ -31,7 +41,10 @@ export const loadProductionCanvasData = async (
     throw new Error("The project is not published");
   }
 
-  const project = await projectApi.loadById(build.projectId, context);
+  project = project ?? (await projectApi.loadById(build.projectId, context));
+  if (project === null) {
+    throw new Error(`Project "${build.projectId}" not found`);
+  }
 
   const currentProjectDomains = project.domainsVirtual;
 
@@ -77,28 +90,90 @@ export const loadProductionCanvasData = async (
   );
 
   return {
-    build: {
-      id: build.id,
-      projectId: build.projectId,
-      version: build.version,
-      createdAt: build.createdAt,
-      updatedAt: build.updatedAt,
-      pages: serializePages(build.pages),
-      breakpoints: build.breakpoints.map(getPair),
-      styles: build.styles.map((item) => [getStyleDeclKey(item), item]),
-      styleSources: build.styleSources.map(getPair),
-      styleSourceSelections: build.styleSourceSelections.map((item) => [
-        item.instanceId,
-        item,
-      ]),
-      props: build.props.map(getPair),
-      dataSources: build.dataSources.map(getPair),
-      resources: build.resources.map(getPair),
-      instances: build.instances.map(getPair),
-      deployment,
+    data: {
+      build: {
+        id: build.id,
+        projectId: build.projectId,
+        version: build.version,
+        createdAt: build.createdAt,
+        updatedAt: build.updatedAt,
+        pages: serializePages(build.pages),
+        breakpoints: build.breakpoints.map(getPair),
+        styles: build.styles.map((item) => [getStyleDeclKey(item), item]),
+        styleSources: build.styleSources.map(getPair),
+        styleSourceSelections: build.styleSourceSelections.map((item) => [
+          item.instanceId,
+          item,
+        ]),
+        props: build.props.map(getPair),
+        dataSources: build.dataSources.map(getPair),
+        resources: build.resources.map(getPair),
+        instances: build.instances.map(getPair),
+        deployment,
+      },
+      page,
+      pages: getAllPages(build.pages),
+      assets,
     },
-    page,
-    pages: getAllPages(build.pages),
-    assets,
+    project,
+  };
+};
+
+const addProjectMetadata = async (
+  data: Data,
+  project: Project,
+  context: AppContext
+): Promise<PublishedProjectData> => {
+  const user =
+    project.userId === null
+      ? undefined
+      : await getUserById(context, project.userId);
+
+  return {
+    ...data,
+    user: user ? { email: user.email } : undefined,
+    projectDomain: project.domain,
+    projectTitle: project.title,
   };
 };
+
+export const loadProductionCanvasData = async (
+  buildId: string,
+  context: AppContext
+): Promise<Data> => {
+  const { data } = await loadProductionCanvasDataAndProject(buildId, context);
+  return data;
+};
+
+export const loadPublishedProjectDataByBuildId = async (
+  buildId: string,
+  context: AppContext
+): Promise<PublishedProjectData> => {
+  const { data, project } = await loadProductionCanvasDataAndProject(
+    buildId,
+    context
+  );
+  return await addProjectMetadata(data, project, context);
+};
+
+export const loadPublishedProjectDataByProjectId = async (
+  projectId: string,
+  context: AppContext
+): Promise<PublishedProjectData> => {
+  const project = await projectApi.loadById(projectId, context);
+  if (project === null) {
+    throw new Error(`Project "${projectId}" not found`);
+  }
+
+  const buildId = project.latestBuildVirtual?.buildId;
+  if (buildId === undefined || buildId === null) {
+    throw new Error("The project is not published yet");
+  }
+
+  const { data } = await loadProductionCanvasDataAndProject(
+    buildId,
+    context,
+    project
+  );
+  return await addProjectMetadata(data, project, context);
+};

apps/builder/app/routes/trpc.$.ts

@@ -157,9 +157,6 @@ export const restAssetsUploadPath = ({
   return `/rest/assets/${name}`;
 };
 
-export const restBuildVersionPath = (buildId: string) =>
-  `/rest/build-version?buildId=${encodeURIComponent(buildId)}`;
-
 export const getCanvasUrl = () => {
   return `/canvas`;
 };

apps/builder/app/services/build-router.server.ts

@@ -33,6 +33,7 @@
   "dependencies": {
     "@clack/prompts": "^0.10.0",
     "@emotion/hash": "^0.9.2",
+    "@trpc/client": "^10.45.2",
     "acorn": "^8.14.1",
     "acorn-walk": "^8.3.4",
     "change-case": "^5.4.4",