implement single entry

README.md

@@ -62,6 +62,7 @@ module.exports = {
 
   // Optional:
   title: 'My Awesome Library',
+  entry: './src/entry',
   themes: './src/themes',
   snippets: './playroom/snippets.js',
   frameComponent: './playroom/FrameComponent.js',
@@ -158,6 +159,15 @@ export default function useScope() {
   };
 ```
 
+## Custom Entry
+
+You can provide a custom entry file via the `entry` option, which is a path to a file that runs some code before everything else. For example, if you wanted to apply a CSS reset or other global styles, polyfills etc.:
+
+```js
+import '../path/to/your/theming-system/reset';
+import '../path/to/your/theming-system/global-styles.css';
+```
+
 ## Theme Support
 
 If your component library has multiple themes, you can customise Playroom to render every theme simultaneously via the `themes` configuration option.

lib/defaultModules/entry.js

@@ -0,0 +1 @@
+// this doesn't do anything by default

lib/defaultModules/useScope.js

@@ -1 +1,3 @@
+import '../../src/entry';
+
 export default () => {};

lib/makeWebpackConfig.js

@@ -56,6 +56,9 @@ module.exports = async (playroomConfig, options) => {
       },
       extensions: ['.mjs', '.tsx', '.ts', '.jsx', '.js', '.json'],
       alias: {
+        __PLAYROOM_ALIAS__ENTRY__: playroomConfig.entry
+          ? relativeResolve(playroomConfig.entry)
+          : require.resolve('./defaultModules/entry'),
         __PLAYROOM_ALIAS__COMPONENTS__: relativeResolve(
           playroomConfig.components
         ),

src/entry.js

@@ -0,0 +1,7 @@
+let imported = false;
+
+if (!imported) {
+  imported = true;
+  // eslint-disable-next-line import/no-unresolved
+  require('__PLAYROOM_ALIAS__ENTRY__');
+}

src/frame.js

@@ -1,3 +1,5 @@
+import './entry';
+
 import { renderElement } from './render';
 import Frame from './Playroom/Frame';
 

src/index.d.ts

@@ -1,4 +1,5 @@
 interface PlayroomConfig {
+  entry?: string;
   components: string;
   outputPath: string;
   title?: string;

src/index.js

@@ -1,3 +1,5 @@
+import './entry';
+
 import { renderElement } from './render';
 import Playroom from './Playroom/Playroom';
 import { StoreProvider } from './StoreContext/StoreContext';

src/preview.js

@@ -1,3 +1,5 @@
+import './entry';
+
 import { renderElement } from './render';
 import Preview from './Playroom/Preview';