feat(v4): new architecture

- Replace h2x by rehype + babel
- Move jsx, prettier and svgo into separated plugins

BREAKING CHANGE:

- `template` option must now returns a Babel AST
- `@svgr/core` does not include svgo & prettier by default

Author: gregberge

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     jest: true,
   },
   rules: {
+    'no-plusplus': 'off',
     'class-methods-use-this': 'off',
     'no-param-reassign': 'off',
     'no-use-before-define': 'off',

packages/babel-plugin-add-jsx-attribute/.npmignore

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

packages/babel-plugin-add-jsx-attribute/README.md

@@ -0,0 +1,37 @@
+# @svgr/babel-plugin-add-jsx-attribute
+
+## Install
+
+```
+npm install --save-dev @svgr/babel-plugin-add-jsx-attribute
+```
+
+## Usage
+
+**.babelrc**
+
+```json
+{
+  "plugins": [
+    [
+      "@svgr/babel-plugin-add-jsx-attribute",
+      {
+        "elements": ["svg"],
+        "attributes": [
+          {
+            "name": "width",
+            "value": "200",
+            "spread": false,
+            "literal": false,
+            "position": "end"
+          }
+        ]
+      }
+    ]
+  ]
+}
+```
+
+## License
+
+MIT

packages/babel-plugin-add-jsx-attribute/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@svgr/babel-plugin-add-jsx-attribute",
+  "description": "Add JSX attribute",
+  "version": "3.1.0",
+  "main": "lib/index.js",
+  "repository": "git@github.com:smooth-code/svgr.git",
+  "author": "Greg Bergé <berge.greg@gmail.com>",
+  "keywords": [
+    "babel-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"
+  }
+}

packages/babel-plugin-add-jsx-attribute/src/index.js

@@ -0,0 +1,79 @@
+const positionMethod = {
+  start: 'unshiftContainer',
+  end: 'pushContainer',
+}
+
+const addJSXAttribute = ({ types: t, template }, opts) => {
+  function getAttributeValue({ literal, value }) {
+    if (typeof value === 'boolean') {
+      return t.jsxExpressionContainer(t.booleanLiteral(value))
+    }
+
+    if (typeof value === 'number') {
+      return t.jsxExpressionContainer(t.numericLiteral(value))
+    }
+
+    if (typeof value === 'string' && literal) {
+      return t.jsxExpressionContainer(template.ast(value).expression)
+    }
+
+    if (typeof value === 'string') {
+      return t.stringLiteral(value)
+    }
+
+    return null
+  }
+
+  function getAttribute({ spread, name, value, literal }) {
+    if (spread) {
+      return t.jsxSpreadAttribute(t.identifier(name))
+    }
+
+    return t.jsxAttribute(
+      t.jsxIdentifier(name),
+      getAttributeValue({ value, literal }),
+    )
+  }
+
+  return {
+    visitor: {
+      JSXOpeningElement(path) {
+        if (!opts.elements.includes(path.node.name.name)) return
+
+        opts.attributes.forEach(
+          ({
+            name,
+            value = null,
+            spread = false,
+            literal = false,
+            position = 'end',
+          }) => {
+            const method = positionMethod[position]
+            const newAttribute = getAttribute({ spread, name, value, literal })
+            const attributes = path.get('attributes')
+
+            const isEqualAttribute = attribute => {
+              if (spread) {
+                return attribute.get('argument').isIdentifier({ name })
+              }
+
+              return attribute.get('name').isJSXIdentifier({ name })
+            }
+
+            const replaced = attributes.some(attribute => {
+              if (!isEqualAttribute(attribute)) return false
+              attribute.replaceWith(newAttribute)
+              return true
+            })
+
+            if (!replaced) {
+              path[method]('attributes', newAttribute)
+            }
+          },
+        )
+      },
+    },
+  }
+}
+
+export default addJSXAttribute

packages/babel-plugin-add-jsx-attribute/src/index.test.js

