Unseal this.refs

reactjs · Apr 24, 2024 · 4d37e63 · 4d37e63
1 parent 33b6cde
commit 4d37e63
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -175,6 +175,12 @@ class ParentComponent extends React.Component {
     return (
       <div
         ref={(current) => {
+          if (process.env.NODE_ENV !== 'production') {
+            if (Object.isSealed(this.refs)) {
+              this.refs = {};
+            }
+          }
+
           this.refs["refComponent"] = current;
         }}
       />

diff --git a/transforms/__testfixtures__/string-refs/literal-with-owner.output.js b/transforms/__testfixtures__/string-refs/literal-with-owner.output.js
@@ -4,19 +4,49 @@ class ParentComponent extends React.Component {
   render() {
     return (
       <div ref={current => {
+        if (process.env.NODE_ENV !== 'production') {
+          if (Object.isSealed(this.refs)) {
+            this.refs = {};
+          }
+        }
+
         this.refs['P'] = current;
       }} id="P">
         <div ref={current => {
+          if (process.env.NODE_ENV !== 'production') {
+            if (Object.isSealed(this.refs)) {
+              this.refs = {};
+            }
+          }
+
           this.refs['P_P1'] = current;
         }} id="P_P1">
           <span ref={current => {
+            if (process.env.NODE_ENV !== 'production') {
+              if (Object.isSealed(this.refs)) {
+                this.refs = {};
+              }
+            }
+
             this.refs['P_P1_C1'] = current;
           }} id="P_P1_C1" />
           <span ref={current => {
+            if (process.env.NODE_ENV !== 'production') {
+              if (Object.isSealed(this.refs)) {
+                this.refs = {};
+              }
+            }
+
             this.refs['P_P1_C2'] = current;
           }} id="P_P1_C2" />
         </div>
         <div ref={current => {
+          if (process.env.NODE_ENV !== 'production') {
+            if (Object.isSealed(this.refs)) {
+              this.refs = {};
+            }
+          }
+
           this.refs['P_OneOff'] = current;
         }} id="P_OneOff" />
       </div>

diff --git a/transforms/__testfixtures__/string-refs/literal-without-owner.output.js b/transforms/__testfixtures__/string-refs/literal-without-owner.output.js
@@ -1,5 +1,11 @@
 import * as React from "react";
 
 <div ref={current => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (Object.isSealed(this.refs)) {
+      this.refs = {};
+    }
+  }
+
   this.refs['bad'] = current;
 }} />;
diff --git a/transforms/__testfixtures__/string-refs/typescript/literal-with-owner.output.tsx b/transforms/__testfixtures__/string-refs/typescript/literal-with-owner.output.tsx
@@ -8,19 +8,49 @@ class ParentComponent extends React.Component {
   render() {
     return (
       <div ref={current => {
+        if (process.env.NODE_ENV !== 'production') {
+          if (Object.isSealed(this.refs)) {
+            this.refs = {};
+          }
+        }
+
         this.refs['P'] = current;
       }} id="P">
         <div ref={current => {
+          if (process.env.NODE_ENV !== 'production') {
+            if (Object.isSealed(this.refs)) {
+              this.refs = {};
+            }
+          }
+
           this.refs['P_P1'] = current;
         }} id="P_P1">
           <span ref={current => {
+            if (process.env.NODE_ENV !== 'production') {
+              if (Object.isSealed(this.refs)) {
+                this.refs = {};
+              }
+            }
+
             this.refs['P_P1_C1'] = current;
           }} id="P_P1_C1" />
           <span ref={current => {
+            if (process.env.NODE_ENV !== 'production') {
+              if (Object.isSealed(this.refs)) {
+                this.refs = {};
+              }
+            }
+
             this.refs['P_P1_C2'] = current;
           }} id="P_P1_C2" />
         </div>
         <div ref={current => {
+          if (process.env.NODE_ENV !== 'production') {
+            if (Object.isSealed(this.refs)) {
+              this.refs = {};
+            }
+          }
+
           this.refs['P_OneOff'] = current;
         }} id="P_OneOff" />
       </div>

diff --git a/transforms/string-refs.js b/transforms/string-refs.js
@@ -40,11 +40,56 @@ export default (file, api, options) => {
         // Maybe JSCodeShift has such a helper as well?
         const currentIdentifierName = "current";
         valuePath.replace(
-          // {(current) => { this.refs[valuePath.node.value] = current }}
+          // {(current) => {}}
           j.jsxExpressionContainer(
             j.arrowFunctionExpression(
               [j.identifier(currentIdentifierName)],
               j.blockStatement([
+                // if (process.env.NODE_ENV !== 'production')
+                j.ifStatement(
+                  j.binaryExpression(
+                    "!==",
+                    j.memberExpression(
+                      j.memberExpression(
+                        j.identifier("process"),
+                        j.identifier("env")
+                      ),
+                      j.identifier("NODE_ENV")
+                    ),
+                    j.stringLiteral("production")
+                  ),
+                  j.blockStatement([
+                    // if (Object.isSealed(this.refs))
+                    j.ifStatement(
+                      j.callExpression(
+                        j.memberExpression(
+                          j.identifier("Object"),
+                          j.identifier("isSealed")
+                        ),
+                        [
+                          j.memberExpression(
+                            j.thisExpression(),
+                            j.identifier("refs")
+                          ),
+                        ]
+                      ),
+                      j.blockStatement([
+                        // this.refs = {}
+                        j.expressionStatement(
+                          j.assignmentExpression(
+                            "=",
+                            j.memberExpression(
+                              j.thisExpression(),
+                              j.identifier("refs")
+                            ),
+                            j.objectExpression([])
+                          )
+                        ),
+                      ])
+                    ),
+                  ])
+                ),
+                // this.refs[valuePath.node.value] = current
                 j.expressionStatement(
                   j.assignmentExpression(
                     "=",