fix: ssr incompatibility with vite 4 (#345)

Closes #333
ElMassimo · Mar 16, 2023 · 3491bde · 3491bde
1 parent 2ba6fc5
commit 3491bde
Show file tree

Hide file tree

Showing 13 changed files with 2,124 additions and 672 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/__snapshots__/build.spec.ts.snap b/vite-plugin-rails/tests/__snapshots__/build.spec.ts.snap
@@ -0,0 +1,100 @@
+// Vitest Snapshot v1
+
+exports[`config > generated files 1`] = `
+{
+  "../assets/external.js": {
+    "file": "assets/external-088a12da.js",
+    "integrity": "sha384-DvDpUu3eA3F/iqvmqdNIqZMtzask1fdO3XdPkofJredvkRYsli0qXW4ZmoXJ+I6Y",
+    "isEntry": true,
+    "src": "../assets/external.js",
+  },
+  "../assets/logo.png": {
+    "file": "assets/logo-03d6d6da.png",
+    "integrity": "sha384-IGw3tfo4Xt0lp6sO9t5mYtILwfBxDFR8sRCtroxGjhE3r9UxNYgtimkCNzsJU9AP",
+    "src": "../assets/logo.png",
+  },
+  "../assets/theme.css": {
+    "file": "assets/theme-eb94a372.css",
+    "integrity": "sha384-tXSaWp9h7f9IDyqcyqxE2oHEre7hVTMpGM1IZPUdwc9do71+G5Fb37fW6KleExPw",
+    "isEntry": true,
+    "src": "../assets/theme.css",
+  },
+  "_log-092f4148.js": {
+    "file": "assets/log-092f4148.js",
+    "integrity": "sha384-wxFAVzKyAfoglkWpc+0kyZLsVyT/L5zBCnxcOoB2M2SaWssBh7IH/lwlp3oik12R",
+  },
+  "entrypoints/app.css": {
+    "file": "assets/app-80592535.css",
+    "integrity": "sha384-j2SX6yHUu2YQv/067X7HfP4nv2AUV8u5F+we/wI1eQKP0FweNgIiRxCg6vhW6yJE",
+    "isEntry": true,
+    "src": "entrypoints/app.css",
+  },
+  "entrypoints/frameworks/vue.css": {
+    "file": "assets/vue-b821fb22.css",
+    "integrity": "sha384-GRybFdmgQZ7Y99dAzgYdORQOvWzkmO/RMLBmnnfyJz945msdtTfBj0lhp7Ecr0+M",
+    "src": "entrypoints/frameworks/vue.css",
+  },
+  "entrypoints/frameworks/vue.js": {
+    "assets": [
+      "assets/logo-322aae0c.svg",
+    ],
+    "css": [
+      "assets/vue-b821fb22.css",
+    ],
+    "file": "assets/vue-3d27911e.js",
+    "integrity": "sha384-rJ3zJcJUd1UTJykZHqg8m76+iq0KjkTPK3b+/HMfDQjlkRrdOtJuFt2FFy0mEKPq",
+    "isEntry": true,
+    "src": "entrypoints/frameworks/vue.js",
+  },
+  "entrypoints/main.ts": {
+    "css": [
+      "assets/app-80592535.css",
+      "assets/theme-eb94a372.css",
+    ],
+    "file": "assets/main-fd323c2a.js",
+    "imports": [
+      "_log-092f4148.js",
+      "entrypoints/frameworks/vue.js",
+    ],
+    "integrity": "sha384-FzmFcmeWbqfgCaX4Q3iJJMAJwGK5KzYVH4xPhrUQ1/QnYW52ASjEDaTf+nYSRnsq",
+    "isEntry": true,
+    "src": "entrypoints/main.ts",
+  },
+  "entrypoints/sassy.scss": {
+    "file": "assets/sassy-2f9e231e.css",
+    "integrity": "sha384-4tkn835gOI7C29uZzlN/PGxd+XyQTG1/9AHpbWYbYLbgWZ1UmDDBFW1iq43MC70L",
+    "isEntry": true,
+    "src": "entrypoints/sassy.scss",
+  },
+  "images/logo.png": {
+    "file": "assets/logo-f42fb7ea.png",
+    "integrity": "sha384-zHCg6OQ1T1xX21KMsW9Bb2ECIIMeec41+3KtT0gygdsrmm/Z5qD5TVtTPhyJNGot",
+    "src": "images/logo.png",
+  },
+  "images/logo.svg": {
+    "file": "assets/logo-322aae0c.svg",
+    "integrity": "sha384-qQuFPGf9f7DHitjACIjHvY2GwlcFjg+HatTRP3bwG7iAX8MzOW4Sr2dfca6uZlDA",
+    "src": "images/logo.svg",
+  },
+  "index.html": {
+    "css": [
+      "assets/sassy-2f9e231e.css",
+      "assets/app-80592535.css",
+      "assets/theme-eb94a372.css",
+    ],
+    "file": "assets/index-fe03930f.js",
+    "imports": [
+      "_log-092f4148.js",
+      "entrypoints/frameworks/vue.js",
+    ],
+    "integrity": "sha384-l59i0bYhGSsMSoG7dtVF4pcmcGP5KhVcE7TG+6TFqFDB3JcuRNmZY6gOEmsv7SWP",
+    "isEntry": true,
+    "src": "index.html",
+  },
+  "logo.png": {
+    "file": "assets/logo-03d6d6da.png",
+    "integrity": "sha384-IGw3tfo4Xt0lp6sO9t5mYtILwfBxDFR8sRCtroxGjhE3r9UxNYgtimkCNzsJU9AP",
+    "src": "logo.png",
+  },
+}
+`;
diff --git a/vite-plugin-rails/tests/build.spec.ts b/vite-plugin-rails/tests/build.spec.ts
@@ -1,4 +1,5 @@
 import { resolve } from 'path'
+import { readFileSync } from 'fs'
 import { beforeAll, describe, test, expect } from 'vitest'
 import execa from 'execa'
 import glob from 'fast-glob'
@@ -12,43 +13,50 @@ describe('config', () => {
   }, 60000)
 
   test('generated files', async () => {
-    const files = await glob('**/*', { cwd: `${exampleDir}/public/vite`, onlyFiles: true })
+    const outDir = `${exampleDir}/public/vite`
+    const files = await glob('**/*', { cwd: outDir, 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',
     ]))
+
+    const parseManifest = (path: string) => JSON.parse(readFileSync(`${outDir}/${path}`, 'utf-8'))
+    const manifest = parseManifest('manifest.json')
+    const manifestAssets = parseManifest('manifest-assets.json')
+
+    expect({ ...manifest, ...manifestAssets }).toMatchSnapshot()
   })
 })
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'),
   }
 }