fix: ssr incompatibility with vite 4 (close #333)

ElMassimo · Mar 16, 2023 · dbabd3d · dbabd3d
1 parent 2ba6fc5
commit dbabd3d
Show file tree

Hide file tree

Showing 12 changed files with 2,014 additions and 657 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/vite-plugin-rails/example/package.json b/vite-plugin-rails/example/package.json
@@ -5,23 +5,23 @@
   "license": "MIT",
   "scripts": {
     "dev": "cross-env DEBUG=vite-plugin-ruby:* vite --open",
-    "build": "cross-env DEBUG=vite-plugin-ruby:* vite build --mode production",
+    "build": "cross-env DEBUG=vite-plugin-ruby:* vite build --mode production --emptyOutDir",
     "preview": "cross-env RAILS_ENV=production DEBUG=vite-plugin-ruby:* vite preview --open"
   },
   "devDependencies": {
-    "@inertiajs/inertia": "^0.11.0",
+    "@inertiajs/inertia": "^0.11.1",
     "@inertiajs/inertia-vue3": "^0.6.0",
     "@inertiajs/server": "^0.1.0",
-    "@vitejs/plugin-legacy": "2.0.0-alpha.2",
-    "@vitejs/plugin-vue": "^3.0.0-beta.0",
-    "@vue/server-renderer": "^3.2.37",
+    "@vitejs/plugin-legacy": "^4.0.2",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "@vue/server-renderer": "^3.2.47",
     "cross-env": "^7.0.3",
-    "sass": "^1.49.7",
-    "terser": "^5.14.1",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.0",
+    "sass": "^1.59.3",
+    "terser": "^5.16.6",
+    "typescript": "^4.9.5",
+    "vite": "^4.2.0",
     "vite-plugin-rails": "workspace:*",
     "vite-plugin-ruby": "workspace:*",
-    "vue": "^3.2.37"
+    "vue": "^3.2.47"
   }
 }
diff --git a/vite-plugin-rails/package.json b/vite-plugin-rails/package.json
@@ -45,24 +45,24 @@
     "postpublish": "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag vite-plugin-rails@$PACKAGE_VERSION && git push --tags"
   },
   "dependencies": {
-    "rollup-plugin-gzip": "^3.0",
-    "vite-plugin-environment": "^1.1",
-    "vite-plugin-full-reload": "^1.0",
-    "vite-plugin-manifest-sri": "^0.1",
-    "vite-plugin-ruby": "workspace:^3.1",
-    "vite-plugin-stimulus-hmr": "^3.0"
+    "rollup-plugin-gzip": "^3.1.0",
+    "vite-plugin-environment": "^1.1.3",
+    "vite-plugin-full-reload": "^1.0.5",
+    "vite-plugin-manifest-sri": "^0.1.0",
+    "vite-plugin-ruby": "workspace:^3.1.3",
+    "vite-plugin-stimulus-hmr": "^3.0.0"
   },
   "peerDependencies": {
-    "vite": ">=2.5.0"
+    "vite": ">=4.0.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.7",
-    "@types/node": "^14.18.32",
-    "rollup": "^2.79.1",
+    "@types/node": "^14.18.38",
+    "rollup": "^3.19.1",
     "standard-version": "^9.5.0",
-    "tsup": "^5.12.9",
-    "typescript": "^4.8.4",
-    "vite": "^3.1.8",
+    "tsup": "^6.6.3",
+    "typescript": "^4.9.5",
+    "vite": "^4.2.0",
     "vitest": "^0.18.1"
   }
 }
diff --git a/vite-plugin-rails/scripts/postbuild.mjs b/vite-plugin-rails/scripts/postbuild.mjs
@@ -12,7 +12,12 @@ const code = source.replaceAll(
   '!mod.default',
 )
 
