refactor: move remix root into template (#3071)

React sdk not necessary to depend on remix. It will even complicate
remix upgrade.

apps/builder/app/routes/$.tsx

@@ -1,3 +1,4 @@
+import { Links, Meta } from "@remix-run/react";
 import { redirect } from "@remix-run/node";
 import type { LoaderArgs } from "@remix-run/node";
 import {
@@ -5,13 +6,13 @@ import {
   useLoaderData,
   useRouteError,
 } from "@remix-run/react";
-import { type Params, Root } from "@webstudio-is/react-sdk";
+import type { Params } from "@webstudio-is/react-sdk";
+import { createImageLoader } from "@webstudio-is/image";
 import env from "~/env/env.public.server";
 import { sentryException } from "~/shared/sentry";
 import { Canvas } from "~/canvas";
 import { ErrorMessage } from "~/shared/error";
 import { dashboardPath, isCanvas } from "~/shared/router-utils";
-import { createImageLoader } from "@webstudio-is/image";
 
 export const loader = async ({ request }: LoaderArgs) => {
   const url = new URL(request.url);
@@ -64,9 +65,17 @@ const Outlet = () => {
  */
 
 const Content = () => {
-  // @todo This is non-standard for Remix, is there a better way?
-  // Maybe there is a way to tell remix to use the right outlet somehow and avoid passing it?
-  return <Root Outlet={Outlet} />;
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <Outlet />
+    </html>
+  );
 };
 
 export default Content;

fixtures/webstudio-custom-template/app/root.tsx

@@ -1,14 +1,24 @@
-import { Root as SdkRoot } from "@webstudio-is/react-sdk";
-import { subscribe } from "./web-vitals";
 import { useEffect } from "react";
+import { Links, Meta, Outlet } from "@remix-run/react";
+import { subscribe } from "./web-vitals";
 
 /**
  * Custom root so we can add some custom logic for specific resurces etc like analytics, etc.
  */
-const Root = (props: React.ComponentProps<typeof SdkRoot>) => {
+const Root = () => {
   useEffect(subscribe, []);
 
-  return <SdkRoot {...props} />;
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <Outlet />
+    </html>
+  );
 };
 
 export default Root;

fixtures/webstudio-custom-template/custom-template-stage/app/root.tsx

@@ -1,14 +1,24 @@
-import { Root as SdkRoot } from "@webstudio-is/react-sdk";
-import { subscribe } from "./web-vitals";
 import { useEffect } from "react";
+import { Links, Meta, Outlet } from "@remix-run/react";
+import { subscribe } from "./web-vitals";
 
 /**
  * Custom root so we can add some custom logic for specific resurces etc like analytics, etc.
  */
-const Root = (props: React.ComponentProps<typeof SdkRoot>) => {
+const Root = () => {
   useEffect(subscribe, []);
 
-  return <SdkRoot {...props} />;
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <Outlet />
+    </html>
+  );
 };
 
 export default Root;

fixtures/webstudio-remix-netlify-edge-functions/app/root.tsx

@@ -1 +1,17 @@
-export { Root as default } from "@webstudio-is/react-sdk";
+import { Links, Meta, Outlet } from "@remix-run/react";
+
+const Root = () => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <Outlet />
+    </html>
+  );
+};
+
+export default Root;

fixtures/webstudio-remix-netlify-functions/app/root.tsx

@@ -1 +1,17 @@
-export { Root as default } from "@webstudio-is/react-sdk";
+import { Links, Meta, Outlet } from "@remix-run/react";
+
+const Root = () => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <Outlet />
+    </html>
+  );
+};
+
+export default Root;

fixtures/webstudio-remix-vercel/app/root.tsx

@@ -1 +1,17 @@
-export { Root as default } from "@webstudio-is/react-sdk";
+import { Links, Meta, Outlet } from "@remix-run/react";
+
+const Root = () => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <Outlet />
+    </html>
+  );
+};
+
+export default Root;

packages/cli/templates/defaults/app/root.tsx

@@ -1 +1,17 @@
-export { Root as default } from "@webstudio-is/react-sdk";
+import { Links, Meta, Outlet } from "@remix-run/react";
+
+const Root = () => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <Outlet />
+    </html>
+  );
+};
+
+export default Root;

packages/react-sdk/package.json

@@ -15,7 +15,6 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@remix-run/react": "^1.19.2",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@webstudio-is/jest-config": "workspace:*",
@@ -28,7 +27,6 @@
     "zod": "^3.22.4"
   },
   "peerDependencies": {
-    "@remix-run/react": "^1.19.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "zod": "^3.19.1"

packages/react-sdk/src/app/index.ts

@@ -1 +0,0 @@
-export * from "./root";

packages/react-sdk/src/app/root.tsx

@@ -1,23 +0,0 @@
-import { Links, Meta, Outlet as DefaultOutlet } from "@remix-run/react";
-
-/**
- * We are using Outlet prop from index layout when user renders project from a subdomain.
- */
-export const Root = ({
-  Outlet = DefaultOutlet,
-}: {
-  Outlet: typeof DefaultOutlet;
-}) => {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-
-      <Outlet />
-    </html>
-  );
-};

packages/react-sdk/src/index.ts

@@ -1,7 +1,6 @@
 export * from "./remix";
 export * from "./css/index";
 export * from "./tree/index";
-export * from "./app/index";
 export * from "./core-components";
 export * from "./components/components-utils";
 export { PropMeta } from "./prop-meta";

pnpm-lock.yaml

@@ -1638,9 +1638,6 @@ importers:
       '@jest/globals':
         specifier: ^29.7.0
         version: 29.7.0
-      '@remix-run/react':
-        specifier: ^1.19.2
-        version: 1.19.2(react-dom@18.2.0)(react@18.2.0)
       '@types/react':
         specifier: ^18.2.21
         version: 18.2.21