From c398ba05870fe385c7d4c2531a927f07834c38b4 Mon Sep 17 00:00:00 2001 From: Kapil Sachdev Date: Wed, 29 Oct 2025 18:01:12 +0530 Subject: [PATCH 01/15] upgrade: Migrate to Vue 3 - Upgrade dependencies to Vue 3, vue-loader 17, element-plus and vue-i18n in package.json - Update public HTML files to use Vue 3 and Element Plus CDN builds. - Keep el-switch height as 20px to match previous design from Element UI. - Migrate app bootstrap to Vue 3 API: use createApp and createI18n in src/main.js and register ElementPlus. - Replace vue-scrollactive with a new in-house ScrollSpy component - Auto formatting by prettier. - Update build config to import VueLoaderPlugin from 'vue-loader'. --- build/webpack.config.js | 14 +- package-lock.json | 498 ++++++++++++++++++++++++++++-------- package.json | 8 +- public/en/editor.html | 6 +- public/en/index.html | 6 +- public/en/view.html | 6 +- public/zh/editor.html | 6 +- public/zh/index.html | 6 +- public/zh/view.html | 6 +- src/editor/Editor.vue | 19 +- src/editor/Preview.vue | 4 + src/explore/ExampleCard.vue | 6 +- src/explore/Explore.vue | 56 +--- src/explore/ScrollSpy.vue | 301 ++++++++++++++++++++++ src/main.js | 34 ++- 15 files changed, 768 insertions(+), 208 deletions(-) create mode 100644 src/explore/ScrollSpy.vue diff --git a/build/webpack.config.js b/build/webpack.config.js index e8f00681..0613e870 100644 --- a/build/webpack.config.js +++ b/build/webpack.config.js @@ -1,25 +1,27 @@ const webpack = require('webpack'); -const VueLoaderPlugin = require('vue-loader/lib/plugin'); +const { VueLoaderPlugin } = require('vue-loader'); const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const fs = require('fs'); const distPath = path.resolve(__dirname, '../public'); - module.exports = (env, argv) => { - const isDev = argv.mode === 'development'; let configLocal = {}; if (isDev) { - const configLocalPath = path.resolve(__dirname, '../config/config.local.js'); + const configLocalPath = path.resolve( + __dirname, + '../config/config.local.js' + ); if (fs.existsSync(configLocalPath)) { configLocal = require(configLocalPath); } } - return [{ + return [ + { entry: path.resolve(__dirname, '../src/main.js'), output: { publicPath: './', @@ -116,7 +118,7 @@ module.exports = (env, argv) => { plugins: [ new webpack.DefinePlugin({ // It can be used in the code directly. - CONFIG_LOCAL: JSON.stringify(configLocal), + CONFIG_LOCAL: JSON.stringify(configLocal) }), new webpack.IgnorePlugin({ resourceRegExp: /^fs$/ diff --git a/package-lock.json b/package-lock.json index 635fc1ea..d41dfd32 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,8 +21,7 @@ "semver": "^7.6.2", "sucrase": "^3.35.0", "vanilla-lazyload": "^17.8.3", - "vue-i18n": "^8.18.2", - "vue-scrollactive": "^0.9.3" + "vue-i18n": "^11.1.12" }, "devDependencies": { "@babel/core": "^7.10.2", @@ -62,9 +61,8 @@ "style-loader": "^2.0.0", "typescript": "^4.1.3", "url-loader": "^4.1.1", - "vue": "2.6.14", - "vue-loader": "^15.9.8", - "vue-template-compiler": "2.6.14", + "vue": "^3.5.22", + "vue-loader": "^17.4.2", "webpack": "^5.94.0", "webpack-bundle-analyzer": "^4.3.0", "webpack-cli": "^4.3.1", @@ -101,6 +99,7 @@ "version": "7.11.1", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/generator": "^7.11.0", @@ -393,10 +392,23 @@ "@babel/types": "^7.11.0" } }, + "node_modules/@babel/helper-string-parser": { + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", + "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.10.4", - "dev": true, - "license": "MIT" + "version": "7.28.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz", + "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } }, "node_modules/@babel/helper-wrap-function": { "version": "7.10.4", @@ -443,9 +455,13 @@ } }, "node_modules/@babel/parser": { - "version": "7.11.3", - "dev": true, + "version": "7.28.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz", + "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==", "license": "MIT", + "dependencies": { + "@babel/types": "^7.28.5" + }, "bin": { "parser": "bin/babel-parser.js" }, @@ -1270,13 +1286,16 @@ } }, "node_modules/@babel/types": { - "version": "7.11.0", - "dev": true, + "version": "7.28.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz", + "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==", "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.10.4", - "lodash": "^4.17.19", - "to-fast-properties": "^2.0.0" + "@babel/helper-string-parser": "^7.27.1", + "@babel/helper-validator-identifier": "^7.28.5" + }, + "engines": { + "node": ">=6.9.0" } }, "node_modules/@discoveryjs/json-ext": { @@ -1306,6 +1325,50 @@ "node": ">=12.16.1" } }, + "node_modules/@intlify/core-base": { + "version": "11.1.12", + "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.12.tgz", + "integrity": "sha512-whh0trqRsSqVLNEUCwU59pyJZYpU8AmSWl8M3Jz2Mv5ESPP6kFh4juas2NpZ1iCvy7GlNRffUD1xr84gceimjg==", + "license": "MIT", + "dependencies": { + "@intlify/message-compiler": "11.1.12", + "@intlify/shared": "11.1.12" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, + "node_modules/@intlify/message-compiler": { + "version": "11.1.12", + "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.1.12.tgz", + "integrity": "sha512-Fv9iQSJoJaXl4ZGkOCN1LDM3trzze0AS2zRz2EHLiwenwL6t0Ki9KySYlyr27yVOj5aVz0e55JePO+kELIvfdQ==", + "license": "MIT", + "dependencies": { + "@intlify/shared": "11.1.12", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, + "node_modules/@intlify/shared": { + "version": "11.1.12", + "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.1.12.tgz", + "integrity": "sha512-Om86EjuQtA69hdNj3GQec9ZC0L0vPSAnXzB3gP/gyJ7+mA7t06d9aOAiqMZ+xEOsumGP4eEBlfl8zF2LOTzf2A==", + "license": "MIT", + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, "node_modules/@isaacs/balanced-match": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz", @@ -1453,7 +1516,9 @@ } }, "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.4.14", + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", + "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { @@ -1902,36 +1967,176 @@ "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@vue/component-compiler-utils": { - "version": "3.2.0", - "dev": true, + "node_modules/@vue/compiler-core": { + "version": "3.5.22", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.22.tgz", + "integrity": "sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==", "license": "MIT", "dependencies": { - "consolidate": "^0.15.1", - "hash-sum": "^1.0.2", - "lru-cache": "^4.1.2", - "merge-source-map": "^1.1.0", - "postcss": "^7.0.14", - "postcss-selector-parser": "^6.0.2", - "source-map": "~0.6.1", - "vue-template-es2015-compiler": "^1.9.0" + "@babel/parser": "^7.28.4", + "@vue/shared": "3.5.22", + "entities": "^4.5.0", + "estree-walker": "^2.0.2", + "source-map-js": "^1.2.1" + } + }, + "node_modules/@vue/compiler-core/node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" }, - "optionalDependencies": { - "prettier": "^1.18.2" + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" } }, - "node_modules/@vue/component-compiler-utils/node_modules/prettier": { - "version": "1.19.1", - "dev": true, + "node_modules/@vue/compiler-dom": { + "version": "3.5.22", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.22.tgz", + "integrity": "sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==", + "license": "MIT", + "dependencies": { + "@vue/compiler-core": "3.5.22", + "@vue/shared": "3.5.22" + } + }, + "node_modules/@vue/compiler-sfc": { + "version": "3.5.22", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.22.tgz", + "integrity": "sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==", + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.28.4", + "@vue/compiler-core": "3.5.22", + "@vue/compiler-dom": "3.5.22", + "@vue/compiler-ssr": "3.5.22", + "@vue/shared": "3.5.22", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.19", + "postcss": "^8.5.6", + "source-map-js": "^1.2.1" + } + }, + "node_modules/@vue/compiler-sfc/node_modules/nanoid": { + "version": "3.3.11", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", + "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "license": "MIT", - "optional": true, "bin": { - "prettier": "bin-prettier.js" + "nanoid": "bin/nanoid.cjs" }, "engines": { - "node": ">=4" + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/@vue/compiler-sfc/node_modules/picocolors": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "license": "ISC" + }, + "node_modules/@vue/compiler-sfc/node_modules/postcss": { + "version": "8.5.6", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", + "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.11", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/@vue/compiler-ssr": { + "version": "3.5.22", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.22.tgz", + "integrity": "sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==", + "license": "MIT", + "dependencies": { + "@vue/compiler-dom": "3.5.22", + "@vue/shared": "3.5.22" + } + }, + "node_modules/@vue/devtools-api": { + "version": "6.6.4", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz", + "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==", + "license": "MIT" + }, + "node_modules/@vue/reactivity": { + "version": "3.5.22", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.22.tgz", + "integrity": "sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==", + "license": "MIT", + "dependencies": { + "@vue/shared": "3.5.22" + } + }, + "node_modules/@vue/runtime-core": { + "version": "3.5.22", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.22.tgz", + "integrity": "sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==", + "license": "MIT", + "dependencies": { + "@vue/reactivity": "3.5.22", + "@vue/shared": "3.5.22" + } + }, + "node_modules/@vue/runtime-dom": { + "version": "3.5.22", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.22.tgz", + "integrity": "sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==", + "license": "MIT", + "dependencies": { + "@vue/reactivity": "3.5.22", + "@vue/runtime-core": "3.5.22", + "@vue/shared": "3.5.22", + "csstype": "^3.1.3" + } + }, + "node_modules/@vue/server-renderer": { + "version": "3.5.22", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.22.tgz", + "integrity": "sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==", + "license": "MIT", + "dependencies": { + "@vue/compiler-ssr": "3.5.22", + "@vue/shared": "3.5.22" + }, + "peerDependencies": { + "vue": "3.5.22" + } + }, + "node_modules/@vue/shared": { + "version": "3.5.22", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.22.tgz", + "integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==", + "license": "MIT" + }, "node_modules/@webassemblyjs/ast": { "version": "1.12.1", "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.12.1.tgz", @@ -2119,6 +2324,7 @@ "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.12.0.tgz", "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2167,6 +2373,7 @@ "version": "6.12.6", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -2488,10 +2695,6 @@ "node": ">=10.0.0" } }, - "node_modules/bezier-easing": { - "version": "2.1.0", - "license": "MIT" - }, "node_modules/big.js": { "version": "5.2.2", "dev": true, @@ -2909,6 +3112,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001629", "electron-to-chromium": "^1.4.796", @@ -3725,17 +3929,6 @@ "node": ">=4" } }, - "node_modules/consolidate": { - "version": "0.15.1", - "dev": true, - "license": "MIT", - "dependencies": { - "bluebird": "^3.1.1" - }, - "engines": { - "node": ">= 0.10.0" - } - }, "node_modules/content-disposition": { "version": "0.5.3", "dev": true, @@ -4015,6 +4208,12 @@ "node": ">=4" } }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "license": "MIT" + }, "node_modules/cwd": { "version": "0.9.1", "license": "MIT", @@ -4081,11 +4280,6 @@ "url": "https://opencollective.com/date-fns" } }, - "node_modules/de-indent": { - "version": "1.0.2", - "dev": true, - "license": "MIT" - }, "node_modules/debug": { "version": "3.1.0", "license": "MIT", @@ -4295,7 +4489,8 @@ "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1464554.tgz", "integrity": "sha512-CAoP3lYfwAGQTaAXYvA6JZR0fjGUb7qec1qf4mToyoH2TZgUFeIqYcjh6f9jNuhHfuZiEdH+PONHYrLhRQX6aw==", "dev": true, - "license": "BSD-3-Clause" + "license": "BSD-3-Clause", + "peer": true }, "node_modules/dir-glob": { "version": "3.0.1", @@ -4943,6 +5138,12 @@ "node": ">=4.0" } }, + "node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "license": "MIT" + }, "node_modules/esutils": { "version": "2.0.3", "dev": true, @@ -5792,7 +5993,9 @@ } }, "node_modules/hash-sum": { - "version": "1.0.2", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz", + "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==", "dev": true, "license": "MIT" }, @@ -6852,6 +7055,15 @@ "lz-string": "bin/bin.js" } }, + "node_modules/magic-string": { + "version": "0.30.21", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", + "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==", + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.5" + } + }, "node_modules/make-dir": { "version": "2.1.0", "dev": true, @@ -6964,14 +7176,6 @@ "version": "4.0.3", "license": "ISC" }, - "node_modules/merge-source-map": { - "version": "1.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "source-map": "^0.6.1" - } - }, "node_modules/merge-stream": { "version": "2.0.0", "dev": true, @@ -9653,6 +9857,15 @@ "node": ">=0.10.0" } }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-support": { "version": "0.5.21", "dev": true, @@ -10252,14 +10465,6 @@ "version": "1.1.1", "license": "MIT" }, - "node_modules/to-fast-properties": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=4" - } - }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -10350,8 +10555,9 @@ }, "node_modules/typescript": { "version": "4.1.3", - "dev": true, + "devOptional": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -10656,76 +10862,146 @@ } }, "node_modules/vue": { - "version": "2.6.14", - "license": "MIT" - }, - "node_modules/vue-hot-reload-api": { - "version": "2.3.4", - "dev": true, - "license": "MIT" + "version": "3.5.22", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz", + "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@vue/compiler-dom": "3.5.22", + "@vue/compiler-sfc": "3.5.22", + "@vue/runtime-dom": "3.5.22", + "@vue/server-renderer": "3.5.22", + "@vue/shared": "3.5.22" + }, + "peerDependencies": { + "typescript": "*" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } }, "node_modules/vue-i18n": { - "version": "8.20.0", - "license": "MIT" + "version": "11.1.12", + "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.12.tgz", + "integrity": "sha512-BnstPj3KLHLrsqbVU2UOrPmr0+Mv11bsUZG0PyCOzsawCivk8W00GMXHeVUWIDOgNaScCuZah47CZFE+Wnl8mw==", + "license": "MIT", + "dependencies": { + "@intlify/core-base": "11.1.12", + "@intlify/shared": "11.1.12", + "@vue/devtools-api": "^6.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + }, + "peerDependencies": { + "vue": "^3.0.0" + } }, "node_modules/vue-loader": { - "version": "15.11.1", - "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.11.1.tgz", - "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==", + "version": "17.4.2", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.4.2.tgz", + "integrity": "sha512-yTKOA4R/VN4jqjw4y5HrynFL8AK0Z3/Jt7eOJXEitsm0GMRHDBjCfCiuTiLP7OESvsZYo2pATCWhDqxC5ZrM6w==", "dev": true, + "license": "MIT", "dependencies": { - "@vue/component-compiler-utils": "^3.1.0", - "hash-sum": "^1.0.2", - "loader-utils": "^1.1.0", - "vue-hot-reload-api": "^2.3.0", - "vue-style-loader": "^4.1.0" + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "watchpack": "^2.4.0" }, "peerDependencies": { - "css-loader": "*", - "webpack": "^3.0.0 || ^4.1.0 || ^5.0.0-0" + "webpack": "^4.1.0 || ^5.0.0-0" }, "peerDependenciesMeta": { - "cache-loader": { - "optional": true - }, - "prettier": { + "@vue/compiler-sfc": { "optional": true }, - "vue-template-compiler": { + "vue": { "optional": true } } }, - "node_modules/vue-scrollactive": { - "version": "0.9.3", + "node_modules/vue-loader/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, "license": "MIT", "dependencies": { - "bezier-easing": "^2.0.3" + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/vue-style-loader": { + "node_modules/vue-loader/node_modules/chalk": { "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, "license": "MIT", "dependencies": { - "hash-sum": "^1.0.2", - "loader-utils": "^1.0.2" + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" } }, - "node_modules/vue-template-compiler": { - "version": "2.6.14", + "node_modules/vue-loader/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dev": true, "license": "MIT", "dependencies": { - "de-indent": "^1.0.2", - "he": "^1.1.0" + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" } }, - "node_modules/vue-template-es2015-compiler": { - "version": "1.9.1", + "node_modules/vue-loader/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true, "license": "MIT" }, + "node_modules/vue-loader/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/vue-loader/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/watchpack": { "version": "2.4.1", "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.1.tgz", @@ -10749,6 +11025,7 @@ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz", "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==", "dev": true, + "peer": true, "dependencies": { "@types/estree": "^1.0.5", "@webassemblyjs/ast": "^1.12.1", @@ -10888,6 +11165,7 @@ "version": "4.3.1", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@discoveryjs/json-ext": "^0.5.0", "@webpack-cli/info": "^1.2.1", diff --git a/package.json b/package.json index 45e96242..8d4985c6 100644 --- a/package.json +++ b/package.json @@ -57,9 +57,8 @@ "style-loader": "^2.0.0", "typescript": "^4.1.3", "url-loader": "^4.1.1", - "vue": "2.6.14", - "vue-loader": "^15.9.8", - "vue-template-compiler": "2.6.14", + "vue": "^3.5.22", + "vue-loader": "^17.4.2", "webpack": "^5.94.0", "webpack-bundle-analyzer": "^4.3.0", "webpack-cli": "^4.3.1", @@ -78,7 +77,6 @@ "semver": "^7.6.2", "sucrase": "^3.35.0", "vanilla-lazyload": "^17.8.3", - "vue-i18n": "^8.18.2", - "vue-scrollactive": "^0.9.3" + "vue-i18n": "^11.1.12" } } diff --git a/public/en/editor.html b/public/en/editor.html index 2f685dce..1baebbad 100644 --- a/public/en/editor.html +++ b/public/en/editor.html @@ -24,12 +24,12 @@ /> - + - +
diff --git a/public/en/index.html b/public/en/index.html index 626de2ae..2e090885 100644 --- a/public/en/index.html +++ b/public/en/index.html @@ -24,12 +24,12 @@ /> - + - +
diff --git a/public/en/view.html b/public/en/view.html index 6db8604a..facd4c2e 100644 --- a/public/en/view.html +++ b/public/en/view.html @@ -24,12 +24,12 @@ /> - + - +
diff --git a/public/zh/editor.html b/public/zh/editor.html index e083b636..d0533201 100644 --- a/public/zh/editor.html +++ b/public/zh/editor.html @@ -24,12 +24,12 @@ /> - + - +
diff --git a/public/zh/index.html b/public/zh/index.html index 8d6aef82..e18dae19 100644 --- a/public/zh/index.html +++ b/public/zh/index.html @@ -24,12 +24,12 @@ /> - + - +
diff --git a/public/zh/view.html b/public/zh/view.html index 7fbe3357..58c616a0 100644 --- a/public/zh/view.html +++ b/public/zh/view.html @@ -24,12 +24,12 @@ /> - + - +
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue index cc627b9d..80198c9d 100644 --- a/src/editor/Editor.vue +++ b/src/editor/Editor.vue @@ -481,13 +481,24 @@ export default { }, hasVersionSince() { - return this.exampleConfig && this.exampleConfig.since - && compareVersions(this.shared.echartsFullVersion, this.exampleConfig.since) >= 0; + return ( + this.exampleConfig && + this.exampleConfig.since && + compareVersions( + this.shared.echartsFullVersion, + this.exampleConfig.since + ) >= 0 + ); }, versionSinceBanner() { - return this.$t('editor.bannerVersionRequire') + ' v' + this.exampleConfig.since + '+'; - }, + return ( + this.$t('editor.bannerVersionRequire') + + ' v' + + this.exampleConfig.since + + '+' + ); + } }, mounted() { diff --git a/src/editor/Preview.vue b/src/editor/Preview.vue index 6fd8175b..e9628d88 100644 --- a/src/editor/Preview.vue +++ b/src/editor/Preview.vue @@ -827,6 +827,10 @@ export default { } } +.el-switch { + height: 20px; +} + .el-message { &.toast-declaration { min-width: auto; diff --git a/src/explore/ExampleCard.vue b/src/explore/ExampleCard.vue index 4f129f36..8d287ddb 100644 --- a/src/explore/ExampleCard.vue +++ b/src/explore/ExampleCard.vue @@ -45,8 +45,10 @@ export default { }, hasVersionSince() { - return this.example.since - && compareVersions(store.echartsFullVersion, this.example.since) >= 0; + return ( + this.example.since && + compareVersions(store.echartsFullVersion, this.example.since) >= 0 + ); }, versionSinceBanner() { diff --git a/src/explore/Explore.vue b/src/explore/Explore.vue index cb3c36e4..0bfc4371 100644 --- a/src/explore/Explore.vue +++ b/src/explore/Explore.vue @@ -1,22 +1,17 @@ - diff --git a/src/explore/Explore.vue b/src/explore/Explore.vue index 7e426caa..36c2bb61 100644 --- a/src/explore/Explore.vue +++ b/src/explore/Explore.vue @@ -105,10 +105,10 @@ const icons = {}; 'rich', 'graphic' ].forEach(function (category) { - icons[category] = require('../asset/icon/' + category + '.svg'); + icons[category] = require('../asset/icon/' + category + '.svg?inline'); }); -const glIcon = require('../asset/icon/gl.svg'); +const glIcon = require('../asset/icon/gl.svg?inline'); [ 'globe', 'bar3D', diff --git a/tool/plugin-svg-sprite.js b/tool/plugin-svg-sprite.js new file mode 100644 index 00000000..f4768d21 --- /dev/null +++ b/tool/plugin-svg-sprite.js @@ -0,0 +1,97 @@ +const { RawSource } = require('webpack-sources'); +const path = require('path'); +const fs = require('fs'); + +class SvgSpritePlugin { + constructor(options = {}) { + this.spriteFilename = options.spriteFilename || 'sprite.svg'; + this.iconDir = options.iconDir; + } + + // Helper to process raw SVG string into a + processSvg(filePath, rawSvg) { + const id = path + .basename(filePath, '.svg') + .toLowerCase() + .replace(/[^a-z0-9_-]/g, '-'); + + // Remove XML declaration and comments + let svg = rawSvg.replace(/<\?xml.*?\?>/g, '').replace(//gs, ''); + + // Extract viewBox (crucial for icon scaling) + const viewBoxMatch = svg.match(/viewBox="([^"]*)"/); + if (!viewBoxMatch) { + console.warn( + `Warning: SVG file '${filePath}' is missing a viewBox attribute. Skipping.` + ); + return null; + } + const viewBox = viewBoxMatch[1]; + + // WARNING: Simple regex is used here. For production, a reliable XML parser is safer. + const symbolContent = svg + .replace(/<\/?svg[^>]*>/g, '') // Remove opening/closing tags + .replace(/xlink:href/g, 'href') // xlink:href causes parse error and icons do not load + .replace(/\s+/g, ' ') // Minify: collapse whitespace + .replace(/>\s+<') // Minify: remove spaces between tags + .trim(); + + return `${symbolContent}`; + } + + // Recursively get all .svg files + getSvgFiles(dir) { + let files = []; + const items = fs.readdirSync(dir); + for (const item of items) { + const fullPath = path.join(dir, item); + const stat = fs.statSync(fullPath); + if (stat.isDirectory()) { + files = files.concat(this.getSvgFiles(fullPath)); + } else if (item.endsWith('.svg')) { + files.push(fullPath); + } + } + return files; + } + + apply(compiler) { + compiler.hooks.compilation.tap('SvgSpritePlugin', (compilation) => { + compilation.hooks.processAssets.tap( + { + name: 'SvgSpritePlugin', + stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS + }, + (assets) => { + if (!this.iconDir || !fs.existsSync(this.iconDir)) { + return; + } + + const svgFiles = this.getSvgFiles(this.iconDir); + let symbols = []; + + for (const filePath of svgFiles) { + const rawSvg = fs.readFileSync(filePath, 'utf-8'); + const symbol = this.processSvg(filePath, rawSvg); + if (symbol) { + symbols.push(symbol); + } + } + + // 4. Assemble the final sprite content + const spriteContent = `${symbols.join( + '\n' + )}`; + + // 5. Emit the single sprite file to the build directory + compilation.emitAsset( + this.spriteFilename, + new RawSource(spriteContent) + ); + } + ); + }); + } +} + +module.exports = SvgSpritePlugin; From 2b33f59070e2de6b3ed85d49c3f213e62a7d813d Mon Sep 17 00:00:00 2001 From: Kapil Sachdev Date: Fri, 7 Nov 2025 23:42:36 +0530 Subject: [PATCH 14/15] fix: Disable __VUE_PROD_DEVTOOLS__ for production build - VueI18n raises ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined in production build - Add missing ElementPlus import in main as we now use it as devDependency --- build/webpack.config.js | 3 +++ src/main.js | 5 +++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/build/webpack.config.js b/build/webpack.config.js index f042cd52..c71ff8ba 100644 --- a/build/webpack.config.js +++ b/build/webpack.config.js @@ -146,6 +146,9 @@ module.exports = (env, argv) => { // It can be used in the code directly. CONFIG_LOCAL: JSON.stringify(configLocal) }), + new webpack.DefinePlugin({ + __VUE_PROD_DEVTOOLS__: JSON.stringify(!isDev) + }), new webpack.IgnorePlugin({ resourceRegExp: /^fs$/ }), diff --git a/src/main.js b/src/main.js index cd1d09c2..c4ac3fab 100644 --- a/src/main.js +++ b/src/main.js @@ -1,10 +1,11 @@ +import ElementPlus from 'element-plus'; import { createApp } from 'vue'; import { createI18n } from 'vue-i18n'; import messages from './common/i18n'; +import { store } from './common/store'; import EditorPage from './editor/Editor.vue'; -import ExplorePage from './explore/Explore.vue'; import ViewPage from './editor/View.vue'; -import { store } from './common/store'; +import ExplorePage from './explore/Explore.vue'; /** * From 4fc2c9cace2e835d69639d77df69899856540fb8 Mon Sep 17 00:00:00 2001 From: Kapil Sachdev Date: Sat, 8 Nov 2025 20:02:20 +0530 Subject: [PATCH 15/15] refactor: Update SVG handling and migrate to sprite-based approach - Migrate all SVGs to be compiled into a sprite and used via tags with symbol IDs. - Add utility CSS classes for consistent SVG styling, addressing shadow DOM behavior. - Refactor Sidebar SVGs to use the sprite-based approach instead of CommonJS require. - Move inline SVGs to separate files in the icon/ui folder for better organization. --- build/webpack.config.js | 20 +-------- src/asset/icon/ui/codepen.svg | 4 ++ src/asset/icon/ui/codesandbox.svg | 4 ++ src/asset/icon/ui/format.svg | 3 ++ src/asset/icon/ui/github.svg | 3 ++ src/asset/icon/ui/play.svg | 4 ++ src/editor/Editor.vue | 75 +++++++------------------------ src/explore/Explore.vue | 23 +++++----- tool/plugin-svg-sprite.js | 6 +-- 9 files changed, 53 insertions(+), 89 deletions(-) create mode 100644 src/asset/icon/ui/codepen.svg create mode 100644 src/asset/icon/ui/codesandbox.svg create mode 100644 src/asset/icon/ui/format.svg create mode 100644 src/asset/icon/ui/github.svg create mode 100644 src/asset/icon/ui/play.svg diff --git a/build/webpack.config.js b/build/webpack.config.js index c71ff8ba..40771f22 100644 --- a/build/webpack.config.js +++ b/build/webpack.config.js @@ -6,7 +6,7 @@ const fs = require('fs'); const SvgSpritePlugin = require('../tool/plugin-svg-sprite'); const distPath = path.resolve(__dirname, '../public'); -const iconDir = path.resolve(__dirname, '../src/asset/icon'); +const svgPath = path.resolve(__dirname, '../src/asset/icon'); module.exports = (env, argv) => { const isDev = argv.mode === 'development'; @@ -80,26 +80,10 @@ module.exports = (env, argv) => { } ] }, - // SVG for Sprite Generation { test: /\.svg$/, - include: iconDir, - resourceQuery: { not: [/inline/] }, // DOES NOT match '?inline' type: 'asset/source' }, - // SVG for Raw Inline Use (Using ?inline suffix) - { - test: /\.svg$/, - include: iconDir, - resourceQuery: /inline/, // Matches imports like '...share.svg?inline' - type: 'asset/source' - }, - // Catch-all for other SVGs (logos, etc.) outside the icon directory - { - test: /\.svg$/, - exclude: iconDir, - type: 'asset/resource' - }, { test: /\.html$/, use: [ @@ -140,7 +124,7 @@ module.exports = (env, argv) => { plugins: [ new SvgSpritePlugin({ spriteFilename: '../asset/sprite.svg', - iconDir: iconDir + svgPath: svgPath }), new webpack.DefinePlugin({ // It can be used in the code directly. diff --git a/src/asset/icon/ui/codepen.svg b/src/asset/icon/ui/codepen.svg new file mode 100644 index 00000000..6adef6b3 --- /dev/null +++ b/src/asset/icon/ui/codepen.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/asset/icon/ui/codesandbox.svg b/src/asset/icon/ui/codesandbox.svg new file mode 100644 index 00000000..bb95916d --- /dev/null +++ b/src/asset/icon/ui/codesandbox.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/asset/icon/ui/format.svg b/src/asset/icon/ui/format.svg new file mode 100644 index 00000000..e85741c2 --- /dev/null +++ b/src/asset/icon/ui/format.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/asset/icon/ui/github.svg b/src/asset/icon/ui/github.svg new file mode 100644 index 00000000..53ef6d79 --- /dev/null +++ b/src/asset/icon/ui/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/asset/icon/ui/play.svg b/src/asset/icon/ui/play.svg new file mode 100644 index 00000000..a4e10c39 --- /dev/null +++ b/src/asset/icon/ui/play.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue index b0fba16d..4d32ae9a 100644 --- a/src/editor/Editor.vue +++ b/src/editor/Editor.vue @@ -53,11 +53,8 @@ 'editor.pr.tooltip' )}`" > - - + + #{{ shared.prNumber }} @@ -66,16 +63,8 @@ @click="toExternalEditor('CodePen')" :title="t('editor.openWithCodePen')" > - - + + - - + + - - - + + {{ t('editor.run') }} @@ -1191,4 +1143,11 @@ $handler-width: 15px; background: $clr-bg; } +.fill-none { + fill: none; +} + +.stroke-current { + stroke: currentColor; +} diff --git a/src/explore/Explore.vue b/src/explore/Explore.vue index 36c2bb61..ea5758e3 100644 --- a/src/explore/Explore.vue +++ b/src/explore/Explore.vue @@ -15,7 +15,11 @@ :id="'left-chart-nav-' + category" :href="'#chart-type-' + category" > - + + + + + {{ t('chartTypes.' + category) }} @@ -73,7 +77,7 @@ import ScrollSpy from './ScrollSpy.vue'; const { t } = useI18n(); -const icons = {}; +const icons = ref({}); [ 'line', @@ -105,10 +109,9 @@ const icons = {}; 'rich', 'graphic' ].forEach(function (category) { - icons[category] = require('../asset/icon/' + category + '.svg?inline'); + icons.value[category] = category; }); -const glIcon = require('../asset/icon/gl.svg?inline'); [ 'globe', 'bar3D', @@ -123,7 +126,7 @@ const glIcon = require('../asset/icon/gl.svg?inline'); 'graphGL', 'geo3D' ].forEach(function (category) { - icons[category] = glIcon; + icons.value[category] = 'gl'; }); const LAZY_LOADED_CLASS = 'ec-shot-loaded'; @@ -262,7 +265,7 @@ const scrollNav = (currentItem) => { @import '../style/config.xl.scss'; $chart-nav-width: 200px; -$chart-icon-width: 25px; +$chart-icon-size: 20px; $chart-icon-border: 1px; $toolbar-height: 30px; @@ -408,15 +411,15 @@ $pd-lg: 20px; } .chart-icon { - content: ''; - width: 20px; + width: $chart-icon-size; + height: $chart-icon-size; display: inline-block; border-radius: 50%; vertical-align: middle; svg { - width: 100% !important; - height: auto !important; + width: 100%; + height: 100%; } } diff --git a/tool/plugin-svg-sprite.js b/tool/plugin-svg-sprite.js index f4768d21..52762c15 100644 --- a/tool/plugin-svg-sprite.js +++ b/tool/plugin-svg-sprite.js @@ -5,7 +5,7 @@ const fs = require('fs'); class SvgSpritePlugin { constructor(options = {}) { this.spriteFilename = options.spriteFilename || 'sprite.svg'; - this.iconDir = options.iconDir; + this.svgPath = options.svgPath; } // Helper to process raw SVG string into a @@ -63,11 +63,11 @@ class SvgSpritePlugin { stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS }, (assets) => { - if (!this.iconDir || !fs.existsSync(this.iconDir)) { + if (!this.svgPath || !fs.existsSync(this.svgPath)) { return; } - const svgFiles = this.getSvgFiles(this.iconDir); + const svgFiles = this.getSvgFiles(this.svgPath); let symbols = []; for (const filePath of svgFiles) {