faceyspacey / faceyspacey/remixx
merge routes from all chunks
- Dominant language
- JavaScript
- Stars
- 12
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
after all chunks are built, we gotta statically discover the routes in each chunk, and merge them into a single non-code split route.
we also gotta remove all but the minimum info necessary to turn the resulting routes map into action creators, which is this:
```js
window.ROUTES_MANIFEST = {
HOME: {},
CHECKOUT: {
load: () => import('modules/checkout.js'),
routes: {
STEP1: {},
STEP2: {},
STEP3: {
load: () => import('modules/stripe.js'),
routes: {
CHARGE: {},
CONFIRMATION: {}
}
}
},
}
}
```
and the best way is not to generate a string we assign to `window.ROUTES_MANIFEST`. the best way is to go back to the initial chunk and apply it there, while removing callbacks from only the child chunks. eg:
```js
const routes = {
HOME: {
+ path: '/',
+ thunk: () => ...,
},
CHECKOUT: {
load: () => import('modules/checkout.js'),
routes: {
STEP1: {},
STEP2: {},
STEP3: {
load: () => import('modules/stripe.js'),
routes: {
CHARGE: {},
CONFIRMATION: {}
}
}
},
}
}
```
that way, developers dont gotta burden themselves with serving embedded JSON to the browser like they have to do with `REDUX_INITIAL_STATE`. feel me.
----
So basically, i imagine in our webpack plugin, we use babel to parse the original files that had the routes. And then we generate this, and we apply it to the entry chunk.
The challenging part is this: after each chunk is built, webpack will have transformed it. So basically, we gotta go into stats, go find the path to the original file that was the entry for each chunk, and then we transform it with babel in order to efficiently find these static rights (i.e. as opposed to using a regex). Then we merge em, and then we have to go back to the original already-transformed chunk, and make sure `routes` equals our final version instead of whatever webpack transformed. Only that last part is a question mark. We can probably do something special on the first babel pass of the entry routes, where we de-mark the `routes` variable--possibly by renaming it to `__RESPOND__routes`--so we can find it later post-babel/webpack transformation. At which point we assign it via basic string manipulation or something like this.
And that's all assuming that after the chunks have been transformed by both webpack and babel (which includes concatenation), that it's not conducive to using babel again to modify the final set of routes.
**Conclusion:** we find a way to modify the actual routes in code, instead of requiring developers to do the method where they rehydrate something from `window.RESPOND_ROUTES`
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in the webpack plugin and trace how Babel-parsed route sources and webpack stats identify each chunk's original entry. Determine whether the transformed entry chunk can be updated after all chunks are built while child chunks lose callbacks. Done means the final nested routes map is applied in the entry chunk without requiring developers to rehydrate routes from window.RESPOND_ROUTES.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, webpack
- Domain
- build-system, tooling
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100