feat: vite migration setup

apps/space/.react-router/types/+future.ts

@@ -0,0 +1,9 @@
+// Generated by React Router
+
+import "react-router";
+
+declare module "react-router" {
+  interface Future {
+    v8_middleware: false
+  }
+}

apps/space/.react-router/types/+routes.ts

@@ -0,0 +1,27 @@
+// Generated by React Router
+
+import "react-router"
+
+declare module "react-router" {
+  interface Register {
+    pages: Pages
+    routeFiles: RouteFiles
+  }
+}
+
+type Pages = {
+  "/": {
+    params: {};
+  };
+};
+
+type RouteFiles = {
+  "root.tsx": {
+    id: "root";
+    page: "/";
+  };
+  "routes/_index.tsx": {
+    id: "routes/_index";
+    page: "/";
+  };
+};

apps/space/.react-router/types/+server-build.d.ts

@@ -0,0 +1,17 @@
+// Generated by React Router
+
+declare module "virtual:react-router/server-build" {
+  import { ServerBuild } from "react-router";
+  export const assets: ServerBuild["assets"];
+  export const assetsBuildDirectory: ServerBuild["assetsBuildDirectory"];
+  export const basename: ServerBuild["basename"];
+  export const entry: ServerBuild["entry"];
+  export const future: ServerBuild["future"];
+  export const isSpaMode: ServerBuild["isSpaMode"];
+  export const prerender: ServerBuild["prerender"];
+  export const publicPath: ServerBuild["publicPath"];
+  export const routeDiscovery: ServerBuild["routeDiscovery"];
+  export const routes: ServerBuild["routes"];
+  export const ssr: ServerBuild["ssr"];
+  export const unstable_getCriticalCss: ServerBuild["unstable_getCriticalCss"];
+}

apps/space/.react-router/types/app/+types/root.ts

@@ -0,0 +1,59 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../root.js")
+
+type Info = GetInfo<{
+  file: "root.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../root.js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // middleware
+  export type MiddlewareFunction = Annotations["MiddlewareFunction"];
+
+  // clientMiddleware
+  export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}

apps/space/.react-router/types/app/routes/+types/_index.ts

@@ -0,0 +1,62 @@
+// Generated by React Router
+
+import type { GetInfo, GetAnnotations } from "react-router/internal";
+
+type Module = typeof import("../_index.js")
+
+type Info = GetInfo<{
+  file: "routes/_index.tsx",
+  module: Module
+}>
+
+type Matches = [{
+  id: "root";
+  module: typeof import("../../root.js");
+}, {
+  id: "routes/_index";
+  module: typeof import("../_index.js");
+}];
+
+type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;
+
+export namespace Route {
+  // links
+  export type LinkDescriptors = Annotations["LinkDescriptors"];
+  export type LinksFunction = Annotations["LinksFunction"];
+
+  // meta
+  export type MetaArgs = Annotations["MetaArgs"];
+  export type MetaDescriptors = Annotations["MetaDescriptors"];
+  export type MetaFunction = Annotations["MetaFunction"];
+
+  // headers
+  export type HeadersArgs = Annotations["HeadersArgs"];
+  export type HeadersFunction = Annotations["HeadersFunction"];
+
+  // middleware
+  export type MiddlewareFunction = Annotations["MiddlewareFunction"];
+
+  // clientMiddleware
+  export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];
+
+  // loader
+  export type LoaderArgs = Annotations["LoaderArgs"];
+
+  // clientLoader
+  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
+
+  // action
+  export type ActionArgs = Annotations["ActionArgs"];
+
+  // clientAction
+  export type ClientActionArgs = Annotations["ClientActionArgs"];
+
+  // HydrateFallback
+  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
+
+  // Component
+  export type ComponentProps = Annotations["ComponentProps"];
+
+  // ErrorBoundary
+  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+}

apps/space/additional.d.ts

@@ -1,2 +0,0 @@
-// additional.d.ts
-/// <reference types="next-images" />

apps/space/app/provider.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import { ThemeProvider } from "next-themes";
 // components
 import { TranslationProvider } from "@plane/i18n";

apps/space/app/root.tsx

@@ -0,0 +1,85 @@
+import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+
+import type { Route } from "./+types/root";
+// import { AppProvider } from "./provider";
+
+const SPACE_BASE_PATH = import.meta.env.SPACE_BASE_PATH || "/spaces";
+
+export function meta({}: Route.MetaFunction) {
+  return [
+    { title: "Plane Publish | Make your Plane boards public with one-click" },
+    { name: "description", content: "Plane Publish is a customer feedback management tool built on top of plane.so" },
+    {
+      name: "keywords",
+      content:
+        "software development, customer feedback, software, accelerate, code management, release management, project management, work item tracking, agile, scrum, kanban, collaboration",
+    },
+    { name: "twitter:site", content: "@planepowers" },
+    { name: "og:title", content: "Plane Publish | Make your Plane boards public with one-click" },
+    {
+      name: "og:description",
+      content: "Plane Publish is a customer feedback management tool built on top of plane.so",
+    },
+    { name: "og:url", content: `https://sites.plane.so/` },
+  ];
+}
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="apple-touch-icon" sizes="180x180" href={`${SPACE_BASE_PATH}/favicon/apple-touch-icon.png`} />
+        <link rel="icon" type="image/png" sizes="32x32" href={`${SPACE_BASE_PATH}/favicon/favicon-32x32.png`} />
+        <link rel="icon" type="image/png" sizes="16x16" href={`${SPACE_BASE_PATH}/favicon/favicon-16x16.png`} />
+        <link rel="manifest" href={`${SPACE_BASE_PATH}/site.webmanifest.json`} />
+        <link rel="shortcut icon" href={`${SPACE_BASE_PATH}/favicon/favicon.ico`} />
+        <meta name="robots" content="noindex, nofollow" />
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return (
+    <div id="editor-portal">
+      {/* <AppProvider> */}
+      <Outlet />
+      {/* </AppProvider> */}
+    </div>
+  );
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = "Oops!";
+  let details = "An unexpected error occurred.";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error";
+    details = error.status === 404 ? "The requested page could not be found." : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="pt-16 p-4 container mx-auto">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

