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