feat: add parcel plugin (#235)

Closes #215

jest.config.js

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

packages/parcel-plugin-svgr/.npmignore

@@ -0,0 +1,2 @@
+src/
+.*

packages/parcel-plugin-svgr/README.md

@@ -0,0 +1,25 @@
+# @svgr/parcel-plugin-svgr
+
+Parcel plugin for SVGR.
+
+```
+npm install @svgr/parcel-plugin-svgr
+```
+
+## Usage
+
+In your code:
+
+```js
+import Star from './star.svg'
+
+const App = () => (
+  <div>
+    <Star />
+  </div>
+)
+```
+
+## License
+
+MIT

packages/parcel-plugin-svgr/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@svgr/parcel-plugin-svgr",
+  "description": "SVGR Parcel plugin.",
+  "version": "4.0.4",
+  "main": "lib/index.js",
+  "repository": "[email protected]:smooth-code/svgr.git",
+  "author": "Mario Pabon <[email protected]>",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "svgr",
+    "svg",
+    "react",
+    "parcel",
+    "parcel-plugin"
+  ],
+  "engines": {
+    "node": ">=8"
+  },
+  "license": "MIT",
+  "scripts": {
+    "prebuild": "rm -rf lib/",
+    "build": "babel --config-file ../../babel.config.js -d lib --ignore \"**/*.test.js\" src",
+    "prepublishOnly": "yarn run build"
+  },
+  "peerDependencies": {
+    "parcel-bundler": "^1.10.0"
+  },
+  "dependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-transform-react-constant-elements": "^7.0.0",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-react": "^7.0.0",
+    "@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-plugin-svgr/src/__snapshots__/index.test.js.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`parcel plugin should convert file 1`] = `
+Array [
+  Object {
+    "js": "\\"use strict\\";
+
+Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require(\\"react\\"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var _ref =
+/*#__PURE__*/
+_react.default.createElement(\\"g\\", {
+  stroke: \\"#063855\\",
+  strokeWidth: 2,
+  fill: \\"none\\",
+  fillRule: \\"evenodd\\",
+  strokeLinecap: \\"square\\"
+}, _react.default.createElement(\\"path\\", {
+  d: \\"M51 37L37 51M51 51L37 37\\"
+}));
+
+var SvgIcon = function SvgIcon(props) {
+  return _react.default.createElement(\\"svg\\", _extends({
+    width: 88,
+    height: 88
+  }, props), _ref);
+};
+
+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-plugin-svgr/src/index.js

@@ -0,0 +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) {
+  // 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))