diff --git a/CHANGELOG.md b/CHANGELOG.md index 1efeb9c721..ce349acfbd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Fix syntax label from "Javascript" to "JavaScript". - Fix typing errors for emitter. +- Inline SVG images for easier bundler setup. # v2.0.0-beta.0 diff --git a/package-lock.json b/package-lock.json index b3db37c2b3..121755c77f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26451,6 +26451,7 @@ "style-loader": "^3.3.3", "stylus": "^0.62.0", "stylus-loader": "^7.1.3", + "svgo": "^3.2.0", "terser-webpack-plugin": "^5.3.9", "transpile-webpack-plugin": "^1.1.3", "ts-loader": "^9.5.1", @@ -26466,11 +26467,156 @@ "npm": ">=8.2.3" } }, + "packages/quill/node_modules/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dev": true, + "engines": { + "node": ">= 10" + } + }, + "packages/quill/node_modules/css-select": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "dev": true, + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "packages/quill/node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dev": true, + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, + "packages/quill/node_modules/csso": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "dev": true, + "dependencies": { + "css-tree": "~2.2.0" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "packages/quill/node_modules/csso/node_modules/css-tree": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "dev": true, + "dependencies": { + "mdn-data": "2.0.28", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "packages/quill/node_modules/csso/node_modules/mdn-data": { + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", + "dev": true + }, + "packages/quill/node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "dev": true, + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "packages/quill/node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dev": true, + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "packages/quill/node_modules/domutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "dev": true, + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, "packages/quill/node_modules/eventemitter3": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==" }, + "packages/quill/node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "dev": true + }, + "packages/quill/node_modules/svgo": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.2.0.tgz", + "integrity": "sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==", + "dev": true, + "dependencies": { + "@trysound/sax": "0.2.0", + "commander": "^7.2.0", + "css-select": "^5.1.0", + "css-tree": "^2.3.1", + "css-what": "^6.1.0", + "csso": "^5.0.5", + "picocolors": "^1.0.0" + }, + "bin": { + "svgo": "bin/svgo" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/svgo" + } + }, "packages/website": { "version": "2.0.0-beta.0", "license": "BSD-3-Clause", diff --git a/packages/quill/babel.config.js b/packages/quill/babel.config.js index 88dde864e6..2658740917 100644 --- a/packages/quill/babel.config.js +++ b/packages/quill/babel.config.js @@ -2,5 +2,8 @@ const pkg = require('./package.json'); module.exports = { presets: ['@babel/preset-env', '@babel/preset-typescript'], - plugins: [['transform-define', { QUILL_VERSION: pkg.version }]], + plugins: [ + ['transform-define', { QUILL_VERSION: pkg.version }], + './scripts/babel-svg-inline-import', + ], }; diff --git a/packages/quill/package.json b/packages/quill/package.json index 161ccd4831..1cde31810e 100644 --- a/packages/quill/package.json +++ b/packages/quill/package.json @@ -42,6 +42,7 @@ "style-loader": "^3.3.3", "stylus": "^0.62.0", "stylus-loader": "^7.1.3", + "svgo": "^3.2.0", "terser-webpack-plugin": "^5.3.9", "transpile-webpack-plugin": "^1.1.3", "ts-loader": "^9.5.1", diff --git a/packages/quill/scripts/babel-svg-inline-import.js b/packages/quill/scripts/babel-svg-inline-import.js new file mode 100644 index 0000000000..e77d97db21 --- /dev/null +++ b/packages/quill/scripts/babel-svg-inline-import.js @@ -0,0 +1,43 @@ +const fs = require('fs'); +const { dirname, resolve } = require('path'); +const { optimize } = require('svgo'); + +module.exports = ({ types: t }) => { + class BabelSVGInlineImport { + constructor() { + return { + visitor: { + ImportDeclaration: { + exit(path, state) { + const givenPath = path.node.source.value; + if (!givenPath.endsWith('.svg')) { + return; + } + const specifier = path.node.specifiers[0]; + const id = specifier.local.name; + const reference = state && state.file && state.file.opts.filename; + const absolutePath = resolve(dirname(reference), givenPath); + const content = optimize( + fs.readFileSync(absolutePath).toString(), + ).data; + + const variableValue = t.stringLiteral(content); + const variable = t.variableDeclarator( + t.identifier(id), + variableValue, + ); + + path.replaceWith({ + type: 'VariableDeclaration', + kind: 'const', + declarations: [variable], + }); + }, + }, + }, + }; + } + } + + return new BabelSVGInlineImport(); +};