migrate to workers assets

Author: edmundhung

.eslintrc.cjs

@@ -0,0 +1,83 @@
+/**
+ * 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,
+	},
+
+	// 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.json

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Edmund Hung
+Copyright (c) 2024 Edmund Hung
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

LICENSE .github/LICENSELICENSE renamed to .github/LICENSE

@@ -11,7 +11,7 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
         with:
@@ -21,7 +21,7 @@ jobs:
       - name: 📦 Prepare the environment
         run: cp .dev.vars.example .dev.vars
       - name: 💣 Run some tests
-        run: npx playwright test
+        run: npm run test
 
   lint:
     name: ⬣ Linting
@@ -32,12 +32,12 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
         with:
           useLockFile: false
       - name: ✨ Code format check
-        run: npx prettier --check .
+        run: npm run format -- --check .
       - name: ✅ Code linting
-        run: npx eslint . --ext .js,.mjs,.ts,.tsx
+        run: npm run lint

.github/workflows/ci.yml

@@ -0,0 +1 @@
+20

.node-version

@@ -9,7 +9,12 @@ npx create-remix@latest --template edmundhung/remix-cloudflare-template
 What's included?
 
 - Development with [Vite](https://vitejs.dev)
-- [Github Actions](https://github.com/features/actions) for CI/CD
+- Hosting on [Cloudflare Workers](https://developers.cloudflare.com/workers/)
+  with [Static Assets](https://developers.cloudflare.com/workers/static-assets/)
+- [Github Actions](https://github.com/features/actions) for continuous
+  integration
+- Automatic builds and deployments with
+  [Workers Build](https://developers.cloudflare.com/workers/ci-cd/builds/)
 - [Markdoc](https://markdoc.dev) for rendering markdown
 - Styling with [Tailwind](https://tailwindcss.com/)
 - End-to-end testing with [Playwright](https://playwright.dev/)
@@ -86,7 +91,7 @@ You can generate the types of the `env` object based on `wrangler.toml` and
 `.dev.vars` with:
 
 ```sh
-npx wrangler types
+npm run typegen
 ```
 
 ## Deployment

.nvmrc

@@ -105,7 +105,7 @@ export function MainNavigation({ menus }: { menus: Menu[] }) {
 					</header>
 					<div className="-ml-5 flex-1 space-y-4 overflow-y-auto">
 						{menus.map(menu => (
-							<div key={menu.title} className="px-2 ">
+							<div key={menu.title} className="px-2">
 								<div className="sticky top-0 bg-white pb-2 pl-5 font-bold">
 									{menu.title}
 								</div>

README.md

@@ -1,26 +1,26 @@
-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;
-};
+import { type PlatformProxy } from 'wrangler';
 
 declare module '@remix-run/cloudflare' {
-	interface AppLoadContext {
-		env: Cloudflare['env'];
-		cf: Cloudflare['cf'];
-		ctx: Cloudflare['ctx'];
-		cache: Cloudflare['caches'];
+	// eslint-disable-next-line @typescript-eslint/no-empty-interface
+	interface AppLoadContext extends ReturnType<typeof getLoadContext> {
+		// This will merge the result of `getLoadContext` into the `AppLoadContext`
 	}
 }
 
 export function getLoadContext({
 	context,
 }: {
 	request: Request;
-	context: LoadContext;
+	context: {
+		cloudflare: Omit<
+			PlatformProxy<Env, IncomingRequestCfProperties>,
+			'dispose' | 'caches'
+		> & {
+			caches:
+				| PlatformProxy<Env, IncomingRequestCfProperties>['caches']
+				| CacheStorage;
+		};
+	};
 }) {
 	return {
 		env: context.cloudflare.env,