diff --git a/apps/designer/app/routes/canvas/$projectId.tsx b/apps/designer/app/routes/canvas/$projectId.tsx index ad73bcc2c5..9a6a4f6ee0 100644 --- a/apps/designer/app/routes/canvas/$projectId.tsx +++ b/apps/designer/app/routes/canvas/$projectId.tsx @@ -5,7 +5,7 @@ import { loadCanvasData, type ErrorData, type CanvasData } from "~/shared/db"; import env, { Env } from "~/env.server"; import { ErrorMessage } from "~/shared/error"; import { sentryException } from "~/shared/sentry"; -import { Canvas as CanvasDocument } from "~/shared/documents/canvas"; +import { Root } from "@webstudio-is/react-sdk"; type Data = (CanvasData | ErrorData) & { env: Env }; @@ -47,7 +47,7 @@ const CanvasRoute = () => { if ("errors" in data) { return ; } - return ; + return ; }; export default CanvasRoute; diff --git a/apps/designer/app/routes/dashboard/index.tsx b/apps/designer/app/routes/dashboard/index.tsx index 4cd69bafc3..65bd2c066e 100644 --- a/apps/designer/app/routes/dashboard/index.tsx +++ b/apps/designer/app/routes/dashboard/index.tsx @@ -6,7 +6,7 @@ import { redirect, } from "@remix-run/node"; import { Dashboard, links } from "~/dashboard"; -import { db } from "@webstudio-is/project"; +import { db } from "@webstudio-is/project/index.server"; import config, { type Config } from "~/config"; import { ensureUserCookie } from "~/shared/session"; import { authenticator } from "~/services/auth.server"; diff --git a/apps/designer/app/routes/designer/$id.tsx b/apps/designer/app/routes/designer/$id.tsx index d9ec4d91c8..5c28bb95fa 100644 --- a/apps/designer/app/routes/designer/$id.tsx +++ b/apps/designer/app/routes/designer/$id.tsx @@ -1,7 +1,7 @@ import { useLoaderData } from "@remix-run/react"; import { LoaderFunction } from "@remix-run/node"; import { Designer, links } from "~/designer"; -import { db } from "@webstudio-is/project"; +import { db } from "@webstudio-is/project/index.server"; import type { Project } from "@webstudio-is/project"; import config from "~/config"; import env from "~/env.server"; diff --git a/apps/designer/app/routes/index.tsx b/apps/designer/app/routes/index.tsx index 4f8026d7c5..2374667e69 100644 --- a/apps/designer/app/routes/index.tsx +++ b/apps/designer/app/routes/index.tsx @@ -1,9 +1,8 @@ import { type LoaderFunction, redirect } from "@remix-run/node"; import { useLoaderData } from "@remix-run/react"; -import { type Data, Root } from "@webstudio-is/react-sdk"; +import { type Data, InstanceRoot, Root } from "@webstudio-is/react-sdk"; import config from "~/config"; -import { db } from "@webstudio-is/project"; -import { Canvas as CanvasDocument } from "~/shared/documents/canvas"; +import { db } from "@webstudio-is/project/index.server"; import env, { Env } from "~/env.server"; // @todo all this subdomain logic is very hacky @@ -65,13 +64,13 @@ const Index = () => { // We render the site from a subdomain if (data.tree && data.props) { - const Outlet = () => ; + const Outlet = () => ; // @todo This is non-standard for Remix, is there a better way? // We need to render essentially the preview route but from the index, // so we have to know the layout and the outlet from here. // Maybe there is a way to tell remix to use the right outlet somehow and avoid passing it? - return ; + return ; } return null; diff --git a/apps/designer/app/routes/preview/$projectId.tsx b/apps/designer/app/routes/preview/$projectId.tsx index 8bbd7a7d45..84c8b002ae 100644 --- a/apps/designer/app/routes/preview/$projectId.tsx +++ b/apps/designer/app/routes/preview/$projectId.tsx @@ -1,8 +1,7 @@ import { useLoaderData } from "@remix-run/react"; import type { LoaderFunction, MetaFunction } from "@remix-run/node"; -import { Root } from "@webstudio-is/react-sdk"; -import { loadPreviewData, type PreviewData, type ErrorData } from "~/shared/db"; -import { Canvas as CanvasDocument } from "~/shared/documents/canvas"; +import { type ErrorData, loadPreviewData, type PreviewData } from "~/shared/db"; +import { InstanceRoot, Root } from "@webstudio-is/react-sdk"; import env, { Env } from "~/env.server"; export const meta: MetaFunction = () => { @@ -36,7 +35,7 @@ export const loader: LoaderFunction = async ({ params }): LoaderReturnType => { const Outlet = () => { const data = useLoaderData(); - return ; + return ; }; const PreviewRoute = () => { @@ -44,7 +43,7 @@ const PreviewRoute = () => { if ("errors" in data) { return

{data.errors}

