diff --git a/CHANGELOG.md b/CHANGELOG.md index 5609b9751b7..62d6700f487 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -166,7 +166,7 @@ and Parcel adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). - Fix hoisting for optional chaining member expressions - [Details](https://github.com/parcel-bundler/parcel/pull/8121) - Fix issues with web extensions - [Details](https://github.com/parcel-bundler/parcel/pull/8000) - Reload the closest package.json to an asset if it's a package entry to fix `sideEffects` - [Details](https://github.com/parcel-bundler/parcel/pull/7909) -- Only emit non static import bailout warnings for variables which correspond to a * import - [Details](https://github.com/parcel-bundler/parcel/pull/8136) +- Only emit non static import bailout warnings for variables which correspond to a \* import - [Details](https://github.com/parcel-bundler/parcel/pull/8136) ## [2.5.0] - 2022-04-21 diff --git a/packages/core/integration-tests/test/integration/svg-react-config/.svgrrc.json b/packages/core/integration-tests/test/integration/svg-react-config/.svgrrc.json new file mode 100644 index 00000000000..25b05272976 --- /dev/null +++ b/packages/core/integration-tests/test/integration/svg-react-config/.svgrrc.json @@ -0,0 +1,4 @@ +{ + "icon": true, + "jsxRuntime": "classic-preact" +} diff --git a/packages/core/integration-tests/test/integration/svg-react-config/icon.svg b/packages/core/integration-tests/test/integration/svg-react-config/icon.svg new file mode 100644 index 00000000000..a0aeec0dc8f --- /dev/null +++ b/packages/core/integration-tests/test/integration/svg-react-config/icon.svg @@ -0,0 +1,14 @@ + + + + + + + diff --git a/packages/core/integration-tests/test/integration/svg-react-config/index.html b/packages/core/integration-tests/test/integration/svg-react-config/index.html new file mode 100644 index 00000000000..ceb8dab6b68 --- /dev/null +++ b/packages/core/integration-tests/test/integration/svg-react-config/index.html @@ -0,0 +1 @@ + diff --git a/packages/core/integration-tests/test/integration/svg-react-config/package.json b/packages/core/integration-tests/test/integration/svg-react-config/package.json new file mode 100644 index 00000000000..7ca2d696c01 --- /dev/null +++ b/packages/core/integration-tests/test/integration/svg-react-config/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "preact": "*" + } +} diff --git a/packages/core/integration-tests/test/integration/svg-react-config/react.js b/packages/core/integration-tests/test/integration/svg-react-config/react.js new file mode 100644 index 00000000000..01a798d242c --- /dev/null +++ b/packages/core/integration-tests/test/integration/svg-react-config/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/integration/svg-react-config/svgo.config.json b/packages/core/integration-tests/test/integration/svg-react-config/svgo.config.json new file mode 100644 index 00000000000..37603be6342 --- /dev/null +++ b/packages/core/integration-tests/test/integration/svg-react-config/svgo.config.json @@ -0,0 +1,3 @@ +{ + "floatPrecision": 0 +} diff --git a/packages/core/integration-tests/test/svg-react.js b/packages/core/integration-tests/test/svg-react.js index dff63a48577..fa4ffff6495 100644 --- a/packages/core/integration-tests/test/svg-react.js +++ b/packages/core/integration-tests/test/svg-react.js @@ -19,6 +19,7 @@ describe('svg-react', function () { assert(file.includes('const SvgIcon =')); assert(file.includes('_react.createElement("svg"')); }); + it('should support transforming SVGs to typescript react components', async function () { let b = await bundle( path.join(__dirname, '/integration/svg-react-typescript/react.ts'), @@ -36,4 +37,23 @@ describe('svg-react', function () { assert(file.includes('react.createElement("svg"')); assert(types.includes('const Icon: SVGRComponent')); }); + + it('should find and use a .svgrrc and .svgorc config file', async function () { + let b = await bundle( + path.join(__dirname, '/integration/svg-react-config/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(!/\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/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/package.json b/packages/transformers/svg-react/package.json index 46de2272df2..3af62408298 100644 --- a/packages/transformers/svg-react/package.json +++ b/packages/transformers/svg-react/package.json @@ -23,7 +23,6 @@ "@parcel/plugin": "2.8.0", "@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 5b9db020881..76ce76399b1 100644 --- a/packages/transformers/svg-react/src/SvgReactTransformer.js +++ b/packages/transformers/svg-react/src/SvgReactTransformer.js @@ -3,41 +3,57 @@ 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 conf = await config.getConfig(['.svgrrc.json', '.svgrrc']); - return conf?.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([ + 'svgo.config.js', + 'svgo.config.cjs', + 'svgo.config.json', + ]); + if (svgrResult) { + let isJavascript = path.extname(svgrResult.filePath).endsWith('js'); + if (isJavascript) { + config.invalidateOnStartup(); + } + } + if (svgoResult) { + let isJavascript = path.extname(svgoResult.filePath).endsWith('js'); + if (isJavascript) { + config.invalidateOnStartup(); + } + } + return {svgr: svgrResult?.contents, svgo: svgoResult?.contents}; }, + async transform({asset, config}) { let code = await asset.getCode(); - let componentName = getComponentName(asset.filePath); const jsx = await transform( code, - {}, + {svgoConfig: config.svgo, ...config.svgr, runtimeConfig: false}, { caller: { name: '@parcel/transformer-svg-react', defaultPlugins: [svgoPlugin, jsxPlugin], }, - filePath: componentName, + filePath: asset.filePath, }, ); - asset.type = config?.typescript ? 'tsx' : 'jsx'; + asset.type = config.svgr?.typescript ? 'tsx' : 'jsx'; asset.bundleBehavior = null; asset.setCode(jsx);