Modernize Deno template

.github/workflows/format.yml

@@ -30,6 +30,11 @@ jobs:
           node-version-file: ".nvmrc"
           cache: "pnpm"
 
+      - name: 🦕 Install Deno
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: vx.x.x
+
       - name: 📥 Install deps
         run: pnpm install --frozen-lockfile
 
@@ -42,11 +47,6 @@ jobs:
       - name: 👔 Format
         run: pnpm format
 
-      - name: 🦕 Install Deno
-        uses: denoland/setup-deno@v1
-        with:
-          deno-version: vx.x.x
-
       - name: 👔 Format Deno files
         run: pnpm format:deno
 

.github/workflows/lint.yml

@@ -28,6 +28,11 @@ jobs:
           node-version-file: ".nvmrc"
           cache: "pnpm"
 
+      - name: 🦕 Install Deno
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: vx.x.x
+
       - name: Disable GitHub Actions Annotations
         run: |
           echo "::remove-matcher owner=tsc::"
@@ -40,10 +45,5 @@ jobs:
       - name: 🔬 Lint
         run: pnpm lint
 
-      - name: 🦕 Install Deno
-        uses: denoland/setup-deno@v1
-        with:
-          deno-version: vx.x.x
-
       - name: 🔬 Lint deno files
         run: pnpm lint:deno

.github/workflows/shared-test-integration.yml

@@ -46,6 +46,11 @@ jobs:
           node-version: ${{ matrix.node }}
           cache: "pnpm"
 
+      - name: 🦕 Install Deno
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: vx.x.x
+
       - name: Disable GitHub Actions Annotations
         run: |
           echo "::remove-matcher owner=tsc::"

.github/workflows/shared-test-unit.yml

@@ -38,6 +38,11 @@ jobs:
           node-version: ${{ matrix.node }}
           cache: "pnpm"
 
+      - name: 🦕 Install Deno
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: vx.x.x
+
       - name: Disable GitHub Actions Annotations
         run: |
           echo "::remove-matcher owner=tsc::"

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "deno.enablePaths": ["./packages/remix-deno/"],
-  "deno.importMap": "./.vscode/deno_resolve_npm_imports.json"
+  "deno.config": "./templates/deno/deno.jsonc",
+  "deno.enablePaths": ["./packages/remix-deno/", "./templates/deno"],
+  "deno.disablePaths": ["./templates/deno/app"]
 }

integration/helpers/vite-deno-template/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+/app/deno.d.ts
+/build
+/package.json

templates/classic-remix-compiler/deno/app/root.tsx → integration/helpers/vite-deno-template/app/root.tsx

