feat!: move to ESM-only (CJS generation format also dropped) (#448)

Co-authored-by: Copilot <[email protected]>
Co-authored-by: Kevin Marrec <[email protected]>
Co-authored-by: Anthony Fu <[email protected]>

Author: 4 people

README.md

@@ -4,6 +4,8 @@ Static-site generation for Vue 3 on Vite.
 
 [![NPM version](https://img.shields.io/npm/v/vite-ssg?color=a1b858)](https://www.npmjs.com/package/vite-ssg)
 
+> ℹ️ **ESM-only from `v27.0.0` (CJS generation format also dropped).**
+>
 > ℹ️ **Vite 2 is supported from `v0.2.x`, Vite 1's support is discontinued.**
 
 ## Install
@@ -46,6 +48,17 @@ export const createApp = ViteSSG(
 )
 ```
 
+### How to allow Rollup tree-shake your client code
+
+In order to allow Rollup tree-shake your client code at build time, you need to wrap your code using `import.meta.env.SSR`, that's, checking if the build is for the server: Rollup will remove the server code from the client build.
+```ts
+if (import.meta.env.SSR) {
+  // your server code will be removed in the client build
+}
+else {
+  // your client code will be removed in the server build
+}
+```
 ### Single Page SSG
 
 For SSG of an index page only (i.e. without `vue-router`); import `vite-ssg/single-page` instead, and only install `@unhead/vue` (`npm i -D vite-ssg @unhead/vue`).
@@ -307,14 +320,14 @@ const { app, router, initialState, isClient, onSSRAppRendered } = ctx
 const pinia = createPinia()
 app.use(pinia)
 
-if (isClient) {
-  pinia.state.value = (initialState.pinia) || {}
-}
-else {
+if (import.meta.env.SSR) {
   onSSRAppRendered(() => {
     initialState.pinia = pinia.state.value
   })
 }
+else {
+  pinia.state.value = (initialState.pinia) || {}
+}
 ```
 
 ## Configuration

build.config.ts

@@ -8,14 +8,13 @@ export default defineBuildConfig({
     { input: 'src/node', name: 'node' },
   ],
   clean: true,
-  declaration: true,
+  declaration: 'node16',
   externals: [
     'vue',
     'vue/server-renderer',
     'vue/compiler-sfc',
   ],
   rollup: {
-    emitCJS: true,
     inlineDependencies: true,
   },
 })

eslint.config.mjs eslint.config.jseslint.config.mjs renamed to eslint.config.js

@@ -18,6 +18,7 @@
     "vite-plugin-pages": "catalog:",
     "vite-plugin-pwa": "catalog:",
     "vite-ssg": "workspace:*",
-    "vue-router": "catalog:"
+    "vue-router": "catalog:",
+    "workbox-build": "catalog:"
   }
 }

examples/multiple-pages-pwa/package.json

@@ -1,5 +1,6 @@
 {
   "name": "vite-ssg",
+  "type": "module",
   "version": "26.1.1",
   "packageManager": "[email protected]",
   "description": "Server-side generation for Vite",
@@ -20,29 +21,20 @@
   ],
   "sideEffects": false,
   "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    },
-    "./node": {
-      "import": "./dist/node.mjs",
-      "require": "./dist/node.cjs"
-    },
-    "./single-page": {
-      "import": "./dist/client/single-page.mjs",
-      "require": "./dist/client/single-page.cjs"
-    }
+    ".": "./dist/index.mjs",
+    "./node": "./dist/node.mjs",
+    "./single-page": "./dist/client/single-page.mjs"
   },
-  "main": "dist/index.cjs",
+  "main": "dist/index.mjs",
   "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "types": "dist/index.d.mts",
   "typesVersions": {
     "*": {
-      "single-page": [
-        "dist/client/single-page.d.ts"
-      ],
       "node": [
-        "dist/node.d.ts"
+        "dist/node.d.mts"
+      ],
+      "single-page": [
+        "dist/client/single-page.d.mts"
       ]
     }
   },