apps/space/app/routes.ts

@@ -0,0 +1,4 @@
+import { type RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default flatRoutes() satisfies RouteConfig;

apps/space/app/routes/$workspaceSlug/$projectId/route.tsx

@@ -0,0 +1,3 @@
+export default function WorkspaceProjectPage() {
+  return <div>WorkspaceProjectPage</div>;
+}

apps/space/app/routes/_index.tsx

@@ -0,0 +1,3 @@
+export default function HomePage() {
+  return <div>HomePage</div>;
+}

apps/space/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/space/next.config.js

@@ -1,43 +0,0 @@
-/** @type {import('next').NextConfig} */
-
-const nextConfig = {
-  trailingSlash: true,
-  output: "standalone",
-  basePath: process.env.NEXT_PUBLIC_SPACE_BASE_PATH || "",
-  reactStrictMode: false,
-  swcMinify: true,
-  async headers() {
-    return [
-      {
-        source: "/",
-        headers: [{ key: "X-Frame-Options", value: "SAMEORIGIN" }], // clickjacking protection
-      },
-    ];
-  },
-  images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "**",
-      },
-    ],
-    unoptimized: true,
-  },
-  experimental: {
-    optimizePackageImports: [
-      "@plane/constants",
-      "@plane/editor",
-      "@plane/hooks",
-      "@plane/i18n",
-      "@plane/logger",
-      "@plane/propel",
-      "@plane/services",
-      "@plane/shared-state",
-      "@plane/types",
-      "@plane/ui",
-      "@plane/utils",
-    ],
-  },
-};
-
-module.exports = nextConfig;

apps/space/package.json

@@ -3,11 +3,12 @@
   "version": "1.0.0",
   "private": true,
   "license": "AGPL-3.0",
+  "type": "module",
   "scripts": {
-    "dev": "next dev -p 3002",
-    "build": "next build",
-    "start": "next start",
-    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist",
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "clean": "rm -rf .turbo && rm -rf build && rm -rf node_modules && rm -rf dist",
     "check:lint": "eslint . --max-warnings 28",
     "check:types": "tsc --noEmit",
     "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
@@ -28,25 +29,29 @@
     "@plane/ui": "workspace:*",
     "@plane/utils": "workspace:*",
     "@popperjs/core": "^2.11.8",
+    "@react-router/fs-routes": "^7.9.1",
+    "@react-router/node": "^7.9.2",
+    "@react-router/serve": "^7.9.2",
     "axios": "catalog:",
     "clsx": "^2.0.0",
     "date-fns": "^4.1.0",
     "dompurify": "^3.0.11",
     "dotenv": "^16.3.1",
+    "isbot": "^5.1.31",
     "lodash-es": "catalog:",
     "lowlight": "^2.9.0",
     "lucide-react": "catalog:",
     "mobx": "catalog:",
     "mobx-react": "catalog:",
     "mobx-utils": "catalog:",
-    "next": "catalog:",
     "next-themes": "^0.2.1",
     "nprogress": "^0.2.0",
-    "react": "catalog:",
-    "react-dom": "catalog:",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "7.51.5",
     "react-popper": "^2.3.0",
+    "react-router": "^7.9.2",
     "sharp": "catalog:",
     "swr": "catalog:",
     "tailwind-merge": "^2.0.0",
@@ -56,12 +61,16 @@
     "@plane/eslint-config": "workspace:*",
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
+    "@react-router/dev": "^7.9.2",
+    "@tailwindcss/vite": "^4.0.17",
     "@types/lodash-es": "catalog:",
     "@types/node": "18.14.1",
     "@types/nprogress": "^0.2.0",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
     "@types/uuid": "^9.0.1",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vite": "^7.1.7",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }

apps/space/react-router.config.ts

@@ -0,0 +1,6 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  basename: "/spaces",
+  ssr: false,
+} satisfies Config;

apps/space/tsconfig.json

@@ -1,28 +1,14 @@
 {
-  "extends": "@plane/typescript-config/nextjs.json",
-  "plugins": [
-    {
-      "name": "next"
-    }
-  ],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
+  "extends": "@plane/typescript-config/vite.json",
+  "include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"],
   "compilerOptions": {
+    "strict": true,
+    "strictNullChecks": true,
+    "jsx": "react-jsx",
     "baseUrl": ".",
-    "jsx": "preserve",
+    "rootDirs": [".", "./.react-router/types"],
     "paths": {
-      "@/*": ["core/*"],
-      "@/helpers/*": ["helpers/*"],
-      "@/public/*": ["public/*"],
-      "@/styles/*": ["styles/*"],
-      "@/plane-web/*": ["ce/*"]
-    },
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-
-    "strictNullChecks": true
+      "@/*": ["./app/*"]
+    }
   }
 }

apps/space/vite.config.ts

@@ -0,0 +1,8 @@
+import { reactRouter } from "@react-router/dev/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+});

packages/typescript-config/vite.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}