Support passing an alias object to fix issues with babel module resolver

[Zaggen]

Given a .babelrc like this

{
  "presets": ["next/babel"],
  "plugins": [
    ["inline-react-svg", {
      "root": "./",
      "alias": {
        "svgs": "svgs"
       }
    }],
   ["module-resolver", {
     "root": ["./"],
     "alias": {
       "svgs": "svgs"
      }
  }]
 ]
}

Supports basically the same syntax as module-resolver but root has to be a string not an array

Closes #14

Let me know what do you think

[rohmanhm]

This one need to be merged @kesne

[ooHmartY]

the syntax here seems a bit odd. In the PR description you have something like:

["inline-react-svg", {
      "root": "./",
      "alias": {
        "svgs": "svgs"
       }
    }],

[Zaggen]

You are completely right, the plugins array is repeated, it shouldn't be there

[Zaggen]

@ooHmartY Fixed

[ooHmartY]

Awesome! Thank you 👍

[qualitydixon]

@kesne Would it be possible to get this merged. Thanks!

[kesne]

@Zaggen This looks great, any chance you can rebase on master?

[kesne]

I'll make this change when I cut a new release, no need to make it here.

[kesne]

I'm confused why you need this, can't you just define the full paths you care about in the alias?

[Zaggen]

You mean the root? I can change it to work with out, so its optional.

[kesne]

I'm mostly confused why you need this at all, can't the aliases include the fully qualified path?

[birdofpreyru]

@kesne If I may to add my 5 cents: babel-plugin-module-resolver uses root to specify the common prefix for all aliases, which is convenient when config and paths you alias are located in different places (otherwise, root should default to CWD). Moreover, root there accepts an array of paths, or glob path: this way it allows to look for aliases in multiple directories.

[kesne]

It seems like we should allow root to be defined always then, not just in conjuction with alias.

[birdofpreyru]

But without alias it is not supposed to do anything, I guess.

[Zaggen]

@kesne @birdofpreyru Then what should be the best option here? . Indeed babel-plugin-module-resolver uses root, I believe I added for compatibility reasons, thought that module uses an array as mentioned before. As @birdofpreyru mentioned, the root property is useless without any aliases. If I'm not wrong the other plugin requires that you always specify the root, right now it works like this too, so I'm not sure now if we should change this or not, let me know what you think.

[Zaggen]

@kesne Did a rebase, but I din't get a chance to properly check if it doesn't break the functionality, I'll make the changes with the root property as soon as I have time and then you can confirm if everything is ok

[hibachrach]

Anything I can do to help move this PR along? Seems like there hasn't been any activity in a while but the functionality seems super useful.

[OscarBarrett]

I've got a working branch based on this PR, just haven't gotten around to submitting it.
https://github.com/OscarBarrett/babel-plugin-inline-react-svg/tree/feature/resolve

With an example config being

['babel-plugin-inline-react-svg', {
  root: path.resolve(__dirname, 'src'),
  alias: {
    images: 'images'
  }
}],

IIRC resolve and resolveFrom didn't seem to work properly so in my branch I switched to path's version.

[HelloMyDevWorld]

@OscarBarrett Could you delivery package since airbnb is sleeping

You can bypass the problem in typescript by reexporting

import AppStore from '../static/appstore.svg'
export { AppStore }

then just
import {AppStore} from 'styles'

[ljharb]

@patsadow2 nobody's "sleeping".

[ljharb]

I've pulled in @OscarBarrett's rebased branch. This will still need tests.

[ghost]

Hi guys, as of now, a nextjs project with svg, absolute path and Typescript cant import a svg like import Logo from '~/assets/Logo.svg' and it looks like this PR tried to solve it.

Is this still happening?

[vavilondev]

when it will be merged?

[ljharb]

@vavilondev when someone posts a link to a branch that contains tests.