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
upgrades to latest turbo
adopts new Static Assets for Workers feature

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

removing the ;./index' import from superflare-remix/dev.ts makes it so that there is no possible issue with using static `import {…} from 'superflare'` in superflare-remix/index.ts, because that file won’t be executed outside of the vite bundle/execution context

acusti · 2024-11-01T18:34:51Z

@jplhomer i just pushed up a change to the superflare dev command so that it doesn’t use npx (which was unnecessary/problematic in my testing) and suppresses the output from wrangler dev so that it looks like the user is just running remix vite:dev, which is much less confusing, so that first issue I mentioned 2 days ago looks to be resolved. i will have better assurance that it works outside of the superflare repo once there’s a new installable release from the publish-snapshot action on this PR for me to test.

this leaves the last known TODO item for me as the documentation, which i am happy to get started on once i have a better idea of what you think the plan should be for this PR.

v2.12.1 includes remix-run/remix#9976, which changed the API contract of the fromNodeRequest util that we will depend on in superflareDevProxyVitePlugin

using entry.server.tsx meant that sessions weren’t committed for redirects, e.g. the default logout route action, which calls ``` auth.logout(); return redirect("/"); ``` this commit takes over the middleware portion of the cloudflareDevProxyVitePlugin logic and frames the request/response lifecycle with superflare.config initialization + getLoadContext before the request handler is invoked, and commit session cookie handling after

fixes UTF 8 text encoding / rendering, at least when running the docs app locally

acusti · 2024-11-12T18:18:53Z

@jplhomer tl;dr could you please trigger the publish-snapshot workflow with the latest so that i can test out the latest fixes in my own project?

the gory details: i refactored the new superflareDevProxyVitePlugin to take over the core part of remix’s cloudflareDevProxyVitePlugin, which is the actual vite dev server middleware that is used to handle all requests. originally, i chose not to do so:

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.

but a couple of days ago, i noticed that the default logout route wasn’t working because it calls auth.logout() and returns a redirect, meaning that the entry.server.tsx handlers never get invoked and so the session never gets committed and the post-logout session data doesn’t get written to the cookie. this made it obvious that taking over the request handling portion of the dev proxy vite plugin was really the best and only way to handle this properly, plus i realized that the node-adapter.ts file that i didn’t want to have to duplicate inside superflare is actually published as @remix-run/dev/dist/vite/node-adapter.js, so the surface area of the code that has to be handled by superflare to make the dev server work correctly is actually pretty reasonable, and most of it is code to instantiate superflare.config, set up the load context, and then commit the session if isDirty() right before generating and streaming the response: https://github.com/jplhomer/superflare/pull/66/files#diff-d9a86b278811d9a84bf4a62d69017ae9f6000d2b9073e8100b7d0ee5e1562041R68-R103

other recent changes are adopting the new workers Static Assets feature, upgrading from turbo v1 → v2 (latest) and upgrading to the latest version of pnpm.

not having a language identifier results in: TypeError: Cannot read properties of undefined (reading 'toLowerCase') at Highlight (/Users/foo/superflare/node_modules/.pnpm/[email protected][email protected]/node_modules/prism-react-renderer/src/components/highlight.ts:14:30)

fixes tests locally on my machine

jplhomer · 2024-11-14T10:44:10Z

@acusti Just ran again! Thanks for pushing on this - things are crazy for me right now but I anticipate being able to take a look at this and getting it merged ASAP and switch the project into prerelease mode before cutting another major version.

also, allow it to be overwritten in case someone wants to make superflare work with a wrangler.toml

acusti · 2024-11-14T18:10:25Z

@jplhomer that’s great news, and thanks for triggering a new release! i will start in on updating the documentation. also, after using the new releases in my own project, i discovered that i wasn’t providing experimentalJsonConfig: true by default to wrangler’s getPlatformProxy, so i pushed up the fix for that issue. but aside from that, the new superflareDevProxyVitePlugin implementation is working great for me in dev.

jplhomer

Just phenomenal work. Can't believe you kept up with this. Thank you!

jplhomer · 2024-11-15T19:02:27Z

packages/superflare-remix/dev.ts

+              // Import singleton-dependent modules via viteDevServer to get
+              // the same instance of the Config singleton class as in app code.
+              const superflare = await server.ssrLoadModule("superflare");


Wow, super clever way to share between module graphs.

acusti · 2024-11-15T20:21:05Z

@jplhomer thanks so much for the kind words! but oh dear, it seems i broke the docs site; let me know if you want any help debugging it. i did have to change a number of things to get it to work with the upgraded stack.

