feat(config): Add .processCode config as a hook for complex usecases

README.md

@@ -160,6 +160,12 @@ export { themeB } from './themeB';
 // etc...
 ```
 
+## Additional Code Transformations
+
+A hook into the internal processing of code is available via the `processCode` option, which is a path to a file that exports a function that receives the code as entered into the editor, and returns the new code to be rendered.
+
+One example is [wrapping code in an IIFE for state support](https://github.com/seek-oss/playroom/issues/66).
+
 ## TypeScript Support
 
 If a `tsconfig.json` file is present in your project, static prop types are parsed using [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) to provide better autocompletion in the Playroom editor.

lib/defaultModules/processCode.js

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

lib/makeWebpackConfig.js

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

package.json

@@ -50,6 +50,11 @@
   "release": {
     "success": false
   },
+  "jest": {
+    "moduleNameMapper": {
+      "^__PLAYROOM_ALIAS__PROCESS_CODE__$": "<rootDir>/lib/defaultModules/processCode"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/seek-oss/playroom.git"

src/utils/compileJsx.ts

@@ -1,9 +1,19 @@
 import { transform } from '@babel/standalone';
+/* eslint-disable-next-line import/no-unresolved */
+/* @ts-expect-error: This import is webpack magic */
+import processCode from '__PLAYROOM_ALIAS__PROCESS_CODE__';
 
-export const compileJsx = (code: string) =>
-  transform(`<React.Fragment>${code.trim() || ''}</React.Fragment>`, {
+export const compileJsx = (code: string) => {
+  const processedCode = processCode(code);
+
+  if (typeof processedCode !== 'string') {
+    throw new Error('processCode function must return a string of code.');
+  }
+
+  return transform(`<React.Fragment>${processedCode.trim()}</React.Fragment>`, {
     presets: ['react'],
   }).code;
+};
 
 export const validateCode = (code: string) => {
   try {