babel-plugin-react-turbo - npm Package Compare versions

Comparing version 0.1.13 to 0.1.14

build/src/example/code.js

@@ -30,2 +30,8 @@ export const code = `
 
+function useTick2(start, themeColor) {
+  const aa1 = expensiveFormat2(themeColor);
+  const aa2 = start + 10000;
+  return { aa1, aa2 };
+}
+
 function Main({a}) {
@@ -109,54 +115,55 @@ const [text, setText] = useState(a);
 
-function useTick(xxx, text, b) {
+function useTick(start, themeColor) {
   const Hook___ = React.useMemo(() => ReactTurbo.reactify(function Hook___({
-    xxx: xxx,
-    text: text,
-    b: b,
+    proxy: {
+      start: start,
+      themeColor: themeColor
+    },
     return___: return___
   }) {
-    const [text2, setText2] = ReactTurbo.useAtom(xxx);
+    const aa1 = ReactTurbo.combine(themeColor, themeColor => expensiveFormat2(themeColor));
+    const aa2 = ReactTurbo.combine(start, start => start + 10000);
+    return <React.Fragment>{ReactTurbo.combine(aa2, aa1, (aa2, aa1) => (() => {
+        if (aa2 === 10001) {
+          return return___({
+            aa1,
+            aa2: 10
+          });
+        }
 
-    function Im({
-      text: text
-    }) {
-      const R___N = useEffect(() => {
-        console.log('text', text);
-      }, [text]);
+        return return___({
+          aa1,
+          aa2
+        });
+      })())}</React.Fragment>;
+  }), []);
 
-      if (!ReactTurbo.reactified(R___N)) {
-        return;
-      }
+  const gen__ = return___ => <Hook___ start={start} themeColor={themeColor} return___={return___} />;
 
-      return <R___N />;
-    }
+  gen__.react___ified = true;
+  return gen__;
+}
 
-    const Re = ReactTurbo.reactify(function Re() {
-      const aaaa = ReactTurbo.combine(setText3, setText3 => function aaaa(b) {
-        setText3(b);
-      });
-      const [text3, setText3] = ReactTurbo.useAtom(text2);
+function useTick2(start, themeColor) {
+  const Hook___ = React.useMemo(() => ReactTurbo.reactify(function Hook___({
+    proxy: {
+      start: start,
+      themeColor: themeColor
+    },
+    return___: return___
+  }) {
+    const aa1 = ReactTurbo.combine(themeColor, themeColor => expensiveFormat2(themeColor));
+    const aa2 = ReactTurbo.combine(start, start => start + 10000);
+    return <React.Fragment>{ReactTurbo.combine(aa1, aa2, (aa1, aa2) => (() => {
+        return return___({
+          aa1,
+          aa2
+        });
+      })())}</React.Fragment>;
+  }), []);
 
-      function Im({
-        text2: text2
-      }) {
-        const R___N = console.log(text2);
+  const gen__ = return___ => <Hook___ start={start} themeColor={themeColor} return___={return___} />;
 
-        if (!ReactTurbo.reactified(R___N)) {
-          return;
-        }
-
-        return <R___N />;
-      }
-
-      const Re = ReactTurbo.reactify(function Re() {
-        return <React.Fragment>{ReactTurbo.combine(xxx, setText2, text2, (xxx, setText2, text2) => (() => {
-            if (xxx == 'dd') return return___([xxx, setText2]);
-            return return___([text2, setText2]);
-          })())}</React.Fragment>;
-      });
-      return <React.Fragment><Im text2={text2}></Im><Re></Re></React.Fragment>;
-    });
-    return <React.Fragment><Im text={text}></Im><Re></Re></React.Fragment>;
-  }), []);
-  return <Hook___ xxx={xxx} text={text} b={b} />;
+  gen__.react___ified = true;
+  return gen__;
 }
@@ -186,3 +193,3 @@
 
-    return <R___N return___={r => ren___der(r)} />;
+    return R___N(r => ren___der(r));
   }
@@ -222,3 +229,3 @@
 
-      return <R___N />;
+      return R___N(r => ren___der(r));
     }
@@ -225,0 +232,0 @@

build/src/plugin/alternate/genRe.js

 import * as t from '@babel/types';
-import { proxyPattern, turboReactify } from '../typeGen/index.js';
+import { proxyProperty, turboReactify } from '../typeGen/index.js';
 import { reId } from './constants.js';
@@ -8,3 +8,7 @@ export function genRe(insert, param) {
             t.functionExpression(t.identifier(reId), param
-                ? [proxyPattern(t.objectPattern([t.objectProperty(param, param)]))]
+                ? [
+                    t.objectPattern([
+                        proxyProperty(t.objectPattern([t.objectProperty(param, param)])),
+                    ]),
+                ]
                 : [], t.blockStatement(insert)),
@@ -11,0 +15,0 @@ ])),

build/src/plugin/hook/box/index.js

 import * as t from '@babel/types';
-import { proxyPattern, reactMember, turboReactify, } from '../../typeGen/index.js';
+import { proxyProperty, reactMember, turboReactify, } from '../../typeGen/index.js';
 import { HookReturnKey } from '../constants.js';
@@ -23,6 +23,6 @@ export function box(path) {
                 t.functionExpression(hookComp, [
-                    proxyPattern(t.objectPattern([
-                        ...deps.map((d) => t.objectProperty(d, d)),
+                    t.objectPattern([
+                        proxyProperty(t.objectPattern(deps.map((d) => t.objectProperty(d, d)))),
                         t.objectProperty(t.identifier(HookReturnKey), t.identifier(HookReturnKey)),
-                    ])),
+                    ]),
                 ], t.blockStatement(path.node.body.body.map((b) => b))),
@@ -29,0 +29,0 @@ ])),

build/src/plugin/hook/preprocess/index.js

 import * as t from '@babel/types';
-import { preprocess as prepro } from '../../visitors/FunctionDeclaration/preprocess/index.js';
+import { constifyFn } from '../../visitors/FunctionDeclaration/preprocess/constifyFn.js';
+import { wrapIf } from '../../visitors/FunctionDeclaration/preprocess/wrapIf.js';
 import { HookReturnKey } from '../constants.js';
@@ -13,3 +14,4 @@ export function preprocess(path) {
     });
-    prepro(path);
+    wrapIf(path, true);
+    constifyFn(path);
 }

build/src/plugin/typeGen/index.js

@@ -15,4 +15,4 @@ import * as t from '@babel/types';
 }
-export function proxyPattern(value) {
-    return t.objectPattern([t.objectProperty(t.identifier('proxy'), value)]);
+export function proxyProperty(value) {
+    return t.objectProperty(t.identifier('proxy'), value);
 }
@@ -19,0 +19,0 @@ export function reactMember(id) {

build/src/plugin/visitors/FunctionDeclaration/preprocess/wrapIf.js

 import * as t from '@babel/types';
 import { reactFragment } from '../../../typeGen/index.js';
-export function wrapIf(path) {
+export function wrapIf(path, includeReturn = false) {
     const block = path.get('body');
     const body = block.get('body');
     const collection = [];
-    let ifStart = false;
+    let detect = false;
     for (const item of body) {
-        if (t.isIfStatement(item.node)) {
-            ifStart = true;
+        if (t.isIfStatement(item.node) ||
+            (includeReturn && t.isReturnStatement(item.node))) {
+            detect = true;
         }
-        if (!ifStart)
+        if (!detect)
             continue;
@@ -14,0 +15,0 @@ collection.push(item.node);

package.json

 {
   "name": "babel-plugin-react-turbo",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Babel plugin for react-turbo",
@@ -5,0 +5,0 @@ "type": "module",

src/example/code.ts

@@ -33,2 +33,8 @@ // const code = `function square(n) {
 
+function useTick2(start, themeColor) {
+  const aa1 = expensiveFormat2(themeColor);
+  const aa2 = start + 10000;
+  return { aa1, aa2 };
+}
+
 function Main({a}) {
@@ -113,54 +119,55 @@ const [text, setText] = useState(a);
 
-function useTick(xxx, text, b) {
+function useTick(start, themeColor) {
   const Hook___ = React.useMemo(() => ReactTurbo.reactify(function Hook___({
-    xxx: xxx,
-    text: text,
-    b: b,
+    proxy: {
+      start: start,
+      themeColor: themeColor
+    },
     return___: return___
   }) {
-    const [text2, setText2] = ReactTurbo.useAtom(xxx);
+    const aa1 = ReactTurbo.combine(themeColor, themeColor => expensiveFormat2(themeColor));
+    const aa2 = ReactTurbo.combine(start, start => start + 10000);
+    return <React.Fragment>{ReactTurbo.combine(aa2, aa1, (aa2, aa1) => (() => {
+        if (aa2 === 10001) {
+          return return___({
+            aa1,
+            aa2: 10
+          });
+        }
 
-    function Im({
-      text: text
-    }) {
-      const R___N = useEffect(() => {
-        console.log('text', text);
-      }, [text]);
+        return return___({
+          aa1,
+          aa2
+        });
+      })())}</React.Fragment>;
+  }), []);
 
-      if (!ReactTurbo.reactified(R___N)) {
-        return;
-      }
+  const gen__ = return___ => <Hook___ start={start} themeColor={themeColor} return___={return___} />;
 
-      return <R___N />;
-    }
+  gen__.react___ified = true;
+  return gen__;
+}
 
-    const Re = ReactTurbo.reactify(function Re() {
-      const aaaa = ReactTurbo.combine(setText3, setText3 => function aaaa(b) {
-        setText3(b);
-      });
-      const [text3, setText3] = ReactTurbo.useAtom(text2);
+function useTick2(start, themeColor) {
+  const Hook___ = React.useMemo(() => ReactTurbo.reactify(function Hook___({
+    proxy: {
+      start: start,
+      themeColor: themeColor
+    },
+    return___: return___
+  }) {
+    const aa1 = ReactTurbo.combine(themeColor, themeColor => expensiveFormat2(themeColor));
+    const aa2 = ReactTurbo.combine(start, start => start + 10000);
+    return <React.Fragment>{ReactTurbo.combine(aa1, aa2, (aa1, aa2) => (() => {
+        return return___({
+          aa1,
+          aa2
+        });
+      })())}</React.Fragment>;
+  }), []);
 
-      function Im({
-        text2: text2
-      }) {
-        const R___N = console.log(text2);
+  const gen__ = return___ => <Hook___ start={start} themeColor={themeColor} return___={return___} />;
 
-        if (!ReactTurbo.reactified(R___N)) {
-          return;
-        }
-
-        return <R___N />;
-      }
-
-      const Re = ReactTurbo.reactify(function Re() {
-        return <React.Fragment>{ReactTurbo.combine(xxx, setText2, text2, (xxx, setText2, text2) => (() => {
-            if (xxx == 'dd') return return___([xxx, setText2]);
-            return return___([text2, setText2]);
-          })())}</React.Fragment>;
-      });
-      return <React.Fragment><Im text2={text2}></Im><Re></Re></React.Fragment>;
-    });
-    return <React.Fragment><Im text={text}></Im><Re></Re></React.Fragment>;
-  }), []);
-  return <Hook___ xxx={xxx} text={text} b={b} />;
+  gen__.react___ified = true;
+  return gen__;
 }
