feat(templates/deno): use npm-managed dependencies

packages/remix-dev/cli/create.ts

@@ -452,14 +452,15 @@ function isRemixStack(input: string) {
 
 function isRemixTemplate(input: string) {
   return [
-    "remix",
-    "express",
     "arc",
+    "cloudflare-pages",
+    "cloudflare-workers",
+    "deno",
+    "express",
     "fly",
     "netlify",
+    "remix",
     "vercel",
-    "cloudflare-pages",
-    "cloudflare-workers",
   ].includes(input);
 }
 

templates/deno/.eslintignore

@@ -0,0 +1 @@
+*

templates/deno/.vscode/resolve_npm_imports.json

@@ -0,0 +1,15 @@
+{
+  "// This import map is used solely for the denoland.vscode-deno extension.": "",
+  "// Remix does not support import maps.": "",
+  "// Dependency management is done through `npm` and `node_modules/` instead.": "",
+  "// Deno-only dependencies may be imported via URL imports (without using import maps).": "",
+
+  "imports": {
+    "react": "https://esm.sh/react@18.0.0",
+    "react-dom": "https://esm.sh/react-dom@18.0.0",
+    "react-dom/server": "https://esm.sh/react-dom@18.0.0/server",
+    "@remix-run/dev/server-build": "https://esm.sh/@remix-run/dev@1.4.3/server-build",
+    "@remix-run/deno": "https://esm.sh/@remix-run/deno@1.4.3",
+    "@remix-run/react": "https://esm.sh/@remix-run/react@1.4.3"
+  }
+}

templates/deno/.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "deno.enable": true,
-  "deno.lint": true
-} 
+  "deno.lint": true,
+  "deno.importMap": "./.vscode/resolve_npm_imports.json"
+}

templates/deno/README.md

@@ -1,69 +1,74 @@
-# Remix Deno Template
+# Remix + Deno
 
