From 3fbe8bf308af7c0df6162093df664da5e766d6de Mon Sep 17 00:00:00 2001 From: Bart Nagel Date: Thu, 29 Oct 2020 11:32:12 -0700 Subject: [PATCH 01/14] Add failing test for export * as foo from bar This demonstates #92. --- test/fixtures/test-export-all-as.jsx | 1 + test/sanity.js | 10 ++++++++++ 2 files changed, 11 insertions(+) create mode 100644 test/fixtures/test-export-all-as.jsx diff --git a/test/fixtures/test-export-all-as.jsx b/test/fixtures/test-export-all-as.jsx new file mode 100644 index 0000000..ee2c097 --- /dev/null +++ b/test/fixtures/test-export-all-as.jsx @@ -0,0 +1 @@ +export * as foo from 'bar'; diff --git a/test/sanity.js b/test/sanity.js index b04db4c..81ea4b8 100644 --- a/test/sanity.js +++ b/test/sanity.js @@ -177,3 +177,13 @@ transformFile('test/fixtures/test-export-default-as.jsx', { if (err) throw err; console.log('test/fixtures/test-export-default-as.jsx', result.code); }); + +transformFile('test/fixtures/test-export-all-as.jsx', { + presets: ['airbnb'], + plugins: [ + inlineReactSvgPlugin, + ], +}, (err, result) => { + if (err) throw err; + console.log('test/fixtures/test-export-all-as.jsx', result.code); +}); From 7558b84c23fda7b5acb438da20fdebf555886fc0 Mon Sep 17 00:00:00 2001 From: Bart Nagel Date: Thu, 29 Oct 2020 05:18:14 -0700 Subject: [PATCH 02/14] Fix crash on `export * as foo from "bar"` Closes #92 --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index ed9a63f..044d3fb 100644 --- a/src/index.js +++ b/src/index.js @@ -160,7 +160,7 @@ export default declare(({ }, ExportNamedDeclaration(path, state) { const { node } = path; - if (node.specifiers.length > 0 && node.specifiers[0].local.name === 'default') { + if (node.specifiers.length > 0 && node.specifiers[0].local && node.specifiers[0].local.name === 'default') { const exportName = node.specifiers[0].exported.name; const filename = parseFilename(node.source.value).name; applyPlugin(exportName, node.source.value, path, state, true, filename); From fce27ab786b5724ee1895786eb0bdd012619edcb Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Fri, 30 Oct 2020 09:07:19 -0500 Subject: [PATCH 03/14] 1.1.2 - [Fix] Fix crash on `export * as foo from "bar"` --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 220821c..c4215db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "babel-plugin-inline-react-svg", - "version": "1.1.1", + "version": "1.1.2", "description": "A babel plugin that optimizes and inlines SVGs for your react components.", "main": "lib/index.js", "scripts": { From ca99a799a55f8e3dcd4d72852ed5e5a1a996decb Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Fri, 8 Jan 2021 08:09:34 -0800 Subject: [PATCH 04/14] [Deps] update `resolve` --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c4215db..d6c73b5 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "@babel/helper-plugin-utils": "^7.0.0", "@babel/parser": "^7.0.0", "lodash.isplainobject": "^4.0.6", - "resolve": "^1.10.0", + "resolve": "^1.19.0", "svgo": "^0.7.2" } } From 4ed41be81dc23ec5ea940225a07b250d17eb40f4 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Fri, 8 Jan 2021 08:11:56 -0800 Subject: [PATCH 05/14] [Dev Deps] update `@babel/cli`, `@babel/node`, `@babel/preset-react`, `babel-preset-airbnb`, `eslint`, `eslint-config-airbnb`, `eslint-plugin-import`, `eslint-plugin-jsx-a11y`, `eslint-plugin-react` --- package.json | 18 +++++++++--------- src/camelize.js | 2 +- src/cssToObj.js | 2 +- src/optimize.js | 4 ++-- src/transformSvg.js | 4 ++-- 5 files changed, 15 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index d6c73b5..9162282 100644 --- a/package.json +++ b/package.json @@ -30,16 +30,16 @@ }, "homepage": "https://github.com/kesne/babel-plugin-inline-react-svg#readme", "devDependencies": { - "@babel/cli": "^7.4.3", + "@babel/cli": "^7.12.10", "@babel/core": "^7.0.0", - "@babel/node": "^7.2.2", - "@babel/preset-react": "^7.0.0", - "babel-preset-airbnb": "^3.2.1", - "eslint": "^5.16.0", - "eslint-config-airbnb": "^17.1.0", - "eslint-plugin-import": "^2.16.0", - "eslint-plugin-jsx-a11y": "^6.2.1", - "eslint-plugin-react": "^7.12.4", + "@babel/node": "^7.12.10", + "@babel/preset-react": "^7.12.10", + "babel-preset-airbnb": "^3.3.2", + "eslint": "^7.17.0", + "eslint-config-airbnb": "^18.2.1", + "eslint-plugin-import": "^2.22.1", + "eslint-plugin-jsx-a11y": "^6.4.1", + "eslint-plugin-react": "^7.22.0", "react": "^15.3.1" }, "peerDependencies": { diff --git a/src/camelize.js b/src/camelize.js index 2a9c6f5..3fa37f3 100644 --- a/src/camelize.js +++ b/src/camelize.js @@ -1,5 +1,5 @@ export function hyphenToCamel(name) { - return name.replace(/-([a-z])/g, g => g[1].toUpperCase()); + return name.replace(/-([a-z])/g, (g) => g[1].toUpperCase()); } export function namespaceToCamel(namespace, name) { diff --git a/src/cssToObj.js b/src/cssToObj.js index eefe041..8e74e5f 100644 --- a/src/cssToObj.js +++ b/src/cssToObj.js @@ -1,7 +1,7 @@ export default function cssToObj(css) { const o = {}; css.split(';') - .filter(el => !!el) + .filter((el) => !!el) .forEach((el) => { const s = el.split(':'); const key = s.shift().trim(); diff --git a/src/optimize.js b/src/optimize.js index 7849c5c..db76ae2 100644 --- a/src/optimize.js +++ b/src/optimize.js @@ -48,8 +48,8 @@ function validateAndFix(opts) { }); Object.keys(state) - .filter(key => !state[key]) - .forEach(key => opts.plugins.push(key)); + .filter((key) => !state[key]) + .forEach((key) => opts.plugins.push(key)); } export default function optimize(content, opts = {}) { diff --git a/src/transformSvg.js b/src/transformSvg.js index fcc84cf..bccb0a7 100644 --- a/src/transformSvg.js +++ b/src/transformSvg.js @@ -6,7 +6,7 @@ import { namespaceToCamel, hyphenToCamel } from './camelize'; import cssToObj from './cssToObj'; -export default t => ({ +export default (t) => ({ JSXAttribute({ node }) { const { name: originalName } = node; if (t.isJSXNamespacedName(originalName)) { @@ -33,7 +33,7 @@ export default t => ({ // if (originalName.name === 'style') { const csso = cssToObj(node.value.value); - const properties = Object.keys(csso).map(prop => t.objectProperty( + const properties = Object.keys(csso).map((prop) => t.objectProperty( t.identifier(hyphenToCamel(prop)), t.stringLiteral(csso[prop]), )); From 2b6d6b0946fa29495aab80b4c917e807217793f0 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Thu, 7 Jan 2021 20:50:32 -0800 Subject: [PATCH 06/14] [Tests] add passing test Closes #89 --- test/fixtures/commented.svg | 1 + test/fixtures/test-commented.jsx | 11 +++++++++++ test/sanity.js | 22 ++++++++++++++++++++++ 3 files changed, 34 insertions(+) create mode 100644 test/fixtures/commented.svg create mode 100644 test/fixtures/test-commented.jsx diff --git a/test/fixtures/commented.svg b/test/fixtures/commented.svg new file mode 100644 index 0000000..c54abbc --- /dev/null +++ b/test/fixtures/commented.svg @@ -0,0 +1 @@ + diff --git a/test/fixtures/test-commented.jsx b/test/fixtures/test-commented.jsx new file mode 100644 index 0000000..374f58c --- /dev/null +++ b/test/fixtures/test-commented.jsx @@ -0,0 +1,11 @@ +import SVG from './commented.svg'; + +export function MyFunctionIcon() { + return ; +} + +export class MyClassIcon extends React.Component { + render() { + return ; + } +} diff --git a/test/sanity.js b/test/sanity.js index 81ea4b8..fe399c8 100644 --- a/test/sanity.js +++ b/test/sanity.js @@ -187,3 +187,25 @@ transformFile('test/fixtures/test-export-all-as.jsx', { if (err) throw err; console.log('test/fixtures/test-export-all-as.jsx', result.code); }); + +transformFile('test/fixtures/test-commented.jsx', { + presets: ['airbnb'], + plugins: [ + inlineReactSvgPlugin, + ], +}, (err, result) => { + if (err) throw err; + console.log('test/fixtures/test-commented.jsx', result.code); +}); + +/* TODO: uncomment if babel fixes its parsing for SVGs +transformFile('test/fixtures/test-commented.jsx', { + presets: ['airbnb'], + plugins: [ + [inlineReactSvgPlugin, { svgo: false }], + ], +}, (err, result) => { + if (err) throw err; + console.log('test/fixtures/test-commented.jsx', result.code); +}); +*/ From 0b2b1191eeeecaa8aef36141a2d8e236aa3bd1b6 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Wed, 17 Feb 2021 12:54:45 -0800 Subject: [PATCH 07/14] [Dev Deps] update `@babel/cli`, `@babel/node`, `@babel/preset-react`, `eslint` --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 9162282..8817ba2 100644 --- a/package.json +++ b/package.json @@ -30,12 +30,12 @@ }, "homepage": "https://github.com/kesne/babel-plugin-inline-react-svg#readme", "devDependencies": { - "@babel/cli": "^7.12.10", + "@babel/cli": "^7.12.16", "@babel/core": "^7.0.0", - "@babel/node": "^7.12.10", - "@babel/preset-react": "^7.12.10", + "@babel/node": "^7.12.16", + "@babel/preset-react": "^7.12.13", "babel-preset-airbnb": "^3.3.2", - "eslint": "^7.17.0", + "eslint": "^7.20.0", "eslint-config-airbnb": "^18.2.1", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jsx-a11y": "^6.4.1", From c7ae6fdb9de0bb3c9002d3f5af10d97607ab3222 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Wed, 17 Feb 2021 12:55:52 -0800 Subject: [PATCH 08/14] [Deps] update `resolve` --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8817ba2..921bac4 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "@babel/helper-plugin-utils": "^7.0.0", "@babel/parser": "^7.0.0", "lodash.isplainobject": "^4.0.6", - "resolve": "^1.19.0", + "resolve": "^1.20.0", "svgo": "^0.7.2" } } From 90eeedda0bf1b380de35d5eb57e2443f1e4987f9 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Wed, 17 Feb 2021 13:38:43 -0800 Subject: [PATCH 09/14] [Breaking] update `svgo` to v2; drop node < v10.13 --- .travis.yml | 7 ++++--- package.json | 5 ++++- src/escapeBraces.js | 2 +- src/index.js | 2 +- src/optimize.js | 15 ++------------- 5 files changed, 12 insertions(+), 19 deletions(-) diff --git a/.travis.yml b/.travis.yml index 5ab70bc..3ddc064 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,10 +2,11 @@ language: node_js os: - linux node_js: + - "15" + - "14" + - "12" - "10" - - "9" - - "8" - - "6" + - "10.13" before_install: - 'nvm install-latest-npm' script: diff --git a/package.json b/package.json index 921bac4..faad619 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,9 @@ "@babel/parser": "^7.0.0", "lodash.isplainobject": "^4.0.6", "resolve": "^1.20.0", - "svgo": "^0.7.2" + "svgo": "^2.0.0" + }, + "engines": { + "node": ">=10.13" } } diff --git a/src/escapeBraces.js b/src/escapeBraces.js index 4cd0a16..eaa206a 100644 --- a/src/escapeBraces.js +++ b/src/escapeBraces.js @@ -7,5 +7,5 @@ export default function escapeBraces(raw) { // // to // - return raw.replace(/(\{|\})/g, '{`$1`}'); + return { ...raw, data: raw.data.replace(/(\{|\})/g, '{`$1`}') }; } diff --git a/src/index.js b/src/index.js index 044d3fb..c88fc0e 100644 --- a/src/index.js +++ b/src/index.js @@ -75,7 +75,7 @@ export default declare(({ const escapeSvgSource = escapeBraces(optimizedSource); - const parsedSvgAst = parse(escapeSvgSource, { + const parsedSvgAst = parse(escapeSvgSource.data, { sourceType: 'module', plugins: ['jsx'], }); diff --git a/src/optimize.js b/src/optimize.js index db76ae2..d9e56e0 100644 --- a/src/optimize.js +++ b/src/optimize.js @@ -1,7 +1,7 @@ // validates svgo opts // to contain minimal set of plugins that will strip some stuff // for the babylon JSX parser to work -import Svgo from 'svgo'; +import * as SVGO from 'svgo'; import isPlainObject from 'lodash.isplainobject'; const essentialPlugins = ['removeDoctype', 'removeComments']; @@ -54,17 +54,6 @@ function validateAndFix(opts) { export default function optimize(content, opts = {}) { validateAndFix(opts); - const svgo = new Svgo(opts); - // Svgo isn't _really_ async, so let's do it this way: - let returnValue; - svgo.optimize(content, (response) => { - if (response.error) { - returnValue = response.error; - } else { - returnValue = response.data; - } - }); - - return returnValue; + return SVGO.optimize(content, opts); } From 0735382c67447aba4ad5a52bd6a2418d79cb8451 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Thu, 18 Feb 2021 09:05:34 -0600 Subject: [PATCH 10/14] 2.0.0 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - [breaking] drop node < v10.13 - [breaking] update svgo 0.7.2 → 2.0.0 - Update resolve dep and other dev deps --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index faad619..88d426c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "babel-plugin-inline-react-svg", - "version": "1.1.2", + "version": "2.0.0", "description": "A babel plugin that optimizes and inlines SVGs for your react components.", "main": "lib/index.js", "scripts": { From 7471408459cf54ec023c8398d85e4d70b11d22e0 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Mon, 22 Feb 2021 16:42:08 -0800 Subject: [PATCH 11/14] [Deps] update `svgo` --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 88d426c..f720951 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "@babel/parser": "^7.0.0", "lodash.isplainobject": "^4.0.6", "resolve": "^1.20.0", - "svgo": "^2.0.0" + "svgo": "^2.0.3" }, "engines": { "node": ">=10.13" From b8fb6377358e132748ad7c62f73226d4d519ccb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Mon, 22 Feb 2021 10:46:57 +0100 Subject: [PATCH 12/14] [Fix] Fix crash when SVGO is turned off --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index c88fc0e..07515ff 100644 --- a/src/index.js +++ b/src/index.js @@ -70,7 +70,7 @@ export default declare(({ } const rawSource = readFileSync(svgPath, 'utf8'); const optimizedSource = state.opts.svgo === false - ? rawSource + ? { data: rawSource } : optimize(rawSource, state.opts.svgo); const escapeSvgSource = escapeBraces(optimizedSource); From d4525ce89cf05d449a63fb78243aa2b2acafd0d8 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Tue, 23 Feb 2021 12:24:32 -0600 Subject: [PATCH 13/14] 2.0.1 - [Fix] Fix crash when SVGO is turned off - [Deps] update `svgo` --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f720951..40a2bce 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "babel-plugin-inline-react-svg", - "version": "2.0.0", + "version": "2.0.1", "description": "A babel plugin that optimizes and inlines SVGs for your react components.", "main": "lib/index.js", "scripts": { From e37c29bbea03d8cfcb12503c4924662c7fc1f286 Mon Sep 17 00:00:00 2001 From: Pierre Gordon <16200219+pierlon@users.noreply.github.com> Date: Wed, 24 Feb 2021 08:52:41 +0000 Subject: [PATCH 14/14] [readme] Update svgo configuration example --- README.md | 33 ++++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 71dd723..5124ef3 100644 --- a/README.md +++ b/README.md @@ -54,13 +54,11 @@ npm install --save-dev babel-plugin-inline-react-svg "svgo": { "plugins": [ { - "removeAttrs": { "attrs": "(data-name)" } + "name": "removeAttrs", + "params": { "attrs": "(data-name)" } }, - { - "cleanupIDs": true - } + "cleanupIDs" ] - } } ] @@ -69,6 +67,31 @@ npm install --save-dev babel-plugin-inline-react-svg ``` +**Note:** If `plugins` field is specified the default enabled `svgo` plugins will be overrided. Alternatively, if your Babel config is in JavaScript, the default list of plugins can be extended by making use of the `extendDefaultPlugins` utility provided by `svgo`. + +```js +const { extendDefaultPlugins } = require('svgo'); + +module.exports = { + plugins: [ + [ + 'inline-react-svg', + { + svgo: { + plugins: extendDefaultPlugins([ + { + name: 'removeAttrs', + params: { attrs: '(data-name)' } + }, + 'cleanupIDs', + ]) + } + } + ] + ] +} +``` + ### Via CLI ```sh