From 72702d973d344c5a6537dde72807d186f2683ba0 Mon Sep 17 00:00:00 2001 From: Noa Date: Sun, 20 Feb 2022 22:40:03 -0600 Subject: [PATCH 1/9] Fix transformer-svg-react not finding .svgrrc's --- packages/transformers/svg-react/src/SvgReactTransformer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/transformers/svg-react/src/SvgReactTransformer.js b/packages/transformers/svg-react/src/SvgReactTransformer.js index 640b526139e..f0961103848 100644 --- a/packages/transformers/svg-react/src/SvgReactTransformer.js +++ b/packages/transformers/svg-react/src/SvgReactTransformer.js @@ -29,7 +29,8 @@ export default (new Transformer({ name: '@parcel/transformer-svg-react', defaultPlugins: [svgoPlugin, jsxPlugin], }, - filePath: componentName, + componentName, + filePath: asset.filePath, }, ); From 279d8f8ce675100eb2020a036c941df9a3765cdc Mon Sep 17 00:00:00 2001 From: Noa Date: Sun, 20 Feb 2022 22:57:50 -0600 Subject: [PATCH 2/9] Use config.loadConfig to load config --- .../transformers/svg-react/src/SvgReactTransformer.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/transformers/svg-react/src/SvgReactTransformer.js b/packages/transformers/svg-react/src/SvgReactTransformer.js index f0961103848..f47fb53a554 100644 --- a/packages/transformers/svg-react/src/SvgReactTransformer.js +++ b/packages/transformers/svg-react/src/SvgReactTransformer.js @@ -17,13 +17,18 @@ function getComponentName(filePath) { } export default (new Transformer({ - async transform({asset}) { + async loadConfig({config}) { + let { contents } = await config.getConfig(['.svgrrc', '.svgrrc.json']); + return contents; + }, + + async transform({asset,config}) { let code = await asset.getCode(); let componentName = getComponentName(asset.filePath); const jsx = await transform( code, - {}, + { ...config, runtimeConfig: false }, { caller: { name: '@parcel/transformer-svg-react', From e10c41be6cd81de28f6510e382f7c86417c554e1 Mon Sep 17 00:00:00 2001 From: Noa Date: Mon, 21 Feb 2022 12:33:09 -0600 Subject: [PATCH 3/9] Deduplicate getComponentName, svgr has the same function --- packages/transformers/svg-react/package.json | 3 +-- .../svg-react/src/SvgReactTransformer.js | 20 ++++--------------- 2 files changed, 5 insertions(+), 18 deletions(-) diff --git a/packages/transformers/svg-react/package.json b/packages/transformers/svg-react/package.json index fce63ce887b..26e2eb2583e 100644 --- a/packages/transformers/svg-react/package.json +++ b/packages/transformers/svg-react/package.json @@ -23,7 +23,6 @@ "@parcel/plugin": "2.3.2", "@svgr/core": "^6.2.0", "@svgr/plugin-jsx": "^6.2.0", - "@svgr/plugin-svgo": "^6.2.0", - "camelcase": "^6.3.0" + "@svgr/plugin-svgo": "^6.2.0" } } diff --git a/packages/transformers/svg-react/src/SvgReactTransformer.js b/packages/transformers/svg-react/src/SvgReactTransformer.js index f47fb53a554..04a2e80c7cf 100644 --- a/packages/transformers/svg-react/src/SvgReactTransformer.js +++ b/packages/transformers/svg-react/src/SvgReactTransformer.js @@ -2,39 +2,27 @@ import {Transformer} from '@parcel/plugin'; -import path from 'path'; -import camelcase from 'camelcase'; import svgoPlugin from '@svgr/plugin-svgo'; import jsxPlugin from '@svgr/plugin-jsx'; import {transform} from '@svgr/core'; -function getComponentName(filePath) { - let validCharacters = /[^a-zA-Z0-9_-]/g; - let name = path.parse(filePath).name.replace(validCharacters, ''); - return camelcase(name, { - pascalCase: true, - }); -} - export default (new Transformer({ async loadConfig({config}) { - let { contents } = await config.getConfig(['.svgrrc', '.svgrrc.json']); - return contents; + let result = await config.getConfig(['.svgrrc', '.svgrrc.json']); + return result?.contents ?? {}; }, - async transform({asset,config}) { + async transform({asset, config}) { let code = await asset.getCode(); - let componentName = getComponentName(asset.filePath); const jsx = await transform( code, - { ...config, runtimeConfig: false }, + {...config, runtimeConfig: false}, { caller: { name: '@parcel/transformer-svg-react', defaultPlugins: [svgoPlugin, jsxPlugin], }, - componentName, filePath: asset.filePath, }, ); From f2086a33a68d68f1d90ce061f10f89e4d18f0e17 Mon Sep 17 00:00:00 2001 From: Noa Date: Mon, 21 Feb 2022 12:33:43 -0600 Subject: [PATCH 4/9] Add test for svg-react .svgrrc --- .../integration/svg-react-svgrrc/.svgrrc.json | 4 ++++ .../test/integration/svg-react-svgrrc/icon.svg | 14 ++++++++++++++ .../integration/svg-react-svgrrc/index.html | 1 + .../integration/svg-react-svgrrc/package.json | 5 +++++ .../test/integration/svg-react-svgrrc/react.js | 4 ++++ .../core/integration-tests/test/svg-react.js | 18 ++++++++++++++++++ 6 files changed, 46 insertions(+) create mode 100644 packages/core/integration-tests/test/integration/svg-react-svgrrc/.svgrrc.json create mode 100644 packages/core/integration-tests/test/integration/svg-react-svgrrc/icon.svg create mode 100644 packages/core/integration-tests/test/integration/svg-react-svgrrc/index.html create mode 100644 packages/core/integration-tests/test/integration/svg-react-svgrrc/package.json create mode 100644 packages/core/integration-tests/test/integration/svg-react-svgrrc/react.js diff --git a/packages/core/integration-tests/test/integration/svg-react-svgrrc/.svgrrc.json b/packages/core/integration-tests/test/integration/svg-react-svgrrc/.svgrrc.json new file mode 100644 index 00000000000..25b05272976 --- /dev/null +++ b/packages/core/integration-tests/test/integration/svg-react-svgrrc/.svgrrc.json @@ -0,0 +1,4 @@ +{ + "icon": true, + "jsxRuntime": "classic-preact" +} diff --git a/packages/core/integration-tests/test/integration/svg-react-svgrrc/icon.svg b/packages/core/integration-tests/test/integration/svg-react-svgrrc/icon.svg new file mode 100644 index 00000000000..a0aeec0dc8f --- /dev/null +++ b/packages/core/integration-tests/test/integration/svg-react-svgrrc/icon.svg @@ -0,0 +1,14 @@ + + + + + + + diff --git a/packages/core/integration-tests/test/integration/svg-react-svgrrc/index.html b/packages/core/integration-tests/test/integration/svg-react-svgrrc/index.html new file mode 100644 index 00000000000..ceb8dab6b68 --- /dev/null +++ b/packages/core/integration-tests/test/integration/svg-react-svgrrc/index.html @@ -0,0 +1 @@ + diff --git a/packages/core/integration-tests/test/integration/svg-react-svgrrc/package.json b/packages/core/integration-tests/test/integration/svg-react-svgrrc/package.json new file mode 100644 index 00000000000..7ca2d696c01 --- /dev/null +++ b/packages/core/integration-tests/test/integration/svg-react-svgrrc/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "preact": "*" + } +} diff --git a/packages/core/integration-tests/test/integration/svg-react-svgrrc/react.js b/packages/core/integration-tests/test/integration/svg-react-svgrrc/react.js new file mode 100644 index 00000000000..01a798d242c --- /dev/null +++ b/packages/core/integration-tests/test/integration/svg-react-svgrrc/react.js @@ -0,0 +1,4 @@ +const { h } = require('preact'); +const PreactIcon = require('./icon.svg'); + +module.exports = ; diff --git a/packages/core/integration-tests/test/svg-react.js b/packages/core/integration-tests/test/svg-react.js index 2a625577767..535a389c4d2 100644 --- a/packages/core/integration-tests/test/svg-react.js +++ b/packages/core/integration-tests/test/svg-react.js @@ -19,4 +19,22 @@ describe('svg-react', function () { assert(file.includes('const SvgIcon =')); assert(file.includes('_react.createElement("svg"')); }); + + it('should find and use a .svgrrc config file', async function () { + let b = await bundle( + path.join(__dirname, '/integration/svg-react-svgrrc/react.js'), + { + defaultConfig: path.join( + __dirname, + 'integration/custom-configs/.parcelrc-svg-react', + ), + }, + ); + + let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf-8'); + assert(!file.includes('inkscape')); + assert(file.includes('const SvgIcon =')); + assert(file.includes('h("svg"')); + assert(file.includes('width: "1em"')); + }); }); From 3fa24c8930cc2d44326cca3af9ea7733c2de9f04 Mon Sep 17 00:00:00 2001 From: Niklas Mischkulnig <4586894+mischnic@users.noreply.github.com> Date: Fri, 25 Nov 2022 21:28:23 +0100 Subject: [PATCH 5/9] Fix assertion --- packages/core/integration-tests/test/svg-react.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/integration-tests/test/svg-react.js b/packages/core/integration-tests/test/svg-react.js index 88cfb1afe61..b5841ace2d8 100644 --- a/packages/core/integration-tests/test/svg-react.js +++ b/packages/core/integration-tests/test/svg-react.js @@ -52,7 +52,7 @@ describe('svg-react', function () { let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf-8'); assert(!file.includes('inkscape')); assert(file.includes('const SvgIcon =')); - assert(file.includes('h("svg"')); + assert(file.includes('(0, _preact.h)("svg"')); assert(file.includes('width: "1em"')); }); }); From c1e2817a498c6bf2b35d11f83b653a4dbe069fe2 Mon Sep 17 00:00:00 2001 From: Niklas Mischkulnig <4586894+mischnic@users.noreply.github.com> Date: Fri, 25 Nov 2022 21:52:44 +0100 Subject: [PATCH 6/9] Apply svgo config --- .../integration/svg-react-config/.svgorc.json | 3 ++ .../.svgrrc.json | 0 .../icon.svg | 0 .../index.html | 0 .../package.json | 0 .../react.js | 0 .../core/integration-tests/test/svg-react.js | 5 ++- .../svg-react/src/SvgReactTransformer.js | 38 +++++++++++++++++-- 8 files changed, 40 insertions(+), 6 deletions(-) create mode 100644 packages/core/integration-tests/test/integration/svg-react-config/.svgorc.json rename packages/core/integration-tests/test/integration/{svg-react-svgrrc => svg-react-config}/.svgrrc.json (100%) rename packages/core/integration-tests/test/integration/{svg-react-svgrrc => svg-react-config}/icon.svg (100%) rename packages/core/integration-tests/test/integration/{svg-react-svgrrc => svg-react-config}/index.html (100%) rename packages/core/integration-tests/test/integration/{svg-react-svgrrc => svg-react-config}/package.json (100%) rename packages/core/integration-tests/test/integration/{svg-react-svgrrc => svg-react-config}/react.js (100%) diff --git a/packages/core/integration-tests/test/integration/svg-react-config/.svgorc.json b/packages/core/integration-tests/test/integration/svg-react-config/.svgorc.json new file mode 100644 index 00000000000..37603be6342 --- /dev/null +++ b/packages/core/integration-tests/test/integration/svg-react-config/.svgorc.json @@ -0,0 +1,3 @@ +{ + "floatPrecision": 0 +} diff --git a/packages/core/integration-tests/test/integration/svg-react-svgrrc/.svgrrc.json b/packages/core/integration-tests/test/integration/svg-react-config/.svgrrc.json similarity index 100% rename from packages/core/integration-tests/test/integration/svg-react-svgrrc/.svgrrc.json rename to packages/core/integration-tests/test/integration/svg-react-config/.svgrrc.json diff --git a/packages/core/integration-tests/test/integration/svg-react-svgrrc/icon.svg b/packages/core/integration-tests/test/integration/svg-react-config/icon.svg similarity index 100% rename from packages/core/integration-tests/test/integration/svg-react-svgrrc/icon.svg rename to packages/core/integration-tests/test/integration/svg-react-config/icon.svg diff --git a/packages/core/integration-tests/test/integration/svg-react-svgrrc/index.html b/packages/core/integration-tests/test/integration/svg-react-config/index.html similarity index 100% rename from packages/core/integration-tests/test/integration/svg-react-svgrrc/index.html rename to packages/core/integration-tests/test/integration/svg-react-config/index.html diff --git a/packages/core/integration-tests/test/integration/svg-react-svgrrc/package.json b/packages/core/integration-tests/test/integration/svg-react-config/package.json similarity index 100% rename from packages/core/integration-tests/test/integration/svg-react-svgrrc/package.json rename to packages/core/integration-tests/test/integration/svg-react-config/package.json diff --git a/packages/core/integration-tests/test/integration/svg-react-svgrrc/react.js b/packages/core/integration-tests/test/integration/svg-react-config/react.js similarity index 100% rename from packages/core/integration-tests/test/integration/svg-react-svgrrc/react.js rename to packages/core/integration-tests/test/integration/svg-react-config/react.js diff --git a/packages/core/integration-tests/test/svg-react.js b/packages/core/integration-tests/test/svg-react.js index b5841ace2d8..fa4ffff6495 100644 --- a/packages/core/integration-tests/test/svg-react.js +++ b/packages/core/integration-tests/test/svg-react.js @@ -38,9 +38,9 @@ describe('svg-react', function () { assert(types.includes('const Icon: SVGRComponent')); }); - it('should find and use a .svgrrc config file', async function () { + it('should find and use a .svgrrc and .svgorc config file', async function () { let b = await bundle( - path.join(__dirname, '/integration/svg-react-svgrrc/react.js'), + path.join(__dirname, '/integration/svg-react-config/react.js'), { defaultConfig: path.join( __dirname, @@ -51,6 +51,7 @@ describe('svg-react', function () { let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf-8'); assert(!file.includes('inkscape')); + assert(!/\d\.\d/.test(file)); assert(file.includes('const SvgIcon =')); assert(file.includes('(0, _preact.h)("svg"')); assert(file.includes('width: "1em"')); diff --git a/packages/transformers/svg-react/src/SvgReactTransformer.js b/packages/transformers/svg-react/src/SvgReactTransformer.js index 2449da1ccdd..2335d3f187a 100644 --- a/packages/transformers/svg-react/src/SvgReactTransformer.js +++ b/packages/transformers/svg-react/src/SvgReactTransformer.js @@ -2,14 +2,44 @@ import {Transformer} from '@parcel/plugin'; +import path from 'path'; import svgoPlugin from '@svgr/plugin-svgo'; import jsxPlugin from '@svgr/plugin-jsx'; import {transform} from '@svgr/core'; export default (new Transformer({ async loadConfig({config}) { - let result = await config.getConfig(['.svgrrc', '.svgrrc.json']); - return result?.contents ?? {}; + let svgrResult = await config.getConfig([ + '.svgrrc', + '.svgrrc.json', + '.svgrrc.js', + '.svgrrc.cjs', + 'svgr.config.json', + 'svgr.config.js', + 'svgr.config.cjs', + ]); + let svgoResult = await config.getConfig([ + '.svgorc', + '.svgorc.json', + '.svgorc.js', + '.svgorc.cjs', + 'svgo.config.json', + 'svgo.config.js', + 'svgo.config.cjs', + ]); + if (svgrResult) { + let isJavascript = path.extname(svgrResult.filePath) === '.js'; + if (isJavascript) { + config.invalidateOnStartup(); + } + } + if (svgoResult) { + let isJavascript = path.extname(svgoResult.filePath) === '.js'; + if (isJavascript) { + config.invalidateOnStartup(); + } + } + return {svgr: svgrResult?.contents, svgo: svgoResult?.contents}; }, async transform({asset, config}) { @@ -17,7 +47,7 @@ export default (new Transformer({ const jsx = await transform( code, - {...config, runtimeConfig: false}, + {svgoConfig: config.svgo, ...config.svgr, runtimeConfig: false}, { caller: { name: '@parcel/transformer-svg-react', @@ -27,7 +57,7 @@ export default (new Transformer({ }, ); - asset.type = config?.typescript ? 'tsx' : 'jsx'; + asset.type = config.svgr?.typescript ? 'tsx' : 'jsx'; asset.bundleBehavior = null; asset.setCode(jsx); From a2d6262cbd465709b3e0430d763382b93fa3efb0 Mon Sep 17 00:00:00 2001 From: Niklas Mischkulnig <4586894+mischnic@users.noreply.github.com> Date: Sun, 27 Nov 2022 19:54:50 +0100 Subject: [PATCH 7/9] invalidateOnStartup with cjs for various transfomers --- packages/transformers/postcss/src/loadConfig.js | 3 ++- packages/transformers/posthtml/src/PostHTMLTransformer.js | 2 +- packages/transformers/pug/src/PugTransformer.js | 2 +- packages/transformers/sass/src/SassTransformer.js | 2 +- packages/transformers/stylus/src/StylusTransformer.js | 2 +- packages/transformers/svg-react/src/SvgReactTransformer.js | 4 ++-- 6 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/transformers/postcss/src/loadConfig.js b/packages/transformers/postcss/src/loadConfig.js index ae35ca2e776..f74157a9bb3 100644 --- a/packages/transformers/postcss/src/loadConfig.js +++ b/packages/transformers/postcss/src/loadConfig.js @@ -180,7 +180,8 @@ export async function load({ }); contents = configFile.contents; - let isDynamic = configFile && path.extname(configFile.filePath) === '.js'; + let isDynamic = + configFile && path.extname(configFile.filePath).endsWith('js'); if (isDynamic) { // We have to invalidate on startup in case the config is non-deterministic, // e.g. using unknown environment variables, reading from the filesystem, etc. diff --git a/packages/transformers/posthtml/src/PostHTMLTransformer.js b/packages/transformers/posthtml/src/PostHTMLTransformer.js index 60fa1e45c1f..34ed3219823 100644 --- a/packages/transformers/posthtml/src/PostHTMLTransformer.js +++ b/packages/transformers/posthtml/src/PostHTMLTransformer.js @@ -31,7 +31,7 @@ export default (new Transformer({ ); if (configFile) { - let isJavascript = path.extname(configFile.filePath) === '.js'; + let isJavascript = path.extname(configFile.filePath).endsWith('js'); if (isJavascript) { // We have to invalidate on startup in case the config is non-deterministic, // e.g. using unknown environment variables, reading from the filesystem, etc. diff --git a/packages/transformers/pug/src/PugTransformer.js b/packages/transformers/pug/src/PugTransformer.js index b704eecfe99..1d53909b9a0 100644 --- a/packages/transformers/pug/src/PugTransformer.js +++ b/packages/transformers/pug/src/PugTransformer.js @@ -15,7 +15,7 @@ export default (new Transformer({ ]); if (configFile) { - let isJavascript = path.extname(configFile.filePath) === '.js'; + let isJavascript = path.extname(configFile.filePath).endsWith('js'); if (isJavascript) { config.invalidateOnStartup(); } diff --git a/packages/transformers/sass/src/SassTransformer.js b/packages/transformers/sass/src/SassTransformer.js index ae6321ff655..9253c3f7049 100644 --- a/packages/transformers/sass/src/SassTransformer.js +++ b/packages/transformers/sass/src/SassTransformer.js @@ -27,7 +27,7 @@ export default (new Transformer({ ); } - if (configFile && path.extname(configFile.filePath) === '.js') { + if (configFile && path.extname(configFile.filePath).endsWith('js')) { config.invalidateOnStartup(); } diff --git a/packages/transformers/stylus/src/StylusTransformer.js b/packages/transformers/stylus/src/StylusTransformer.js index d7a1b65029c..d1d36bfaf50 100644 --- a/packages/transformers/stylus/src/StylusTransformer.js +++ b/packages/transformers/stylus/src/StylusTransformer.js @@ -23,7 +23,7 @@ export default (new Transformer({ ); if (configFile) { - let isJavascript = path.extname(configFile.filePath) === '.js'; + let isJavascript = path.extname(configFile.filePath).endsWith('js'); if (isJavascript) { config.invalidateOnStartup(); } diff --git a/packages/transformers/svg-react/src/SvgReactTransformer.js b/packages/transformers/svg-react/src/SvgReactTransformer.js index 2335d3f187a..45a8a55a619 100644 --- a/packages/transformers/svg-react/src/SvgReactTransformer.js +++ b/packages/transformers/svg-react/src/SvgReactTransformer.js @@ -28,13 +28,13 @@ export default (new Transformer({ 'svgo.config.cjs', ]); if (svgrResult) { - let isJavascript = path.extname(svgrResult.filePath) === '.js'; + let isJavascript = path.extname(svgrResult.filePath).endsWith('js'); if (isJavascript) { config.invalidateOnStartup(); } } if (svgoResult) { - let isJavascript = path.extname(svgoResult.filePath) === '.js'; + let isJavascript = path.extname(svgoResult.filePath).endsWith('js'); if (isJavascript) { config.invalidateOnStartup(); } From f2fbb0e68ab0a46c240f1b219f5604ac4012b12a Mon Sep 17 00:00:00 2001 From: Niklas Mischkulnig <4586894+mischnic@users.noreply.github.com> Date: Sun, 27 Nov 2022 20:00:58 +0100 Subject: [PATCH 8/9] Unify valid svgo config names --- packages/transformers/svg-react/src/SvgReactTransformer.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/transformers/svg-react/src/SvgReactTransformer.js b/packages/transformers/svg-react/src/SvgReactTransformer.js index 45a8a55a619..76ce76399b1 100644 --- a/packages/transformers/svg-react/src/SvgReactTransformer.js +++ b/packages/transformers/svg-react/src/SvgReactTransformer.js @@ -19,13 +19,9 @@ export default (new Transformer({ 'svgr.config.cjs', ]); let svgoResult = await config.getConfig([ - '.svgorc', - '.svgorc.json', - '.svgorc.js', - '.svgorc.cjs', - 'svgo.config.json', 'svgo.config.js', 'svgo.config.cjs', + 'svgo.config.json', ]); if (svgrResult) { let isJavascript = path.extname(svgrResult.filePath).endsWith('js'); From 6e96f750e894bed7bdb899758caae3248348c795 Mon Sep 17 00:00:00 2001 From: Niklas Mischkulnig <4586894+mischnic@users.noreply.github.com> Date: Sun, 27 Nov 2022 22:48:43 +0100 Subject: [PATCH 9/9] Fixup test --- .../svg-react-config/{.svgorc.json => svgo.config.json} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/core/integration-tests/test/integration/svg-react-config/{.svgorc.json => svgo.config.json} (100%) diff --git a/packages/core/integration-tests/test/integration/svg-react-config/.svgorc.json b/packages/core/integration-tests/test/integration/svg-react-config/svgo.config.json similarity index 100% rename from packages/core/integration-tests/test/integration/svg-react-config/.svgorc.json rename to packages/core/integration-tests/test/integration/svg-react-config/svgo.config.json