Implement custom entry

[mrm007]

It became clear in seek-oss/braid-design-system#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 #313). So I wasn't convinced if it was a good idea.

This implementation loads the entry at the top of each webpack entry:

playroom/lib/makeWebpackConfig.js

Lines 42 to 46 in 3aa9edd

	entry: {
	index: [require.resolve('../src/index.js')],
	frame: [require.resolve('../src/frame.js')],
	preview: [require.resolve('../src/preview.js')],
	},

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]

🦋 Changeset detected

Latest commit: a3ca889

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

[askoufis]

My one concern with this is you may not want your global styles (for example) to end up in the playroom editor and the playroom frame/preview.

We need this for Braid's playroom, but not everyone else necessarily will. IMO it should be opt-in to apply the entry to all entrypoints, and default to just the frame and preview. This feature should actively be discouraged as a way to style the playroom editor IMO.

[mrm007]

I've added an escape hatch in 504da1a