feat(vite): Add ability to switch Webpack for Vite on the web side #6967

dac09 · 2022-11-26T09:11:05Z

Experimental Vite Support 🎤

This PR does the following:

changes within the framework to make it Vite compatible (there's quite a lot here.... see full breakdown: https://www.notion.so/redwoodjs/Vite-RW-95f38a4e57ab4391b172b9d771b75104)
adds setup command to opt-in to using Vite. This will modify your project to make it Vite compatible
updates CLI to look for the bundler flag, and switch commands when running dev
find a way to make storybook run - currently failing because of the await import in DevFatalErrorPage
Added experiments.topLevelAwait to storybook webpack config! Storybook is still running webpack

Importantly 👉 Everything should be backwards compatible (so no breaking changes for anyone remaining on webpack)

Outstanding tasks

Use config hook and setup the preset as a Vite plugin
Can we "inject" the entry point automatically instead of modifying index.html
Redirect to root doesn't seem to be working (i.e. refresh the page after navigating, you get a blank page)
Swap build command to vite
Fix prerender failures caused by top level await in FatalErrorPage

Add rwjs/vite package

Tobbe · 2022-11-26T09:14:34Z

packages/auth-providers-web/ambient.d.ts

packages/cli-helpers/src/lib/installHelpers.ts

packages/auth-providers-web/ambient.d.ts

packages/internal/src/build/babel/web.ts

packages/web/src/components/DevFatalErrorPage.tsx

dac09 · 2022-11-28T06:14:52Z

tasks/framework-tools/lib/framework.mjs

@@ -120,6 +120,9 @@ export function frameworkPackagesBins(packages = frameworkPkgJsonFiles()) {
    if (!packageJson.bin) {
      continue
    }
+
+    // @TODO @MARK this interferes with having a single bin file


@jtoar wanted to chat to you about this and the bin aliasing we do!

…xperimental-vite-optin * 'main' of github.com:redwoodjs/redwood: fix(deps): update dependency systeminformation to v5.16.9 (#7264) chore: rm experimental warning (#7262) feat: update auth docs in preparation for v4 (#7229) chore(deps): update dependency @testing-library/dom to v8.19.1 (#7261) fix: remove version from netlify decoder specifier fix(deps): update dependency @babel/traverse to v7.20.10 (#7260) fix(tests): Add boundary to Jest moduleNameMapper (#7252) Decoupling auth polishes (#7258) chore: try reverting babel resolution (#7257) Fix how the setup auth command checks for published versions (#7256) fix(deps): update dependency systeminformation to v5.16.8 (#7248) feat: bump node.js to 16, 18 (#7183) Decoupled auth setup: install handlers automatically (#7146) chore(deps): remove apparently unused, vulnerable package (#7244) chore(deps): update babel monorepo (#7249) fix: add babel resolution (#7250) chore(deps): update dependency jsonwebtoken to v9 [security] (#7247)

Remove node-polyfills, manually do it in DevFatalErrorPage instead

dac09 · 2022-12-24T11:08:25Z

@jtoar ready for merge me thinks - addressed all comments, and fixed the issues @KrisCoulson and I found the other day! Also bumped to Vite 4. Note that I see an issue in storybook that looks like an unrelated issue: storybookjs/storybook#20383

~~BUT before merge, I need to know what version of "@babel/runtime-corejs3" should be - because yarn constriants --fix is automatically changing it to 7.20.6, and I'm not sure why.~~

It's still experimental ofcourse, and I will need to add fixes as we find bugs and shortcomings, but its now in a state where I think I'd like to get into more hands

FYI there's some stuff I've intentionally not done yet, e.g.

Vite dev and vite build should be called programatically
Prerendering images causes images to reload

Next step for me is to write up a guide for people to try over the holidays!

dac09 · 2023-01-09T04:20:03Z

@Tobbe would you like to review again/dismiss the old review please?

Want to get this into main (pushing up with merge conflicts resolved and new fixture shortly)

…xperimental-vite-optin * 'main' of github.com:redwoodjs/redwood: Moves fastify.addContentTypeParser above configureFastify (#7178) Update to GraphQL Yoga v3 (#6727) setupHelpers: Add 'verbose' listr renderer support (#7285) authTasks: Sort imports (#7284) More setup tasks for better progress reporting (#7283) setupHelpers.test.ts: Remove unused arg (#7281) authTasks: Rename to addConfigToWebApp (#7279) chore(deps): update dependency supertokens-node to v12.1.4 (#7274) fix(deps): update dependency react-hook-form to v7.41.1 (#7269) fix(deps): update typescript-eslint monorepo to v5.47.1 (#7270) chore(deps): update dependency lerna to v6.3.0 (#7271) fix(deps): update dependency @types/node to v16.18.11 (#7275) authTasks: Refactor auth decoder arg handling (#7273) chore(deps): update dependency @types/jsonwebtoken to v9 (#7245) authTasks.ts: Extract addAuthDecoderToCreateGraphQLHandler (#7268) chore: update all contributors

Tobbe · 2023-01-09T05:44:18Z

@dac09 I'll try to give it another look after our stand-up meeting later today

…xperimental-vite-optin * 'main' of github.com:redwoodjs/redwood: Fix dbauth setup command in rebuild fixture (#7292)

Tobbe

I'm happy with your changes/replies to my comments, but please let @jtoar go through his comments too before you merge

jtoar · 2023-01-10T03:13:33Z

I think we can see about listing esbuild as a dependency later. I'm inclined to just cause it's yarn's rules, but let's see what happens hoisting-wise once it's merged and the package is published. I'll also separate the handler after merge—I don't want to risk messing it up while it's in a workable state, and I'm only just getting back into things. One thing I'm wondering is if the toml change users have to make should just be a note logged to the console till the toml stuff is figured out. But that's also something we can do after merge.

Great stuff @dac09! I'll merge this so I can publish a canary version of the new package.

redwoodjs-bot · 2023-01-10T03:14:57Z

🔔 @jtoar, @Tobbe—I couldn't cherry pick this one. If you want it in the next release, you'll have to cherry pick it manually.

dac09 added 19 commits November 22, 2022 16:48

Move packages/web to globalThis

0e7b1ec

Remove global from packages/auth

21aede8

Remove global from packages/prerender

03551eb

Add auth-providers to eslint browser context

1cbfe1a

Remove global from packages/auth

68f5d36

Remove global from packages/auth-providers-web

502aca1

Remove globals from packages/cli (un-necessary)

83bb146

Remove globals from packages/router

b18d0ba

Remove global from cli-helpers (unnecessary)

909505c

Remove globals from packages/codemods

3f6401f

Remove globals from packages/record

e30b871

Update env var handling to make it work with webpack and vite

9a4eed2

Update babel for vite support

73590c5

Sort of fix prerender, media imports don't work but dont break

cffb4d1

Set RWJS_WEB_BUNDLER in prerender shims

0df2a2e

WIP: Add vite package

9fbbd88

Add rwjs/vite package with preset

4dad867

Start setup vite command

9029305

Update FatalErrorPage

49209bd

Add rwjs/vite package

dac09 added the action/add-to-cycle label Nov 26, 2022

redwoodjs-bot bot removed the action/add-to-cycle label Nov 26, 2022

dac09 added release:feature This PR introduces a new feature action/add-to-cycle labels Nov 26, 2022

redwoodjs-bot bot removed the action/add-to-cycle label Nov 26, 2022

Tobbe reviewed Nov 26, 2022

View reviewed changes

packages/auth-providers-web/ambient.d.ts Outdated Show resolved Hide resolved

Tobbe requested changes Nov 26, 2022

View reviewed changes

dac09 commented Nov 28, 2022

View reviewed changes

dac09 added the action/add-to-cycle label Nov 28, 2022

redwoodjs-bot bot removed the action/add-to-cycle label Nov 28, 2022

dac09 added 5 commits December 22, 2022 18:05

Fix public dir and env prefix

ff9d15a

Support includeEnvironmentVariables in redwood.toml

3f8f05a

Bump to vite 4 |

7dfe29c

Remove node-polyfills, manually do it in DevFatalErrorPage instead

Constraints fixes

3eaa6ac

Fix constraints, again

18b5f00

dac09 added the fixture-ok Override the test project fixture check label Dec 24, 2022

dac09 added 3 commits December 24, 2022 18:23

Webpack editor env defined in the wrong place

b5ca393

Update prerender ambiend.d.ts

77ba8e6

Fix ambient declaration

b975201

dac09 added 3 commits January 9, 2023 15:13

Update internal/config snapshot

ce539af

Merge branch 'main' of github.com:redwoodjs/redwood into feat/dc-kc-e…

fc190e3

…xperimental-vite-optin * 'main' of github.com:redwoodjs/redwood: Fix dbauth setup command in rebuild fixture (#7292)

Rebuild fixture

3cbe6ca

dac09 removed the fixture-ok Override the test project fixture check label Jan 9, 2023

Tobbe approved these changes Jan 9, 2023

View reviewed changes

jtoar merged commit a3e9480 into main Jan 10, 2023

jtoar deleted the feat/dc-kc-experimental-vite-optin branch January 10, 2023 03:13

redwoodjs-bot bot added this to the next-release milestone Jan 10, 2023

redwoodjs-bot bot added the needs-cherry-pick label Jan 10, 2023

jtoar mentioned this pull request Jan 10, 2023

Separate setup vite handler, install canary version of @redwoodjs/vite #7294

Merged

jtoar modified the milestones: next-release, v4.0.0, v4.1.0 Jan 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(vite): Add ability to switch Webpack for Vite on the web side #6967

feat(vite): Add ability to switch Webpack for Vite on the web side #6967

dac09 commented Nov 26, 2022 •

edited

Tobbe commented Nov 26, 2022

dac09 Nov 28, 2022

dac09 commented Dec 24, 2022 •

edited

dac09 commented Jan 9, 2023

Tobbe commented Jan 9, 2023

Tobbe left a comment

jtoar commented Jan 10, 2023

redwoodjs-bot bot commented Jan 10, 2023

feat(vite): Add ability to switch Webpack for Vite on the web side #6967

feat(vite): Add ability to switch Webpack for Vite on the web side #6967

Conversation

dac09 commented Nov 26, 2022 • edited

Experimental Vite Support 🎤

Outstanding tasks

Tobbe commented Nov 26, 2022

dac09 Nov 28, 2022

Choose a reason for hiding this comment

dac09 commented Dec 24, 2022 • edited

dac09 commented Jan 9, 2023

Tobbe commented Jan 9, 2023

Tobbe left a comment

Choose a reason for hiding this comment

jtoar commented Jan 10, 2023

redwoodjs-bot bot commented Jan 10, 2023

dac09 commented Nov 26, 2022 •

edited

dac09 commented Dec 24, 2022 •

edited