Adapt Superflare to work with Wrangler 3 and Remix v2 (vite compiler) #66

acusti · 2024-07-19T20:14:12Z

This PR:

updates the superflare/remix package + remix template + docs site to work with remix v2 and the vite compiler (based on the official cloudflare workers template)
updates all packages to the latest v5.x version of typescript and fixes some new typescript errors
updates the superflare CLI to work with wrangler v3 commands and miniflare v3 APIs. this entailed changes to some of the CLI command APIs:
- the migrate command’s --db option is now the name of the DB binding, not a path to the actual local DB file
- the dev command now runs remix vite:dev for the main server + wrangler dev in parallel to enable Durable Objects
removes direct dependency on better-sqlite3 in favor of wrangler’s getPlatformProxy API
removes ./d1js/* vendored files
adds a new export to the @superflare/remix plugin, available at @superflare/remix/dev, which provides superflareDevProxyVitePlugin, a drop-in replacement for remix’s cloudflareDevProxyVitePlugin that supports superflare and its automatic session handling and auth features
upgrades to latest pnpm

implements #62

plus remove the @remix-run/dev patch

• reference: https://github.com/remix-run/remix/tree/main/templates/cloudflare-workers • also, update @superflare/remix peerDependencies • remove unused @remix-run/serve dependency • move @remix-run/server-runtime from devDependencies → dependencies • upgrade to latest @cloudflare/workers-types + make it consistent across workspaces

…and refactor it to be an async function, plus add a D1DatabaseAdaptor for exposing a compatible API for a SqlliteDB instance

acusti · 2024-07-19T20:17:22Z

apps/site/app/docs.server.ts

@@ -88,14 +88,17 @@ export async function getManifest(
 return JSON.parse(manifest);
 }

-function getNodeText(node: RenderableTreeNode) {
+function getNodeText(renderableNode: RenderableTreeNode) {
+ if (typeof renderableNode === "string") return renderableNode;


@jplhomer heads up that this line is a change in behavior. in the previous version of this function, if typeof node === "string", the function returned an empty string, which i thought might be a bug, but if it is in fact desired, i will just lump this check in with the conditions in the next if statement (on line 93) so that it also returns an empty string.

…plus take advantage of MetaFunction type’s generics

From the wrangler docs: “Only required if your wrangler.toml does not include a main key” Source: https://developers.cloudflare.com/workers/wrangler/commands/#dev

reproduces the changes suggested in remix-run/remix#9774

• the Env type is now generated by the wrangler types command and written to worker-configuration.d.ts • note however that it doesn’t include CF_PAGES or APP_KEY, which are both used in examples/remix-cms/functions/[[remix]].ts

adds getSessionCookie to AppLoadContext and provides it from load-context.ts

also, bring over code to ensure session has a sessionId from superflare#handleFetch

acusti · 2024-08-13T07:20:38Z

@jplhomer i believe the last major missing piece for basic functionality was the logic to commitSession if isDirty() at the end of every request when running the app using the vite-based dev server. i originally planned to implement that as vite server middleware and register it after the remix cloudflareDevProxyVitePlugin. then i discovered that that plugin doesn’t call next() on success, which means that no further middleware will be called after it executes.

so instead, i added the commitSession logic to entry.server.ts. this seems to work, but the downside is that it’s code that must be put into the docs and into the remix template but can’t actually be provided by the @superflare/remix package.

an alternative solution that would enable us to avoid requiring custom code in the developer’s entry.server.ts file would be to re-implement the cloudflareDevProxyVitePlugin as a part of the superflareDevProxyVitePlugin, so that we can make it call next() and then have a final registered middleware that commits the cookie and doesn’t call next() to serve as the server terminus. this was actually my original plan until i realized it would require duplicating all of this file into @superflare/remix, which seemed less than ideal, so i didn’t go with that. but it’s totally doable if that seems preferable to you.

the remix-cms example now allows registering and logging in, which is exciting. i need to also update the superflare dev CLI command to both run remix vite:dev and wrangler dev in parallel to make durable objects work, but first i’m working on fixing the AppLoadContext types.

• reverts the changes implemented in 22f47d4 • the reason getPlatformProxy didn’t work when implemented in fe766b9 is that getPlatformProxy cannot handle Durable Objects if a script_name isn’t provided for the bindings (which was resolved in f5874c0)

• move @remix-run/cloudflare AppLoadContext definition to index.ts • use AppLoadContext where necessary • use WorkersRequest for accuracy + global Request for @remix-run/cloudflare’s createRequestHandler return value compatibility • restore local ./load-context.ts to expand @remix-run/cloudflare’s AppLoadContext type to include a cloudflare property based on Env interface from ./worker-configuration.d.ts

related: vitejs/vite#2139 (comment)

added new @superflare/remix-dev package to host the superflareDevProxyVitePlugin in such a way that it can be independently imported into users’ vite.config.ts file without then getting included in the built cloudflare workers bundle

the template dependency string will have to be changed from "workspace:*" → "*" once the new package has been published

fixes durable objects in dev: https://developers.cloudflare.com/workers/wrangler/api/#supported-bindings

acusti · 2024-08-15T07:15:41Z

@jplhomer i got the AppLoadContext types working (it seems to require having a local ./load-context.ts file to do the type interface re-declaration, but that matches the first-class cloudflare-workers remix template, and the version we need is smaller and simpler), and i fixed the remaining issues with the remix-cms example. there are a number of type errors still in that example, but i think most of them are due to the limitations of JSON serializing superflare models (specifically the Article model), which i think would be resolved by adopting the remix single fetch API and its brand of type inference.

i also found out that including the superflareDevProxyVitePlugin in @superflare/remix means that now, importing anything from @superflare/remix results in wrangler getting included in whatever bundle is produced, which breaks the build for workers. so, i created a new @superflare/remix-dev package and moved the superflareDevProxyVitePlugin into that package. now, that package only gets imported into vite.config.ts, so none of its dependencies get included in the built worker. maybe there’s another way to make that work, but having a separate package felt like a clean and straightforward way to me.

is it possible to get another pkg-pr-new build made from the latest version of this branch so that i can try using it in an external application? i believe all the pieces are now in place.

acusti · 2024-08-15T15:41:29Z

@jplhomer thanks for triggering the pkg-pr-new workflow! the build failed because some of the changes in @superflare/remix depend on a new type being exported from superflare, but running each package’s build script in parallel meant the new type wasn’t available at build time and so typescript reported an error. i removed the --parallel flag from the root build script. when i tested that change locally, it resulted in the packages being built serially in alphabetical order, so superflare, then superflare-remix, then superflare-remix-dev, which happens to also be the order of the dependency graph. this should ensure the new types are built and available before tsc encounters them being imported from the next package, so i think it will work this time.

acusti · 2024-08-16T17:09:27Z

@jplhomer one thing i wanted to call out from my previous message: i chose to call the new dev-only package i introduced @superflare/remix-dev (to provide superflareDevProxyVitePlugin), but i was also considering just calling it @superflare/dev (like @remix-run/dev). happy to make that change if it sounds better to you. also, i could just keep the superflareDevProxyVitePlugin inside the @superflare/remix package and have it live in a completely separate file and import path (e.g. import { superflareDevProxyVitePlugin } from "@superflare/remix/dev";). i’m also happy to do that if it seems preferable.

previously available as @superflare/remix-dev, but this is simpler

acusti · 2024-08-21T21:21:33Z

@jplhomer i decided to try implementing a separate entry point in the @superflare/remix package for the superflareDevProxyVitePlugin as i mentioned in my previous comment (available at @superflare/remix/dev). it works well and is a simpler implementation, so there’s no more new superflare package to worry about. however, in order to test it in my own app, i will need another pkg-pr-new workflow to be triggered. thanks in advance, and sorry for the trouble!

acusti added 13 commits July 17, 2024 09:45

⬆️ Upgrade pnpm/wrangler/better-sqlite3

733a4f4

plus remove the @remix-run/dev patch

Remove defunct NO_D1_WARNING env var

b8672c9

⬆️ Upgrade to latest remix v2.x

7a4579f

⬆️ Upgrade to latest typescript (v5.x)

88886ee

Remove defunct custom pnpm resolutions

2d834ef

Upgrade to latest tailwind + markdoc

c94d3c9

Update docs site to work w/ remix v2 + vite (WIP)

4d2e0e7

Update remix-cms example for remix v2 + vite (WIP)

339afff

Update remix template for remix v2 + vite (WIP)

85172f0

Make generateTypesFromSqlite take D1Database db

b13ba42

…and refactor it to be an async function, plus add a D1DatabaseAdaptor for exposing a compatible API for a SqlliteDB instance

Fix types via generics + conditional in Button.tsx

f832a5b

Handle rename LoaderArgs → LoaderFunctionArgs

a235049

acusti commented Jul 19, 2024

View reviewed changes

acusti force-pushed the wrangler3 branch from cd59a7b to c1f2a43 Compare July 20, 2024 06:25

acusti added 15 commits July 22, 2024 10:32

Handle rename ActionArgs → ActionFunctionArgs

c6b1217

Make meta functions remix v2 compatible

e5b6f65

…plus take advantage of MetaFunction type’s generics

Remove deprecated (now default) wrangler CLI flags

9bc6422

📝 Update docs site README env var info

34c6c43

Regenerate docs site worker types with .dev.vars

5394636

Fix types in docs site’s docs.server.ts

6defafb

Update docs site’s env var names in .env.example

c058dc2

Adapt docs site’s loaders to new ctx shape

7ddc464

Remove redundant wrangler dev script arg

a209b26

From the wrangler docs: “Only required if your wrangler.toml does not include a main key” Source: https://developers.cloudflare.com/workers/wrangler/commands/#dev

Restore TS cloudflare worker’s entry file + name

0f9bcab

reproduces the changes suggested in remix-run/remix#9774

Remove defunct cloudflare Env type declarations

586f8a8

• the Env type is now generated by the wrangler types command and written to worker-configuration.d.ts • note however that it doesn’t include CF_PAGES or APP_KEY, which are both used in examples/remix-cms/functions/[[remix]].ts

Restore focus-visible polyfill

4e4fbdb

📝 Fix a typo in superflare/cli/new.ts

4f9da67

Import + use types from @cloudflare/workers-types

05cf820

Adapt superflare’s loadContext to getPlatformProxy

6fbd8bd

acusti added 4 commits August 12, 2024 19:47

Fix getSessionCookie, consistent superflare import

12c654a

adds getSessionCookie to AppLoadContext and provides it from load-context.ts

Move config init to superflareDevProxyVitePlugin

b6e556d

also, bring over code to ensure session has a sessionId from superflare#handleFetch

Ensure type-only superflare import + remove unused

f1b8c17

Add commitSession logic to entry.server.tsx

bbd093f

acusti force-pushed the wrangler3 branch from 9ed50b4 to bbd093f Compare August 13, 2024 07:06

acusti added 14 commits August 13, 2024 18:44

Remove defunct "superflare" import

43d9e99

Fix import TextareaMarkdown for vite

4574c3c

related: vitejs/vite#2139 (comment)

Fix types for routes/auth/hooks.ts’ useAdmin

224fb0e

Upgrade isbot + eslint-(config|plugin)-turbo

9373f60

🚿 Remove defunct concurrently deps

86be592

📦 Upgrade to latest concurrently

55aa977

Use experimental json config for wrangler deploy

1ac6ade

🚿 Cleanup unused dependencies

573179a

Export getLoadContext from @superflare/remix

fa224be

Use @superflare/remix-dev in remix-cms + template

5e8b590

the template dependency string will have to be changed from "workspace:*" → "*" once the new package has been published

Update superflare dev to also run wrangler dev

602249d

fixes durable objects in dev: https://developers.cloudflare.com/workers/wrangler/api/#supported-bindings

acusti added 2 commits August 15, 2024 08:37

Run build serially (superflare/remix depends on superflare)

f944a60

Remove unused dependency from apps/site/

2e7b3b6

acusti added 3 commits August 21, 2024 14:07

Fix tsconfig’s cloudflare.env.d.ts include path

82ccdde

Move vite dev plugin to @superflare/remix/dev

0149e1f

previously available as @superflare/remix-dev, but this is simpler

Use @superflare/remix/dev in examples

10619af

Use installed wrangler version (not latest) in CLI

1d12080

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adapt Superflare to work with Wrangler 3 and Remix v2 (vite compiler) #66

Adapt Superflare to work with Wrangler 3 and Remix v2 (vite compiler) #66

acusti commented Jul 19, 2024 •

edited

Loading

acusti Jul 19, 2024 •

edited

Loading

acusti commented Aug 13, 2024 •

edited

Loading

acusti commented Aug 15, 2024

acusti commented Aug 15, 2024 •

edited

Loading

acusti commented Aug 16, 2024

acusti commented Aug 21, 2024 •

edited

Loading

Adapt Superflare to work with Wrangler 3 and Remix v2 (vite compiler) #66

Are you sure you want to change the base?

Adapt Superflare to work with Wrangler 3 and Remix v2 (vite compiler) #66

Conversation

acusti commented Jul 19, 2024 • edited Loading

acusti Jul 19, 2024 • edited Loading

Choose a reason for hiding this comment

acusti commented Aug 13, 2024 • edited Loading

acusti commented Aug 15, 2024

acusti commented Aug 15, 2024 • edited Loading

acusti commented Aug 16, 2024

acusti commented Aug 21, 2024 • edited Loading

acusti commented Jul 19, 2024 •

edited

Loading

acusti Jul 19, 2024 •

edited

Loading

acusti commented Aug 13, 2024 •

edited

Loading

acusti commented Aug 15, 2024 •

edited

Loading

acusti commented Aug 21, 2024 •

edited

Loading