-if (code !== source)
+if (code !== source) {
+  console.info(`Writing ${file}`)
   fs.writeFileSync(file, code)
-else
-  throw new Error('Did not find CJS pattern to replace.')
+}
+else {
+  const message = 'Did not find CJS pattern to replace.'
+  console.error(message)
+  throw new Error(message)
+}
diff --git a/vite-plugin-rails/tests/build.spec.ts b/vite-plugin-rails/tests/build.spec.ts
@@ -14,41 +14,41 @@ describe('config', () => {
   test('generated files', async () => {
     const files = await glob('**/*', { cwd: `${exampleDir}/public/vite`, onlyFiles: true })
     expect(files.sort()).toEqual(expect.arrayContaining([
-      'assets/app.80592535.css',
-      'assets/app.80592535.css.br',
-      'assets/app.80592535.css.gz',
-      'assets/external.d1ae13f1.js',
-      'assets/external.d1ae13f1.js.br',
-      'assets/external.d1ae13f1.js.gz',
-      'assets/external.d1ae13f1.js.map',
-      'assets/index.2d44b5f7.js',
-      'assets/index.2d44b5f7.js.br',
-      'assets/index.2d44b5f7.js.gz',
-      'assets/index.2d44b5f7.js.map',
-      'assets/log.818edfb8.js',
-      'assets/log.818edfb8.js.br',
-      'assets/log.818edfb8.js.gz',
-      'assets/log.818edfb8.js.map',
-      'assets/logo.03d6d6da.png',
-      'assets/logo.322aae0c.svg',
-      'assets/logo.f42fb7ea.png',
-      'assets/main.e2bad79c.js',
-      'assets/main.e2bad79c.js.br',
-      'assets/main.e2bad79c.js.gz',
-      'assets/main.e2bad79c.js.map',
-      'assets/sassy.2f9e231e.css',
-      'assets/sassy.2f9e231e.css.br',
-      'assets/sassy.2f9e231e.css.gz',
-      'assets/theme.eb94a372.css',
-      'assets/theme.eb94a372.css.br',
-      'assets/theme.eb94a372.css.gz',
-      'assets/vue.05010a24.js',
-      'assets/vue.05010a24.js.br',
-      'assets/vue.05010a24.js.gz',
-      'assets/vue.05010a24.js.map',
-      'assets/vue.a42e2aeb.css',
-      'assets/vue.a42e2aeb.css.br',
-      'assets/vue.a42e2aeb.css.gz',
+      'assets/app-80592535.css',
+      'assets/app-80592535.css.br',
+      'assets/app-80592535.css.gz',
+      'assets/external-088a12da.js',
+      'assets/external-088a12da.js.br',
+      'assets/external-088a12da.js.gz',
+      'assets/external-088a12da.js.map',
+      'assets/index-fe03930f.js',
+      'assets/index-fe03930f.js.br',
+      'assets/index-fe03930f.js.gz',
+      'assets/index-fe03930f.js.map',
+      'assets/log-092f4148.js',
+      'assets/log-092f4148.js.br',
+      'assets/log-092f4148.js.gz',
+      'assets/log-092f4148.js.map',
+      'assets/logo-03d6d6da.png',
+      'assets/logo-322aae0c.svg',
+      'assets/logo-f42fb7ea.png',
+      'assets/main-fd323c2a.js',
+      'assets/main-fd323c2a.js.br',
+      'assets/main-fd323c2a.js.gz',
+      'assets/main-fd323c2a.js.map',
+      'assets/sassy-2f9e231e.css',
+      'assets/sassy-2f9e231e.css.br',
+      'assets/sassy-2f9e231e.css.gz',
+      'assets/theme-eb94a372.css',
+      'assets/theme-eb94a372.css.br',
+      'assets/theme-eb94a372.css.gz',
+      'assets/vue-3d27911e.js',
+      'assets/vue-3d27911e.js.br',
+      'assets/vue-3d27911e.js.gz',
+      'assets/vue-3d27911e.js.map',
+      'assets/vue-b821fb22.css',
+      'assets/vue-b821fb22.css.br',
+      'assets/vue-b821fb22.css.gz',
     ]))
   })
 })
diff --git a/vite-plugin-rails/tsup.config.ts b/vite-plugin-rails/tsup.config.ts
@@ -2,6 +2,7 @@ import type { Options } from 'tsup'
 export const tsup: Options = {
   clean: true,
   dts: true,
+  shims: true,
   target: 'node14',
   format: ['esm', 'cjs'],
 }
diff --git a/vite-plugin-ruby/example/app/frontend/ssr/ssr.ts b/vite-plugin-ruby/example/app/frontend/ssr/ssr.ts
@@ -2,6 +2,8 @@ import { createSSRApp, h } from 'vue'
 import { renderToString } from '@vue/server-renderer'
 import { createInertiaApp } from '@inertiajs/inertia-vue3'
 import createServer from '@inertiajs/server'
+import logo from '~/images/logo.svg'
+console.info({ logo })
 
 const pages = import.meta.globEagerDefault('../pages/*.vue')
 