shall i create a new branch to start on documentation updates? there are some subtle changes to document that should be trivial for new superflare consumers but should probably be called out for existing folks looking to upgrade in an upgrade guide or the like. things like with the latest wrangler, you have to add --remote when running your migrations or else they just get run locally (which i believe wasn’t a thing initially because D1 didn’t even support having a local instance, but i’m not sure). or that if you use build: { minify: true } in your vite config, you’ll cause your model names to get mangled and break everything.

jplhomer · 2024-11-15T20:25:43Z

@acusti no worries! The only errors I can get from the server are:

Which seems to correspond to a Cloudflare 1003, something about direct IP references which doesn't add up 🤔

It also fails locally when I pnpm start in the docs site: it's just a Remix 404 page. Very odd - works fine during local development.

I gave it about 30 minutes but can't seem to find any leads - since it's fresher in your mind, maybe you can uncover what might be happening differently in dev vs prod/local build?

jplhomer · 2024-11-15T20:26:24Z

Also yes, updating the docs would be great. We haven't added a changeset yet, so there's not a major hurry to get them up.

jplhomer · 2024-11-15T20:36:32Z

Update: Found the issue! For some reason, deploying via Cloudflare integration wasn't setting NODE_ENV=production like it used to in the GitHub action. Prepending the CF deploy command fixed things 👍

acusti · 2024-11-15T20:41:54Z

that’s odd, i haven’t needed to set that manually with other cloudflare workers remix projects. i figured the most likely thing to break with the docs site was the search integration, but that actually seems to work fine! except for a CSS thing that seems to be the result of the site not having the necessary styles for the DocSearch-VisuallyHiddenForAccessibility classname.

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 force-pushed the wrangler3 branch from 734c7d6 to b4b0bd3 Compare November 1, 2024 18:14

acusti added 2 commits November 1, 2024 18:29

Specify a wrangler version that supports static assets

b7ba762

Fix superflare dev command + suppress wrangler dev io

6c795d7

acusti added 7 commits November 11, 2024 20:41

Add @remix-run/server-runtime, use latest pnpm

335191e

Specify minimum remix version for devProxyVite plugin

82163e3

v2.12.1 includes remix-run/remix#9976, which changed the API contract of the fromNodeRequest util that we will depend on in superflareDevProxyVitePlugin

Ensure <meta charset> is first thing rendered

a473b81

fixes UTF 8 text encoding / rendering, at least when running the docs app locally

Include “.md” ext in default docs filepath

92193d1

Upgrade to latest version of turbo (2.x)

378b444

🚿 Strip down entry.server.tsx files

4cfcc56

acusti added 3 commits November 13, 2024 17:40

Fix server-runtime imports (should be cloudflare)

198e9f7

Add better-sqlite3 devDependency in packages/superflare

4c69f28

fixes tests locally on my machine

Make getPlatformProxy experimentalJsonConfig: true

57eb78a

also, allow it to be overwritten in case someone wants to make superflare work with a wrangler.toml

Add proper migrations to Remix CMS

b02d16e

jplhomer approved these changes Nov 15, 2024

View reviewed changes

jplhomer merged commit 1b2ee7f into jplhomer:main Nov 15, 2024
3 checks passed

acusti deleted the wrangler3 branch November 15, 2024 23:27

This was referenced Nov 18, 2024

Update docs with changes from Remix v2 / Vite / Wrangler 3 migration #69

Open

Use global Request type to prevent type errors #70

Open

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 Nov 1, 2024

acusti commented Nov 12, 2024 •

edited

Loading

jplhomer commented Nov 14, 2024 •

edited

Loading

acusti commented Nov 14, 2024

jplhomer left a comment

jplhomer Nov 15, 2024

acusti commented Nov 15, 2024

jplhomer commented Nov 15, 2024

jplhomer commented Nov 15, 2024

jplhomer commented Nov 15, 2024

acusti commented Nov 15, 2024 •

edited

Loading

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

Conversation

acusti commented Jul 19, 2024 • edited Loading

acusti Jul 19, 2024 • edited Loading

Choose a reason for hiding this comment

acusti commented Nov 1, 2024

acusti commented Nov 12, 2024 • edited Loading

jplhomer commented Nov 14, 2024 • edited Loading

acusti commented Nov 14, 2024

jplhomer left a comment

Choose a reason for hiding this comment

jplhomer Nov 15, 2024

Choose a reason for hiding this comment

acusti commented Nov 15, 2024

jplhomer commented Nov 15, 2024

jplhomer commented Nov 15, 2024

jplhomer commented Nov 15, 2024

acusti commented Nov 15, 2024 • edited Loading

acusti commented Jul 19, 2024 •

edited

Loading

acusti Jul 19, 2024 •

edited

Loading

acusti commented Nov 12, 2024 •

edited

Loading

jplhomer commented Nov 14, 2024 •

edited

Loading

acusti commented Nov 15, 2024 •

edited

Loading