; } - return ; + return ; }; export default PreviewRoute; diff --git a/apps/designer/app/routes/rest/breakpoints.$projectId.ts b/apps/designer/app/routes/rest/breakpoints.$projectId.ts index 5074f48411..9fbef0acfc 100644 --- a/apps/designer/app/routes/rest/breakpoints.$projectId.ts +++ b/apps/designer/app/routes/rest/breakpoints.$projectId.ts @@ -1,6 +1,6 @@ import type { LoaderFunction } from "@remix-run/node"; import { Breakpoint } from "@webstudio-is/react-sdk"; -import { db } from "@webstudio-is/project"; +import { db } from "@webstudio-is/project/index.server"; export type ErrorData = { errors: string; diff --git a/apps/designer/app/routes/rest/pages.$projectId.ts b/apps/designer/app/routes/rest/pages.$projectId.ts index 39dced94fe..4c3995df6a 100644 --- a/apps/designer/app/routes/rest/pages.$projectId.ts +++ b/apps/designer/app/routes/rest/pages.$projectId.ts @@ -1,6 +1,6 @@ import type { LoaderFunction } from "@remix-run/node"; import type { Breakpoint } from "@webstudio-is/react-sdk"; -import { db } from "@webstudio-is/project"; +import { db } from "@webstudio-is/project/index.server"; export type ErrorData = { errors: string; diff --git a/apps/designer/app/routes/rest/patch.ts b/apps/designer/app/routes/rest/patch.ts index abc739d53b..d11b8acd59 100644 --- a/apps/designer/app/routes/rest/patch.ts +++ b/apps/designer/app/routes/rest/patch.ts @@ -1,5 +1,5 @@ import { type ActionFunction } from "@remix-run/node"; -import { db } from "@webstudio-is/project"; +import { db } from "@webstudio-is/project/index.server"; import { type SyncItem } from "immerhin"; import { type Tree } from "@webstudio-is/react-sdk"; import { type Project } from "@webstudio-is/prisma-client"; diff --git a/apps/designer/app/routes/rest/project/clone.$domain.ts b/apps/designer/app/routes/rest/project/clone.$domain.ts index ad77915d64..583d02a779 100644 --- a/apps/designer/app/routes/rest/project/clone.$domain.ts +++ b/apps/designer/app/routes/rest/project/clone.$domain.ts @@ -1,6 +1,7 @@ import { type LoaderFunction, redirect } from "@remix-run/node"; import type { User } from "@webstudio-is/prisma-client"; -import { db as projectDb, type Project } from "@webstudio-is/project"; +import { db as projectDb } from "@webstudio-is/project/index.server"; +import { type Project } from "@webstudio-is/project"; import * as userDb from "~/shared/db"; import { ensureUserCookie } from "~/shared/session"; import config from "~/config"; diff --git a/apps/designer/app/routes/rest/props.$projectId.ts b/apps/designer/app/routes/rest/props.$projectId.ts index 8422272748..75f7596919 100644 --- a/apps/designer/app/routes/rest/props.$projectId.ts +++ b/apps/designer/app/routes/rest/props.$projectId.ts @@ -1,6 +1,6 @@ import { type LoaderFunction } from "@remix-run/node"; import { type InstanceProps } from "@webstudio-is/react-sdk"; -import { db } from "@webstudio-is/project"; +import { db } from "@webstudio-is/project/index.server"; type ErrorData = { errors: string; }; diff --git a/apps/designer/app/routes/rest/tree.$projectId.ts b/apps/designer/app/routes/rest/tree.$projectId.ts index 46da582ada..14dd94e2e0 100644 --- a/apps/designer/app/routes/rest/tree.$projectId.ts +++ b/apps/designer/app/routes/rest/tree.$projectId.ts @@ -1,6 +1,6 @@ import { type LoaderFunction } from "@remix-run/node"; import type { Tree } from "@webstudio-is/react-sdk"; -import { db } from "@webstudio-is/project"; +import { db } from "@webstudio-is/project/index.server"; export type ErrorData = { errors: string; }; diff --git a/apps/designer/app/shared/db/canvas.server.ts b/apps/designer/app/shared/db/canvas.server.ts index 26db70052f..7c556c8c3c 100644 --- a/apps/designer/app/shared/db/canvas.server.ts +++ b/apps/designer/app/shared/db/canvas.server.ts @@ -1,5 +1,5 @@ import { type Data } from "@webstudio-is/react-sdk"; -import { db } from "@webstudio-is/project"; +import { db } from "@webstudio-is/project/index.server"; import type { Project } from "@webstudio-is/project"; export type CanvasData = Data & { project: Project }; diff --git a/apps/designer/app/shared/db/misc.server.ts b/apps/designer/app/shared/db/misc.server.ts index 9238ec88ad..a149cd3959 100644 --- a/apps/designer/app/shared/db/misc.server.ts +++ b/apps/designer/app/shared/db/misc.server.ts @@ -1,4 +1,4 @@ -import { db } from "@webstudio-is/project"; +import { db } from "@webstudio-is/project/index.server"; /** * Conceptually publishing is cloning all data that affects user site diff --git a/packages/project/index.server.ts b/packages/project/index.server.ts index e910bb060c..ad6dde9958 100644 --- a/packages/project/index.server.ts +++ b/packages/project/index.server.ts @@ -1 +1 @@ -export * from "./src/index"; +export * from "./src/index.server"; diff --git a/packages/project/src/db/project.ts b/packages/project/src/db/project.ts index e67c58fc71..e95eef15f2 100644 --- a/packages/project/src/db/project.ts +++ b/packages/project/src/db/project.ts @@ -7,7 +7,7 @@ import { Prisma, Project as BaseProject, } from "@webstudio-is/prisma-client"; -import { formatAsset } from "@webstudio-is/asset-uploader"; +import { formatAsset } from "@webstudio-is/asset-uploader/index.server"; import * as db from "./index"; import type { Project } from "../index"; const TreeHistorySchema = z.array(z.string()); diff --git a/packages/project/src/db/types.ts b/packages/project/src/db/types.ts index 1dd7e6d83d..0ae05d8b90 100644 --- a/packages/project/src/db/types.ts +++ b/packages/project/src/db/types.ts @@ -1,5 +1,5 @@ import { z } from "zod"; -import { Project as BaseProject } from "@webstudio-is/prisma-client"; +import { type Project as BaseProject } from "@webstudio-is/prisma-client"; import type { Asset } from "@webstudio-is/asset-uploader"; const TreeHistorySchema = z.array(z.string()); diff --git a/packages/project/src/index.server.ts b/packages/project/src/index.server.ts new file mode 100644 index 0000000000..a89f5bdf70 --- /dev/null +++ b/packages/project/src/index.server.ts @@ -0,0 +1,2 @@ +import * as dbFunctions from "./db"; +export const db = dbFunctions; diff --git a/packages/project/src/index.ts b/packages/project/src/index.ts index 77721d7ddc..0f425bcc05 100644 --- a/packages/project/src/index.ts +++ b/packages/project/src/index.ts @@ -1,8 +1,5 @@ -import * as dbFunctions from "./db"; import * as breakpointsUtils from "./shared/breakpoints"; import * as treeUtils from "./shared/tree-utils"; export const utils = { breakpoints: breakpointsUtils, tree: treeUtils }; -export const db = dbFunctions; - export * from "./db/types"; diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json index e7b7a3c0b7..397567ba0d 100644 --- a/packages/react-sdk/package.json +++ b/packages/react-sdk/package.json @@ -1,6 +1,6 @@ { "name": "@webstudio-is/react-sdk", - "version": "0.5.1", + "version": "0.6.1", "description": "Webstudio JavaScript / TypeScript API", "author": "Webstudio ", "homepage": "https://webstudio.is", diff --git a/apps/designer/app/shared/documents/canvas.tsx b/packages/react-sdk/src/canvas/canvas.tsx similarity index 89% rename from apps/designer/app/shared/documents/canvas.tsx rename to packages/react-sdk/src/canvas/canvas.tsx index 0231013bd3..b20e8fb98e 100644 --- a/apps/designer/app/shared/documents/canvas.tsx +++ b/packages/react-sdk/src/canvas/canvas.tsx @@ -1,10 +1,10 @@ import { Links, Meta, Outlet as DefaultOutlet } from "@remix-run/react"; -import { CriticalCss } from "@webstudio-is/react-sdk"; +import { CriticalCss } from ".."; /** * We are using Outlet prop from index layout when user renders site from a subdomain. */ -export const Canvas = ({ +export const Root = ({ Outlet = DefaultOutlet, }: { Outlet: typeof DefaultOutlet; diff --git a/packages/react-sdk/src/canvas/index.ts b/packages/react-sdk/src/canvas/index.ts new file mode 100644 index 0000000000..df456a3704 --- /dev/null +++ b/packages/react-sdk/src/canvas/index.ts @@ -0,0 +1 @@ +export * from "./canvas"; diff --git a/packages/react-sdk/src/index.ts b/packages/react-sdk/src/index.ts index 0ca1559f9c..58ede255ac 100644 --- a/packages/react-sdk/src/index.ts +++ b/packages/react-sdk/src/index.ts @@ -6,3 +6,4 @@ export * as componentsMeta from "./components/meta"; export * from "./user-props"; export * from "./pubsub"; export * from "./db"; +export * from "./canvas"; diff --git a/packages/react-sdk/src/tree/root.ts b/packages/react-sdk/src/tree/root.ts index 61c08a8e30..a267e98d59 100644 --- a/packages/react-sdk/src/tree/root.ts +++ b/packages/react-sdk/src/tree/root.ts @@ -25,7 +25,10 @@ type RootProps = { Component?: (props: WrapperComponentProps) => JSX.Element; }; -export const Root = ({ data, Component }: RootProps): JSX.Element | null => { +export const InstanceRoot = ({ + data, + Component, +}: RootProps): JSX.Element | null => { if (data.tree === null) { throw new Error("Tree is null"); }