|
| 1 | +diff --git a/node_modules/playroom/README.md b/node_modules/playroom/README.md |
| 2 | +index 6c82bbe..f05b80b 100644 |
| 3 | +--- a/node_modules/playroom/README.md |
| 4 | ++++ b/node_modules/playroom/README.md |
| 5 | +@@ -160,6 +160,12 @@ export { themeB } from './themeB'; |
| 6 | + // etc... |
| 7 | + ``` |
| 8 | + |
| 9 | ++## Additional Code Transformations |
| 10 | ++ |
| 11 | ++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. |
| 12 | ++ |
| 13 | ++One example is [wrapping code in an IIFE for state support](https://github.com/seek-oss/playroom/issues/66). |
| 14 | ++ |
| 15 | + ## TypeScript Support |
| 16 | + |
| 17 | + 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. |
| 18 | +diff --git a/node_modules/playroom/lib/defaultModules/processCode.js b/node_modules/playroom/lib/defaultModules/processCode.js |
| 19 | +new file mode 100644 |
| 20 | +index 0000000..36a436c |
| 21 | +--- /dev/null |
| 22 | ++++ b/node_modules/playroom/lib/defaultModules/processCode.js |
| 23 | +@@ -0,0 +1 @@ |
| 24 | ++export default code => code; |
| 25 | +diff --git a/node_modules/playroom/lib/makeWebpackConfig.js b/node_modules/playroom/lib/makeWebpackConfig.js |
| 26 | +index 56defa7..1e7cf3b 100644 |
| 27 | +--- a/node_modules/playroom/lib/makeWebpackConfig.js |
| 28 | ++++ b/node_modules/playroom/lib/makeWebpackConfig.js |
| 29 | +@@ -54,6 +54,9 @@ module.exports = async (playroomConfig, options) => { |
| 30 | + __PLAYROOM_ALIAS__USE_SCOPE__: playroomConfig.scope |
| 31 | + ? relativeResolve(playroomConfig.scope) |
| 32 | + : require.resolve('./defaultModules/useScope'), |
| 33 | ++ __PLAYROOM_ALIAS__PROCESS_CODE__: playroomConfig.processCode |
| 34 | ++ ? relativeResolve(playroomConfig.processCode) |
| 35 | ++ : require.resolve('./defaultModules/processCode'), |
| 36 | + }, |
| 37 | + }, |
| 38 | + module: { |
| 39 | +diff --git a/node_modules/playroom/src/utils/compileJsx.ts b/node_modules/playroom/src/utils/compileJsx.ts |
| 40 | +index dadea77..82d080c 100644 |
| 41 | +--- a/node_modules/playroom/src/utils/compileJsx.ts |
| 42 | ++++ b/node_modules/playroom/src/utils/compileJsx.ts |
| 43 | +@@ -1,9 +1,18 @@ |
| 44 | + import { transform } from '@babel/standalone'; |
| 45 | ++/* eslint-disable-next-line import/no-unresolved */ |
| 46 | ++import processCode from '__PLAYROOM_ALIAS__PROCESS_CODE__'; |
| 47 | + |
| 48 | +-export const compileJsx = (code: string) => |
| 49 | +- transform(`<React.Fragment>${code.trim() || ''}</React.Fragment>`, { |
| 50 | ++export const compileJsx = (code: string) => { |
| 51 | ++ const processedCode = processCode(code); |
| 52 | ++ |
| 53 | ++ if (typeof processedCode !== 'string') { |
| 54 | ++ throw new Error('processCode function must return a string of code.'); |
| 55 | ++ } |
| 56 | ++ |
| 57 | ++ return transform(`<React.Fragment>${processedCode.trim()}</React.Fragment>`, { |
| 58 | + presets: ['react'], |
| 59 | + }).code; |
| 60 | ++} |
| 61 | + |
| 62 | + export const validateCode = (code: string) => { |
| 63 | + try { |
| 64 | +diff --git a/node_modules/playroom/src/utils/formatting.ts b/node_modules/playroom/src/utils/formatting.ts |
| 65 | +index a1819bf..70ac15c 100644 |
| 66 | +--- a/node_modules/playroom/src/utils/formatting.ts |
| 67 | ++++ b/node_modules/playroom/src/utils/formatting.ts |
| 68 | +@@ -133,10 +133,10 @@ export const formatAndInsert = ({ |
| 69 | + snippet, |
| 70 | + }); |
| 71 | + |
| 72 | +- return formatCode({ |
| 73 | ++ return { |
| 74 | + code: newCode, |
| 75 | + cursor: updatedCursor, |
| 76 | +- }); |
| 77 | ++ }; |
| 78 | + }; |
| 79 | + |
| 80 | + export const formatForInsertion = ({ |
0 commit comments