@@ -1,18 +1,10 @@
-import { cssBundleHref } from "@remix-run/css-bundle";
-import type { LinksFunction } from "@remix-run/deno";
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
-import * as React from "react";
-
-export const links: LinksFunction = () => [
-  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
-];
 
 export default function App() {
   return (
@@ -27,7 +19,6 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );

templates/classic-remix-compiler/deno/app/routes/_index.tsx → integration/helpers/vite-deno-template/app/routes/_index.tsx

@@ -1,5 +1,4 @@
-import type { MetaFunction } from "@remix-run/deno";
-import * as React from "react";
+import type { MetaFunction } from "@remix-run/react";
 
 export const meta: MetaFunction = () => {
   return [

integration/helpers/vite-deno-template/deno.jsonc

@@ -0,0 +1,25 @@
+{
+  "tasks": {
+    "build": "deno run -A 'npm:@remix-run/dev@*' vite:build",
+    "dev": "deno run -A 'npm:@remix-run/dev@*' vite:dev",
+    "typecheck": "deno check '**/*' && deno run -A npm:typescript@^5.5.4/tsc",
+    "typegen": "deno types > ./app/deno.d.ts"
+  },
+  "exclude": ["app/", "build/"],
+  "nodeModulesDir": true,
+  "unstable": ["kv"],
+  "imports": {
+    // These remix packages should be treated like workspace:* dependencies.
+    "@remix-run/dev": "npm:@remix-run/dev@*",
+    "@remix-run/react": "npm:@remix-run/react@*",
+    "@remix-run/server-runtime": "npm:@remix-run/server-runtime@*",
+    "@types/react": "npm:@types/react@^18.3.5",
+    "@types/react-dom": "npm:@types/react-dom@^18.3.0",
+    "isbot": "npm:isbot@^5.1.17",
+    "react": "npm:react@^18.3.1",
+    "react-dom": "npm:react-dom@^18.3.1",
+    "typescript": "npm:typescript@^5.5.4",
+    "vite": "npm:vite@^5.4.2",
+    "vite-tsconfig-paths": "npm:vite-tsconfig-paths@^5.0.1"
+  }
+}

integration/helpers/vite-deno-template/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "include": [
+    "app/**/*.ts",
+    "app/**/*.tsx",
+    "app/**/.server/**/*.ts",
+    "app/**/.server/**/*.tsx",
+    "app/**/.client/**/*.ts",
+    "app/**/.client/**/*.tsx"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["vite/client"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    // Vite takes care of building everything, not tsc.
+    "noEmit": true
+  }
+}

integration/helpers/vite-deno-template/vite.config.mts

@@ -0,0 +1,16 @@
+import { vitePlugin as remix } from "@remix-run/dev";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [
+    remix({
+      future: {
+        v3_fetcherPersist: true,
+        v3_relativeSplatPath: true,
+        v3_throwAbortReason: true,
+      },
+    }),
+    tsconfigPaths(),
+  ],
+});

integration/helpers/vite.ts

@@ -1,18 +1,19 @@
+import type { Page } from "@playwright/test";
+import { test as base, expect } from "@playwright/test";
+import dedent from "dedent";
+import fse from "fs-extra";
+import getPort from "get-port";
+import glob from "glob";
 import { spawn, spawnSync, type ChildProcess } from "node:child_process";
-import path from "node:path";
 import fs from "node:fs/promises";
+import path from "node:path";
 import type { Readable } from "node:stream";
 import url from "node:url";
-import fse from "fs-extra";
+import shell from "shelljs";
 import stripIndent from "strip-indent";
 import waitOn from "wait-on";
-import getPort from "get-port";
-import shell from "shelljs";
-import glob from "glob";
-import dedent from "dedent";
-import type { Page } from "@playwright/test";
-import { test as base, expect } from "@playwright/test";
 
+const denoBin = "deno"; // assume deno is globally installed
 const remixBin = "node_modules/@remix-run/dev/dist/cli.js";
 const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 const root = path.resolve(__dirname, "../..");
@@ -90,7 +91,10 @@ export const EXPRESS_SERVER = (args: {
     app.listen(port, () => console.log('http://localhost:' + port));
   `;
 
-type TemplateName = "vite-template" | "vite-cloudflare-template";
+type TemplateName =
+  | "vite-template"
+  | "vite-cloudflare-template"
+  | "vite-deno-template";
 
 export async function createProject(
   files: Record<string, string> = {},
@@ -204,15 +208,25 @@ type ServerArgs = {
 };
 
 const createDev =
-  (nodeArgs: string[]) =>
+  (
+    runtime: typeof node | typeof deno,
+    args: string[],
+    waitOnAddress = "localhost"
+  ) =>
   async ({ cwd, port, env, basename }: ServerArgs): Promise<() => unknown> => {
-    let proc = node(nodeArgs, { cwd, env });
-    await waitForServer(proc, { port, basename });
+    let proc = runtime(args, { cwd, env });
+    await waitForServer(proc, { port, basename }, waitOnAddress);
     return () => proc.kill();
   };
 
-export const viteDev = createDev([remixBin, "vite:dev"]);
-export const customDev = createDev(["./server.mjs"]);
+export const viteDev = createDev(node, [remixBin, "vite:dev"]);
+export const viteDevDeno = createDev(
+  deno,
+  ["run", "-A", remixBin, "vite:dev"],
+  "127.0.0.1" // https://github.com/jeffbski/wait-on/issues/109
+);
+
+export const customDev = createDev(node, ["./server.mjs"]);
 
 // Used for testing errors thrown on build when we don't want to start and
 // wait for the server
@@ -240,6 +254,13 @@ type Fixtures = {
     port: number;
     cwd: string;
   }>;
+  viteDevDeno: (
+    files: Files,
+    templateName?: TemplateName
+  ) => Promise<{
+    port: number;
+    cwd: string;
+  }>;
   customDev: (files: Files) => Promise<{
     port: number;
     cwd: string;
@@ -272,6 +293,55 @@ export const test = base.extend<Fixtures>({
     stop?.();
   },
   // eslint-disable-next-line no-empty-pattern
+  viteDevDeno: async ({}, use) => {
+    let stop: (() => unknown) | undefined;
+    await use(async (files, template) => {
+      let port = await getPort();
+      let cwd = await createProject(await files({ port }), template);
+
+      // Install dependencies as late as possible so Node won't accidentally import them and cause access denied errors in Deno on Windows
+      let installProc = spawnSync(denoBin, ["install", "--no-lock"], {
+        cwd,
+        env: { ...process.env, DENO_FUTURE: "1" },
+        stdio: "pipe",
+      });
+      if (installProc.status !== 0) {
+        throw new Error(
+          [
+            "Failed to install Deno dependencies",
+            "",
+            "exit code: " + installProc.status,
+            `stdout: \n${installProc.stdout.toString("utf8")}\n`,
+            `stderr: \n${installProc.stderr.toString("utf8")}\n`,
+          ].join("\n")
+        );
+      }
+      let copyProc = spawnSync(
+        process.argv[0],
+        [
+          "./scripts/copy-build-to-dist.mjs",
+          `--deno-node-modules-paths=${cwd}/node_modules`,
+        ],
+        { stdio: "pipe" }
+      );
+      if (copyProc.status !== 0) {
+        throw new Error(
+          [
+            "Failed to copy build artifacts for Deno",
+            "",
+            "exit code: " + copyProc.status,
+            `stdout: \n${copyProc.stdout.toString("utf8")}\n`,
+            `stderr: \n${copyProc.stderr.toString("utf8")}\n`,
+          ].join("\n")
+        );
+      }
+
+      stop = await viteDevDeno({ cwd, port });
+      return { port, cwd };
+    });
+    stop?.();
+  },
+  // eslint-disable-next-line no-empty-pattern
   customDev: async ({}, use) => {
     let stop: (() => unknown) | undefined;
     await use(async (files) => {
@@ -331,15 +401,32 @@ function node(
   return proc;
 }
 
+function deno(
+  args: string[],
+  options: { cwd: string; env?: Record<string, string> }
+) {
+  let proc = spawn(denoBin, args, {
+    cwd: options.cwd,
+    env: {
+      ...process.env,
+      ...colorEnv,
+      ...options.env,
+    },
+    stdio: "pipe",
+  });
+  return proc;
+}
+
 async function waitForServer(
   proc: ChildProcess & { stdout: Readable; stderr: Readable },
-  args: { port: number; basename?: string }
+  args: { port: number; basename?: string },
+  waitOnAddress = "localhost"
 ) {
   let devStdout = bufferize(proc.stdout);
   let devStderr = bufferize(proc.stderr);
 
   await waitOn({
-    resources: [`http://localhost:${args.port}${args.basename ?? "/"}`],
+    resources: [`http://${waitOnAddress}:${args.port}${args.basename ?? "/"}`],
     timeout: 10000,
   }).catch((err) => {
     let stdout = devStdout();