perf: replace rehype with svg-parser (#321)

https://npm.anvaka.com/#/view/2d/rehype https://packagephobia.now.sh/result?p=rehype https://packagephobia.now.sh/result?p=svg-parser https://npm.anvaka.com/#/view/2d/svg-parser Did not notice any changes in speed. Though startup time is probably better.
gregberge · Jul 15, 2019 · 7eb5ef6 · 7eb5ef6 · vercel · Jul 15, 2019
1 parent 06e1e99
commit 7eb5ef6
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 221 deletions.
diff --git a/package.json b/package.json
@@ -36,9 +36,6 @@
     "eslint-plugin-react": "^7.13.0",
     "jest": "^24.8.0",
     "lerna": "^3.14.1",
-    "react": "^16.8.6",
-    "rehype-parse": "^6.0.0",
-    "unified": "^7.1.0",
-    "vfile": "^4.0.1"
+    "react": "^16.8.6"
   }
 }
diff --git a/packages/hast-util-to-babel-ast/README.md b/packages/hast-util-to-babel-ast/README.md
@@ -15,14 +15,10 @@ npm install --save-dev @svgr/hast-util-to-babel-ast
 ## Usage
 
 ```js
+import { parse } from 'svg-parser';
 import toBabelAST from '@svgr/hast-util-to-babel-ast'
 
-const hastTree = unified()
-  .use(parse, {
-    fragment: true,
-    space: 'svg',
-  })
-  .parse(vfile({ path: filePath, contents: `<svg></svg>` }))
+const hastTree = parse(`<svg></svg>`)
 
 const babelTree = hastToBabelAst(hastTree)
 ```

diff --git a/packages/hast-util-to-babel-ast/src/__snapshots__/index.test.js.snap b/packages/hast-util-to-babel-ast/src/__snapshots__/index.test.js.snap
@@ -1,9 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`hast-util-to-babel-ast should correctly transform svg 1`] = `
-"<svg width=\\"88px\\" height=\\"88px\\" viewBox=\\"0 0 88 88\\" version={1.1} xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\">{
-    /* Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch */
-  }<title>{\\"Dismiss\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;"
-`;
+exports[`hast-util-to-babel-ast should correctly transform svg 1`] = `"<svg width=\\"88px\\" height=\\"88px\\" viewBox=\\"0 0 88 88\\" version={1.1} xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"><title>{\\"Dismiss\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;"`;
 
 exports[`hast-util-to-babel-ast should handle spaces and tab 1`] = `"<svg viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M25,5h-3V3c0-1.7-1.3-3-3-3H5C3.3,0,2,1.3,2,3v20c0,1.7,1.3,3,3,3h4v1c0,2.2,1.8,4,4,4h12c2.2,0,4-1.8,4-4V9        C29,6.8,27.2,5,25,5z M5,24c-0.6,0-1-0.5-1-1V3c0-0.6,0.4-1,1-1h14c0.5,0,1,0.4,1,1v2h-6.3H13H6.3c-0.6,0-1,0.4-1,1s0.4,1,1,1h3.2       C9.4,7.3,9.2,7.7,9.1,8C9.1,8,9,8,9,8H6.5c-0.6,0-1,0.4-1,1s0.4,1,1,1H9v3c-0.1,0-0.1,0-0.2,0H6.1c-0.6,0-1,0.4-1,1s0.4,1,1,1h2.7       c0.1,0,0.1,0,0.2,0V16c-0.1,0-0.1,0-0.2,0H6.1c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h2.7c0.1,0,0.1,0,0.2,0V19c-0.1,0-0.1,0-0.2,0H6.1       c-0.6,0-1,0.4-1,1s0.4,1,1,1h2.7c0.1,0,0.1,0,0.2,0v3H5z M27,27c0,1.1-0.9,2-2,2H13c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h0.7H25       c1.1,0,2,0.9,2,2V27z M25.2,19c0,0.6-0.4,1-1,1H13.4c-0.6,0-1-0.4-1-1s0.4-1,1-1h10.7C24.7,18,25.2,18.4,25.2,19z M25.2,22       c0,0.6-0.4,1-1,1H13.4c-0.6,0-1-0.4-1-1s0.4-1,1-1h10.7C24.7,21,25.2,21.4,25.2,22z M25.2,25c0,0.6-0.4,1-1,1H13.4c-0.6,0-1-0.4-1-1       s0.4-1,1-1h10.7C24.7,24,25.2,24.4,25.2,25z M12.3,11c0-0.6,0.4-1,1-1h7.3c0.6,0,1,0.4,1,1s-0.4,1-1,1h-7.3       C12.8,12,12.3,11.6,12.3,11z M16,13c0.6,0,1,0.4,1,1s-0.4,1-1,1h-2.5c-0.6,0-1-0.4-1-1s0.4-1,1-1H16z\\" /></svg>;"`;
diff --git a/packages/hast-util-to-babel-ast/src/index.test.js b/packages/hast-util-to-babel-ast/src/index.test.js
@@ -1,18 +1,9 @@
-import unified from 'unified'
-import parse from 'rehype-parse'
-import vfile from 'vfile'
+import { parse } from 'svg-parser'
 import generate from '@babel/generator'
 import hastToBabelAst from './index'
 
 function transform(code) {
-  const hastTree = unified()
-    .use(parse, {
-      fragment: true,
-      space: 'svg',
-      emitParseErrors: true,
-      duplicateAttribute: false,
-    })
-    .parse(vfile({ path: 'test.svg', contents: code }))
+  const hastTree = parse(code)
 
   const babelTree = hastToBabelAst(hastTree)
 

diff --git a/packages/plugin-jsx/README.md b/packages/plugin-jsx/README.md
@@ -26,7 +26,7 @@ npm install --save-dev @svgr/plugin-jsx
 
 `@svgr/plugin-jsx` consists in three phases:
 
-- Parsing the SVG code using [rehype](https://github.com/rehypejs/rehype)
+- Parsing the SVG code using [svg-parser](https://github.com/Rich-Harris/svg-parser)
 - Converting the [HAST](https://github.com/syntax-tree/hast) into a [Babel AST](https://github.com/babel/babel/blob/master/packages/babel-parser/ast/spec.md)
 - Applying [`@svgr/babel-preset`](../babel-preset/README.md) transformations
 

diff --git a/packages/plugin-jsx/package.json b/packages/plugin-jsx/package.json
@@ -24,8 +24,6 @@
     "@babel/core": "^7.4.5",
     "@svgr/babel-preset": "^4.3.1",
     "@svgr/hast-util-to-babel-ast": "^4.3.1",
-    "rehype-parse": "^6.0.0",
-    "unified": "^7.1.0",
-    "vfile": "^4.0.1"
+    "svg-parser": "^2.0.0"
   }
 }
diff --git a/packages/plugin-jsx/src/index.js b/packages/plugin-jsx/src/index.js
@@ -1,20 +1,11 @@
-import unified from 'unified'
-import parse from 'rehype-parse'
-import vfile from 'vfile'
+import { parse } from 'svg-parser'
 import hastToBabelAst from '@svgr/hast-util-to-babel-ast'
 import { transformFromAstSync, createConfigItem } from '@babel/core'
 import svgrBabelPreset from '@svgr/babel-preset'
 
 export default function jsxPlugin(code, config, state) {
   const filePath = state.filePath || 'unknown'
-  const hastTree = unified()
-    .use(parse, {
-      fragment: true,
-      space: 'svg',
-      emitParseErrors: true,
-      duplicateAttribute: false,
-    })
-    .parse(vfile({ path: filePath, contents: code }))
+  const hastTree = parse(code)
 
   const babelTree = hastToBabelAst(hastTree)
 

diff --git a/website/src/pages/docs/custom-transformations.mdx b/website/src/pages/docs/custom-transformations.mdx
@@ -30,7 +30,7 @@ yarn add @svgr/plugin-jsx
 
 `@svgr/plugin-jsx` consists in three phases:
 
-- Parsing the SVG code using [rehype](https://github.com/rehypejs/rehype)
+- Parsing the SVG code using [svg-parser](https://github.com/Rich-Harris/svg-parser)
 - Converting the [HAST](https://github.com/syntax-tree/hast) into a [Babel AST](https://github.com/babel/babel/blob/master/packages/babel-parser/ast/spec.md)
 - Applying [`@svgr/babel-preset`](../babel-preset/README.md) transformations
 

diff --git a/website/src/pages/docs/motivation.mdx b/website/src/pages/docs/motivation.mdx
@@ -10,6 +10,6 @@ React supports SVG out of the box, it's simpler, easier and much more powerful
 to have components instead of SVG files. Wrapped in a React component, your SVG
 is inlined in the page and you can style it using CSS.
 
-SVGR differs from other library by its solid architecture. It uses [rehype](https://github.com/rehypejs/rehype/) + [Babel](https://babeljs.io) to transform SVG code into JavaScript code.
+SVGR differs from other library by its solid architecture. It uses [svg-parser](https://github.com/Rich-Harris/svg-parser) + [Babel](https://babeljs.io) to transform SVG code into JavaScript code.
 
 SVGR is included in [create-react-app v2](https://github.com/facebook/create-react-app) and gives you the power to [import SVG directly as a React component](https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs).