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.

[theKashey]

6.1.1 - released.

[pcmaffey]

import { imported } from "react-imported-component/macro"; is now erroring imported is not defined
https://codesandbox.io/s/intelligent-firefly-gd67p

[theKashey]

Look like half of macro logic is not working at all, however I haven't changed it, and tests, tests are green :(

[theKashey]

This version is working - https://codesandbox.io/s/kind-https-qpx0z

1. dont forget to import "react-imported-component/macro"; in a files you have import() inside, so it could add a mark
2. looking why imported is not defined, but you dont have to use macro there...

[theKashey]

Ok. I've found the problem - babel plugins are fighting with each other - "plugin" adds all the imports before the macro, and "macro" is not adding them, as long as they are not required.
However - everything plugin does somehow interfere with plugin-macros and changes got lost.
So - I've removed macro stuff from plugin, and they are no longer fighting each other

[theKashey]

v6.2.0 would with your example out of the box - https://codesandbox.io/s/wild-framework-pby1i

[pcmaffey]

When I add import 'react-imported-component/macro' to a file, Im getting an error in my code, but am having trouble isolating/ reproducing in codesandbox. Not sure if just related to my implementation...

index.js:9 Uncaught ReferenceError: importedWrapper is not defined
    at index.js:9
    at _load (loadable.js:52)
    at Object.load (loadable.js:131)
    at Object.loadIfNeeded (loadable.js:101)
    at useImported.js:52
    at mountState (react-dom.development.js:16197)
    at Object.useState (react-dom.development.js:16665)
    at Object.useState (react.development.js:1599)
    at useLoadable (useImported.js:46)
    at Object.useImported (useImported.js:108)
    at ImportedComponent (Component.js:18)
    at renderWithHooks (react-dom.development.js:15842)
    at mountIndeterminateComponent (react-dom.development.js:18162)
    at beginWork$1 (react-dom.development.js:19380)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:466)
    at beginWork$$1 (react-dom.development.js:24597)
    at performUnitOfWork (react-dom.development.js:23529)
    at workLoopSync (react-dom.development.js:23507)
    at renderRoot (react-dom.development.js:23182)
    at scheduleUpdateOnFiber (react-dom.development.js:22680)
    at scheduleRootUpdate (react-dom.development.js:25713)
    at updateContainerAtExpirationTime (react-dom.development.js:25739)
    at updateContainer (react-dom.development.js:25839)
    at react-dom.development.js:26397
    at unbatchedUpdates (react-dom.development.js:22979)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26396)
    at render (react-dom.development.js:26487)
    at index.js:26

[theKashey]

So it's replaces import, wrapping it with importedWrapper, but not adding this helper, causing the error.
So how index.js look like?

[pcmaffey]

I'm using it with react-snap

import importedComponents from 'imported'
import { rehydrateMarks, drainHydrateMarks } from 'react-imported-component'

const rootElement = document.getElementById('root')
// wait for all the used marks to load
rehydrateMarks(window.__IMPORTED_COMPONENTS__).then(() => {
  render(<Root />, rootElement)
})

// save used marks
window.snapSaveState = () => ({
  __IMPORTED_COMPONENTS__: drainHydrateMarks(),
})

[theKashey]

... could you should me transpiled sources - I could not understand why importerWrapper is used here.

[pcmaffey]

Tried again this morning and it was working. Will close this. Thanks for all your help.

[theKashey]

Thank's for your help, and making macros real!