@@ -0,0 +1,97 @@
+import { transform } from '@babel/core'
+import plugin from '.'
+
+const testPlugin = (code, options) => {
+  const result = transform(code, {
+    plugins: ['@babel/plugin-syntax-jsx', [plugin, options]],
+    configFile: false,
+  })
+
+  return result.code
+}
+
+describe('plugin', () => {
+  it('should add simple attribute', () => {
+    expect(
+      testPlugin('<div />', {
+        elements: ['div'],
+        attributes: [{ name: 'disabled' }],
+      }),
+    ).toMatchInlineSnapshot(`"<div disabled />;"`)
+  })
+
+  it('should add attribute with value', () => {
+    expect(
+      testPlugin('<div />', {
+        elements: ['div'],
+        attributes: [{ name: 'disabled', value: true }],
+      }),
+    ).toMatchInlineSnapshot(`"<div disabled={true} />;"`)
+    expect(
+      testPlugin('<div />', {
+        elements: ['div'],
+        attributes: [{ name: 'disabled', value: 'true' }],
+      }),
+    ).toMatchInlineSnapshot(`"<div disabled=\\"true\\" />;"`)
+
+    expect(
+      testPlugin('<div />', {
+        elements: ['div'],
+        attributes: [{ name: 'disabled', value: 200 }],
+      }),
+    ).toMatchInlineSnapshot(`"<div disabled={200} />;"`)
+  })
+
+  it('should add literal attribute', () => {
+    expect(
+      testPlugin('<div />', {
+        elements: ['div'],
+        attributes: [{ name: 'ref', value: 'ref', literal: true }],
+      }),
+    ).toMatchInlineSnapshot(`"<div ref={ref} />;"`)
+
+    expect(
+      testPlugin('<div />', {
+        elements: ['div'],
+        attributes: [{ name: 'ref', value: 'ref ? ref : null', literal: true }],
+      }),
+    ).toMatchInlineSnapshot(`"<div ref={ref ? ref : null} />;"`)
+  })
+
+  it('should add spread attribute', () => {
+    expect(
+      testPlugin('<div foo><span /></div>', {
+        elements: ['div'],
+        attributes: [
+          {
+            spread: true,
+            name: 'props',
+            position: 'start',
+          },
+        ],
+      }),
+    ).toMatchInlineSnapshot(`"<div {...props} foo><span /></div>;"`)
+
+    expect(
+      testPlugin('<div><span foo="bar" /></div>', {
+        elements: ['span'],
+        attributes: [
+          {
+            spread: true,
+            name: 'props',
+            position: 'end',
+          },
+        ],
+      }),
+    ).toMatchInlineSnapshot(`"<div><span foo=\\"bar\\" {...props} /></div>;"`)
+  })
+
+  it('should replace attribute', () => {
+    expect(
+      testPlugin('<div disabled />', {
+        elements: ['div'],
+        attributes: [{ name: 'disabled', value: false }],
+      }),
+    ).toMatchInlineSnapshot(`"<div disabled={false} />;"`)
+  })
+})

packages/babel-plugin-remove-jsx-attribute/.npmignore

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

packages/babel-plugin-remove-jsx-attribute/README.md

@@ -0,0 +1,29 @@
+# @svgr/babel-plugin-remove-jsx-attribute
+
+## Install
+
+```
+npm install --save-dev @svgr/babel-plugin-remove-jsx-attribute
+```
+
+## Usage
+
+**.babelrc**
+
+```json
+{
+  "plugins": [
+    [
+      "@svgr/babel-plugin-remove-jsx-attribute",
+      {
+        "elements": ["svg"],
+        "attributes": [{ "name": "width" }, { "name": "height" }]
+      }
+    ]
+  ]
+}
+```
+
+## License
+
+MIT

packages/babel-plugin-remove-jsx-attribute/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@svgr/babel-plugin-remove-jsx-attribute",
+  "description": "Remove JSX attribute",
+  "version": "3.1.0",
+  "main": "lib/index.js",
+  "repository": "git@github.com:smooth-code/svgr.git",
+  "author": "Greg Bergé <berge.greg@gmail.com>",
+  "keywords": [
+    "babel-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"
+  }
+}

packages/babel-plugin-remove-jsx-attribute/src/index.js

@@ -0,0 +1,15 @@
+const removeJSXAttribute = (api, opts) => ({
+  visitor: {
+    JSXOpeningElement(path) {
+      if (!opts.elements.includes(path.node.name.name)) return
+
+      path.get('attributes').forEach(attribute => {
+        if (opts.attributes.includes(attribute.node.name.name)) {
+          attribute.remove()
+        }
+      })
+    },
+  },
+})
+
+export default removeJSXAttribute