feat(wc): replace rollup with vite config

Author: Hristo Hristov

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__github/workflows/github-pages.yml

@@ -33,7 +33,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: |

packages/cli/templates/webcomponents/igc-ts/projects/_base/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"
@@ -27,15 +27,10 @@
   },
   "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": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@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",
@@ -44,12 +39,13 @@
     "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",
     "source-map": "^0.7.4",
     "tslib": "^2.6.2",
-    "@types/mocha": "^10.0.6"
+    "@types/mocha": "^10.0.6",
+    "vite": "^6.0.7",
+    "vite-plugin-pwa": "^0.21.0",
+    "vite-plugin-static-copy": "^2.1.0",
+    "vite-plugin-babel": "^1.3.0",
+    "vite-plugin-html": "^3.2.2"
   }
 }

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/rollup.config.mjs

@@ -0,0 +1,95 @@
+import { defineConfig } from 'vite';
+import { createHtmlPlugin } from 'vite-plugin-html';
+import babel from 'vite-plugin-babel';
+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: 'esnext',
+    minify: 'terser',
+    emptyOutDir: false,
+  },
+  plugins: [
+    /** Copy static assets */
+    viteStaticCopy({
+      targets: [
+        { src: 'src/assets', dest: 'src' },
+      ],
+    }),
+    /** HTML Plugin with service worker injection */
+    createHtmlPlugin({
+      minify: true,
+      inject: {
+        data: {
+        },
+      },
+    }),
+    /** Babel Plugin for JS transpilation */
+    babel({
+      babelConfig: {
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              targets: [
+                'last 3 Chrome major versions',
+                'last 3 Firefox major versions',
+                'last 3 Edge major versions',
+                'last 3 Safari major versions',
+              ],
+              modules: false,
+              bugfixes: true,
+            },
+          ],
+        ],
+        plugins: [
+          [
+            'babel-plugin-template-html-minifier',
+            {
+              modules: { lit: ['html', { name: 'css', encapsulation: 'style' }] },
+              failOnError: false,
+              strictCSS: true,
+              htmlMinifier: {
+                collapseWhitespace: true,
+                conservativeCollapse: true,
+                removeComments: true,
+                caseSensitive: true,
+                minifyCSS: true,
+              },
+            },
+          ],
+        ],
+      },
+    }),
+    /** 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
+      },
+    }),
+  ],
+});

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/vite.config.ts

@@ -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"
@@ -35,15 +35,10 @@
   },
   "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": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@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",
@@ -52,12 +47,13 @@
     "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",
     "source-map": "^0.7.4",
     "tslib": "^2.6.2",
-    "@types/mocha": "^10.0.6"
+    "@types/mocha": "^10.0.6",
+    "vite": "^6.0.7",
+    "vite-plugin-pwa": "^0.21.0",
+    "vite-plugin-static-copy": "^2.1.0",
+    "vite-plugin-babel": "^1.3.0",
+    "vite-plugin-html": "^3.2.2"
   }
 }