feat: Add 'scope' option for providing custom scope variables (#201)

README.md

@@ -58,7 +58,8 @@ module.exports = {
   themes: './src/themes',
   snippets: './playroom/snippets.js',
   frameComponent: './playroom/FrameComponent.js',
-  widths: [320, 375, 768, 1024],
+  scope: './playroom/useScope.js',
+  widths: [320, 768, 1024],
   port: 9000,
   openBrowser: true,
   paramType: 'search', // default is 'hash'
@@ -124,11 +125,24 @@ If your components need to be nested within custom provider components, you can
 
 ```js
 import React from 'react';
-import ThemeProvider from '../path/to/your/ThemeProvider';
+import { ThemeProvider } from '../path/to/your/theming-system';
 
-export default ({ theme, children }) => (
-  <ThemeProvider theme={theme}>{children}</ThemeProvider>
-);
+export default function FrameComponent({ theme, children }) {
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+}
+```
+
+## Custom Scope
+
+You can provide extra variables within the scope of your JSX via the `scope` option, which is a path to a file that exports a `useScope` Hook that returns a scope object. For example, if you wanted to expose a context-based `theme` variable to consumers of your Playroom:
+
+```js
+import { useTheme } from '../path/to/your/theming-system';
+
+export default function useScope() {
+  return {
+    theme: useTheme(),
+  };
 ```
 
 ## Theme Support

cypress/integration/scope.js

@@ -0,0 +1,16 @@
+import {
+  typeCode,
+  assertFirstFrameContains,
+  loadPlayroom,
+} from '../support/utils';
+
+describe('useScope', () => {
+  beforeEach(() => {
+    loadPlayroom();
+  });
+
+  it('works', () => {
+    typeCode('{{}hello()} {{}world()}', { delay: 0 });
+    assertFirstFrameContains('HELLO WORLD');
+  });
+});

cypress/projects/basic/playroom.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   components: './components',
+  scope: './useScope',
   snippets: './snippets',
   outputPath: './dist',
   openBrowser: false,

cypress/projects/basic/useScope.js

@@ -0,0 +1,4 @@
+export default () => ({
+  hello: () => 'HELLO',
+  world: () => 'WORLD',
+});

cypress/support/utils.js

@@ -19,10 +19,10 @@ export const visit = (url) =>
       );
     });
 
-export const typeCode = (code) =>
+export const typeCode = (code, { delay = 200 } = {}) =>
   getCodeEditor()
     .focused()
-    .type(code, { force: true, delay: 200 })
+    .type(code, { force: true, delay })
     .wait(WAIT_FOR_FRAME_TO_RENDER);
 
 export const formatCode = () =>

lib/defaultModules/useScope.js

@@ -0,0 +1 @@
+export default () => {};

lib/makeWebpackConfig.js

@@ -52,6 +52,9 @@ module.exports = async (playroomConfig, options) => {
         __PLAYROOM_ALIAS__FRAME_COMPONENT__: playroomConfig.frameComponent
           ? relativeResolve(playroomConfig.frameComponent)
           : require.resolve('./defaultModules/FrameComponent'),
+        __PLAYROOM_ALIAS__USE_SCOPE__: playroomConfig.scope
+          ? relativeResolve(playroomConfig.scope)
+          : require.resolve('./defaultModules/useScope'),
       },
     },
     module: {

src/Playroom/RenderCode/RenderCode.js

@@ -1,32 +1,13 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import scopeEval from 'scope-eval';
 
-export default class RenderCode extends Component {
-  static displayName = 'RenderCode';
+// eslint-disable-next-line import/no-unresolved
+import useScope from '__PLAYROOM_ALIAS__USE_SCOPE__';
 
-  static propTypes = {
-    code: PropTypes.string.isRequired,
-    scope: PropTypes.object,
-    initialState: PropTypes.object,
-  };
-
-  static defaultProps = {
-    scope: {},
-    initialState: {},
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = this.props.initialState;
-  }
-
-  render() {
-    const { code, scope } = this.props;
-
-    const el = scopeEval(code, { ...scope, React, this: this });
-
-    return el;
-  }
+export default function RenderCode({ code, scope }) {
+  return scopeEval(code, {
+    ...(useScope() ?? {}),
+    ...scope,
+    React,
+  });
 }

src/useScope.js

@@ -0,0 +1,4 @@
+/* eslint-disable-next-line import/no-unresolved */
+const useScope = require('__PLAYROOM_ALIAS__USE_SCOPE__');
+
+module.exports = useScope.default || useScope;