-⚠️ EXPERIMENTAL ⚠️
+Welcome to the Deno template for Remix!
+
+For more, check out the [Remix docs](https://remix.run/docs).
 
 ## Install
 
 ```sh
-npx create-remix@latest --template <path/to/this/template>
+npx create-remix@latest --template deno
 ```
 
-## Scripts
+## Managing dependencies
 
-```sh
-npm run build
-```
+### Deno modules
 
-```sh
-npm run start
-```
+Import Deno modules via URL imports:
 
-```sh
-npm run dev
+```ts
+import { copy } from "https://deno.land/std@0.138.0/streams/conversion.ts";
 ```
 
-## 🚧 Under construction 🚧
+### Don't use Deno-friendly CDNs, use `npm`
 
-This section details temporary scaffolding for the Remix Deno template.
-All of this scaffolding is planned for removal at a later date.
+For other dependencies, simply use `npm` to install them.
 
-### `package.json`
+```sh
+npm install react react-dom
+```
 
-A `package.json` is included for now so that `remix` CLI (from `@remix-run/dev`) can run the Remix compiler.
+```tsx
+import { useEffect } from "react";
+```
 
-In the future, we could provide a stand-alone executable for the Remix compiler OR `npx remix`, and we would remove the `package.json` file from this Deno template.
+Do not use Deno-friendly CDNs like https://esm.sh as those CDNs
+do not have good support for peer dependencies nor for specifying
+dev/prod environments via `NODE_ENV`.
 
-### Local `remix-deno` package
+### Don't use import maps
 
-For now, we are inlining Remix's `@remix-run/deno` package into `remix-deno` to enable faster experimentation and development.
+Remix does not support [import maps](https://deno.land/manual/linking_to_external_code/import_maps) for Deno.
 
-In the future, this template would not include the `remix-deno` directory at all.
-Instead, users could import from `@remix-run/deno` (exact URL TBD).
+## Development
 
-## 🐞 Known issues 🐞
+From your terminal:
 
-### `dev` does not live reload
+```sh
+npm run dev
+```
 
-Deno server is not currently configured to live reload when `--watch` detects changes, requiring a manual refresh in the browser for non-server changes (e.g. changing JSX content).
+This starts your app in development mode, rebuilding assets on file changes.
 
-To enable live reload, `@remix-run/react` must be built with `NODE_ENV=development`.
-To do so with `esm.sh`, `?dev` must be added to all imports that depend on React.
-However, bundling the React development build for `esm.sh` (`https://esm.sh/react@17.0.2?dev`) runs into an [esbuild bug](https://github.com/evanw/esbuild/issues/2099).
+## Production
 
-Need a better way to switch from development to production mode than adding/removing `?dev` for all React-dependent imports.
-Also, need esbuild bug to be resolved.
+First, build your app for production:
 
-### Pinned React imports
+```sh
+npm run build
+```
 
-For all React-related imports (including `@remix-run/*` imports), we append `?pin=v68` to the URL.
-This is the only reliable way we were able to guarantee that only one copy of React would be present in the browser.
+Then run the app in production mode:
 
-No plans on how to address this yet.
+```sh
+npm start
+```
 
-### @remix-run/dev/server-build
+## Deployment
 
-The `@remix-run/dev/server-build` import within `server.ts` (`import * as build from '@remix-run/dev/server-build'`) is a special import for the Remix compiler that points to the built server entry point (typically within `./build`).
+Building the Deno app (`npm run build`) results in two outputs:
 
-The `vscode_deno` plugin complains about this import with a red squiggly underline as Deno cannot resolve this special import.
+- `build/` (server bundle)
+- `public/build/` (browser bundle)
 
-No plans on how to address this yet.
+You can deploy these bundles to a host of your choice, just make sure it runs Deno!

templates/deno/app/entry.client.tsx

@@ -1,5 +1,5 @@
-import React from "./deps/react.ts";
-import ReactDOM from "./deps/react-dom.ts";
-import { RemixBrowser } from "./deps/@remix-run/react.ts";
+import React from "react";
+import ReactDOM from "react-dom";
+import { RemixBrowser } from "@remix-run/react";
 
 ReactDOM.hydrate(<RemixBrowser />, document);

templates/deno/app/entry.server.tsx

@@ -1,16 +1,16 @@
-import React from "./deps/react.ts";
-import { renderToString } from "./deps/react-dom-server.ts";
-import { RemixServer } from "./deps/@remix-run/react.ts";
-import type { EntryContext } from "../remix-deno/index.ts";
+import React from "react";
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "@remix-run/react";
+import type { EntryContext } from "@remix-run/deno";
 
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
 ) {
   const markup = renderToString(
-    <RemixServer context={remixContext} url={request.url} />
+    <RemixServer context={remixContext} url={request.url} />,
   );
 
   responseHeaders.set("Content-Type", "text/html");

templates/deno/app/root.tsx

@@ -1,13 +1,13 @@
-import React from "./deps/react.ts";
+import React from "react";
 import {
   Links,
   LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
-} from "./deps/@remix-run/react.ts";
-import type { MetaFunction } from "../remix-deno/index.ts";
+} from "@remix-run/react";
+import type { MetaFunction } from "@remix-run/deno";
 
 export const meta: MetaFunction = () => ({
   charset: "utf-8",

templates/deno/app/routes/index.tsx

@@ -1,4 +1,4 @@
-import React from "../deps/react.ts";
+import React from "react";
 
 export default function Index() {
   return (

templates/deno/package.json

@@ -7,7 +7,9 @@
     "dev": "remix build && run-p dev:*",
     "dev:remix": "remix watch",
     "dev:deno": "cross-env NODE_ENV=development deno run --unstable --watch --allow-net --allow-read --allow-env ./build/index.js",
-    "start": "cross-env NODE_ENV=production deno run --unstable --allow-net --allow-read --allow-env ./build/index.js"
+    "start": "cross-env NODE_ENV=production deno run --unstable --allow-net --allow-read --allow-env ./build/index.js",
+    "lint": "deno lint --ignore=node_modules",
+    "fmt": "deno fmt --ignore=node_modules"
   },
   "devDependencies": {
     "@remix-run/dev": "*",
@@ -16,5 +18,11 @@
   },
   "engines": {
     "node": ">=14"
+  },
+  "dependencies": {
+    "@remix-run/deno": "*",
+    "@remix-run/react": "*",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   }
 }