Merge pull request #1087 from cozy/transpile-relative-paths

feat: Use absolute paths when transpiling
cozy · Aug 4, 2019 · 7dcc166 · 7dcc166
2 parents cef7edd + 55d79cb
commit 7dcc166
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 45 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,3 +1,5 @@
+const path = require('path')
+
 const plugins = [
   [
     'css-modules-transform',
@@ -20,7 +22,16 @@ module.exports = {
   ],
   env: {
     transpilation: {
-      plugins: plugins,
+      plugins: [
+        ...plugins,
+        [
+          './scripts/babel-transform-relative-paths-plugin.js',
+          {
+            from: path.resolve(__dirname, './react'),
+            to: 'cozy-ui/transpiled/react'
+          }
+        ]
+      ],
       ignore: ['**/*.spec.jsx', '**/*.spec.js']
     },
     test: {

diff --git a/react/examples.spec.jsx b/react/examples.spec.jsx
@@ -1,4 +1,4 @@
-import testFromStyleguidist from './testFromStyleguidist'
+import testFromStyleguidist from '../test/testFromStyleguidist'
 import path from 'path'
 
 const makeRequire = subpath => m => {

diff --git a/scripts/babel-transform-relative-paths-plugin.js b/scripts/babel-transform-relative-paths-plugin.js
@@ -0,0 +1,30 @@
+/** Used to resolve relative paths in imports and search/replace in the resolved path  */
+
+const { declare } = require('@babel/helper-plugin-utils')
+const { types: t } = require('@babel/core')
+const path = require('path')
+
+module.exports = declare((api, options) => {
+  api.assertVersion(7)
+  return {
+    name: 'transform-relative-paths',
+
+    visitor: {
+      ImportDeclaration: {
+        exit({ node }, state) {
+          if (node.source.value.startsWith('.')) {
+            const sourcePath = path.dirname(state.file.opts.filename)
+            const relativePath = node.source.value
+            const absolutePath = path.resolve(sourcePath, relativePath)
+            const replaced = absolutePath.replace(options.from, options.to)
+
+            // Do not allow absolute paths
+            if (!replaced.startsWith('/')) {
+              node.source.value = replaced
+            }
+          }
+        }
+      }
+    }
+  }
+})
diff --git a/react/testFromStyleguidist.js → test/testFromStyleguidist.js b/react/testFromStyleguidist.js → test/testFromStyleguidist.js
@@ -13,49 +13,49 @@ import pretty from 'pretty'
 
   examples-loader: https://github.com/styleguidist/react-styleguidist/blob/master/loaders/examples-loader.js
  */
-import ActionMenu from './ActionMenu'
-import Alerter from './Alerter'
-import AppTitle from './AppTitle'
-import Avatar from './Avatar'
-import Badge from './Badge'
-import BarButton from './BarButton'
-import Button from './Button'
-import ButtonAction from './ButtonAction'
-import ButtonClient from './PushClientButton'
-import BannerClient from './PushClientBanner'
-import Checkbox from './Checkbox'
-import Card from './Card'
-import InlineCard from './InlineCard'
-import Empty from './Empty'
-import Field from './Field'
-import Hero from './Hero'
-import I18n from './I18n'
-import Icon from './Icon'
-import Infos from './Infos'
-import Input from './Input'
-import InputGroup from './InputGroup'
-import IntentHeader from './IntentHeader'
-import IntentIframe from './IntentIframe'
-import IntentModal from './IntentModal'
-import IntentOpener from './IntentOpener'
-import Label from './Label'
-import ListItemText from './ListItemText'
-import Media from './Media'
-import Menu from './Menu'
-import MidEllipsis from './MidEllipsis'
-import Modal from './Modal'
-import Nav from './Nav'
-import Overlay from './Overlay'
-import Panel from './Panel'
-import Radio from './Radio'
-import SelectBox from './SelectBox'
-import SelectionBar from './SelectionBar'
-import Sidebar from './Sidebar'
-import Spinner from './Spinner'
-import Tabs from './Tabs'
-import Text from './Text'
-import Textarea from './Textarea'
-import Toggle from './Toggle'
+import ActionMenu from '../react/ActionMenu'
+import Alerter from '../react/Alerter'
+import AppTitle from '../react/AppTitle'
+import Avatar from '../react/Avatar'
+import Badge from '../react/Badge'
+import BarButton from '../react/BarButton'
+import Button from '../react/Button'
+import ButtonAction from '../react/ButtonAction'
+import ButtonClient from '../react/PushClientButton'
+import BannerClient from '../react/PushClientBanner'
+import Checkbox from '../react/Checkbox'
+import Card from '../react/Card'
+import InlineCard from '../react/InlineCard'
+import Empty from '../react/Empty'
+import Field from '../react/Field'
+import Hero from '../react/Hero'
+import I18n from '../react/I18n'
+import Icon from '../react/Icon'
+import Infos from '../react/Infos'
+import Input from '../react/Input'
+import InputGroup from '../react/InputGroup'
+import IntentHeader from '../react/IntentHeader'
+import IntentIframe from '../react/IntentIframe'
+import IntentModal from '../react/IntentModal'
+import IntentOpener from '../react/IntentOpener'
+import Label from '../react/Label'
+import ListItemText from '../react/ListItemText'
+import Media from '../react/Media'
+import Menu from '../react/Menu'
+import MidEllipsis from '../react/MidEllipsis'
+import Modal from '../react/Modal'
+import Nav from '../react/Nav'
+import Overlay from '../react/Overlay'
+import Panel from '../react/Panel'
+import Radio from '../react/Radio'
+import SelectBox from '../react/SelectBox'
+import SelectionBar from '../react/SelectionBar'
+import Sidebar from '../react/Sidebar'
+import Spinner from '../react/Spinner'
+import Tabs from '../react/Tabs'
+import Text from '../react/Text'
+import Textarea from '../react/Textarea'
+import Toggle from '../react/Toggle'
 import * as content from '../docs/fixtures/content'
 
 // Mock error otherwise there are errors with the createStylesheet function