Implement custom entry

[mrm007]

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.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: a3ca8891865edb99403a38b6d72c1226cce46a3d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
playroom	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR