feat(docz-core): add svgr built-in

doczjs · Sep 28, 2018 · 1b19340 · 1b19340
1 parent f8ff2ac
commit 1b19340
Show file tree

Hide file tree

Showing 7 changed files with 2,272 additions and 32 deletions.
diff --git a/packages/babel-plugin-named-asset-import/index.js b/packages/babel-plugin-named-asset-import/index.js
@@ -0,0 +1,60 @@
+const { extname } = require('path')
+
+function namedAssetImportPlugin({ types: t }) {
+  const visited = new WeakSet()
+
+  return {
+    visitor: {
+      ImportDeclaration(path, { opts: { loaderMap } }) {
+        const sourcePath = path.node.source.value
+        const ext = extname(sourcePath).substr(1)
+
+        if (visited.has(path.node) || sourcePath.indexOf('!') !== -1) {
+          return
+        }
+
+        if (loaderMap[ext]) {
+          path.replaceWithMultiple(
+            path.node.specifiers.map(specifier => {
+              if (t.isImportDefaultSpecifier(specifier)) {
+                const newDefaultImport = t.importDeclaration(
+                  [
+                    t.importDefaultSpecifier(
+                      t.identifier(specifier.local.name)
+                    ),
+                  ],
+                  t.stringLiteral(sourcePath)
+                )
+
+                visited.add(newDefaultImport)
+                return newDefaultImport
+              }
+
+              const newImport = t.importDeclaration(
+                [
+                  t.importSpecifier(
+                    t.identifier(specifier.local.name),
+                    t.identifier(specifier.imported.name)
+                  ),
+                ],
+                t.stringLiteral(
+                  loaderMap[ext][specifier.imported.name]
+                    ? loaderMap[ext][specifier.imported.name].replace(
+                        /\[path\]/,
+                        sourcePath
+                      )
+                    : sourcePath
+                )
+              )
+
+              visited.add(newImport)
+              return newImport
+            })
+          )
+        }
+      },
+    },
+  }
+}
+
+module.exports = namedAssetImportPlugin
diff --git a/packages/babel-plugin-named-asset-import/package.json b/packages/babel-plugin-named-asset-import/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "babel-plugin-named-asset-import",
+  "version": "0.11.1",
+  "license": "MIT",
+  "main": "index.js",
+  "peerDependencies": {
+    "@babel/core": "^7.1.0"
+  }
+}
diff --git a/packages/docz-core/package.json b/packages/docz-core/package.json
@@ -29,8 +29,10 @@
     "@mdx-js/mdx": "^0.15.2",
     "@mdx-js/mdxast": "^0.15.0",
     "@sindresorhus/slugify": "^0.3.0",
+    "@svgr/webpack": "^2.4.1",
     "art-template": "^4.13.0",
     "babel-loader": "^8.0.2",
+    "babel-plugin-named-asset-import": "^0.11.1",
     "babel-preset-docz": "^0.11.1",
     "babylon": "^6.18.0",
     "cache-loader": "^1.2.2",
@@ -74,9 +76,9 @@
     "remark-slug": "^5.1.0",
     "resolve": "^1.8.1",
     "signale": "^1.3.0",
+    "terser-webpack-plugin": "^1.1.0",
     "titleize": "^1.0.1",
     "to-vfile": "^5.0.1",
-    "terser-webpack-plugin": "^1.1.0",
     "unified": "^7.0.0",
     "unist-util-find": "^1.0.1",
     "unist-util-is": "^2.1.2",

diff --git a/packages/docz-core/src/bundlers/webpack/loaders.ts b/packages/docz-core/src/bundlers/webpack/loaders.ts
@@ -42,12 +42,7 @@ export const setupHappypack = (config: Config, args: Args, babelrc: any) => {
       },
       {
         loader: require.resolve('babel-loader'),
-        options: {
-          ...babelrc,
-          plugins: babelrc.plugins
-            .filter((p: string) => /react\-hot\-loader\/babel/.test(p))
-            .filter((p: string) => /babel\-plugin\-react\-docgen/.test(p)),
-        },
+        options: babelrc,
       },
     ].filter(Boolean),
   }

diff --git a/packages/docz-core/src/utils/babel-config.ts b/packages/docz-core/src/utils/babel-config.ts
@@ -28,15 +28,26 @@ export const getBabelConfig = async (
     ],
   ]
 
-  const plugins: any[] = !isProd
-    ? [require.resolve('react-hot-loader/babel')]
-    : []
+  const defaultPlugins: any[] = [
+    [
+      require.resolve('babel-plugin-named-asset-import'),
+      {
+        loaderMap: {
+          svg: {
+            ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
+          },
+        },
+      },
+    ],
+  ]
 
   const config = merge(localBabelRc, {
     presets,
-    plugins,
     cacheDirectory: !args.debug,
     babelrc: false,
+    plugins: defaultPlugins.concat(
+      !isProd ? [require.resolve('react-hot-loader/babel')] : []
+    ),
   })
 
   const reduce = Plugin.reduceFromPlugins<BabelRC>(args.plugins)

diff --git a/packages/docz-plugin-svgr/README.md b/packages/docz-plugin-svgr/README.md
@@ -1,3 +1,3 @@
-# docz-plugin-svgr [MOVED]
+# docz-plugin-svgr [DEPRECATED]
 
-In order to improve monorepo performance, we moved it to [another repo](https://github.com/pedronauck/docz-plugin-svgr)!
+This plugin is deprecated. Now svgr loader is built in docz.