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 index 66e39ddea..ffbda9d79 100644 --- 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 index 618b0ef3c..c91c287ed 100644 --- 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 deleted file mode 100644 index 47fb04975..000000000 --- a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/rollup.config.mjs +++ /dev/null @@ -1,95 +0,0 @@ -import babel from '@rollup/plugin-babel'; -import nodeResolve from '@rollup/plugin-node-resolve'; -import { rollupPluginHTML as html } from '@web/rollup-plugin-html'; -import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets'; -import path from 'path'; -import copy from 'rollup-plugin-copy-assets'; -import { terser } from 'rollup-plugin-terser'; -import { generateSW } from 'rollup-plugin-workbox'; - -export default { - input: 'index.html', - output: { - entryFileNames: '[hash].js', - chunkFileNames: '[hash].js', - assetFileNames: '[hash][extname]', - format: 'es', - dir: 'dist', - }, - onwarn: function(warning) { - // Skip https://rollupjs.org/troubleshooting/#error-this-is-undefined - if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; } - }, - preserveEntrySignatures: false, - - plugins: [ - copy({ - assets: [ - 'src/assets', - ], - }), - /** Enable using HTML as rollup entrypoint */ - html({ - minify: true, - injectServiceWorker: true, - serviceWorkerPath: 'dist/sw.js', - }), - /** Resolve bare module imports */ - nodeResolve(), - /** Minify JS */ - terser(), - /** Bundle assets references via import.meta.url */ - importMetaAssets(), - /** Compile JS to a lower language target */ - babel({ - compact: true, - babelHelpers: 'bundled', - 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, - }, - }, - ], - ], - }), - /** Create and inject a service worker */ - generateSW({ - globIgnores: ['polyfills/*.js', 'nomodule-*.js'], - navigateFallback: '/index.html', - // where to output the generated sw - swDest: path.join('dist', 'sw.js'), - // directory to match patterns against to be precached - globDirectory: path.join('dist'), - // cache any html js and css by default - globPatterns: ['**/*.{html,js,css,webmanifest}'], - skipWaiting: true, - clientsClaim: true, - runtimeCaching: [{ urlPattern: 'polyfills/*.js', handler: 'CacheFirst' }], - }), - ], -}; 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 index aef874d6a..2fb310ded 100644 --- 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 new file mode 100644 index 000000000..d616c6e59 --- /dev/null +++ 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 index 38821da3e..a2c55acc1 100644 --- 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" } }