From dc084a970485847d79caf8209fb8904b6c07e56d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Sat, 24 Nov 2018 15:56:49 +0100 Subject: [PATCH] Fix Parcel plugin --- jest.config.js | 4 + .../{parcel => parcel-plugin-svgr}/.npmignore | 0 .../{parcel => parcel-plugin-svgr}/README.md | 0 .../package.json | 12 ++- .../src/__fixtures__/icon.svg | 0 .../src/__snapshots__/index.test.js.snap | 40 ++------ packages/parcel-plugin-svgr/src/asset.js | 46 +++++++++ .../src/index.js | 2 +- packages/parcel-plugin-svgr/src/index.test.js | 28 ++++++ packages/parcel/src/asset.js | 44 --------- packages/parcel/src/index.test.js | 37 -------- packages/rollup/src/index.js | 13 +-- packages/webpack/src/index.js | 15 +-- yarn.lock | 94 ++----------------- 14 files changed, 109 insertions(+), 226 deletions(-) create mode 100644 jest.config.js rename packages/{parcel => parcel-plugin-svgr}/.npmignore (100%) rename packages/{parcel => parcel-plugin-svgr}/README.md (100%) rename packages/{parcel => parcel-plugin-svgr}/package.json (78%) rename packages/{parcel => parcel-plugin-svgr}/src/__fixtures__/icon.svg (100%) rename packages/{parcel => parcel-plugin-svgr}/src/__snapshots__/index.test.js.snap (60%) create mode 100644 packages/parcel-plugin-svgr/src/asset.js rename packages/{parcel => parcel-plugin-svgr}/src/index.js (84%) create mode 100644 packages/parcel-plugin-svgr/src/index.test.js delete mode 100644 packages/parcel/src/asset.js delete mode 100644 packages/parcel/src/index.test.js diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 00000000..4a5e15e3 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,4 @@ +module.exports = { + watchPathIgnorePatterns: ['__fixtures__', '__fixtures__build__'], + rootDir: 'packages', +} diff --git a/packages/parcel/.npmignore b/packages/parcel-plugin-svgr/.npmignore similarity index 100% rename from packages/parcel/.npmignore rename to packages/parcel-plugin-svgr/.npmignore diff --git a/packages/parcel/README.md b/packages/parcel-plugin-svgr/README.md similarity index 100% rename from packages/parcel/README.md rename to packages/parcel-plugin-svgr/README.md diff --git a/packages/parcel/package.json b/packages/parcel-plugin-svgr/package.json similarity index 78% rename from packages/parcel/package.json rename to packages/parcel-plugin-svgr/package.json index bf929869..8c3a1e73 100644 --- a/packages/parcel/package.json +++ b/packages/parcel-plugin-svgr/package.json @@ -1,7 +1,7 @@ { - "name": "@svgr/parcel", + "name": "@svgr/parcel-plugin-svgr", "description": "SVGR Parcel plugin.", - "version": "4.0.0", + "version": "4.0.4", "main": "lib/index.js", "repository": "git@github.com:smooth-code/svgr.git", "author": "Mario Pabon ", @@ -28,11 +28,13 @@ "parcel-bundler": "^1.10.0" }, "dependencies": { - "@babel/core": "^7.1.2", + "@babel/core": "^7.1.6", "@babel/plugin-transform-react-constant-elements": "^7.0.0", - "@babel/preset-env": "^7.1.0", + "@babel/preset-env": "^7.1.6", "@babel/preset-react": "^7.0.0", - "@svgr/core": "^4.0.2" + "@svgr/core": "^4.0.3", + "@svgr/plugin-jsx": "^4.0.3", + "@svgr/plugin-svgo": "^4.0.3" }, "devDependencies": { "parcel-bundler": "^1.10.3" diff --git a/packages/parcel/src/__fixtures__/icon.svg b/packages/parcel-plugin-svgr/src/__fixtures__/icon.svg similarity index 100% rename from packages/parcel/src/__fixtures__/icon.svg rename to packages/parcel-plugin-svgr/src/__fixtures__/icon.svg diff --git a/packages/parcel/src/__snapshots__/index.test.js.snap b/packages/parcel-plugin-svgr/src/__snapshots__/index.test.js.snap similarity index 60% rename from packages/parcel/src/__snapshots__/index.test.js.snap rename to packages/parcel-plugin-svgr/src/__snapshots__/index.test.js.snap index 33146cba..111333b3 100644 --- a/packages/parcel/src/__snapshots__/index.test.js.snap +++ b/packages/parcel-plugin-svgr/src/__snapshots__/index.test.js.snap @@ -34,46 +34,24 @@ function _extends() { var _ref = /*#__PURE__*/ -_react.default.createElement(\\"title\\", null, \\"Dismiss\\"); - -var _ref2 = -/*#__PURE__*/ -_react.default.createElement(\\"desc\\", null, \\"Created with Sketch.\\"); - -var _ref3 = -/*#__PURE__*/ -_react.default.createElement(\\"defs\\", null); - -var _ref4 = -/*#__PURE__*/ _react.default.createElement(\\"g\\", { - id: \\"Blocks\\", - stroke: \\"none\\", - strokeWidth: 1, + stroke: \\"#063855\\", + strokeWidth: 2, fill: \\"none\\", fillRule: \\"evenodd\\", strokeLinecap: \\"square\\" -}, _react.default.createElement(\\"g\\", { - id: \\"Dismiss\\", - stroke: \\"#063855\\", - strokeWidth: 2 }, _react.default.createElement(\\"path\\", { - d: \\"M51,37 L37,51\\", - id: \\"Shape\\" -}), _react.default.createElement(\\"path\\", { - d: \\"M51,51 L37,37\\", - id: \\"Shape\\" -}))); + d: \\"M51 37L37 51M51 51L37 37\\" +})); -var SvgComponent = function SvgComponent(props) { +var SvgIcon = function SvgIcon(props) { return _react.default.createElement(\\"svg\\", _extends({ - width: \\"88px\\", - height: \\"88px\\", - viewBox: \\"0 0 88 88\\" - }, props), _ref, _ref2, _ref3, _ref4); + width: 88, + height: 88 + }, props), _ref); }; -var _default = SvgComponent; +var _default = SvgIcon; exports.default = _default;", "map": undefined, }, diff --git a/packages/parcel-plugin-svgr/src/asset.js b/packages/parcel-plugin-svgr/src/asset.js new file mode 100644 index 00000000..a0115c1e --- /dev/null +++ b/packages/parcel-plugin-svgr/src/asset.js @@ -0,0 +1,46 @@ +import { Asset } from 'parcel-bundler' +import { transformAsync, createConfigItem } from '@babel/core' +import svgo from '@svgr/plugin-svgo' +import jsx from '@svgr/plugin-jsx' +import convert from '@svgr/core' +import presetReact from '@babel/preset-react' +import presetEnv from '@babel/preset-env' +import pluginTransformReactConstantElements from '@babel/plugin-transform-react-constant-elements' + +const babelOptions = { + babelrc: false, + configFile: false, + presets: [ + createConfigItem(presetReact, { type: 'preset' }), + createConfigItem([presetEnv, { modules: false }], { type: 'preset' }), + ], + plugins: [createConfigItem(pluginTransformReactConstantElements)], +} + +class ReactSVGAsset extends Asset { + type = 'js' + + async parse(contents) { + const code = await convert( + contents, + {}, + { + caller: { + name: '@svgr/parcel', + defaultPlugins: [svgo, jsx], + }, + filePath: this.name, + }, + ) + + const { code: babelCode } = await transformAsync(code, babelOptions) + + return babelCode + } + + async generate() { + return [{ type: 'js', value: this.ast }] + } +} + +module.exports = ReactSVGAsset diff --git a/packages/parcel/src/index.js b/packages/parcel-plugin-svgr/src/index.js similarity index 84% rename from packages/parcel/src/index.js rename to packages/parcel-plugin-svgr/src/index.js index bfcfbdbd..62679027 100644 --- a/packages/parcel/src/index.js +++ b/packages/parcel-plugin-svgr/src/index.js @@ -1,6 +1,6 @@ // Parcel requires that plugins be exported with `module.exports`. // It won't be able to load the plugin if it is exported with "export default plugin" and then transpiled. -module.exports = function svgrParcelPlugin (bundler) { +module.exports = function svgrParcelPlugin(bundler) { // Parcel requires that the asset be passed in as a module path. bundler.addAssetType('svg', require.resolve('./asset')) } diff --git a/packages/parcel-plugin-svgr/src/index.test.js b/packages/parcel-plugin-svgr/src/index.test.js new file mode 100644 index 00000000..7d334b38 --- /dev/null +++ b/packages/parcel-plugin-svgr/src/index.test.js @@ -0,0 +1,28 @@ +import Bundler from 'parcel-bundler' +import path from 'path' +import plugin from '.' + +const getCode = bundle => + Array.from(bundle.assets) + .filter(asset => asset.id === 'icon.svg') + .map(asset => asset.generated) + +describe('parcel plugin', () => { + it('should convert file', async () => { + const bundler = new Bundler(path.join(__dirname, '__fixtures__/icon.svg'), { + outDir: path.join(__dirname, '../../../__fixtures_build__/parcel'), + cache: false, + detailedReport: false, + hmr: false, + logLevel: 0, + target: 'node', + watch: false, + }) + + plugin(bundler) + + const bundle = await bundler.bundle() + const code = getCode(bundle) + expect(code).toMatchSnapshot() + }) +}) diff --git a/packages/parcel/src/asset.js b/packages/parcel/src/asset.js deleted file mode 100644 index 9020343d..00000000 --- a/packages/parcel/src/asset.js +++ /dev/null @@ -1,44 +0,0 @@ -import { Asset } from 'parcel-bundler' -import { transform as babelTransform } from '@babel/core' -import convert from '@svgr/core' - -class ReactSVGAsset extends Asset { - async parse(contents) { - const jsCode = await convert(contents, { - prettier: false, - svgo: true - }) - - const pBabelTransform = code => - new Promise((resolve, reject) => { - babelTransform( - code, - { - babelrc: false, - presets: [ - '@babel/preset-react', - ['@babel/preset-env', { modules: false }], - ], - plugins: ['@babel/plugin-transform-react-constant-elements'], - }, - (err, result) => { - if (err) reject(err) - else resolve(result.code) - }, - ) - }) - - this.contents = await pBabelTransform(jsCode) - } - - generate() { - return [ - { - type: 'js', - value: this.contents - } - ] - } -} - -module.exports = ReactSVGAsset diff --git a/packages/parcel/src/index.test.js b/packages/parcel/src/index.test.js deleted file mode 100644 index cb449862..00000000 --- a/packages/parcel/src/index.test.js +++ /dev/null @@ -1,37 +0,0 @@ -import Bundler from 'parcel-bundler' -import path from 'path' -import plugin from '.' - -const getCode = bundle => - Array.from(bundle.assets).filter( - asset => asset.id === 'icon.svg' - ).map( - asset => asset.generated - ) - -describe('parcel plugin', () => { - it( - 'should convert file', - async () => { - const bundler = new Bundler( - path.join(__dirname, '__fixtures__/icon.svg'), - { - outDir: '__fixtures_build__', - cache: false, - detailedReport: false, - hmr: false, - logLevel: 0, - target: 'node', - watch: false - } - ) - - plugin(bundler) - - const bundle = await bundler.bundle() - const code = getCode(bundle) - expect(code).toMatchSnapshot() - }, - 15000, - ) -}) diff --git a/packages/rollup/src/index.js b/packages/rollup/src/index.js index 6db2ab42..51ca7e73 100644 --- a/packages/rollup/src/index.js +++ b/packages/rollup/src/index.js @@ -1,7 +1,7 @@ import fs from 'fs' import convert from '@svgr/core' import { createFilter } from 'rollup-pluginutils' -import { transform as babelTransform, createConfigItem } from '@babel/core' +import { transformAsync, createConfigItem } from '@babel/core' import svgo from '@svgr/plugin-svgo' import jsx from '@svgr/plugin-jsx' import presetReact from '@babel/preset-react' @@ -53,17 +53,8 @@ function svgrPlugin(options = {}) { }, }) - const pBabelTransform = async code => - new Promise((resolve, reject) => { - babelTransform(code, babelOptions, (err, result) => { - if (err) reject(err) - else resolve(result.code) - }) - }) - if (babel) { - const code = await pBabelTransform(jsCode) - + const { code } = await transformAsync(jsCode, babelOptions) return { code, map: { mappings: '' } } } diff --git a/packages/webpack/src/index.js b/packages/webpack/src/index.js index 13e34f44..7033905d 100644 --- a/packages/webpack/src/index.js +++ b/packages/webpack/src/index.js @@ -1,5 +1,5 @@ import { getOptions } from 'loader-utils' -import { transform as babelTransform, createConfigItem } from '@babel/core' +import { transformAsync, createConfigItem } from '@babel/core' import convert from '@svgr/core' import svgo from '@svgr/plugin-svgo' import jsx from '@svgr/plugin-jsx' @@ -36,14 +36,6 @@ function svgrLoader(source) { ? `export default ${exportMatches[1]}` : null - const pBabelTransform = async jsCode => - new Promise((resolve, reject) => { - babelTransform(jsCode, babelOptions, (err, result) => { - if (err) reject(err) - else resolve(result.code) - }) - }) - const tranformSvg = svg => convert(svg, options, { caller: { @@ -53,7 +45,10 @@ function svgrLoader(source) { }, filePath: this.resourcePath, }) - .then(jsCode => (babel ? pBabelTransform(jsCode) : jsCode)) + .then(jsCode => { + if (!babel) return jsCode + return transformAsync(jsCode, babelOptions).then(({ code }) => code) + }) .then(result => callback(null, result)) .catch(err => callback(err)) diff --git a/yarn.lock b/yarn.lock index 168f2727..c64f5fdd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -46,26 +46,6 @@ semver "^5.4.1" source-map "^0.5.0" -"@babel/core@^7.1.2": - version "7.1.2" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.1.2.tgz#f8d2a9ceb6832887329a7b60f9d035791400ba4e" - integrity sha512-IFeSSnjXdhDaoysIlev//UzHZbdEmm7D0EIH2qtse9xK7mXEZQpYjs2P00XlP1qYsYvid79p+Zgg6tz1mp6iVw== - dependencies: - "@babel/code-frame" "^7.0.0" - "@babel/generator" "^7.1.2" - "@babel/helpers" "^7.1.2" - "@babel/parser" "^7.1.2" - "@babel/template" "^7.1.2" - "@babel/traverse" "^7.1.0" - "@babel/types" "^7.1.2" - convert-source-map "^1.1.0" - debug "^3.1.0" - json5 "^0.5.0" - lodash "^4.17.10" - resolve "^1.3.2" - semver "^5.4.1" - source-map "^0.5.0" - "@babel/generator@^7.0.0", "@babel/generator@^7.1.6": version "7.1.6" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.1.6.tgz#001303cf87a5b9d093494a4bf251d7b5d03d3999" @@ -704,53 +684,6 @@ js-levenshtein "^1.1.3" semver "^5.3.0" -"@babel/preset-env@^7.1.0": - version "7.1.0" - resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.1.0.tgz#e67ea5b0441cfeab1d6f41e9b5c79798800e8d11" - integrity sha512-ZLVSynfAoDHB/34A17/JCZbyrzbQj59QC1Anyueb4Bwjh373nVPq5/HMph0z+tCmcDjXDe+DlKQq9ywQuvWrQg== - dependencies: - "@babel/helper-module-imports" "^7.0.0" - "@babel/helper-plugin-utils" "^7.0.0" - "@babel/plugin-proposal-async-generator-functions" "^7.1.0" - "@babel/plugin-proposal-json-strings" "^7.0.0" - "@babel/plugin-proposal-object-rest-spread" "^7.0.0" - "@babel/plugin-proposal-optional-catch-binding" "^7.0.0" - "@babel/plugin-proposal-unicode-property-regex" "^7.0.0" - "@babel/plugin-syntax-async-generators" "^7.0.0" - "@babel/plugin-syntax-object-rest-spread" "^7.0.0" - "@babel/plugin-syntax-optional-catch-binding" "^7.0.0" - "@babel/plugin-transform-arrow-functions" "^7.0.0" - "@babel/plugin-transform-async-to-generator" "^7.1.0" - "@babel/plugin-transform-block-scoped-functions" "^7.0.0" - "@babel/plugin-transform-block-scoping" "^7.0.0" - "@babel/plugin-transform-classes" "^7.1.0" - "@babel/plugin-transform-computed-properties" "^7.0.0" - "@babel/plugin-transform-destructuring" "^7.0.0" - "@babel/plugin-transform-dotall-regex" "^7.0.0" - "@babel/plugin-transform-duplicate-keys" "^7.0.0" - "@babel/plugin-transform-exponentiation-operator" "^7.1.0" - "@babel/plugin-transform-for-of" "^7.0.0" - "@babel/plugin-transform-function-name" "^7.1.0" - "@babel/plugin-transform-literals" "^7.0.0" - "@babel/plugin-transform-modules-amd" "^7.1.0" - "@babel/plugin-transform-modules-commonjs" "^7.1.0" - "@babel/plugin-transform-modules-systemjs" "^7.0.0" - "@babel/plugin-transform-modules-umd" "^7.1.0" - "@babel/plugin-transform-new-target" "^7.0.0" - "@babel/plugin-transform-object-super" "^7.1.0" - "@babel/plugin-transform-parameters" "^7.1.0" - "@babel/plugin-transform-regenerator" "^7.0.0" - "@babel/plugin-transform-shorthand-properties" "^7.0.0" - "@babel/plugin-transform-spread" "^7.0.0" - "@babel/plugin-transform-sticky-regex" "^7.0.0" - "@babel/plugin-transform-template-literals" "^7.0.0" - "@babel/plugin-transform-typeof-symbol" "^7.0.0" - "@babel/plugin-transform-unicode-regex" "^7.0.0" - browserslist "^4.1.0" - invariant "^2.2.2" - js-levenshtein "^1.1.3" - semver "^5.3.0" - "@babel/preset-react@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.0.0.tgz#e86b4b3d99433c7b3e9e91747e2653958bc6b3c0" @@ -806,25 +739,7 @@ globals "^11.1.0" lodash "^4.17.10" -"@babel/types@^7.0.0", "@babel/types@^7.1.2": - version "7.1.3" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.1.3.tgz#3a767004567060c2f40fca49a304712c525ee37d" - integrity sha512-RpPOVfK+yatXyn8n4PB1NW6k9qjinrXrRR8ugBN8fD6hCy5RXI6PSbVqpOJBO9oSaY7Nom4ohj35feb0UR9hSA== - dependencies: - esutils "^2.0.2" - lodash "^4.17.10" - to-fast-properties "^2.0.0" - -"@babel/types@^7.1.5": - version "7.1.5" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.1.5.tgz#12fe64e91a431234b7017b4227a78cc0eec4e081" - integrity sha512-sJeqa/d9eM/bax8Ivg+fXF7FpN3E/ZmTrWbkk6r+g7biVYfALMnLin4dKijsaqEhpd2xvOGfQTkQkD31YCVV4A== - dependencies: - esutils "^2.0.2" - lodash "^4.17.10" - to-fast-properties "^2.0.0" - -"@babel/types@^7.1.6": +"@babel/types@^7.0.0", "@babel/types@^7.1.2", "@babel/types@^7.1.5", "@babel/types@^7.1.6": version "7.1.6" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.1.6.tgz#0adb330c3a281348a190263aceb540e10f04bcce" integrity sha512-DMiUzlY9DSjVsOylJssxLHSgj6tWM9PRFJOGW/RaOglVOK9nzTxoOMfTfRQXGUCUQ/HmlG2efwC+XqUEJ5ay4w== @@ -2522,11 +2437,16 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000909.tgz#a5b5b52e30e0083836632cf87e20770e646a3a4a" integrity sha512-uQ/L28utpeTyjvy7PQtGamXtfLYJrnTD3YewssFIEUfZGNRZgY8M2ttKUbTNmw5hjGfcd/NdnXXD1NBMB4P4Uw== -caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000899: +caniuse-lite@^1.0.0: version "1.0.30000909" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000909.tgz#697e8f447ca5f758e7c6cef39ec429ce18b908d3" integrity sha512-4Ix9ArKpo3s/dLGVn/el9SAk6Vn2kGhg8XeE4eRTsGEsmm9RnTkwnBsVZs7p4wA8gB+nsgP36vZWYbG8a4nYrg== +caniuse-lite@^1.0.30000899: + version "1.0.30000910" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000910.tgz#755d5181d4b006e5a2b59b1ffa05d0a0470039f5" + integrity sha512-u/nxtHGAzCGZzIxt3dA/tpSPOcirBZFWKwz1EPz4aaupnBI2XR0Rbr74g0zc6Hzy41OEM4uMoZ38k56TpYAWjQ== + capture-exit@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-1.2.0.tgz#1c5fcc489fd0ab00d4f1ac7ae1072e3173fbab6f"