refactor: switch to remix vite (#3120)

Ref https://remix.run/docs/en/main/future/vite#setup-vite
webstudio-is · Apr 9, 2024 · 4007fc3 · 4007fc3
1 parent c596da6
commit 4007fc3
Show file tree

Hide file tree

Showing 20 changed files with 65 additions and 160 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -45,4 +45,5 @@ jobs:
 
       - run: pnpm eslint . --ext .ts,.tsx --max-warnings 0 --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslint-cache
 
-      - run: pnpm turbo run size-test build checks
+      - run: pnpm turbo run build
+      - run: pnpm turbo run size-test checks
diff --git a/apps/builder/app/builder/builder.tsx b/apps/builder/app/builder/builder.tsx
@@ -17,9 +17,9 @@ import {
 } from "./features/sidebar-left";
 import { Inspector } from "./features/inspector";
 import { Topbar } from "./features/topbar";
-import builderStyles from "./builder.css";
+import builderStyles from "./builder.css?url";
 // eslint-disable-next-line import/no-internal-modules
-import prismStyles from "prismjs/themes/prism-solarizedlight.min.css";
+import prismStyles from "prismjs/themes/prism-solarizedlight.min.css?url";
 import { Footer } from "./features/footer";
 import {
   CanvasIframe,

diff --git a/apps/builder/app/builder/features/ai/ai-command-bar.tsx b/apps/builder/app/builder/features/ai/ai-command-bar.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable import/no-internal-modules */
-import formatDistance from "date-fns/formatDistance";
+import { formatDistance } from "date-fns/formatDistance";
 import {
   AutogrowTextArea,
   Box,

diff --git a/apps/builder/app/builder/features/sidebar-left/panels/navigator/css-preview.tsx b/apps/builder/app/builder/features/sidebar-left/panels/navigator/css-preview.tsx
@@ -12,7 +12,7 @@ import {
 import { createRegularStyleSheet } from "@webstudio-is/css-engine";
 import { CollapsibleSection } from "~/builder/shared/collapsible-section";
 import { useMemo } from "react";
-import * as Prism from "prismjs";
+import Prism from "prismjs";
 import type { Style, StyleProperty } from "@webstudio-is/css-engine";
 import { captureError } from "@webstudio-is/error-utils";
 

diff --git a/apps/builder/app/builder/features/topbar/domains.tsx b/apps/builder/app/builder/features/topbar/domains.tsx
@@ -23,7 +23,7 @@ import { CollapsibleDomainSection } from "./collapsible-domain-section";
 import { useCallback, useEffect, useState } from "react";
 import type { PublishStatus } from "@webstudio-is/prisma-client";
 // eslint-disable-next-line import/no-internal-modules
-import formatDistance from "date-fns/formatDistance";
+import { formatDistance } from "date-fns/formatDistance";
 import { Entri } from "./entri";
 import { trpcClient } from "~/shared/trpc/trpc-client";
 import { useStore } from "@nanostores/react";

diff --git a/apps/builder/app/routes/vercel-deploy-workaround.tsx b/apps/builder/app/routes/vercel-deploy-workaround.tsx
@@ -1,11 +1,11 @@
 import type { LinksFunction } from "@remix-run/server-runtime";
 
 import { Root } from "~/shared/remix/root";
-import interFont from "@fontsource-variable/inter/index.css";
-import manropeVariableFont from "@fontsource-variable/manrope/index.css";
-import robotoMonoFont from "@fontsource/roboto-mono/index.css";
+import interFont from "@fontsource-variable/inter/index.css?url";
+import manropeVariableFont from "@fontsource-variable/manrope/index.css?url";
+import robotoMonoFont from "@fontsource/roboto-mono/index.css?url";
 // eslint-disable-next-line import/no-internal-modules
-import appCss from "../shared/app.css";
+import appCss from "../shared/app.css?url";
 
 /**
  * For unknown reason vercel don't upload css assets if they are not exported from route path

diff --git a/apps/builder/app/shared/remix/root.tsx b/apps/builder/app/shared/remix/root.tsx
@@ -1,10 +1,4 @@
-import {
-  Links,
-  LiveReload,
-  Meta,
-  Outlet as RemixOutlet,
-  Scripts,
-} from "@remix-run/react";
+import { Links, Meta, Outlet as RemixOutlet, Scripts } from "@remix-run/react";
 import { createHead } from "remix-island";
 
 export const Head = createHead(() => (
@@ -20,7 +14,6 @@ export const Root = ({ Outlet = RemixOutlet }) => {
       <Head />
       <Outlet />
       <Scripts />
-      {process.env.NODE_ENV === "development" && <LiveReload />}
     </>
   );
 };
diff --git a/apps/builder/env-check.js b/apps/builder/env-check.js
diff --git a/apps/builder/env.d.ts b/apps/builder/env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="@remix-run/node" />
diff --git a/apps/builder/jest.config.js b/apps/builder/jest.config.js
@@ -1,10 +1,10 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const baseConfig = require("@webstudio-is/jest-config");
+import baseConfig from "@webstudio-is/jest-config";
 
 /**
  * @type {import('@jest/types').Config.InitialOptions}
  */
-module.exports = {
+export default {
   ...baseConfig,
   testMatch: ["<rootDir>/app/**/*.test.ts"],
   moduleNameMapper: {

diff --git a/apps/builder/middleware.js b/apps/builder/middleware.js
@@ -313,7 +313,7 @@ app.use("*", async (ctx, next) => {
   ctx.set(
     "skipRateLimit",
     url.pathname.startsWith("/asset/") ||
-      url.pathname.startsWith("/build/") ||
+      url.pathname.startsWith("/assets/") ||
       url.pathname.endsWith(".ico")
   );
   return next();

diff --git a/apps/builder/package.json b/apps/builder/package.json
@@ -3,13 +3,14 @@
   "version": "0.144.0",
   "private": true,
   "description": "Webstudio Builder UI as a service",
+  "type": "module",
   "scripts": {
     "generate-metas": "pnpm tsx scripts/generate-metas.mts",
     "prebuild": "which remix",
-    "build": "pnpm generate-metas && remix build",
-    "start": "remix-serve build/index.js",
-    "start-local": "NODE_OPTIONS='-r dotenv/config' remix-serve build",
-    "dev": "pnpm generate-metas && remix dev",
+    "build": "pnpm generate-metas && remix vite:build",
+    "start": "remix-serve build/server/index.js",
+    "start-local": "NODE_OPTIONS='-r dotenv/config' remix-serve build/server/index.js",
+    "dev": "pnpm generate-metas && remix vite:dev",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "checks": "pnpm typecheck && pnpm test",
@@ -79,7 +80,7 @@
     "change-case": "^5.0.2",
     "colord": "^2.9.3",
     "cookie": "^0.6.0",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.6.0",
     "detect-font": "^0.1.5",
     "downshift": "^6.1.7",
     "fast-deep-equal": "^3.1.3",
@@ -140,7 +141,8 @@
     "html-tags": "^3.3.1",
     "react-test-renderer": "^18.2.0",
     "type-fest": "^4.3.1",
-    "typescript": "5.2.2"
+    "typescript": "5.2.2",
+    "vite": "^5.2.8"
   },
   "sideEffects": false,
   "license": "AGPL-3.0-or-later"

diff --git a/apps/builder/remix.config.js b/apps/builder/remix.config.js
diff --git a/apps/builder/remix.env.d.ts b/apps/builder/remix.env.d.ts
diff --git a/apps/builder/tsconfig.json b/apps/builder/tsconfig.json
@@ -1,8 +1,8 @@
 {
   "extends": "@webstudio-is/tsconfig/base.json",
   "include": [
+    "env.d.ts",
     "app",
-    "remix.env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     "../../@types/**/*.d.ts",

diff --git a/apps/builder/vite.config.ts b/apps/builder/vite.config.ts
@@ -0,0 +1,21 @@
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+import { vitePlugin as remix } from "@remix-run/dev";
+
+const isStorybook = process.argv[1]?.includes("storybook") ?? false;
+
+export default defineConfig({
+  plugins: [isStorybook === false && remix()],
+  resolve: {
+    conditions: ["webstudio", "import", "module", "browser", "default"],
+    alias: [
+      {
+        find: "~",
+        replacement: resolve("app"),
+      },
+    ],
+  },
+  ssr: {
+    external: ["@webstudio-is/prisma-client"],
+  },
+});
diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
@@ -1,7 +1,7 @@
 export * from "./stitches.config";
 export * from "./components/storybook";
 export * from "./utilities";
-export * from "@radix-ui/react-slot";
+export { type SlotProps, Slot } from "@radix-ui/react-slot";
 // Aligned with Figma
 
 export * from "./components/text";
@@ -67,7 +67,7 @@ export * from "./components/pro-badge";
 
 // No need to align
 
-export * from "@radix-ui/react-id";
+export { useId } from "@radix-ui/react-id";
 export * as Portal from "@radix-ui/react-portal";
 export { Box } from "./components/box";
 export { Flex } from "./components/flex";

diff --git a/packages/prisma-client/package.json b/packages/prisma-client/package.json
@@ -9,7 +9,7 @@
     "typecheck": "tsc",
     "checks": "pnpm typecheck",
     "dev": "pnpm build",
-    "build": "prisma format && prisma generate && esbuild src/prisma.ts --outdir=lib --format=cjs && cp src/cjs/package.json lib && cp -r src/__generated__ lib/__generated__",
+    "build": "prisma format && prisma generate && esbuild src/prisma.ts --outdir=lib --format=cjs && cp src/cjs/package.json lib && cp -r src/__generated__ lib/__generated__ && pnpm dts",
     "dts": "tsc --declarationDir lib",
     "migrations": "./migrations-cli/cli.ts"
   },
@@ -27,10 +27,9 @@
     "zod": "^3.22.4"
   },
   "exports": {
-    "webstudio": "./src/prisma.ts",
     "types": "./lib/prisma.d.ts",
-    "import": "./lib/prisma.js",
-    "require": "./lib/prisma.js"
+    "import": "./prisma.mjs",
+    "require": "./prisma.cjs"
   },
   "license": "AGPL-3.0-or-later",
   "private": true,

diff --git a/packages/prisma-client/prisma.cjs b/packages/prisma-client/prisma.cjs
@@ -0,0 +1,6 @@
+const pkg = require("./lib/prisma.js");
+
+exports.prisma = pkg.prisma;
+exports.Prisma = pkg.Prisma;
+exports.PrismaClientKnownRequestError = pkg.PrismaClientKnownRequestError;
+exports.Decimal = pkg.Decimal;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="vite/client" />
		/// <reference types="@remix-run/node" />