Updated README.md

[BtS-Style]

---

Summary by cubic

Add a new Babel 7 plugin, babel-plugin-optimize-react, to clean up common React patterns and produce simpler, faster output. It hoists React.createElement, normalizes React imports, and rewrites hook array destructuring.

• New Features

  • Hoists React.createElement to a module-level const and rewrites calls.
  • Converts named React imports into destructured access from React; supports ESM and CJS (require).
  • Flattens hook array destructuring (useState, useRef, etc.) into indexed reads using a single temp reference.
  • Adds README, MIT license, and comprehensive Jest snapshot tests.

• Dependencies

  • New package: babel-plugin-optimize-react v0.0.4 with peer dependency @babel/core ^7.1.0.
  • Dev deps: jest, prettier; adds “test” script.

^{Written for commit b22c4b3. Summary will update on new commits.}

[cubic-dev-ai]

5 issues found across 9 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/babel-plugin-optimize-react/README.md">

<violation number="1" location="packages/babel-plugin-optimize-react/README.md:3">
P3: Fix the typo in the intro (`effecient` → `efficient`) to keep the README polished and professional.</violation>

<violation number="2" location="packages/babel-plugin-optimize-react/README.md:8">
P2: Use a consistent variable name in the code example (`_useState2`) so the snippet is syntactically correct and copy-pastable.</violation>
</file>

<file name="packages/babel-plugin-optimize-react/index.js">

<violation number="1" location="packages/babel-plugin-optimize-react/index.js:57">
P2: Missing explicit `return false` at the end of `isCreateReactElementCall`. Unlike all other boolean-returning helpers in this file, this function implicitly returns `undefined` on the false path.</violation>

<violation number="2" location="packages/babel-plugin-optimize-react/index.js:316">
P2: Bug: `insertAfter` in a forward loop reverses the insertion order. Each call to `parentPath.parentPath.insertAfter()` inserts immediately after the same node, so element[1]'s declaration ends up before element[0]'s. Iterate in reverse to preserve the original destructuring order.</violation>

<violation number="3" location="packages/babel-plugin-optimize-react/index.js:329">
P1: Bug: `path.getNextSibling()` is called on the CallExpression path, but `insertAfter` was done on `parentPath.parentPath` (the VariableDeclaration). The sibling lookup should be on the same node that `insertAfter` was called on.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P1: Bug: path.getNextSibling() is called on the CallExpression path, but insertAfter was done on parentPath.parentPath (the VariableDeclaration). The sibling lookup should be on the same node that insertAfter was called on.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/babel-plugin-optimize-react/index.js, line 329:

<comment>Bug: `path.getNextSibling()` is called on the CallExpression path, but `insertAfter` was done on `parentPath.parentPath` (the VariableDeclaration). The sibling lookup should be on the same node that `insertAfter` was called on.</comment>

<file context>
@@ -0,0 +1,347 @@
+              ]);
+              parentPath.parentPath.insertAfter(arrayAccessNode);
+              // Make sure we declare our new now so scope tracking continues to work
+              const arrayAccessPath = path.getNextSibling();
+              path.scope.registerDeclaration(arrayAccessPath);
+            }
</file context>

Suggested change

	const arrayAccessPath = path.getNextSibling();
	const arrayAccessPath = parentPath.parentPath.getNextSibling();

[cubic-dev-ai]

P2: Use a consistent variable name in the code example (_useState2) so the snippet is syntactically correct and copy-pastable.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/babel-plugin-optimize-react/README.md, line 8:

<comment>Use a consistent variable name in the code example (`_useState2`) so the snippet is syntactically correct and copy-pastable.</comment>

<file context>
@@ -0,0 +1,58 @@
+```js
+// Original
+var _useState = Object(react__WEBPACK_IMPORTED_MODULE_1_["useState"])(Math.random()),
+    _State2 = Object(_Users_gaearon_p_create_rreact_app_node_modules_babel_runtime_helpers_esm_sliceToArray_WEBPACK_IMPORTED_MODULE_0__["default"])(_useState, 1),
+    value = _useState2[0];
+    
</file context>

[cubic-dev-ai]

P2: Missing explicit return false at the end of isCreateReactElementCall. Unlike all other boolean-returning helpers in this file, this function implicitly returns undefined on the false path.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/babel-plugin-optimize-react/index.js, line 57:

<comment>Missing explicit `return false` at the end of `isCreateReactElementCall`. Unlike all other boolean-returning helpers in this file, this function implicitly returns `undefined` on the false path.</comment>

<file context>
@@ -0,0 +1,347 @@
+      const specifiers = path.get('specifiers');
+      if (state.hasDefaultOrNamespaceSpecifier === undefined) {
+        state.hasDefaultOrNamespaceSpecifier = false;
+      }
+
+      for (let specifier of specifiers) {
</file context>

[cubic-dev-ai]

P2: Bug: insertAfter in a forward loop reverses the insertion order. Each call to parentPath.parentPath.insertAfter() inserts immediately after the same node, so element[1]'s declaration ends up before element[0]'s. Iterate in reverse to preserve the original destructuring order.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/babel-plugin-optimize-react/index.js, line 316:

<comment>Bug: `insertAfter` in a forward loop reverses the insertion order. Each call to `parentPath.parentPath.insertAfter()` inserts immediately after the same node, so element[1]'s declaration ends up before element[0]'s. Iterate in reverse to preserve the original destructuring order.</comment>

<file context>
@@ -0,0 +1,347 @@
+            //   const counter = __ref__[0];
+
+            let arrayIndex = 0;
+            for (let element of elements) {
+              const arrayAccessNode = t.variableDeclaration(kind, [
+                t.variableDeclarator(
</file context>

[cubic-dev-ai]

P3: Fix the typo in the intro (effecient → efficient) to keep the README polished and professional.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/babel-plugin-optimize-react/README.md, line 3:

<comment>Fix the typo in the intro (`effecient` → `efficient`) to keep the README polished and professional.</comment>

<file context>
@@ -0,0 +1,58 @@
+# babel-plugin-optimize-react
+
+This Babel 7 plugin optimizes React hooks by transforming common patterns into more effecient output when using with tools such as [Create React App](https://github.com/facebook/create-react-app). For example, with this plugin the following output is optimized as shown:
+
+```js
</file context>