From e34aa862bb7bf8bae4e20d4fecf54f8a7552dd2f Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Sat, 30 Mar 2024 19:13:51 +0700 Subject: [PATCH] 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 | 19 +++++++++++---- .../webstudio-custom-template/app/root.tsx | 18 +++++++++++---- .../custom-template-stage/app/root.tsx | 18 +++++++++++---- .../app/root.tsx | 18 ++++++++++++++- .../app/root.tsx | 18 ++++++++++++++- fixtures/webstudio-remix-vercel/app/root.tsx | 18 ++++++++++++++- packages/cli/templates/defaults/app/root.tsx | 18 ++++++++++++++- packages/react-sdk/package.json | 2 -- packages/react-sdk/src/app/index.ts | 1 - packages/react-sdk/src/app/root.tsx | 23 ------------------- packages/react-sdk/src/index.ts | 1 - pnpm-lock.yaml | 3 --- 12 files changed, 110 insertions(+), 47 deletions(-) delete mode 100644 packages/react-sdk/src/app/index.ts delete mode 100644 packages/react-sdk/src/app/root.tsx diff --git a/apps/builder/app/routes/$.tsx b/apps/builder/app/routes/$.tsx index dfc05a6148..3f22528908 100644 --- a/apps/builder/app/routes/$.tsx +++ b/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 ; + return ( + + + + + + + + + + ); }; export default Content; diff --git a/fixtures/webstudio-custom-template/app/root.tsx b/fixtures/webstudio-custom-template/app/root.tsx index d5864c8b59..3d3e04bd79 100644 --- a/fixtures/webstudio-custom-template/app/root.tsx +++ b/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) => { +const Root = () => { useEffect(subscribe, []); - return ; + return ( + + + + + + + + + + ); }; export default Root; diff --git a/fixtures/webstudio-custom-template/custom-template-stage/app/root.tsx b/fixtures/webstudio-custom-template/custom-template-stage/app/root.tsx index d5864c8b59..3d3e04bd79 100644 --- a/fixtures/webstudio-custom-template/custom-template-stage/app/root.tsx +++ b/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) => { +const Root = () => { useEffect(subscribe, []); - return ; + return ( + + + + + + + + + + ); }; export default Root; diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/root.tsx b/fixtures/webstudio-remix-netlify-edge-functions/app/root.tsx index d873875663..5755b9b230 100644 --- a/fixtures/webstudio-remix-netlify-edge-functions/app/root.tsx +++ b/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 ( + + + + + + + + + + ); +}; + +export default Root; diff --git a/fixtures/webstudio-remix-netlify-functions/app/root.tsx b/fixtures/webstudio-remix-netlify-functions/app/root.tsx index d873875663..5755b9b230 100644 --- a/fixtures/webstudio-remix-netlify-functions/app/root.tsx +++ b/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 ( + + + + + + + + + + ); +}; + +export default Root; diff --git a/fixtures/webstudio-remix-vercel/app/root.tsx b/fixtures/webstudio-remix-vercel/app/root.tsx index d873875663..5755b9b230 100644 --- a/fixtures/webstudio-remix-vercel/app/root.tsx +++ b/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 ( + + + + + + + + + + ); +}; + +export default Root; diff --git a/packages/cli/templates/defaults/app/root.tsx b/packages/cli/templates/defaults/app/root.tsx index d873875663..5755b9b230 100644 --- a/packages/cli/templates/defaults/app/root.tsx +++ b/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 ( + + + + + + + + + + ); +}; + +export default Root; diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json index 98f713c25e..42900d51f4 100644 --- a/packages/react-sdk/package.json +++ b/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" diff --git a/packages/react-sdk/src/app/index.ts b/packages/react-sdk/src/app/index.ts deleted file mode 100644 index 1efe34c51e..0000000000 --- a/packages/react-sdk/src/app/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./root"; diff --git a/packages/react-sdk/src/app/root.tsx b/packages/react-sdk/src/app/root.tsx deleted file mode 100644 index 848bdaf25e..0000000000 --- a/packages/react-sdk/src/app/root.tsx +++ /dev/null @@ -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 ( - - - - - - - - - - - ); -}; diff --git a/packages/react-sdk/src/index.ts b/packages/react-sdk/src/index.ts index 19c4c047ea..e7802337fd 100644 --- a/packages/react-sdk/src/index.ts +++ b/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"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 27c3f7390f..fe386cac53 100644 --- a/pnpm-lock.yaml +++ b/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