refactor: upgrade to vite

.dockerignore

@@ -1,2 +0,0 @@
-
-node_modules

.eslintrc.cjs

@@ -0,0 +1,84 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+  ignorePatterns: ["!**/.server", "!**/.client"],
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.cjs"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

.eslintrc.js

@@ -1,4 +0,0 @@
-/** @type {import('eslint').Linter.Config} */
-module.exports = {
-  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
-};

app/root.tsx

@@ -1,9 +1,8 @@
-import codeHikeStyle from "@code-hike/mdx/dist/index.css";
+import codeHikeStyle from "@code-hike/mdx/dist/index.css?url";
 import type { LinksFunction, MetaFunction } from "@remix-run/node";
 import {
   Link,
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -11,7 +10,7 @@ import {
   isRouteErrorResponse,
   useRouteError,
 } from "@remix-run/react";
-import stylesheet from "~/tailwind.css";
+import stylesheet from "~/tailwind.css?url";
 import { Body } from "./components/Body";
 import { LinkWrapper } from "./components/LinkWrapper";
 import { Notbyai } from "./components/Notbyai";
@@ -46,7 +45,6 @@ export default function App() {
         <Notbyai />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </Body>
     </html>
   );

env.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="@remix-run/dev" />
+/// <reference types="vite/client" />
 /// <reference types="@remix-run/node" />

package.json

@@ -3,16 +3,21 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "build": "remix build",
+    "build": "remix vite:build",
-    "dev": "remix dev",
+    "deploy": "npm run build && wrangler pages deploy ./build/client",
-    "start": "remix-serve ./build/index.js",
+    "dev": "remix vite:dev",
-    "typecheck": "tsc --noEmit --pretty --skipLibCheck"
+    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+    "start": "wrangler pages dev ./build/client",
+    "typecheck": "tsc",
+    "typegen": "wrangler types",
+    "preview": "npm run build && wrangler pages dev ./build/client",
+    "build-cf-types": "wrangler types"
   },
   "dependencies": {
     "@code-hike/mdx": "0.9.0",
     "@remix-run/node": "2.8.1",
-    "@remix-run/react": "2.8.1",
     "@remix-run/serve": "2.8.1",
+    "@remix-run/react": "2.8.1",
     "esbuild": "0.20.2",
     "isbot": "4.1.0",
     "mdx-bundler": "10.0.2",
@@ -21,12 +26,18 @@
     "react-icons": "5.0.1"
   },
   "devDependencies": {
+    "@mdx-js/rollup": "^3.0.1",
     "@remix-run/dev": "2.8.1",
     "@tailwindcss/typography": "0.5.12",
+    "@types/eslint": "^8.56.7",
     "@types/react": "18.2.74",
     "@types/react-dom": "18.2.24",
+    "autoprefixer": "^10.4.19",
     "eslint": "8.57.0",
-    "tailwindcss": "3.4.3",
+    "postcss": "^8.4.38",
-    "typescript": "5.4.4"
+    "tailwindcss": "^3.4.3",
+    "typescript": "5.4.4",
+    "vite": "5.1.0",
+    "vite-tsconfig-paths": "4.2.1"
   }
 }

postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+  },
+};

remix.config.ts

@@ -1,29 +0,0 @@
-import type { AppConfig } from "@remix-run/dev";
-
-export default {
-  ignoredRouteFiles: ["**/.*"],
-  tailwind: true,
-  browserNodeBuiltinsPolyfill: {
-    modules: {
-      path: true,
-      fs: true,
-      vm: true,
-      util: true,
-      buffer: true,
-      string_decoder: true,
-      events: true,
-      os: true,
-      crypto: true,
-      http: true,
-      child_process: true,
-      https: true,
-      url: true,
-      net: true,
-      tls: true,
-      assert: true,
-      stream: true,
-      zlib: true,
-      punycode: true,
-    },
-  },
-} satisfies AppConfig;

tsconfig.json

@@ -1,10 +1,11 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
+    "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,

vite.config.ts

@@ -0,0 +1,20 @@
+import { remarkCodeHike } from "@code-hike/mdx";
+import mdx from "@mdx-js/rollup";
+import { vitePlugin as remix } from "@remix-run/dev";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [
+    mdx({
+      remarkPlugins: [[remarkCodeHike]],
+    }),
+    remix({
+      ignoredRouteFiles: ["**/*.css"],
+    }),
+    tsconfigPaths(),
+  ],
+});