feat: replace rollup with vite configuration for wc (#1364)

Hristo313 · web-flow · commit 024ee5f04842 · 2025-01-23T10:12:51.000+02:00
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__github/workflows/github-pages.yml b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__github/workflows/github-pages.yml
@@ -34,7 +34,7 @@ jobs:
     - name: Update Router Navigation
       run: |
         find ./src -type f -name "*.ts" -exec sed -i "s|Router.go(\`/|Router.go(\`/${{ github.event.repository.name }}/|g" {} \;
-        find ./ -type f -name "rollup.config.mjs" -exec sed -i "s|navigateFallback: '/index.html'|navigateFallback: 'index.html'|g" {} \;
+        find ./ -type f -name "vite.config.ts" -exec sed -i "s|navigateFallback: '/index.html'|navigateFallback: 'index.html'|g" {} \;
     - run: npm run build
     - name: Update base href in index.html
       run: |
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/package.json b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/package.json
@@ -14,42 +14,36 @@
   },
   "scripts": {
     "start": "tsc && concurrently -k -r \"tsc --watch\" \"wds\"",
-    "build": "rimraf dist && tsc && node --max-old-space-size=4096 node_modules/rollup/dist/bin/rollup -c rollup.config.mjs",
+    "build": "rimraf dist && tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite.js build",
     "start:build": "web-dev-server --root-dir dist --app-index index.html --open",
     "lint": "eslint \"**/*.{js,ts}\" --ignore-path .gitignore",
     "test": "tsc --project tsconfig.test.json && wtr"
   },
   "dependencies": {
     "@vaadin/router": "^1.7.4",
-    "lit": "^3.1.2",
-    "typescript": "~5.5.4",
+    "lit": "^3.2.1",
+    "typescript": "~5.7.2",
     "igniteui-webcomponents": "~5.1.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",
-    "@open-wc/building-rollup": "^2.2.1",
     "@open-wc/testing": "^4.0.0",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.0.1",
     "@typescript-eslint/eslint-plugin": "^8.21.0",
     "@typescript-eslint/parser": "^8.21.0",
     "@web/dev-server": "^0.4.6",
-    "@web/rollup-plugin-html": "^2.3.0",
-    "@web/rollup-plugin-import-meta-assets": "^1.0.7",
     "@web/test-runner": "^0.18.0",
     "babel-plugin-template-html-minifier": "^4.1.0",
-    "concurrently": "^8.2.2",
+    "concurrently": "^9.1.2",
     "deepmerge": "^4.2.2",
     "eslint": "^8.57.0",
     "eslint-plugin-lit": "^1.8.2",
     "igniteui-cli": "^13.1.5",
-    "rimraf": "^5.0.5",
-    "rollup": "^2.79.0",
-    "rollup-plugin-copy-assets": "^2.0.3",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-workbox": "^8.1.0",
+    "rimraf": "^5.0.10",
     "source-map": "^0.7.4",
-    "tslib": "^2.6.2",
-    "@types/mocha": "^10.0.6"
+    "tslib": "^2.8.1",
+    "@types/mocha": "^10.0.6",
+    "vite": "^6.0.10",
+    "vite-plugin-pwa": "^0.21.1",
+    "vite-plugin-static-copy": "^2.2.0"
   }
 }
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/rollup.config.mjs b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/rollup.config.mjs
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/tsconfig.json b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/tsconfig.json
@@ -1,11 +1,11 @@
 {
   "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
+    "target": "es2021",
+    "module": "es2022",
     "moduleResolution": "node",
     "noEmitOnError": true,
     "lib": [
-      "es2017",
+      "es2021",
       "dom",
       "dom.iterable"
     ],
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/vite.config.ts b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/vite.config.ts
@@ -0,0 +1,48 @@
+import { defineConfig } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: '[hash].js',
+        chunkFileNames: '[hash].js',
+        assetFileNames: '[hash][extname]',
+      },
+      onwarn: (warning, warn) => {
+        if (warning.code === 'THIS_IS_UNDEFINED') return;
+        warn(warning);
+      },
+    },
+    target: 'es2021',
+    minify: 'terser',
+    emptyOutDir: false,
+  },
+  plugins: [
+    /** Copy static assets */
+    viteStaticCopy({
+      targets: [
+        { src: 'src/assets', dest: 'src' },
+      ],
+    }),
+    /** PWA Plugin for service worker generation */
+    VitePWA({
+      registerType: 'autoUpdate',
+      strategies: 'generateSW',
+      workbox: {
+        globDirectory: 'dist',
+        globPatterns: ['**/*.{html,js,css,webmanifest}'],
+        globIgnores: ['polyfills/*.js', 'nomodule-*.js'],
+        navigateFallback: '/index.html',
+        runtimeCaching: [
+          {
+            urlPattern: /^polyfills\/.*\.js$/,
+            handler: 'CacheFirst',
+          },
+        ],
+        maximumFileSizeToCacheInBytes: 5 * 1024 * 1024
+      },
+    }),
+  ],
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json b/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json
@@ -14,7 +14,7 @@
   },
   "scripts": {
     "start": "tsc && concurrently -k -r \"tsc --watch\" \"wds\"",
-    "build": "rimraf dist && tsc && node --max-old-space-size=4096 node_modules/rollup/dist/bin/rollup -c rollup.config.mjs",
+    "build": "rimraf dist && tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite.js build",
     "start:build": "web-dev-server --root-dir dist --app-index index.html --open",
     "lint": "eslint \"**/*.{js,ts}\" --ignore-path .gitignore",
     "test": "tsc --project tsconfig.test.json && wtr"
@@ -30,34 +30,28 @@
     "igniteui-webcomponents-grids": "~5.0.0",
     "igniteui-webcomponents-inputs": "~5.0.0",
     "igniteui-webcomponents-layouts": "~5.0.0",
-    "lit": "^3.1.2",
-    "typescript": "~5.5.4"
+    "lit": "^3.2.1",
+    "typescript": "~5.7.2"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",
-    "@open-wc/building-rollup": "^2.2.1",
     "@open-wc/testing": "^4.0.0",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.0.1",
     "@typescript-eslint/eslint-plugin": "^8.21.0",
     "@typescript-eslint/parser": "^8.21.0",
     "@web/dev-server": "^0.4.6",
-    "@web/rollup-plugin-html": "^2.3.0",
-    "@web/rollup-plugin-import-meta-assets": "^1.0.7",
     "@web/test-runner": "^0.18.0",
     "babel-plugin-template-html-minifier": "^4.1.0",
-    "concurrently": "^8.2.2",
+    "concurrently": "^9.1.2",
     "deepmerge": "^4.2.2",
     "eslint": "^8.57.0",
     "eslint-plugin-lit": "^1.8.2",
     "igniteui-cli": "^14.0.0",
-    "rimraf": "^5.0.5",
-    "rollup": "^2.79.0",
-    "rollup-plugin-copy-assets": "^2.0.3",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-workbox": "^8.1.0",
+    "rimraf": "^5.0.10",
     "source-map": "^0.7.4",
-    "tslib": "^2.6.2",
-    "@types/mocha": "^10.0.6"
+    "tslib": "^2.8.1",
+    "@types/mocha": "^10.0.6",
+    "vite": "^6.0.10",
+    "vite-plugin-pwa": "^0.21.1",
+    "vite-plugin-static-copy": "^2.2.0"
   }
 }
