dunglas / dunglas/react-esi

Handling complex project structure

Open
#12 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
683
Forks
30
PR merge metrics
No merged PRs in 30d

Description

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](https://www.npmjs.com/package/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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.