Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use eslint to unwrap full dynamic import #190

Open
theKashey opened this issue Jun 20, 2020 · 0 comments
Open

Use eslint to unwrap full dynamic import #190

theKashey opened this issue Jun 20, 2020 · 0 comments
Assignees

Comments

@theKashey
Copy link
Owner

theKashey commented Jun 20, 2020

There is a cool feature in loadable-component - full dymanic imports - import('./{prop}').
However, there are problems:

  • not possible to check is that file even exists
  • no typescript support - it's always any
  • no webpack support as well

Loadable uses babel plugin to "unwrap" dynamic import into a set of "static" imports, which is still not helping with TypeScript.

Idea:

  • use eslint to "unroll" full dynamic imports into big "switches", giving a user full control and visibility, still not forcing to write the code by themselves.
  • use the same plugin to maintain the "completeness" of the list - of one more file should be added - the rule should fail.

Example

imported(() => `./pages/${x}`);
// error: blablabla, autofix
⬇️⬇️⬇️⬇️
importedSwitch(x, () => {
  switch(x) {
    case 'page1': return imported(() => `./pages/${x}`);
    case 'page2': return imported(() => `./pages/${x}`);
    default: throw
});
⬇️⬇️⬇️⬇️
// error: blah-blah, page3 is missing, autofix
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant