Merge pull request #500 from webstudio-is/fix/canvasdata-type

fix: type CanvasData

apps/designer/app/canvas/canvas.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from "react";
 import store from "immerhin";
-import type { Build } from "@webstudio-is/project";
+import type { Build, CanvasData } from "@webstudio-is/project";
 import {
   createElementsTree,
   useAllUserProps,
@@ -41,7 +41,6 @@ import { registerContainers } from "./shared/immerhin";
 import { usePublishScrollState } from "./shared/use-publish-scroll-state";
 import { useDragAndDrop } from "./shared/use-drag-drop";
 import { utils } from "@webstudio-is/project";
-import { CanvasData } from "~/shared/db";
 import { useSubscribeDesignerReady } from "./shared/use-designer-ready";
 import type { Asset } from "@webstudio-is/asset-uploader";
 

apps/designer/app/routes/$.tsx

@@ -6,7 +6,7 @@ import {
 } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { InstanceRoot, Root } from "@webstudio-is/react-sdk";
-import { loadCanvasData, type CanvasData } from "~/shared/db";
+import { loadCanvasData } from "~/shared/db";
 import env, { type Env } from "~/env.server";
 import { sentryException } from "~/shared/sentry";
 import { Canvas } from "~/canvas";
@@ -18,6 +18,7 @@ import {
 } from "~/shared/router-utils";
 import { db } from "@webstudio-is/project/server";
 import type { DynamicLinksFunction } from "remix-utils";
+import type { CanvasData } from "@webstudio-is/project";
 
 type Data =
   | (CanvasData & { env: Env; mode: BuildMode })

apps/designer/app/routes/rest/project.$projectId.tsx

@@ -2,7 +2,8 @@ import { LoaderFunction, json } from "@remix-run/node";
 import env from "~/env.server";
 import { db } from "@webstudio-is/project/server";
 import { sentryException } from "~/shared/sentry";
-import { loadCanvasData, type CanvasData } from "~/shared/db";
+import { loadCanvasData } from "~/shared/db";
+import type { CanvasData } from "@webstudio-is/project";
 
 type PagesDetails = Array<CanvasData | undefined>;
 

apps/designer/app/shared/db/canvas.server.ts

@@ -1,10 +1,7 @@
-import { type Data } from "@webstudio-is/react-sdk";
-import type { Project, Build, Page } from "@webstudio-is/project";
+import type { CanvasData, Project } from "@webstudio-is/project";
 import { db } from "@webstudio-is/project/server";
 import { utils } from "@webstudio-is/project";
 
-export type CanvasData = Data & { buildId: Build["id"]; page: Page };
-
 export const loadCanvasData = async (
   project: Project,
   env: "dev" | "prod",

packages/http-client/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@webstudio-is/http-client",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Webstudio HTTP Client",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "scripts": {
     "dev": "tsup --watch",
-    "test": "jest",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "build": "rm -fr lib tsconfig.tsbuildinfo && tsc",
     "typecheck": "tsc --noEmit",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
@@ -16,7 +16,7 @@
     "@types/isomorphic-fetch": "^0.0.36",
     "@webstudio-is/jest-config": "*",
     "@webstudio-is/prisma-client": "*",
-    "@webstudio-is/react-sdk": "*",
+    "@webstudio-is/project": "*",
     "tsup": "^6.1.3",
     "typescript": "4.7.4"
   },

packages/http-client/src/index.test.ts

@@ -12,11 +12,8 @@ describe("getProjectDetails", () => {
       apiUrl,
       projectId: morePagesProjectId,
     });
-    if (response instanceof Error) {
-      throw response;
-    }
     if (typeof response === "object") {
-      return expect(Object.keys(response.pages).length > 1).toBeTruthy();
+      return expect(response.length > 1).toBeTruthy();
     }
     throw new Error("Unexpected response");
   });
@@ -25,11 +22,8 @@ describe("getProjectDetails", () => {
       apiUrl,
       projectId: onlyHomeProjectId,
     });
-    if (response instanceof Error) {
-      throw response;
-    }
     if (typeof response === "object") {
-      return expect(Object.keys(response.pages).length === 1).toBeTruthy();
+      return expect(response.length === 1).toBeTruthy();
     }
     throw new Error("Unexpected response");
   });
@@ -45,8 +39,14 @@ describe("getProjectDetails", () => {
       apiUrl,
       projectId: notPublishedProjectId,
     });
-    expect(response.toString()).toBe(
-      `Project ${notPublishedProjectId} not found or not published yet. Please contact us to get help.`
-    );
+    if (response instanceof Error) {
+      throw response;
+    }
+    if (typeof response === "string") {
+      return expect(response).toBe(
+        `Project ${notPublishedProjectId} not found or not published yet. Please contact us to get help.`
+      );
+    }
+    throw new Error("Unexpected response");
   });
 });

packages/http-client/src/index.ts

@@ -1,22 +1,5 @@
 import fetch from "isomorphic-fetch";
-import type { BaseInstance, UserProp } from "@webstudio-is/react-sdk";
-import type { Breakpoint } from "@webstudio-is/css-data";
-
-export type Page = {
-  id: string;
-  root: [string, string];
-};
-export type Project = {
-  pages: {
-    [path: string]: {
-      page: Page;
-      tree: BaseInstance;
-      props: Array<UserProp> | [];
-      breakpoints: Array<Breakpoint> | null;
-      css: string;
-    };
-  };
-};
+import type { CanvasData } from "@webstudio-is/project";
 
 export const loadProject = async ({
   apiUrl,
@@ -24,7 +7,7 @@ export const loadProject = async ({
 }: {
   apiUrl: string;
   projectId: string;
-}): Promise<Project | string> => {
+}): Promise<Array<CanvasData> | string> => {
   try {
     if (apiUrl === undefined) {
       throw new Error("Webstudio API URL is required.");

packages/http-client/tsconfig.json

@@ -20,7 +20,7 @@
     },
 
     {
-      "path": "../react-sdk"
+      "path": "../project"
     }
   ]
 }

packages/project/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/project",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Webstudio Project",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",

packages/project/src/db/types.ts

@@ -4,6 +4,7 @@ import {
   Build as DbBuild,
 } from "@webstudio-is/prisma-client";
 import type { Asset } from "@webstudio-is/asset-uploader";
+import type { Data } from "@webstudio-is/react-sdk";
 
 export type Project = Omit<BaseProject, "assets"> & {
   assets?: Array<Asset>;
@@ -76,3 +77,5 @@ export const Pages: z.ZodType<{ homePage: Page; pages: Array<Page> }> =
 export type Pages = z.infer<typeof Pages>;
 
 export type Build = Omit<DbBuild, "pages"> & { pages: Pages };
+
+export type CanvasData = Data & { buildId: Build["id"]; page: Page };