Merge branch 'main' into 252-fonts-manager-and-fonts-selector-font-upload

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 <ErrorMessage message={data.errors} />;
   }
-  return <CanvasDocument Outlet={Outlet} />;
+  return <Root Outlet={Outlet} />;
 };
 
 export default CanvasRoute;

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";

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";

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 = () => <Root data={data} />;
+    const Outlet = () => <InstanceRoot data={data} />;
 
     // @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 <CanvasDocument Outlet={Outlet} />;
+    return <Root Outlet={Outlet} />;
   }
 
   return null;

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<PreviewData>();
-  return <Root data={data} />;
+  return <InstanceRoot data={data} />;
 };
 
 const PreviewRoute = () => {
@@ -44,7 +43,7 @@ const PreviewRoute = () => {
   if ("errors" in data) {
     return <p>{data.errors}</p>;
   }
-  return <CanvasDocument Outlet={Outlet} />;
+  return <Root Outlet={Outlet} />;
 };
 
 export default PreviewRoute;

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;

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;

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";

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";

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;
 };

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;
 };

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 };
 

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

packages/project/index.server.ts

@@ -1 +1 @@
-export * from "./src/index";
+export * from "./src/index.server";

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());

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());
 

packages/project/src/index.server.ts

@@ -0,0 +1,2 @@
+import * as dbFunctions from "./db";
+export const db = dbFunctions;

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";

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 <github@webstudio.is>",
   "homepage": "https://webstudio.is",

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;

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

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

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";

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");
   }