refactor: enable all remix future flags

apps/builder/app/root.tsx

@@ -1,13 +1,13 @@
 // Our root outlet doesn't contain a layout because we have 2 types of documents: canvas and builder and we need to decide down the line which one to render, thre is no single root document.
-import { Outlet, json, useLoaderData } from "@remix-run/react";
+import { Outlet, useLoaderData } from "@remix-run/react";
 import { setEnv } from "@webstudio-is/feature-flags";
 import env from "./env/env.server";
 import { useSetFeatures } from "./shared/use-set-features";
 
 export const loader = () => {
-  return json({
+  return {
     features: env.FEATURES,
-  });
+  };
 };
 
 export default function App() {

apps/builder/app/routes/_ui.(builder).tsx

@@ -7,7 +7,7 @@ import { lazy } from "react";
 import { useLoaderData } from "@remix-run/react";
 import type { MetaFunction, ShouldRevalidateFunction } from "@remix-run/react";
 import {
-  json,
+  data,
   type HeadersArgs,
   type LoaderFunctionArgs,
 } from "@remix-run/server-runtime";
@@ -207,7 +207,7 @@ export const loader = async (loaderArgs: LoaderFunctionArgs) => {
       `frame-src ${url.origin}/canvas https://app.goentri.com/; worker-src 'none'`
     );
 
-    return json(
+    return data(
       {
         project,
         publisherHost,

apps/builder/app/routes/_ui.dashboard.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import { useLoaderData, type MetaFunction } from "@remix-run/react";
-import { json, type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { dashboardProjectRouter } from "@webstudio-is/dashboard/index.server";
 import { findAuthenticatedUser } from "~/services/auth.server";
 import { builderUrl, isDashboard, loginPath } from "~/shared/router-utils";
@@ -112,7 +112,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 
   const { sourceOrigin } = parseBuilderUrl(request.url);
 
-  return json({
+  return {
     user,
     projects,
     projectTemplates,
@@ -121,7 +121,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     imageBaseUrl: env.IMAGE_BASE_URL,
     origin: sourceOrigin,
     projectToClone,
-  });
+  };
 };
 
 /**

apps/builder/app/routes/_ui.login._index.tsx

@@ -1,8 +1,7 @@
 import {
   type LinksFunction,
   type LoaderFunctionArgs,
-  type TypedResponse,
-  json,
+  data,
 } from "@remix-run/server-runtime";
 import { useLoaderData, type MetaFunction } from "@remix-run/react";
 import { findAuthenticatedUser } from "~/services/auth.server";
@@ -49,9 +48,7 @@ export const meta: MetaFunction<typeof loader> = () => {
   return metas;
 };
 
-export const loader = async ({
-  request,
-}: LoaderFunctionArgs): Promise<TypedResponse<LoginProps>> => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
   if (false === isDashboard(request)) {
     throw new Response("Not Found", {
       status: 404,
@@ -83,14 +80,14 @@ export const loader = async ({
 
   headers.append("Set-Cookie", await returnToCookie.serialize(returnTo));
 
-  return json(
+  return data(
     {
       isSecretLoginEnabled: env.DEV_LOGIN === "true",
       isGithubEnabled: Boolean(env.GH_CLIENT_ID && env.GH_CLIENT_SECRET),
       isGoogleEnabled: Boolean(
         env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET
       ),
-    },
+    } satisfies LoginProps,
     { headers }
   );
 };

apps/builder/app/routes/_ui.logout.tsx

@@ -1,4 +1,4 @@
-import { json, type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { createDebug } from "~/shared/debug";
 import { builderUrl, isDashboard, loginPath } from "~/shared/router-utils";
 import { preventCrossOriginCookie } from "~/services/no-cross-origin-cookie";
@@ -58,10 +58,10 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
         `${builderUrl({ projectId, origin: url.origin })}builder-logout`
     );
 
-    return json({
+    return {
       redirectTo,
       logoutUrls,
-    });
+    };
   } catch (error) {
     if (error instanceof Response) {
       throw error;

apps/builder/app/routes/_ui.tsx

@@ -11,7 +11,7 @@ import manropeVariableFont from "@fontsource-variable/manrope/index.css?url";
 import robotoMonoFont from "@fontsource/roboto-mono/index.css?url";
 import appCss from "../shared/app.css?url";
 import {
-  json,
+  data,
   type LinksFunction,
   type LoaderFunctionArgs,
 } from "@remix-run/server-runtime";
@@ -56,7 +56,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   const [csrfToken, setCookieValue] = await getCsrfTokenAndCookie(request);
 
   if (request.headers.get("sec-fetch-mode") !== "navigate") {
-    return json({ csrfToken: "" });
+    return { csrfToken: "" };
   }
 
   const headers = new Headers();
@@ -65,7 +65,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     headers.set("Set-Cookie", setCookieValue);
   }
 
-  return json(
+  return data(
     { csrfToken },
     {
       headers,
@@ -77,6 +77,10 @@ export const clientLoader = async ({
   serverLoader,
 }: ClientLoaderFunctionArgs) => {
   const serverData = await serverLoader<typeof loader>();
+  // client loader is invoked twice with server data and with null
+  if (!serverData) {
+    return;
+  }
 
   if (clientCsrfToken === undefined) {
     const { csrfToken } = serverData;

apps/builder/app/routes/builder-logout.ts

@@ -1,4 +1,4 @@
-import { json, type ActionFunctionArgs } from "@remix-run/server-runtime";
+import { data, type ActionFunctionArgs } from "@remix-run/server-runtime";
 import { createDebug } from "~/shared/debug";
 import { builderAuthenticator } from "~/services/builder-auth.server";
 import { getAuthorizationServerOrigin } from "~/shared/router-utils/origins";
@@ -19,7 +19,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
   }
 
   if (request.method !== "POST") {
-    return json(
+    return data(
       { message: "Method not allowed" },
       {
         status: 405,

apps/builder/app/routes/dashboard-logout.ts

@@ -1,4 +1,4 @@
-import { json } from "@remix-run/server-runtime";
+import { data } from "@remix-run/server-runtime";
 import { authenticator } from "~/services/auth.server";
 import { isDashboard, loginPath } from "~/shared/router-utils";
 import { preventCrossOriginCookie } from "~/services/no-cross-origin-cookie";
@@ -32,7 +32,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
       headers.set("Content-Type", "application/json");
 
-      return json(
+      return data(
         {
           redirectTo: error.headers.get("Location"),
         },

apps/builder/app/routes/n8n.$.tsx

@@ -1,4 +1,4 @@
-import { type LoaderFunctionArgs, json } from "@remix-run/server-runtime";
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
 import { z } from "zod";
 import { findAuthenticatedUser } from "~/services/auth.server";
@@ -119,7 +119,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   n8nResponse satisfies never;
 
-  return json({});
+  return {};
 };
 
 export const ErrorBoundary = () => {

apps/builder/app/routes/oauth.ws.authorize.tsx

@@ -1,4 +1,4 @@
-import { json, type LoaderFunction } from "@remix-run/server-runtime";
+import { data, type LoaderFunction } from "@remix-run/server-runtime";
 import { z } from "zod";
 import { createDebug } from "~/shared/debug";
 import { fromError } from "zod-validation-error";
@@ -103,7 +103,7 @@ export const loader: LoaderFunction = async ({ request }) => {
     if (false === parsedRedirect.success) {
       debug("redirect_uri not provided in query params");
 
-      return json(
+      return data(
         {
           error: "invalid_request",
           error_description: "No redirect_uri provided",
@@ -126,7 +126,7 @@ export const loader: LoaderFunction = async ({ request }) => {
     ) {
       debug("redirect_uri does not match the registered redirect URIs");
 
-      return json(
+      return data(
         {
           error: "invalid_request",
           error_description:
@@ -196,7 +196,7 @@ export const loader: LoaderFunction = async ({ request }) => {
       ) {
         debug("redirect_uri does not match the registered redirect URIs");
 
-        return json(
+        return data(
           {
             error: "invalid_request",
             error_description:
@@ -260,7 +260,7 @@ export const loader: LoaderFunction = async ({ request }) => {
     console.error("error", error);
     debug("error", error);
 
-    throw json(
+    throw data(
       {
         error: "server_error",
         error_description:

apps/builder/app/routes/oauth.ws.token.ts

@@ -1,4 +1,4 @@
-import { type ActionFunctionArgs, json } from "@remix-run/server-runtime";
+import { type ActionFunctionArgs, data } from "@remix-run/server-runtime";
 import { z } from "zod";
 
 import { createDebug } from "~/shared/debug";
@@ -54,7 +54,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
   const authorizationHeader = request.headers.get("Authorization");
 
   if (authorizationHeader === null) {
-    return json(
+    return data(
       {
         error: "invalid_request",
         error_description: "missing client credentials",
@@ -79,7 +79,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     clientSecret !== env.AUTH_WS_CLIENT_SECRET
   ) {
     debug("client_id and client_secret do not match", clientId, clientSecret);
-    return json(
+    return data(
       {
         error: "invalid_client",
         error_description: "invalid client credentials",
@@ -97,7 +97,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
   if (false === parsedBody.success) {
     debug(fromError(parsedBody.error).toString());
 
-    return json(
+    return data(
       {
         error: "invalid_request",
         error_description: fromError(parsedBody.error).toString(),
@@ -114,7 +114,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
   if (codeToken === undefined) {
     debug("Code can not be read", body.code);
-    return json(
+    return data(
       {
         error: "invalid_grant",
         error_description: "invalid code",
@@ -135,7 +135,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
       body.code_verifier,
       codeToken.codeChallenge
     );
-    return json(
+    return data(
       {
         error: "invalid_grant",
         error_description: "invalid code_verifier",
@@ -151,7 +151,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
   if (false === isAuthorized) {
     debug("User does not have access to the project", userId, projectId);
-    return json(
+    return data(
       {
         error: "invalid_grant",
         error_description: "user does not have access to the project",
@@ -179,7 +179,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     await readAccessToken(accessToken, env.AUTH_WS_CLIENT_SECRET)
   );
 
-  return json(
+  return data(
     {
       access_token: accessToken,
       token_type: "Bearer",

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

@@ -1,5 +1,5 @@
 import {
-  json,
+  data,
   type LoaderFunctionArgs,
   type TypedResponse,
 } from "@remix-run/server-runtime";
@@ -39,7 +39,7 @@ export const loader = async ({
     const buildId = params.buildId;
 
     if (buildId === undefined) {
-      throw json("Required build id", { status: 400 });
+      throw data("Required build id", { status: 400 });
     }
 
     const context = await createContext(request);
@@ -72,7 +72,7 @@ export const loader = async ({
     console.error(error);
 
     // We have no idea what happened, so we'll return a 500 error.
-    throw json(parseError(error), {
+    throw data(parseError(error), {
       status: 500,
     });
   }

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

@@ -1,5 +1,5 @@
 import {
-  json,
+  data,
   type LoaderFunctionArgs,
   type TypedResponse,
 } from "@remix-run/server-runtime";
@@ -34,7 +34,7 @@ export const loader = async ({
     const projectId = params.projectId;
 
     if (projectId === undefined) {
-      throw json("Required project id", { status: 400 });
+      throw data("Required project id", { status: 400 });
     }
 
     // @todo Create a context without user authentication information.
@@ -55,7 +55,7 @@ export const loader = async ({
 
     console.error(error);
 
-    throw json(parseError(error), {
+    throw data(parseError(error), {
       status: 500,
     });
   }

apps/builder/app/routes/rest.resources-loader.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { json, type ActionFunctionArgs } from "@remix-run/server-runtime";
+import { data, type ActionFunctionArgs } from "@remix-run/server-runtime";
 import { ResourceRequest } from "@webstudio-is/sdk";
 import { isLocalResource, loadResource } from "@webstudio-is/sdk/runtime";
 import { loader as siteMapLoader } from "../shared/$resources/sitemap.xml.server";
@@ -11,13 +11,13 @@ export const action = async ({ request }: ActionFunctionArgs) => {
   await checkCsrf(request);
 
   // Hope Remix will have customFetch by default, see https://kit.svelte.dev/docs/load#making-fetch-requests
-  const customFetch: typeof fetch = (input, init) => {
+  const customFetch: typeof fetch = async (input, init) => {
     if (typeof input !== "string") {
       return fetch(input, init);
     }
 
     if (isLocalResource(input, "sitemap.xml")) {
-      return siteMapLoader({ request });
+      return Response.json(siteMapLoader({ request }));
     }
 
     return fetch(input, init);
@@ -36,7 +36,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     );
     console.error("data:", requestJson);
 
-    throw json(computedResourcesParsed.error, {
+    throw data(computedResourcesParsed.error, {
       status: 400,
     });
   }