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]

Feel like we should show the API in the changeset, and be a bit more clear about its usage.

[askoufis]

Suggested change

	entry: './src/entry',
	entry: './src/entry.js',

[askoufis]

Suggested change

	```js
	import '../path/to/your/theming-system/reset';
	import '../path/to/your/theming-system/global-styles.css';
	```
	```js
	// playroom.config.js
	entry: './src/entry.js',
	```
	```js
	// ./src/entry.js
	import '../path/to/your/theming-system/reset';
	import '../path/to/your/theming-system/global-styles.css';
	```

[askoufis]

Suggested change

	```js
	import '../path/to/your/theming-system/reset';
	import '../path/to/your/theming-system/global-styles.css';
	```
	```js
	// playroom.config.js
	entry: './src/entry.js',
	```
	```js
	// ./src/entry.js
	import '../path/to/your/theming-system/reset';
	import '../path/to/your/theming-system/global-styles.css';
	```