Possible to use with create-react-app?

[pcmaffey]

CRA only has `babel-plugin-macros support (with ejecting or rewiring). But I don't see any .macro export. Not sure if a macro would even work for RIC?

Without babel, I get lots of warnings about no marks found...

[theKashey]

Then it's time to add some macros :)
From another point of view, there is no much need for marks in the majority of cases(simple import) - everything required is stored inside generated async-imports and function.toString could be used as a mark itself.

Probably I should research both ways.

[theKashey]

Keeping in mind - while macros are possible - there is no way(except craco, eject and so on) to add webpackplugin, as long as CRA decided to hide stats from users (for source-map-explorer).
However - imported would work even without bundler integration, so not a big deal...

[theKashey]

Not yet released

[theKashey]

v6.1.0 now contains macro endpoint, which would enable RIC to work with CRA

Thank you for the issue :)

[pcmaffey]

Fantastic, thank you! Now I'm trying to figure out how to use it...

I reran generate-imported script and see now it's getting import { assignImportedComponents } from 'react-imported-component/macro'.

When I use import { imported } from 'react-imported-component/macro', I still end up getting 'no marks found' warnings. Is that all I should need do?

[theKashey]

Let me spin up CRA and test

[theKashey]

• - working with lazy/imported - https://codesandbox.io/s/currying-pond-lgi0d
• - saw an error for generate-imported, and it's working after a refresh

[pcmaffey]

Confirmed, works when calling directly. If however, I use a wrapper function like:

import { imported } from "react-imported-component/macro";

const Load = component => {
  if (!component) return;
  return imported(component, {
    LoadingComponent: () => <p>Loading</p>,
    ErrorComponent: () => <p>Error</p>
  });
};

I get warnings. eg: https://codesandbox.io/s/kind-easley-80ez6
Possible to use this pattern with macro?

[theKashey]

So the problem is - macro is scoped to it's usage, however it's easy to marked helper which will "mark" everything inside it.

import { marked } from "react-imported-component/macro";

cons marked = a => a;

const async = Load(marked(() => import("./async")));
const async = Load(() => marked(import("./async")));
const async = marked(Load(() => import("./async")));
marked(() => {
 anycode
});

Another option - import "react-imported-component/macro";, and then it will convert everything in that file "as expected", but this is working a bit against macro ideology.

[theKashey]

import "react-imported-component/macro"; would patch all imports in the file it was imported in. Not yet released.