Make Vite the default bundler (redwoodjs#8301)

Co-authored-by: Dominic Saadi <[email protected]>
Co-authored-by: Josh GM Walker <[email protected]>

.github/actions/setup_test_project/setup_test_project.mjs

@@ -1,20 +1,17 @@
-import os from 'node:os'
 import path from 'node:path'
 import fs from 'fs-extra'
 
 import { exec } from '@actions/exec'
 import * as core from '@actions/core'
 
+// @NOTE: do not use os.tmpdir()
+// Vite does not play well in the smoke tests with the temp dir
 const test_project_path = path.join(
-  os.tmpdir(),
-  'test-project',
-  // ":" is problematic with paths
-  new Date().toISOString().split(':').join('-')
+  path.dirname(process.cwd()),
+  'test-project'
 )
 
-console.log({
-  test_project_path
-})
+console.log(`Creating test project at ${test_project_path}....`)
 
 core.setOutput('test_project_path', test_project_path)
 

.github/workflows/ci.yml

@@ -170,7 +170,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest]
-      fail-fast: true
+      fail-fast: false
     name: 👀 Smoke test / ${{ matrix.os }} / node 18 latest
     runs-on: ${{ matrix.os }}
     env:

.gitpod.yml

@@ -23,9 +23,10 @@ tasks:
       cd /workspace/redwood
       yarn install
       yarn run build:test-project ../rw-test-app --typescript --link --verbose
+      cd /workspace/rw-test-app && sed -i "s/\(open *= *\).*/\1false/" redwood.toml
     command: |
       cd /workspace/rw-test-app
-      yarn rw dev --fwd="--client-web-socket-url=ws$(gp url 8910 | cut -c 5-)/ws"
+      yarn rw dev
 
 
 ports:

__fixtures__/test-project/web/package.json

@@ -23,6 +23,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
+    "@redwoodjs/vite": "5.0.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.23",
     "postcss-loader": "^7.3.0",

__fixtures__/test-project/web/src/entry-client.tsx

@@ -0,0 +1,17 @@
+import { hydrateRoot, createRoot } from 'react-dom/client'
+
+import App from './App'
+/**
+ * When `#redwood-app` isn't empty then it's very likely that you're using
+ * prerendering. So React attaches event listeners to the existing markup
+ * rather than replacing it.
+ * https://reactjs.org/docs/react-dom-client.html#hydrateroot
+ */
+const redwoodAppElement = document.getElementById('redwood-app')
+
+if (redwoodAppElement.children?.length > 0) {
+  hydrateRoot(redwoodAppElement, <App />)
+} else {
+  const root = createRoot(redwoodAppElement)
+  root.render(<App />)
+}

__fixtures__/test-project/web/vite.config.ts

@@ -0,0 +1,15 @@
+import dns from 'dns'
+
+import { defineConfig, UserConfig } from 'vite'
+
+// See: https://vitejs.dev/config/server-options.html#server-host
+// So that Vite will load on local instead of 127.0.0.1
+dns.setDefaultResultOrder('verbatim')
+
+import redwood from '@redwoodjs/vite'
+
+const viteConfig: UserConfig = {
+  plugins: [redwood()],
+}
+
+export default defineConfig(viteConfig)

nx.json

@@ -19,6 +19,7 @@
     "prod": [
       "!{projectRoot}/**/*.test.{js,jsx,ts,tsx}",
       "{workspaceRoot}/babel.config.js",
+      "{workspaceRoot}/tsconfig.json",
       {
         "runtime": "node -v"
       },

package.json

@@ -20,7 +20,7 @@
     "project:deps": "node ./tasks/framework-tools/frameworkDepsToProject.mjs",
     "project:sync": "node ./tasks/framework-tools/frameworkSyncToProject.mjs",
     "release": "node ./tasks/release/releaseCLI.mjs",
-    "smoke-test": "cd ./tasks/smoke-test && npx playwright install && npx playwright test",
+    "smoke-test": "cd ./tasks/smoke-test && npx playwright install && npx playwright test --project=chromium",
     "test": "lerna run test --concurrency 2 -- --colors --maxWorkers=4",
     "test-ci": "lerna run test --concurrency 2 -- --colors --maxWorkers"
   },

packages/cli/src/commands/devHandler.js

@@ -141,7 +141,7 @@ export const handler = async ({
 
   const webCommand =
     redwoodProjectConfig.web.bundler === 'vite' // @NOTE: can't use enums, not TS
-      ? `yarn cross-env NODE_ENV=development rw-vite-dev`
+      ? `yarn cross-env NODE_ENV=development rw-vite-dev ${forward}`
       : `yarn cross-env NODE_ENV=development RWJS_WATCH_NODE_MODULES=${
           watchNodeModules ? '1' : ''
         } webpack serve --config "${webpackDevConfig}" ${forward}`

packages/cli/src/commands/setup/vite/viteHandler.js

@@ -20,19 +20,6 @@ export const handler = async ({ force, verbose, addPackage }) => {
   const ts = isTypeScriptProject()
   const tasks = new Listr(
     [
-      {
-        title: 'Confirmation',
-        task: async (_ctx, task) => {
-          const confirmation = await task.prompt({
-            type: 'Confirm',
-            message: 'Vite support is experimental. Continue?',
-          })
-
-          if (!confirmation) {
-            throw new Error('User aborted')
-          }
-        },
-      },
       {
         title: 'Adding vite.config.js...',
         task: () => {
@@ -55,19 +42,14 @@ export const handler = async ({ force, verbose, addPackage }) => {
         },
       },
       {
-        title: 'Adding Vite bundler flag to redwood.toml...',
+        title: "Checking bundler isn't set to webpack...",
         task: (_ctx, task) => {
           const redwoodTomlPath = getConfigPath()
           const configContent = fs.readFileSync(redwoodTomlPath, 'utf-8')
 
-          if (!configContent.includes('bundler = "vite"')) {
-            // Use string replace to preserve comments and formatting
-            writeFile(
-              redwoodTomlPath,
-              configContent.replace('[web]', '[web]\n  bundler = "vite"'),
-              {
-                overwriteExisting: true, // redwood.toml always exists
-              }
+          if (configContent.includes('bundler = "webpack"')) {
+            throw new Error(
+              'You have the bundler set to webpack in your redwood.toml. Remove this line, or change it to "vite" and try again.'
             )
           } else {
             task.skip('Vite bundler flag already set in redwood.toml')

packages/core/config/webpack.common.js

@@ -277,7 +277,7 @@ module.exports = (webpackEnv) => {
           oneOf: [
             // (0)
             {
-              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
               type: 'asset',
               parser: {
                 dataUrlCondition: {

packages/core/package.json

@@ -56,7 +56,6 @@
     "babel-loader": "9.1.2",
     "babel-plugin-auto-import": "1.1.0",
     "babel-plugin-graphql-tag": "3.3.0",
-    "babel-plugin-inline-react-svg": "2.0.2",
     "babel-plugin-module-resolver": "5.0.0",
     "babel-timing": "0.9.1",
     "copy-webpack-plugin": "11.0.0",

packages/create-redwood-app/templates/js/web/package.json

@@ -19,5 +19,8 @@
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@redwoodjs/vite": "5.0.0"
   }
 }

packages/create-redwood-app/templates/js/web/src/entry-client.jsx

@@ -0,0 +1,17 @@
+import { hydrateRoot, createRoot } from 'react-dom/client'
+
+import App from './App'
+/**
+ * When `#redwood-app` isn't empty then it's very likely that you're using
+ * prerendering. So React attaches event listeners to the existing markup
+ * rather than replacing it.
+ * https://reactjs.org/docs/react-dom-client.html#hydrateroot
+ */
+const redwoodAppElement = document.getElementById('redwood-app')
+
+if (redwoodAppElement.children?.length > 0) {
+  hydrateRoot(redwoodAppElement, <App />)
+} else {
+  const root = createRoot(redwoodAppElement)
+  root.render(<App />)
+}

packages/create-redwood-app/templates/js/web/vite.config.js

@@ -0,0 +1,19 @@
+import dns from 'dns'
+
+import { defineConfig } from 'vite'
+
+// See: https://vitejs.dev/config/server-options.html#server-host
+// So that Vite will load on local instead of 127.0.0.1
+dns.setDefaultResultOrder('verbatim')
+
+import redwood from '@redwoodjs/vite'
+
+/**
+ * https://vitejs.dev/config/
+ * @type {import('vite').UserConfig}
+ */
+const viteConfig = {
+  plugins: [redwood()],
+}
+
+export default defineConfig(viteConfig)

packages/create-redwood-app/templates/ts/web/package.json

@@ -19,5 +19,8 @@
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@redwoodjs/vite": "5.0.0"
   }
 }

packages/create-redwood-app/templates/ts/web/src/entry-client.tsx

@@ -0,0 +1,17 @@
+import { hydrateRoot, createRoot } from 'react-dom/client'
+
+import App from './App'
+/**
+ * When `#redwood-app` isn't empty then it's very likely that you're using
+ * prerendering. So React attaches event listeners to the existing markup
+ * rather than replacing it.
+ * https://reactjs.org/docs/react-dom-client.html#hydrateroot
+ */
+const redwoodAppElement = document.getElementById('redwood-app')
+
+if (redwoodAppElement.children?.length > 0) {
+  hydrateRoot(redwoodAppElement, <App />)
+} else {
+  const root = createRoot(redwoodAppElement)
+  root.render(<App />)
+}

packages/create-redwood-app/templates/ts/web/vite.config.ts

@@ -0,0 +1,15 @@
+import dns from 'dns'
+
+import { defineConfig, UserConfig } from 'vite'
+
+// See: https://vitejs.dev/config/server-options.html#server-host
+// So that Vite will load on local instead of 127.0.0.1
+dns.setDefaultResultOrder('verbatim')
+
+import redwood from '@redwoodjs/vite'
+
+const viteConfig: UserConfig = {
+  plugins: [redwood()],
+}
+
+export default defineConfig(viteConfig)

packages/create-redwood-app/tests/template.test.js

@@ -69,6 +69,7 @@ describe('template', () => {
         "/web/src/Routes.tsx",
         "/web/src/components",
         "/web/src/components/.keep",
+        "/web/src/entry-client.tsx",
         "/web/src/index.css",
         "/web/src/index.html",
         "/web/src/layouts",
@@ -79,6 +80,7 @@ describe('template', () => {
         "/web/src/pages/NotFoundPage",
         "/web/src/pages/NotFoundPage/NotFoundPage.tsx",
         "/web/tsconfig.json",
+        "/web/vite.config.ts",
       ]
     `)
   })
@@ -152,6 +154,7 @@ describe('JS template', () => {
         "/web/src/Routes.js",
         "/web/src/components",
         "/web/src/components/.keep",
+        "/web/src/entry-client.jsx",
         "/web/src/index.css",
         "/web/src/index.html",
         "/web/src/layouts",
@@ -161,6 +164,7 @@ describe('JS template', () => {
         "/web/src/pages/FatalErrorPage/FatalErrorPage.js",
         "/web/src/pages/NotFoundPage",
         "/web/src/pages/NotFoundPage/NotFoundPage.js",
+        "/web/vite.config.js",
       ]
     `)
   })

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

@@ -77,25 +77,8 @@ export const getWebSideBabelPlugins = (
       'rwjs-web-auto-import',
     ],
     ['babel-plugin-graphql-tag', undefined, 'rwjs-babel-graphql-tag'],
-    [
-      'inline-react-svg',
-      {
-        svgo: {
-          plugins: [
-            {
-              name: 'removeAttrs',
-              params: { attrs: '(data-name)' },
-            },
-            // Otherwise having style="xxx" breaks
-            'convertStyleToAttrs',
-          ],
-        },
-      },
-      'rwjs-inline-svg',
-    ],
-
     // === Handling redwood "magic"
-  ].filter(Boolean)
+  ].filter(Boolean) as TransformOptions[]
 
   return plugins
 }

packages/prerender/src/babelPlugins/babel-plugin-redwood-prerender-media-imports.ts

@@ -20,6 +20,7 @@ const defaultOptions = {
     '.jpeg',
     '.png',
     '.gif',
+    '.svg',
     '.eot',
     '.otf',
     '.webp',

packages/prerender/src/runPrerender.tsx

@@ -8,7 +8,7 @@ import ReactDOMServer from 'react-dom/server'
 
 import { registerApiSideBabelHook } from '@redwoodjs/internal/dist/build/babel/api'
 import { registerWebSideBabelHook } from '@redwoodjs/internal/dist/build/babel/web'
-import { getConfig, getPaths } from '@redwoodjs/project-config'
+import { getConfig, getPaths, ensurePosixPath } from '@redwoodjs/project-config'
 import { LocationProvider } from '@redwoodjs/router'
 import { matchPath } from '@redwoodjs/router/dist/util'
 import type { QueryInfo } from '@redwoodjs/web'
@@ -213,9 +213,9 @@ function insertChunkLoadingScript(
       }
     }
   } else if (vite && route?.filePath) {
-    // TODO: Make sure this works on Windows
-    const pagesIndex = route.filePath.indexOf('web/src/pages') + 8
-    const pagePath = route.filePath.slice(pagesIndex)
+    const pagesIndex =
+      route.filePath.indexOf(path.join('web', 'src', 'pages')) + 8
+    const pagePath = ensurePosixPath(route.filePath.slice(pagesIndex))
     const pageChunkPath = buildManifest[pagePath]?.file
 
     if (pageChunkPath) {

packages/project-config/src/__tests__/config.test.ts

@@ -76,7 +76,7 @@ describe('getConfig', () => {
         "web": {
           "a11y": true,
           "apiUrl": "/.redwood/functions",
-          "bundler": "webpack",
+          "bundler": "vite",
           "fastRefresh": true,
           "host": "localhost",
           "includeEnvironmentVariables": [],