Implement custom entry - Githubissues

It became clear in https://github.com/seek-oss/braid-design-system/pull/1448 that Playroom needed...

to provide a way to import the reset as part of every code path,
to do it once per bundle, and
to do avoid the dual ESM/CJS package hazard.

After scanning the module graph, here are the relavant code paths:

entry src/index.js

``` 1. import 'src/Playroom/Playroom.tsx' => import 'src/Playroom/Frames/Frames.tsx' => import 'src/Playroom/Frames/frameSrc.js' => require('__PLAYROOM_ALIAS__FRAME_COMPONENT__') 2. require('src/themes') => require('__PLAYROOM_ALIAS__THEMES__') 3. require('src/components') => require('__PLAYROOM_ALIAS__COMPONENTS__') 4. require('./snippets') => require('__PLAYROOM_ALIAS__SNIPPETS__') ```

entry src/frame.js

``` 1. import 'src/Playroom/Frame.tsx' => import 'src/RenderCode/RenderCode.js' => import '__PLAYROOM_ALIAS__USE_SCOPE__' 2. require('src/themes') => require('__PLAYROOM_ALIAS__THEMES__') 3. require('src/components') => require('__PLAYROOM_ALIAS__COMPONENTS__') 4. require('src/frameComponent') => require('__PLAYROOM_ALIAS__FRAME_COMPONENT__') ```

entry src/preview.js

``` 1. import 'src/Playroom/Preview.tsx' => import 'src/RenderCode/RenderCode.js' => import '__PLAYROOM_ALIAS__USE_SCOPE__' 2. require('src/themes') => require('__PLAYROOM_ALIAS__THEMES__') 3. require('src/components') => require('__PLAYROOM_ALIAS__COMPONENTS__') 4. require('src/frameComponent') => require('__PLAYROOM_ALIAS__FRAME_COMPONENT__') ```

My first idea was to import a module at the top of each of the webpack-defined __PLAYROOM_ALIAS__*__ aliases. That's because we might not know which one loads first, if we were to convert the code to ESM/TypeScript (which might happen in https://github.com/seek-oss/playroom/pull/313). So I wasn't convinced if it was a good idea.

This implementation loads the entry at the top of each webpack entry: https://github.com/seek-oss/playroom/blob/3aa9edde7269ad8699e2afdf3bb2110126ef95b5/lib/makeWebpackConfig.js#L42-L46

This ensures the entry is imported only once per bundle, which is what we want. It also avoids the dual ESM/CJS package hazard, because the entry is loaded by webpack, not by our own code which can be import or require calls.

seek-oss / playroom

Implement custom entry #325

🦋 Changeset detected