build: Release 29 04 26.staging (#5742)

Author: kof

.github/actions/vercel/action.yaml

@@ -18,8 +18,12 @@ inputs:
     description: "Sha"
     required: true
   environment:
-    description: "Sha"
+    description: "Alias environment"
     required: true
+  production-staged:
+    description: "Create a production deployment without assigning production domains"
+    required: false
+    default: "false"
   PUBLIC_COLLAB_RELAY_URL:
     description: "Public collaboration relay URL injected into the builder bundle"
     required: false
@@ -79,9 +83,14 @@ runs:
       run: |
         export GITHUB_SHA=${{ inputs.sha }}
         export GITHUB_REF_NAME=${{ inputs.ref-name }}
-        export PUBLIC_COLLAB_RELAY_URL=${{ inputs.PUBLIC_COLLAB_RELAY_URL }}
 
-        pnpx vercel build
+        if [ "${{ inputs.production-staged }}" = "true" ]; then
+          unset PUBLIC_COLLAB_RELAY_URL
+          pnpx vercel build --prod --token "${{ inputs.vercel-token }}"
+        else
+          export PUBLIC_COLLAB_RELAY_URL=${{ inputs.PUBLIC_COLLAB_RELAY_URL }}
+          pnpx vercel build --token "${{ inputs.vercel-token }}"
+        fi
       shell: bash
 
     - name: Patch
@@ -108,9 +117,17 @@ runs:
     - name: Deploy
       id: deploy
       run: |
+        deploy_args=(
+          --prebuilt
+          --token "${{ inputs.vercel-token }}"
+        )
+
+        if [ "${{ inputs.production-staged }}" = "true" ]; then
+          deploy_args+=(--prod --skip-domain)
+        fi
+
         pnpx vercel deploy \
-        --prebuilt \
-        --token ${{ inputs.vercel-token }} \
+        "${deploy_args[@]}" \
         2> >(tee info.txt >&2) | tee domain.txt
 
         echo "domain=$(cat ./domain.txt)" >> $GITHUB_OUTPUT

.github/workflows/vercel-deploy-staging.yml

@@ -86,6 +86,7 @@ jobs:
           ref-name: ${{ github.event_name == 'pull_request_target' && format('pr-{0}', github.event.pull_request.number) || github.ref_name }}
           sha: ${{ github.event_name == 'pull_request_target' && github.event.pull_request.head.sha || github.sha }}
           environment: ${{ matrix.environment }}
+          production-staged: ${{ github.event_name == 'push' && matrix.environment == 'staging' && startsWith(github.ref_name, 'release-') && endsWith(github.ref_name, '.staging') }}
           PUBLIC_COLLAB_RELAY_URL: ${{ vars.PUBLIC_COLLAB_RELAY_URL }}
 
       - name: Debug Vercel Outputs

apps/builder/app/builder/builder.tsx

@@ -58,7 +58,7 @@ import type { TokenPermissions } from "@webstudio-is/authorization-token";
 import { useToastErrors } from "~/shared/error/toast-error";
 import { initBuilderApi } from "~/shared/builder-api";
 import { updateWebstudioData } from "~/shared/instance-utils";
-import { migrateWebstudioDataMutable } from "@webstudio-is/sdk/migrations/webstudio-data";
+import { migrateWebstudioDataMutable } from "@webstudio-is/project-migrations";
 import { Loading, LoadingBackground } from "./shared/loading";
 import { mergeRefs } from "@react-aria/utils";
 import { CommandPanel } from "./features/command-panel";

apps/builder/app/builder/features/marketplace/utils.ts

@@ -1,10 +1,12 @@
 import {
   getStyleDeclKey,
-  migratePages,
   type Asset,
-  type SerializedPages,
   type WebstudioData,
 } from "@webstudio-is/sdk";
+import {
+  migratePages,
+  type SerializedPages,
+} from "@webstudio-is/project-migrations/pages";
 import type { CompactBuild } from "@webstudio-is/project-build";
 
 const getPair = <Item extends { id: string }>(item: Item) =>

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

@@ -0,0 +1,38 @@
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import {
+  ApiCompatibilityTarget,
+  apiClientHeader,
+  createApiCompatibilityPayload,
+} from "@webstudio-is/trpc-interface/api-compatibility";
+
+const getTarget = (request: Request) => {
+  const client = ApiCompatibilityTarget.safeParse(
+    request.headers.get(apiClientHeader)
+  );
+  if (client.success) {
+    return client.data;
+  }
+
+  return "browser";
+};
+
+const createResponse = (request: Request) => {
+  const payload = createApiCompatibilityPayload({
+    reason: "apiRouteNotFound",
+    target: getTarget(request),
+  });
+
+  return new Response(JSON.stringify({ success: false, error: payload }), {
+    status: 426,
+    headers: {
+      "Content-Type": "application/json; charset=utf-8",
+      "Cache-Control": "no-store",
+    },
+  });
+};
+
+export const loader = ({ request }: LoaderFunctionArgs) => {
+  return createResponse(request);
+};
+
+export const action = loader;

apps/builder/app/routes/rest.data.$projectId.ts

@@ -1,7 +1,7 @@
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import * as projectApi from "@webstudio-is/project/index.server";
 import { loadDevBuildByProjectId } from "@webstudio-is/project-build/index.server";
-import { serializePages } from "@webstudio-is/sdk";
+import { serializePages } from "@webstudio-is/project-migrations/pages";
 import { loadAssetsByProject } from "@webstudio-is/asset-uploader/index.server";
 import { createContext } from "~/shared/context.server";
 import { preventCrossOriginCookie } from "~/services/no-cross-origin-cookie";

apps/builder/app/services/auth-strategy/ws.server.ts

@@ -18,7 +18,10 @@ const asyncLocalStorage = new AsyncLocalStorage<
 >();
 
 // remix-auth-oauth2 logs OAuth state, PKCE verifier, and full callback URLs.
-createDebugRaw.enable(`${createDebugRaw.disable()},-OAuth2Strategy`);
+// Match both the exact namespace and any prefixed namespace enabled by DEBUG=*.
+createDebugRaw.enable(
+  `${createDebugRaw.disable()},-OAuth2Strategy,-*OAuth2Strategy*`
+);
 
 /**
  * The main issue with OAuth2Strategy is that it forces us to define authorizationEndpoint, tokenEndpoint, and redirectURI

apps/builder/app/services/trpc.server.ts

@@ -12,6 +12,7 @@ export const trpcSharedClient = createTrpcProxyServiceClient(
         url: TRPC_SERVER_URL,
         token: TRPC_SERVER_API_TOKEN,
         branchName: GITHUB_REF_NAME,
+        clientVersion: staticEnv.GITHUB_SHA ?? "local",
       }
     : undefined
 );

apps/builder/app/shared/builder-data.ts

@@ -1,8 +1,5 @@
-import {
-  getStyleDeclKey,
-  migratePages,
-  type WebstudioData,
-} from "@webstudio-is/sdk";
+import { getStyleDeclKey, type WebstudioData } from "@webstudio-is/sdk";
+import { migratePages } from "@webstudio-is/project-migrations/pages";
 import type { MarketplaceProduct } from "@webstudio-is/project-build";
 import type { Project } from "@webstudio-is/project";
 import type { loader } from "~/routes/rest.data.$projectId";

apps/builder/app/shared/context.server.ts

@@ -16,6 +16,11 @@ import { readLoginSessionBloomFilter } from "~/services/session.server";
 import type { BloomFilter } from "~/services/bloom-filter.server";
 import { isBuilder, isCanvas } from "./router-utils";
 import { parseBuilderUrl } from "@webstudio-is/http-client";
+import {
+  ApiClient,
+  apiClientHeader,
+  apiClientVersionHeader,
+} from "@webstudio-is/trpc-interface/api-compatibility";
 
 export const extractAuthFromRequest = async (request: Request) => {
   if (isCanvas(request)) {
@@ -180,6 +185,21 @@ const createTrpcCache = () => {
   };
 };
 
+const createApiClientContext = (request: Request): AppContext["apiClient"] => {
+  const client = ApiClient.safeParse(request.headers.get(apiClientHeader));
+  if (client.success === false) {
+    return {
+      type: "unknown",
+      version: undefined,
+    };
+  }
+
+  return {
+    type: client.data,
+    version: request.headers.get(apiClientVersionHeader) ?? undefined,
+  };
+};
+
 export const createPostgrestContext = () => {
   return { client: createClient(env.POSTGREST_URL, env.POSTGREST_API_KEY) };
 };
@@ -212,6 +232,7 @@ export const createContext = async (request: Request): Promise<AppContext> => {
   const entri = createEntriContext();
   const { planFeatures, purchases } = await resolvePlanInfo(authorization);
   const trpcCache = createTrpcCache();
+  const apiClient = createApiClientContext(request);
 
   const getOwnerPlanFeatures = async (userId: string) => {
     const results = await getPlanInfo([userId], { postgrest });
@@ -233,6 +254,7 @@ export const createContext = async (request: Request): Promise<AppContext> => {
       entri,
       planFeatures,
       purchases,
+      apiClient,
       trpcCache,
       postgrest,
       createTokenContext,
@@ -247,6 +269,7 @@ export const createContext = async (request: Request): Promise<AppContext> => {
     entri,
     planFeatures,
     purchases,
+    apiClient,
     trpcCache,
     postgrest,
     createTokenContext,