@@ -190,3 +197,3 @@
 
-    return <R___N return___={r => ren___der(r)} />;
+    return R___N(r => ren___der(r));
   }
@@ -226,3 +233,3 @@
 
-      return <R___N />;
+      return R___N(r => ren___der(r));
     }
@@ -229,0 +236,0 @@

src/plugin/alternate/genRe.ts

 import * as t from '@babel/types';
-import { proxyPattern, turboReactify } from '../typeGen/index.js';
+import { proxyProperty, turboReactify } from '../typeGen/index.js';
 import { reId } from './constants.js';
@@ -16,3 +16,9 @@
           param
-            ? [proxyPattern(t.objectPattern([t.objectProperty(param, param)]))]
+            ? [
+                t.objectPattern([
+                  proxyProperty(
+                    t.objectPattern([t.objectProperty(param, param)]),
+                  ),
+                ]),
+              ]
             : [],
@@ -19,0 +25,0 @@

src/plugin/hook/box/index.ts

@@ -5,3 +5,3 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */
 import {
-  proxyPattern,
+  proxyProperty,
   reactMember,
@@ -46,11 +46,11 @@ turboReactify,
               [
-                proxyPattern(
-                  t.objectPattern([
-                    ...deps.map((d) => t.objectProperty(d, d)),
-                    t.objectProperty(
-                      t.identifier(HookReturnKey),
-                      t.identifier(HookReturnKey),
-                    ),
-                  ]),
-                ),
+                t.objectPattern([
+                  proxyProperty(
+                    t.objectPattern(deps.map((d) => t.objectProperty(d, d))),
+                  ),
+                  t.objectProperty(
+                    t.identifier(HookReturnKey),
+                    t.identifier(HookReturnKey),
+                  ),
+                ]),
               ] /* params */,
@@ -57,0 +57,0 @@ t.blockStatement(path.node.body.body.map((b) => b)),

src/plugin/hook/preprocess/index.ts

 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import type { NodePath } from '@babel/traverse';
 import * as t from '@babel/types';
-import { preprocess as prepro } from '../../visitors/FunctionDeclaration/preprocess/index.js';
+import { constifyFn } from '../../visitors/FunctionDeclaration/preprocess/constifyFn.js';
+import { wrapIf } from '../../visitors/FunctionDeclaration/preprocess/wrapIf.js';
 import { HookReturnKey } from '../constants.js';
@@ -17,3 +18,4 @@
   });
