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

Handling complex project structure #12

Open
VincentCharpentier opened this issue Jan 29, 2020 · 1 comment
Open

Handling complex project structure #12

VincentCharpentier opened this issue Jan 29, 2020 · 1 comment

Comments

@VincentCharpentier
Copy link

Two pieces of the README first:

withESI usage:

const MyFragmentESI = withESI(MyFragment, 'MyFragment');
// The second parameter is an unique ID identifying this fragment.
// If you use different instances of the same component, use a different ID per instance.

serving the fragments:

// "fragmentID" is the second parameter passed to the "WithESI" HOC, the root component used for this fragment must be returned
fragmentID => require(`./components/${fragmentID}`).default) 

First though is that the fragmentID is more than just an ID, from this example it seems like it needs to match the filename for the dynamic require to work properly.
If I end up using different ID per instance as suggested I don't know how I'm gonna map the fragmentID to the relevant import path.

I'm working with a very complex project structure with custom resolvers using environment variables so I don't have a flat /components/* folder.

Is there a way to build a map fragmentID => requirePath before starting the server ?

I've seen such algorithm with gettext-extractor where we look for every call of the "getText" function in the source files.
Something like this:

JsExtractors.callExpression(['getText'], {
    arguments: {
      text: 0,
      context: 1,
    },
  })

We could look for every usage of withESI maybe ?

Maybe I'm missing something obvious to solve this, let me know

@dunglas
Copy link
Owner

dunglas commented Apr 4, 2020

Actually, you can replace this closure by whatever you want. The contract here is that you'll get the fragmentID as parameter (extracted from the URL of the ESI), and you must return an instance of a React component for this id. The instantiation logic can be as complex as you need.

For clarity, I used a simple require call in the docs, but it's not required at all.

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

2 participants