Implement custom entry

.changeset/strong-suits-end.md

@@ -0,0 +1,12 @@
+---
+'playroom': minor
+---
+
+Add custom entry file support
+
+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';
+```

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.

cypress/e2e/entry.cy.js

@@ -0,0 +1,36 @@
+import { assertPreviewContains, typeCode, visit } from '../support/utils';
+
+describe('entry', () => {
+  const assertGlobalCounter = () =>
+    cy.window().its('counter').should('equal', 1);
+
+  describe('loads the entry only once', () => {
+    it('for main app', () => {
+      cy.visit('http://localhost:9002');
+      // introduce some delay to make sure everything loads
+      typeCode('-');
+
+      assertGlobalCounter();
+    });
+
+    it('for frames', () => {
+      visit('http://localhost:9002');
+      // introduce some delay to make sure everything loads
+      typeCode('-');
+
+      assertGlobalCounter();
+    });
+
+    it('for preview', () => {
+      cy.visit(
+        'http://localhost:9002/preview#code=N4Igxg9gJgpiBcIC0IC%2BQ'
+      ).then(() => {
+        cy.get('[data-testid="splashscreen"]').should('not.be.visible');
+      });
+      // wait for rendering to finish to make sure everything loads
+      assertPreviewContains('-');
+
+      assertGlobalCounter();
+    });
+  });
+});

cypress/projects/typescript/entry.mjs

@@ -0,0 +1,5 @@
+import { counter, increment } from './state.mjs';
+
+export default counter;
+
+increment();

cypress/projects/typescript/playroom.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  entry: './entry.mjs',
   components: './components.ts',
   snippets: './snippets.ts',
   outputPath: './dist',

cypress/projects/typescript/state.mjs

@@ -0,0 +1,9 @@
+/* eslint-disable no-console */
+
+export let counter = 0;
+
+export function increment() {
+  window.counter = ++counter;
+
+  console.log('incremented', window.counter);
+}

lib/defaultModules/entry.js

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

lib/makeWebpackConfig.js

@@ -36,13 +36,16 @@ module.exports = async (playroomConfig, options) => {
   }
 
   const staticTypes = await getStaticTypes(playroomConfig);
+  const customEntry = playroomConfig.entry
+    ? relativeResolve(playroomConfig.entry)
+    : require.resolve('./defaultModules/entry');
 
   const ourConfig = {
     mode: options.production ? 'production' : 'development',
     entry: {
-      index: [require.resolve('../src/index.js')],
-      frame: [require.resolve('../src/frame.js')],
-      preview: [require.resolve('../src/preview.js')],
+      index: [customEntry, require.resolve('../src/index.js')],
+      frame: [customEntry, require.resolve('../src/frame.js')],
+      preview: [customEntry, require.resolve('../src/preview.js')],
     },
     output: {
       filename: '[name].[contenthash].js',

src/index.d.ts

@@ -2,6 +2,7 @@ interface PlayroomConfig {
   components: string;
   outputPath: string;
   title?: string;
+  entry?: string;
   themes?: string;
   widths?: number[];
   snippets?: Snippet[];