feat: upgrade to remix v2.8

.dev.vars.example

@@ -0,0 +1 @@
+GITHUB_TOKEN=

.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
       - name: 🎭 Install Playwright
         run: npx playwright install --with-deps
       - name: 📦 Prepare the environment
-        run: cp wrangler.toml.example wrangler.toml
+        run: cp .dev.vars.example .dev.vars
       - name: 💣 Run some tests
         run: npx playwright test
 

.gitignore

@@ -7,7 +7,8 @@ node_modules
 
 # Cloudflare
 .wrangler
-wrangler.toml
+.dev.vars
+worker-configuration.d.ts
 
 # Playwright
 /test-results

README.md

@@ -20,12 +20,11 @@ What's included?
 
 ## Development
 
-Before start, copy `wrangler.toml.example` and name it `wrangler.toml`. This
-file will be used to configure the development environment and define all the
-environment variables that you need for your application.
+Before start, copy [.dev.vars.example](./.dev.vars.example) and name it
+`.dev.vars` with the required secrets.
 
 ```sh
-cp wrangler.toml.example wrangler.toml
+cp .dev.vars.example .dev.vars
 ```
 
 To starts the vite dev server:
@@ -48,17 +47,21 @@ server with:
 npm run build && npm run start
 ```
 
-### New environment variable
+### New environment variable & secret
 
-To add a new environment variable, you can update the **var** section on the
-[wrangler.toml](./wrangler.toml) file with the new variable:
+To add a new secret, please
+[update the value on **.dev.vars**](https://developers.cloudflare.com/workers/configuration/secrets/#secrets-in-development)
+similar to a `.env` file.
+
+For the rest of the environment variable, you can update the **var** section on
+the [wrangler.toml](./wrangler.toml) file with the new variable:
 
 ```toml
 [vars]
 NEW_VARIABLE = "..."
 ```
 
-The variable will be available from the `env` object in the context.
+The variables will be available from the `env` object in the context.
 
 ### Setup a KV Namespace
 
@@ -77,10 +80,14 @@ Note that the `id` has no effect on the dev environment. You can use the same
 name for both `id` and `binding`. The namespace will be available form the `env`
 object in the context.
 
-### Improving types
+### Generate env types
+
+You can generate the types of the `env` object based on `wrangler.toml` and
+`.dev.vars` with:
 
-You can improve the types of the `env` object by updating
-[env.d.ts](./env.d.ts).
+```sh
+npx wrangler types
+```
 
 ## Deployment
 

app/root.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from '@remix-run/cloudflare';
+import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/cloudflare';
 import * as React from 'react';
 import {
 	Link,
@@ -13,7 +13,6 @@ import {
 	useRouteError,
 } from '@remix-run/react';
 import '~/styles.css';
-import { metadata } from './services/github.server';
 import { RemixLogo } from './components';
 
 // We will rollback to loading CSS through links when `.css?url` is supported
@@ -29,10 +28,10 @@ export const meta: MetaFunction = () => {
 	];
 };
 
-export function loader() {
+export function loader({ context }: LoaderFunctionArgs) {
 	return json({
-		repo: metadata.repo,
-		owner: metadata.owner,
+		repo: context.env.GITHUB_REPO,
+		owner: context.env.GITHUB_OWNER,
 		description: '📜 All-in-one remix starter template for Cloudflare Pages',
 	});
 }

app/services/github.server.ts

@@ -1,11 +1,6 @@
 import type { Endpoints } from '@octokit/types';
 import type { AppLoadContext } from '@remix-run/cloudflare';
 
-export const metadata = {
-	repo: 'remix-cloudflare-template',
-	owner: 'edmundhung',
-};
-
 export function getHeaders(auth: string | undefined) {
 	const headers = new Headers({
 		Accept: 'application/vnd.github+json',
@@ -64,8 +59,8 @@ export async function getFileContentWithCache(
 
 	const content = await getFileContent({
 		auth: context.env.GITHUB_TOKEN,
-		owner: metadata.owner,
-		repo: metadata.repo,
+		owner: context.env.GITHUB_OWNER,
+		repo: context.env.GITHUB_REPO,
 		path,
 	});
 

functions/[[path]].ts

@@ -4,13 +4,9 @@ import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages';
 // @ts-ignore - the server build file is generated by `remix vite:build`
 // eslint-disable-next-line import/no-unresolved
 import * as build from '../build/server';
+import { getLoadContext } from '../load-context';
 
 export const onRequest = createPagesFunctionHandler({
 	build,
-	getLoadContext: context => ({
-		env: context.env,
-		waitUntil(promise: Promise<unknown>) {
-			context.waitUntil(promise);
-		},
-	}),
+	getLoadContext,
 });

load-context.ts

@@ -0,0 +1,31 @@
+import type { PlatformProxy } from 'wrangler';
+
+// You can generate the ENV type based on `wrangler.toml` and `.dev.vars`
+// by running `npm run typegen`
+type Cloudflare = Omit<PlatformProxy<Env>, 'dispose'>;
+type LoadContext = {
+	cloudflare: Cloudflare;
+};
+
+declare module '@remix-run/cloudflare' {
+	interface AppLoadContext {
+		env: Cloudflare['env'];
+		cf: Cloudflare['cf'];
+		ctx: Cloudflare['ctx'];
+		cache: Cloudflare['caches'];
+	}
+}
+
+export function getLoadContext({
+	context,
+}: {
+	request: Request;
+	context: LoadContext;
+}) {
+	return {
+		env: context.cloudflare.env,
+		cf: context.cloudflare.cf,
+		ctx: context.cloudflare.ctx,
+		cache: context.cloudflare.caches,
+	};
+}

package.json

@@ -10,44 +10,44 @@
     "build": "remix vite:build",
     "cleanup": "rimraf .cache ./build",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
-    "typecheck": "tsc",
+    "typecheck": "wrangler types && tsc",
     "prepare": "husky"
   },
   "dependencies": {
     "@markdoc/markdoc": "^0.4.0",
-    "@remix-run/cloudflare": "*",
-    "@remix-run/cloudflare-pages": "*",
-    "@remix-run/react": "*",
+    "@remix-run/cloudflare": "^2.8.1",
+    "@remix-run/cloudflare-pages": "^2.8.1",
+    "@remix-run/react": "^2.8.1",
     "isbot": "^3.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20240208.0",
-    "@octokit/types": "^12.4.0",
-    "@playwright/test": "^1.41.2",
-    "@remix-run/dev": "*",
-    "@remix-run/eslint-config": "*",
+    "@cloudflare/workers-types": "^4.20240222.0",
+    "@octokit/types": "^12.6.0",
+    "@playwright/test": "^1.42.1",
+    "@remix-run/dev": "^2.8.1",
+    "@remix-run/eslint-config": "^2.8.1",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "autoprefixer": "^10.4.17",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "autoprefixer": "^10.4.18",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "husky": "^9.0.10",
+    "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
-    "msw": "^2.1.7",
+    "msw": "^2.2.3",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.11",
+    "prettier-plugin-tailwindcss": "^0.5.12",
     "rimraf": "^5.0.5",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.1",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.5",
     "vite-tsconfig-paths": "^4.3.1",
-    "wrangler": "^3.28.1"
+    "wrangler": "^3.32.0"
   },
   "engines": {
     "node": ">=18"

tests/e2e/index.test.ts

@@ -19,7 +19,7 @@ test('shows the package name', async ({ page }) => {
  * You can interact with the wrangler binding similar to the remix app
  */
 test('cache the README in KV', async ({ page, wrangler }) => {
-	await wrangler.bindings.cache.put('github/README.md', '# cached-readme');
+	await wrangler.env.cache.put('github/README.md', '# cached-readme');
 	await page.goto('/');
 
 	const title = page.getByRole('heading', {
@@ -52,7 +52,7 @@ test('fetch README from GitHub if not cached', async ({
 	);
 
 	// Clear cache
-	await wrangler.bindings.cache.delete('github/README.md');
+	await wrangler.env.cache.delete('github/README.md');
 
 	await page.goto('/');
 

tests/playwright.ts

@@ -1,14 +1,13 @@
 import { test as baseTest, expect as baseExpect } from '@playwright/test';
-import type { Env } from 'env';
 import { type ViteDevServer, createServer } from 'vite';
 import { type SetupServer, setupServer } from 'msw/node';
-import { type BindingsProxy, getBindingsProxy } from 'wrangler';
+import { type PlatformProxy, getPlatformProxy } from 'wrangler';
 
 interface TestFixtures {}
 
 interface WorkerFixtures {
 	port: number;
-	wrangler: BindingsProxy<Env>;
+	wrangler: PlatformProxy<Env>;
 	server: ViteDevServer;
 	msw: SetupServer;
 }
@@ -71,13 +70,13 @@ export const test = baseTest.extend<TestFixtures, WorkerFixtures>({
 	wrangler: [
 		// eslint-disable-next-line no-empty-pattern
 		async ({}, use) => {
-			const wrangler = await getBindingsProxy<Env>();
+			const wrangler = await getPlatformProxy<Env>();
 
 			// To access bindings in the tests.
 			await use(wrangler);
 
 			// Ensure all cachees are cleaned up
-			await clearKV(wrangler.bindings.cache);
+			await clearKV(wrangler.env.cache);
 
 			await wrangler.dispose();
 		},

tsconfig.json

@@ -1,7 +1,15 @@
 {
-  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["@remix-run/cloudflare", "vite/client"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",

vite.config.ts

@@ -1,26 +1,15 @@
 import {
-	unstable_vitePlugin as remix,
-	unstable_cloudflarePreset as cloudflare,
+	vitePlugin as remix,
+	cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
 } from '@remix-run/dev';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import { getLoadContext } from './load-context';
 
 export default defineConfig({
 	plugins: [
-		remix({
-			presets: [
-				cloudflare({
-					getRemixDevLoadContext(context) {
-						return context;
-					},
-				}),
-			],
-		}),
+		remixCloudflareDevProxy({ getLoadContext }),
+		remix(),
 		tsconfigPaths(),
 	],
-	ssr: {
-		resolve: {
-			externalConditions: ['workerd', 'worker'],
-		},
-	},
 });

wrangler.toml.example → wrangler.toml

@@ -5,4 +5,5 @@ kv_namespaces = [
 ]
 
 [vars]
-GITHUB_TOKEN = ""
+GITHUB_OWNER = "edmundhung"
+GITHUB_REPO = "remix-cloudflare-template"