Fix Parcel plugin

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  watchPathIgnorePatterns: ['__fixtures__', '__fixtures__build__'],
+  rootDir: 'packages',
+}

packages/parcel/package.json → 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": "[email protected]:smooth-code/svgr.git",
   "author": "Mario Pabon <[email protected]>",
@@ -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"

packages/parcel/src/__snapshots__/index.test.js.snap → 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,
   },

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

packages/parcel/src/index.js → 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'))
 }

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()
+  })
+})

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: '' } }
       }
 

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))