diff --git a/.babelrc b/.babelrc index fe4ca58..fbd6da0 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,6 @@ { - "presets": ["@babel/preset-env"], - "plugins": ["@babel/plugin-transform-runtime"] + "presets": [ + "@babel/preset-env", + "@babel/preset-react" + ] } \ No newline at end of file diff --git a/babel.config.react.js b/babel.config.react.js new file mode 100644 index 0000000..d98005d --- /dev/null +++ b/babel.config.react.js @@ -0,0 +1,11 @@ +module.exports = { + presets: [ + [ + "@babel/preset-env", + { + modules: false, + }, + ], + "@babel/preset-react", + ], +} diff --git a/babel.config.vue.js b/babel.config.vue.js new file mode 100644 index 0000000..a911c23 --- /dev/null +++ b/babel.config.vue.js @@ -0,0 +1,10 @@ +module.exports = { + presets: [ + [ + "@babel/preset-env", + { + modules: false, + }, + ], + ], +} diff --git a/package-lock.json b/package-lock.json index 1e434cd..e60b110 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,11 +14,13 @@ "devDependencies": { "@babel/core": "^7.25.2", "@babel/plugin-transform-private-property-in-object": "^7.24.7", - "@babel/plugin-transform-runtime": "^7.25.4", "@babel/preset-env": "^7.25.4", + "@babel/preset-react": "^7.24.7", "@rollup/plugin-babel": "^6.0.4", "@rollup/plugin-commonjs": "^26.0.1", "@rollup/plugin-node-resolve": "^15.2.3", + "@rollup/plugin-terser": "^0.4.4", + "@types/react": "^18.3.5", "@vue/babel-preset-jsx": "^1.1.2", "@vue/compiler-dom": "^3.0.0", "babel-helper-vue-jsx-merge-props": "^2.0.3", @@ -33,6 +35,7 @@ "rollup": "^2.29.0", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-terser": "^7.0.2", + "rollup-plugin-vue": "^6.0.0", "svg-sprite": "^1.5.0", "svgo": "^1.3.2", "vue-template-compiler": "^2.6.12" @@ -761,12 +764,15 @@ } }, "node_modules/@babel/plugin-syntax-jsx": { - "version": "7.10.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz", - "integrity": "sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g==", + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.7.tgz", + "integrity": "sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.10.4" + "@babel/helper-plugin-utils": "^7.24.7" + }, + "engines": { + "node": ">=6.9.0" }, "peerDependencies": { "@babel/core": "^7.0.0-0" @@ -1505,14 +1511,13 @@ "@babel/core": "^7.0.0-0" } }, - "node_modules/@babel/plugin-transform-regenerator": { + "node_modules/@babel/plugin-transform-react-display-name": { "version": "7.24.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.7.tgz", - "integrity": "sha512-lq3fvXPdimDrlg6LWBoqj+r/DEWgONuwjuOuQCSYgRroXDH/IdM1C0IZf59fL5cHLpjEH/O6opIRBbqv7ELnuA==", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.24.7.tgz", + "integrity": "sha512-H/Snz9PFxKsS1JLI4dJLtnJgCJRoo0AUm3chP6NYr+9En1JMKloheEiLIhlp5MDVznWo+H3AAC1Mc8lmUEpsgg==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.24.7", - "regenerator-transform": "^0.15.2" + "@babel/helper-plugin-utils": "^7.24.7" }, "engines": { "node": ">=6.9.0" @@ -1521,12 +1526,47 @@ "@babel/core": "^7.0.0-0" } }, - "node_modules/@babel/plugin-transform-reserved-words": { + "node_modules/@babel/plugin-transform-react-jsx": { + "version": "7.25.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.2.tgz", + "integrity": "sha512-KQsqEAVBpU82NM/B/N9j9WOdphom1SZH3R+2V7INrQUH+V9EBFwZsEJl8eBIVeQE62FxJCc70jzEZwqU7RcVqA==", + "dev": true, + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.24.7", + "@babel/helper-module-imports": "^7.24.7", + "@babel/helper-plugin-utils": "^7.24.8", + "@babel/plugin-syntax-jsx": "^7.24.7", + "@babel/types": "^7.25.2" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-development": { "version": "7.24.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.7.tgz", - "integrity": "sha512-0DUq0pHcPKbjFZCfTss/pGkYMfy3vFWydkUBd9r0GHpIyfs2eCDENvqadMycRS9wZCXR41wucAfJHJmwA0UmoQ==", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.24.7.tgz", + "integrity": "sha512-QG9EnzoGn+Qar7rxuW+ZOsbWOt56FvvI93xInqsZDC5fsekx1AlIO4KIJ5M+D0p0SqSH156EpmZyXq630B8OlQ==", + "dev": true, + "dependencies": { + "@babel/plugin-transform-react-jsx": "^7.24.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-pure-annotations": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.24.7.tgz", + "integrity": "sha512-PLgBVk3fzbmEjBJ/u8kFzOqS9tUeDjiaWud/rRym/yjCo/M9cASPlnrd2ZmmZpQT40fOOrvR8jh+n8jikrOhNA==", "dev": true, "dependencies": { + "@babel/helper-annotate-as-pure": "^7.24.7", "@babel/helper-plugin-utils": "^7.24.7" }, "engines": { @@ -1536,18 +1576,14 @@ "@babel/core": "^7.0.0-0" } }, - "node_modules/@babel/plugin-transform-runtime": { - "version": "7.25.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.25.4.tgz", - "integrity": "sha512-8hsyG+KUYGY0coX6KUCDancA0Vw225KJ2HJO0yCNr1vq5r+lJTleDaJf0K7iOhjw4SWhu03TMBzYTJ9krmzULQ==", + "node_modules/@babel/plugin-transform-regenerator": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.7.tgz", + "integrity": "sha512-lq3fvXPdimDrlg6LWBoqj+r/DEWgONuwjuOuQCSYgRroXDH/IdM1C0IZf59fL5cHLpjEH/O6opIRBbqv7ELnuA==", "dev": true, "dependencies": { - "@babel/helper-module-imports": "^7.24.7", - "@babel/helper-plugin-utils": "^7.24.8", - "babel-plugin-polyfill-corejs2": "^0.4.10", - "babel-plugin-polyfill-corejs3": "^0.10.6", - "babel-plugin-polyfill-regenerator": "^0.6.1", - "semver": "^6.3.1" + "@babel/helper-plugin-utils": "^7.24.7", + "regenerator-transform": "^0.15.2" }, "engines": { "node": ">=6.9.0" @@ -1556,13 +1592,19 @@ "@babel/core": "^7.0.0-0" } }, - "node_modules/@babel/plugin-transform-runtime/node_modules/semver": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", - "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "node_modules/@babel/plugin-transform-reserved-words": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.7.tgz", + "integrity": "sha512-0DUq0pHcPKbjFZCfTss/pGkYMfy3vFWydkUBd9r0GHpIyfs2eCDENvqadMycRS9wZCXR41wucAfJHJmwA0UmoQ==", "dev": true, - "bin": { - "semver": "bin/semver.js" + "dependencies": { + "@babel/helper-plugin-utils": "^7.24.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" } }, "node_modules/@babel/plugin-transform-shorthand-properties": { @@ -1835,6 +1877,26 @@ "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0" } }, + "node_modules/@babel/preset-react": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.24.7.tgz", + "integrity": "sha512-AAH4lEkpmzFWrGVlHaxJB7RLH21uPQ9+He+eFLWHmF9IuFQVugz8eAsamaW0DXRrTfco5zj1wWtpdcXJUOfsag==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.24.7", + "@babel/helper-validator-option": "^7.24.7", + "@babel/plugin-transform-react-display-name": "^7.24.7", + "@babel/plugin-transform-react-jsx": "^7.24.7", + "@babel/plugin-transform-react-jsx-development": "^7.24.7", + "@babel/plugin-transform-react-pure-annotations": "^7.24.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/regjsgen": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz", @@ -2221,6 +2283,28 @@ } } }, + "node_modules/@rollup/plugin-terser": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.4.tgz", + "integrity": "sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==", + "dev": true, + "dependencies": { + "serialize-javascript": "^6.0.1", + "smob": "^1.0.0", + "terser": "^5.17.4" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, "node_modules/@rollup/pluginutils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", @@ -2284,12 +2368,28 @@ "undici-types": "~6.19.2" } }, + "node_modules/@types/prop-types": { + "version": "15.7.12", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", + "dev": true + }, "node_modules/@types/q": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz", "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==", "dev": true }, + "node_modules/@types/react": { + "version": "18.3.5", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz", + "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/resolve": { "version": "1.20.2", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", @@ -2410,32 +2510,73 @@ } }, "node_modules/@vue/compiler-core": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0.tgz", - "integrity": "sha512-XqPC7vdv4rFE77S71oCHmT1K4Ks3WE2Gi6Lr4B5wn0Idmp+NyQQBUHsCNieMDRiEpgtJrw+yOHslrsV0AfAsfQ==", + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.0.tgz", + "integrity": "sha512-ja7cpqAOfw4tyFAxgBz70Z42miNDeaqTxExTsnXDLomRpqfyCgyvZvFp482fmsElpfvsoMJUsvzULhvxUTW6Iw==", "dev": true, "dependencies": { - "@babel/parser": "^7.11.5", - "@babel/types": "^7.11.5", - "@vue/shared": "3.0.0", - "estree-walker": "^2.0.1", - "source-map": "^0.6.1" + "@babel/parser": "^7.25.3", + "@vue/shared": "3.5.0", + "entities": "^4.5.0", + "estree-walker": "^2.0.2", + "source-map-js": "^1.2.0" + } + }, + "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==", + "dev": true, + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" } }, "node_modules/@vue/compiler-dom": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0.tgz", - "integrity": "sha512-ukDEGOP8P7lCPyStuM3F2iD5w2QPgUu2xwCW2XNeqPjFKIlR2xMsWjy4raI/cLjN6W16GtlMFaZdK8tLj5PRog==", + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.0.tgz", + "integrity": "sha512-xYjUybWZXl+1R/toDy815i4PbeehL2hThiSGkcpmIOCy2HoYyeeC/gAWK/Y/xsoK+GSw198/T5O31bYuQx5uvQ==", + "dev": true, + "dependencies": { + "@vue/compiler-core": "3.5.0", + "@vue/shared": "3.5.0" + } + }, + "node_modules/@vue/compiler-sfc": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.0.tgz", + "integrity": "sha512-B9DgLtrqok2GLuaFjLlSL15ZG3ZDBiitUH1ecex9guh/ZcA5MCdwuVE6nsfQxktuZY/QY0awJ35/ripIviCQTQ==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/parser": "^7.25.3", + "@vue/compiler-core": "3.5.0", + "@vue/compiler-dom": "3.5.0", + "@vue/compiler-ssr": "3.5.0", + "@vue/shared": "3.5.0", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.11", + "postcss": "^8.4.44", + "source-map-js": "^1.2.0" + } + }, + "node_modules/@vue/compiler-ssr": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.0.tgz", + "integrity": "sha512-E263QZmA1dqRd7c3u/sWTLRMpQOT0aZ8av/L9SoD/v/BVMZaWFHPUUBswS+bzrfvG2suJF8vSLKx6k6ba5SUdA==", "dev": true, + "peer": true, "dependencies": { - "@vue/compiler-core": "3.0.0", - "@vue/shared": "3.0.0" + "@vue/compiler-dom": "3.5.0", + "@vue/shared": "3.5.0" } }, "node_modules/@vue/shared": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0.tgz", - "integrity": "sha512-4XWL/avABGxU2E2ZF1eZq3Tj7fvksCMssDZUHOykBIMmh5d+KcAnQMC5XHMhtnA0NAvktYsA2YpdsVwVmhWzvA==", + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.0.tgz", + "integrity": "sha512-m9IgiteBpCkFaMNwCOBkFksA7z8QiKc30ooRuoXWUFRDu0mGyNPlFHmbncF0/Kra1RlX8QrmBbRaIxVvikaR0Q==", "dev": true }, "node_modules/@webassemblyjs/ast": { @@ -3502,6 +3643,12 @@ "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==", "dev": true }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true + }, "node_modules/dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", @@ -4372,6 +4519,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/hash-sum": { + "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 + }, "node_modules/hasha": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/hasha/-/hasha-2.2.0.tgz", @@ -5431,6 +5584,25 @@ "npm": ">=1.4.0" } }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "peer": true, + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, "node_modules/neo-async": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", @@ -5868,6 +6040,35 @@ "node": ">=6" } }, + "node_modules/postcss": { + "version": "8.4.44", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.44.tgz", + "integrity": "sha512-Aweb9unOEpQ3ezu4Q00DPvvM2ZTUitJdNKeP/+uQgr1IBIqu574IaZoURId7BKtWMREwzKa9OgzPzezWGPWFQw==", + "dev": true, + "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" + } + ], + "peer": true, + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.1", + "source-map-js": "^1.2.0" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, "node_modules/prettysize": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/prettysize/-/prettysize-1.1.0.tgz", @@ -6236,6 +6437,43 @@ "node": ">=8" } }, + "node_modules/rollup-plugin-vue": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0.tgz", + "integrity": "sha512-oVvUd84d5u73M2HYM3XsMDLtZRIA/tw2U0dmHlXU2UWP5JARYHzh/U9vcxaN/x/9MrepY7VH3pHFeOhrWpxs/Q==", + "dev": true, + "dependencies": { + "debug": "^4.1.1", + "hash-sum": "^2.0.0", + "rollup-pluginutils": "^2.8.2" + }, + "peerDependencies": { + "@vue/compiler-sfc": "*" + } + }, + "node_modules/rollup-plugin-vue/node_modules/debug": { + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz", + "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==", + "dev": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/rollup-plugin-vue/node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, "node_modules/rollup-pluginutils": { "version": "2.8.2", "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", @@ -6263,6 +6501,12 @@ "npm": ">=2.0.0" } }, + "node_modules/rxjs/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "dev": true + }, "node_modules/safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", @@ -6313,7 +6557,6 @@ "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", "dev": true, - "peer": true, "dependencies": { "randombytes": "^2.1.0" } @@ -6423,6 +6666,12 @@ "node": ">=0.10.0" } }, + "node_modules/smob": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/smob/-/smob-1.5.0.tgz", + "integrity": "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==", + "dev": true + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -6432,6 +6681,15 @@ "node": ">=0.10.0" } }, + "node_modules/source-map-js": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-support": { "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", @@ -6891,12 +7149,6 @@ "integrity": "sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==", "dev": true }, - "node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", - "dev": true - }, "node_modules/tunnel-agent": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", diff --git a/package.json b/package.json index f96b9bf..d4e517e 100644 --- a/package.json +++ b/package.json @@ -6,10 +6,10 @@ "homepage": "https://github.com/afnizarnur/nataicons", "scripts": { "prepublishOnly": "npm run build", - "build": "npm run build:icons && npm run build:vue && npm run build:react && rollup -c", + "build": "npm run build:icons && npm run build:vue && npm run build:react", "build:icons": "node ./scripts/build-icons.js && npm run icons:optimize && npm run icons:sprite-all && npm run icons:sprite-24x24 && npm run icons:sprite-20x20", - "build:vue": "rm -rf ./vue && mkdir ./vue/ && node ./scripts/build-vue/index.js", - "build:react": "rm -rf ./react && mkdir ./react && node ./scripts/build-react/index.js", + "build:vue": "rm -rf ./vue && mkdir ./vue/ && node ./scripts/build-vue/index.js && rollup -c rollup.config.js", + "build:react": "rm -rf ./react && mkdir ./react && node ./scripts/build-react/index.js && rollup -c rollup.config.react.js", "icons:get": "figma-assets-generator", "icons:sprite-all": "svg-sprite --svg-namespace-classnames false --symbol --symbol-dest . --symbol-sprite nataicons-sprite.svg './icons/./24x24/*.svg' './icons/./20x20/*.svg'", "icons:sprite-24x24": "svg-sprite --svg-namespace-classnames false --symbol --symbol-dest . --symbol-sprite nataicons-24x24-sprite.svg './icons/./24x24/*.svg'", @@ -30,11 +30,13 @@ "devDependencies": { "@babel/core": "^7.25.2", "@babel/plugin-transform-private-property-in-object": "^7.24.7", - "@babel/plugin-transform-runtime": "^7.25.4", "@babel/preset-env": "^7.25.4", + "@babel/preset-react": "^7.24.7", "@rollup/plugin-babel": "^6.0.4", "@rollup/plugin-commonjs": "^26.0.1", "@rollup/plugin-node-resolve": "^15.2.3", + "@rollup/plugin-terser": "^0.4.4", + "@types/react": "^18.3.5", "@vue/babel-preset-jsx": "^1.1.2", "@vue/compiler-dom": "^3.0.0", "babel-helper-vue-jsx-merge-props": "^2.0.3", @@ -49,6 +51,7 @@ "rollup": "^2.29.0", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-terser": "^7.0.2", + "rollup-plugin-vue": "^6.0.0", "svg-sprite": "^1.5.0", "svgo": "^1.3.2", "vue-template-compiler": "^2.6.12" diff --git a/rollup.config.js b/rollup.config.js index 785ea71..a2656a1 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,7 +1,8 @@ import babel from "@rollup/plugin-babel" import resolve from "@rollup/plugin-node-resolve" import commonjs from "@rollup/plugin-commonjs" -import { terser } from "rollup-plugin-terser" +import terser from "@rollup/plugin-terser" +import vue from "rollup-plugin-vue" export default { input: "vue/index.js", @@ -15,14 +16,16 @@ export default { format: "es", }, ], - external: ["vue", /@babel\/runtime/], // Externalize Vue and Babel runtime + external: ["vue"], plugins: [ resolve(), commonjs(), + vue(), babel({ - babelHelpers: "runtime", + babelHelpers: "bundled", + configFile: "./babel.config.vue.js", + extensions: [".js", ".vue"], exclude: "node_modules/**", - extensions: [".js", ".jsx", ".es6", ".es", ".mjs", ".vue"], }), terser(), ], diff --git a/rollup.config.react.js b/rollup.config.react.js new file mode 100644 index 0000000..64075f6 --- /dev/null +++ b/rollup.config.react.js @@ -0,0 +1,30 @@ +import babel from "@rollup/plugin-babel" +import resolve from "@rollup/plugin-node-resolve" +import commonjs from "@rollup/plugin-commonjs" +import terser from "@rollup/plugin-terser" + +export default { + input: "react/index.js", + output: [ + { + file: "react/lib/index.cjs.js", + format: "cjs", + }, + { + file: "react/lib/index.es.js", + format: "es", + }, + ], + external: ["react"], + plugins: [ + resolve(), + commonjs(), + babel({ + babelHelpers: "bundled", + configFile: "./babel.config.react.js", + extensions: [".js"], + exclude: "node_modules/**", + }), + terser(), + ], +} diff --git a/scripts/build-react/index.js b/scripts/build-react/index.js index 1bec394..ddc9403 100644 --- a/scripts/build-react/index.js +++ b/scripts/build-react/index.js @@ -12,45 +12,31 @@ import React from 'react'; const ${name}Icon = ({ size = '24', color = 'currentColor', ...props }) => { const getSize = () => { - if (size.slice(-1) === 'x') + if (typeof size === 'string' && size.slice(-1) === 'x') return size.slice(0, size.length - 1) + 'em'; - return parseInt(size) + 'px'; + return typeof size === 'number' ? size + 'px' : size; }; const updateSvg = (svgString) => { - const parser = new DOMParser(); - const doc = parser.parseFromString(svgString, 'image/svg+xml'); - const svg = doc.documentElement; - - svg.setAttribute('width', getSize()); - svg.setAttribute('height', getSize()); - - svg.querySelectorAll('[fill]:not([fill="none"])').forEach(el => { - el.setAttribute('fill', color); - }); - svg.querySelectorAll('[stroke]:not([stroke="none"])').forEach(el => { - el.setAttribute('stroke', color); - }); - - return svg.outerHTML; + return svgString + .replace(/width="\\d+"/, 'width="' + getSize() + '"') + .replace(/height="\\d+"/, 'height="' + getSize() + '"') + .replace(/fill="([^"]+)"/g, 'fill="' + color + '"') + .replace(/stroke="([^"]+)"/g, 'stroke="' + color + '"'); }; const svg20 = ${JSON.stringify(svg20)}; const svg24 = ${JSON.stringify(svg24)}; - return ( -
- ); + const svgContent = updateSvg(size === '20' ? svg20 : svg24); + + return React.createElement('svg', { + xmlns: "http://www.w3.org/2000/svg", + dangerouslySetInnerHTML: { __html: svgContent }, + width: getSize(), + height: getSize(), + ...props + }); }; export default ${name}Icon; @@ -74,7 +60,7 @@ export const NataIcon = ({ name, ...props }) => { .join(",\n ")} }[name.toLowerCase()]; - return IconComponent ? : null; + return IconComponent ? React.createElement(IconComponent, props) : null; }; `.trim()