diff --git a/README.md b/README.md index e89cc6f0..b2b78ac6 100644 --- a/README.md +++ b/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. diff --git a/lib/defaultModules/entry.js b/lib/defaultModules/entry.js new file mode 100644 index 00000000..ad37c334 --- /dev/null +++ b/lib/defaultModules/entry.js @@ -0,0 +1 @@ +// this doesn't do anything by default diff --git a/lib/defaultModules/useScope.js b/lib/defaultModules/useScope.js index 2d1ec238..5d922502 100644 --- a/lib/defaultModules/useScope.js +++ b/lib/defaultModules/useScope.js @@ -1 +1,3 @@ +import '../../src/entry'; + export default () => {}; diff --git a/lib/makeWebpackConfig.js b/lib/makeWebpackConfig.js index 0179abe9..8a532d55 100644 --- a/lib/makeWebpackConfig.js +++ b/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 ), diff --git a/src/entry.js b/src/entry.js new file mode 100644 index 00000000..fce86c12 --- /dev/null +++ b/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__'); +} diff --git a/src/frame.js b/src/frame.js index 470b81da..acd63223 100644 --- a/src/frame.js +++ b/src/frame.js @@ -1,3 +1,5 @@ +import './entry'; + import { renderElement } from './render'; import Frame from './Playroom/Frame'; diff --git a/src/index.d.ts b/src/index.d.ts index 3c32b53d..791e1694 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1,4 +1,5 @@ interface PlayroomConfig { + entry?: string; components: string; outputPath: string; title?: string; diff --git a/src/index.js b/src/index.js index 4bd28845..c015329a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,5 @@ +import './entry'; + import { renderElement } from './render'; import Playroom from './Playroom/Playroom'; import { StoreProvider } from './StoreContext/StoreContext'; diff --git a/src/preview.js b/src/preview.js index efae4509..42b72ca4 100644 --- a/src/preview.js +++ b/src/preview.js @@ -1,3 +1,5 @@ +import './entry'; + import { renderElement } from './render'; import Preview from './Playroom/Preview';