diff --git a/compiler/packages/babel-plugin-react-forget/src/Entrypoint/Program.ts b/compiler/packages/babel-plugin-react-forget/src/Entrypoint/Program.ts index 52c2b2ad31..cbcf52fe31 100644 --- a/compiler/packages/babel-plugin-react-forget/src/Entrypoint/Program.ts +++ b/compiler/packages/babel-plugin-react-forget/src/Entrypoint/Program.ts @@ -270,6 +270,20 @@ export function compileProgram( // Main traversal to compile with Forget program.traverse( { + ClassDeclaration(node: NodePath) { + // Don't visit functions defined inside classes, because they + // can reference `this` which is unsafe for compilation + node.skip(); + return; + }, + + ClassExpression(node: NodePath) { + // Don't visit functions defined inside classes, because they + // can reference `this` which is unsafe for compilation + node.skip(); + return; + }, + FunctionDeclaration( fn: NodePath, pass: CompilerPass diff --git a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/class-component-with-render-helper.expect.md b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/class-component-with-render-helper.expect.md new file mode 100644 index 0000000000..11abaa66ee --- /dev/null +++ b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/class-component-with-render-helper.expect.md @@ -0,0 +1,41 @@ + +## Input + +```javascript +// @compilationMode(infer) +class Component { + _renderMessage = () => { + const Message = () => { + const message = this.state.message; + return
{message}
; + }; + return ; + }; + + render() { + return this._renderMessage(); + } +} + +``` + +## Code + +```javascript +// @compilationMode(infer) +class Component { + _renderMessage = () => { + const Message = () => { + const message = this.state.message; + return
{message}
; + }; + return ; + }; + + render() { + return this._renderMessage(); + } +} + +``` + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/class-component-with-render-helper.js b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/class-component-with-render-helper.js new file mode 100644 index 0000000000..90cba5b265 --- /dev/null +++ b/compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/class-component-with-render-helper.js @@ -0,0 +1,14 @@ +// @compilationMode(infer) +class Component { + _renderMessage = () => { + const Message = () => { + const message = this.state.message; + return
{message}
; + }; + return ; + }; + + render() { + return this._renderMessage(); + } +} diff --git a/compiler/packages/sprout/src/SproutTodoFilter.ts b/compiler/packages/sprout/src/SproutTodoFilter.ts index 9618e38042..985392e954 100644 --- a/compiler/packages/sprout/src/SproutTodoFilter.ts +++ b/compiler/packages/sprout/src/SproutTodoFilter.ts @@ -450,6 +450,7 @@ const skipFilter = new Set([ "infer-function-expression-component", "infer-function-expression-React-memo-gating", "infer-skip-components-without-hooks-or-jsx", + "class-component-with-render-helper", ]); export default skipFilter;