diff --git a/vite-plugin-ruby/example/package.json b/vite-plugin-ruby/example/package.json
@@ -9,18 +9,18 @@
     "preview": "cross-env RAILS_ENV=production DEBUG=vite-plugin-ruby:* vite preview --open"
   },
   "devDependencies": {
-    "@inertiajs/inertia": "^0.11.0",
+    "@inertiajs/inertia": "^0.11.1",
     "@inertiajs/inertia-vue3": "^0.6.0",
     "@inertiajs/server": "^0.1.0",
-    "@vitejs/plugin-legacy": "2.0.0-alpha.2",
-    "@vitejs/plugin-vue": "^3.0.0-beta.0",
-    "@vue/server-renderer": "^3.2.37",
+    "@vitejs/plugin-legacy": "^4.0.2",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "@vue/server-renderer": "^3.2.47",
     "cross-env": "^7.0.3",
-    "sass": "^1.49.7",
-    "terser": "^5.14.1",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.0",
+    "sass": "^1.59.3",
+    "terser": "^5.16.6",
+    "typescript": "^4.9.5",
+    "vite": "^4.2.0",
     "vite-plugin-ruby": "workspace:*",
-    "vue": "^3.2.37"
+    "vue": "^3.2.47"
   }
 }
diff --git a/vite-plugin-ruby/package.json b/vite-plugin-ruby/package.json
@@ -43,19 +43,19 @@
   },
   "dependencies": {
     "debug": "^4.3.4",
-    "fast-glob": "^3.2.11"
+    "fast-glob": "^3.2.12"
   },
   "peerDependencies": {
-    "vite": ">=2.5.0"
+    "vite": ">=4.0.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.7",
-    "@types/node": "^14.18.21",
-    "rollup": "^2.75.7",
+    "@types/node": "^14.18.38",
+    "rollup": "^3.19.1",
     "standard-version": "^9.5.0",
-    "tsup": "^5.12.9",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.0",
-    "vitest": "^0.18.0"
+    "tsup": "^6.6.3",
+    "typescript": "^4.9.5",
+    "vite": "^4.2.0",
+    "vitest": "^0.18.1"
   }
 }
diff --git a/vite-plugin-ruby/src/index.ts b/vite-plugin-ruby/src/index.ts
@@ -45,8 +45,8 @@ function config (userConfig: UserConfig, env: ConfigEnv): UserConfig {
     outDir,
     rollupOptions: {
       input: Object.fromEntries(filterEntrypointsForRollup(entrypoints)),
-      output: ssrBuild ? {} : {
-        ...outputOptions(assetsDir),
+      output: {
+        ...outputOptions(assetsDir, ssrBuild),
         ...userConfig.build?.rollupOptions?.output,
       },
     },
@@ -76,16 +76,14 @@ function configureServer (server: ViteDevServer) {
   server.watcher.add(watchAdditionalPaths)
 }
 
-function outputOptions (assetsDir: string) {
+function outputOptions (assetsDir: string, ssrBuild: boolean) {
   // Internal: Avoid nesting entrypoints unnecessarily.
   const outputFileName = (ext: string) => ({ name }: { name: string }) => {
     const shortName = basename(name).split('.')[0]
-    return posix.join(assetsDir, `${shortName}.[hash].${ext}`)
+    return posix.join(assetsDir, `${shortName}-[hash].${ext}`)
   }
 
   return {
-    entryFileNames: outputFileName('js'),
-    chunkFileNames: outputFileName('js'),
-    assetFileNames: outputFileName('[ext]'),
+    entryFileNames: ssrBuild ? undefined : outputFileName('js'),
   }
 }
diff --git a/vite-plugin-ruby/src/manifest.ts b/vite-plugin-ruby/src/manifest.ts
@@ -39,7 +39,7 @@ export function assetsManifestPlugin (): Plugin {
 
       const ext = path.extname(filename)
       const filenameWithoutExt = filename.slice(0, -ext.length)
-      const hashedFilename = path.posix.join(config.build.assetsDir, `${path.basename(filenameWithoutExt)}.${hash}${ext}`)
+      const hashedFilename = path.posix.join(config.build.assetsDir, `${path.basename(filenameWithoutExt)}-${hash}${ext}`)
 
       manifest.set(path.relative(config.root, absoluteFilename), { file: hashedFilename, src: filename })
 

diff --git a/vite-plugin-ruby/tsup.config.ts b/vite-plugin-ruby/tsup.config.ts
@@ -2,6 +2,7 @@ import type { Options } from 'tsup'
 export const tsup: Options = {
   clean: true,
   dts: true,
+  shims: true,
   sourcemap: true,
   target: 'node12',
   format: ['esm', 'cjs'],