Import rewrites

[sapegin]

The idea is to make example’s code more real-life by allowing you to import components like the user would import them in their app, including all dependencies like React. For example:

import React from 'react'
import Button from 'my-awesome-library/Button'

Technically it's not needed because both React and the current component are available in the example context by default, but it will make example easier to use, because users could copy code directly to their apps.

To make this possible we'll need to add a new config option like:

rewriteRequire(module) {
  return module.replace('my-awesome-library', '../')
}

The only think I'm not sure about is what to do with relative path.

[okonet]

I’m wondering if we could detect the import and use it instead the provided by the context?

Can you elaborate on relative path?

[sapegin]

The relative path: we'll need to replace import Button from 'mylib/Button' with something like const Button = require('../../Button') where ../.. is a relative path from our example Markdown file to the module we're importing.

I’m wondering if we could detect the import and use it instead the provided by the context?

Can you elaborate on that? :-)

[okonet]

Can we use aliases in webpack for that?

I mean: if the import is present, it overwrites what context would give you. Making it fault tolerant but at the same time not required.

[sapegin]

Yeah, I think that's what we're going to use in the end ;-)

If by context you mean the context config option (and add React to to it by default), then that's how it's supposed to work, yeah.