-  prepro(path);
+  wrapIf(path, true);
+  constifyFn(path);
 }

src/plugin/typeGen/index.ts

@@ -35,6 +35,6 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */
 
-export function proxyPattern(
+export function proxyProperty(
   value: t.Expression | t.PatternLike,
-): t.ObjectPattern {
-  return t.objectPattern([t.objectProperty(t.identifier('proxy'), value)]);
+): t.ObjectProperty {
+  return t.objectProperty(t.identifier('proxy'), value);
 }
@@ -41,0 +41,0 @@

src/plugin/visitors/FunctionDeclaration/preprocess/wrapIf.ts

@@ -6,3 +6,6 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */
 
-export function wrapIf(path: NodePath<t.FunctionDeclaration>) {
+export function wrapIf(
+  path: NodePath<t.FunctionDeclaration>,
+  includeReturn = false,
+) {
   const block = path.get('body');
@@ -12,9 +15,12 @@ const body = block.get('body');
   const collection: t.Statement[] = [];
-  let ifStart = false;
+  let detect = false;
 
   for (const item of body) {
-    if (t.isIfStatement(item.node)) {
-      ifStart = true;
+    if (
+      t.isIfStatement(item.node) ||
+      (includeReturn && t.isReturnStatement(item.node))
+    ) {
+      detect = true;
     }
-    if (!ifStart) continue;
+    if (!detect) continue;
     collection.push(item.node);
@@ -21,0 +27,0 @@ item.remove();

No alert changes

Improved metrics

Total package byte prevSize

86723

increased by1.31%

Lines of code

2299

increased by1.64%

No dependency changes