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

Comparing version 0.1.16 to 0.1.17

build/src/example/code.js

 export const code = `
 import React, { useState } from "react";
 
-function A(props) {
+export default function A(props) {
   return (
@@ -11,3 +11,3 @@ <div>
 
-function Filter({
+export function Filter({
   text,
@@ -22,3 +22,3 @@ }) {
 
-function useTick(start, themeColor) {
+export function useTick(start, themeColor) {
   const aa1 = expensiveFormat2(themeColor);
@@ -117,3 +117,3 @@ const aa2 = start + 10000;
 
-export default Main;
+export const MainRee = Main;
 `;
@@ -239,3 +239,3 @@ export const out = `import * as ReactTurbo from "react-turbo";
 
-      return R___N(r => ren___der(r));
+      return R___N(r => {});
     }
@@ -326,3 +326,3 @@
 
-      return R___N(r => ren___der(r));
+      return R___N(r => {});
     }
@@ -329,0 +329,0 @@

build/src/plugin/visitors/FunctionDeclaration/index.js

@@ -1,2 +0,1 @@
-import * as t from '@babel/types';
 import { isUpperName } from '../../utils/index.js';
@@ -9,20 +8,18 @@ import { getJSXExpressionContainer } from '../JSXExpressionContainer/index.js';
 import { handleHook } from '../../hook/index.js';
-export function getFunctionDeclaration() {
-    const FunctionDeclaration = function (path) {
-        if (!t.isProgram(path.parent))
+import { isHookName } from '../../utils/common.js';
+import { isTopLevel } from '../../utils/isTopLevel.js';
+export function getFunctionDeclaration(ctx) {
+    const FunctionDeclaration = function (fn) {
+        if (!isTopLevel(fn)) {
             return;
-        const name = path.node.id.name;
-        if (!isUpperName(name)) {
-            if (name.startsWith('use')) {
-                handleHook(path);
-            }
-            return;
         }
-        preprocess(path);
-        path.traverse({
-            JSXExpressionContainer: getJSXExpressionContainer(path.get('body')),
-        });
-        iterate(path);
-        proxyParams(path);
-        wrapComponent(path);
+        const name = fn.node.id.name;
+        if (isUpperName(name)) {
+            ctx.shouldImport = true;
+            handleFnComp(fn);
+        }
+        else if (isHookName(name)) {
+            ctx.shouldImport = true;
+            handleHook(fn);
+        }
     };
@@ -29,0 +26,0 @@ return FunctionDeclaration;

build/src/plugin/visitors/FunctionDeclaration/wrapComponent.js

 import * as t from '@babel/types';
 import { turboReactify } from '../../typeGen/index.js';
-export function wrapComponent(path) {
-    const name = path.node.id.name;
-    path.node.id.name = `${name}___`;
-    path.insertAfter(t.variableDeclaration('const', [
-        t.variableDeclarator(t.identifier(name), t.callExpression(turboReactify(), [t.identifier(`${name}___`)])),
-    ]));
+export function wrapComponent(fn) {
+    const name = fn.node.id.name;
+    fn.node.id.name = `${name}___`;
+    const reactifyCom = t.callExpression(turboReactify(), [
+        t.functionExpression(fn.node.id, fn.node.params, t.blockStatement(fn.node.body.body)),
+    ]);
+    if (t.isExportDefaultDeclaration(fn.parent)) {
+        fn.replaceWith(reactifyCom);
+    }
+    else {
+        const cst = t.variableDeclaration('const', [
+            t.variableDeclarator(t.identifier(name), reactifyCom),
+        ]);
+        fn.replaceWith(cst);
+    }
 }

build/src/plugin/visitors/Program/index.js

@@ -1,26 +0,11 @@
-import * as t from '@babel/types';
-import { handleHook } from '../../hook/index.js';
-import { isHookName } from '../../utils/common.js';
-import { isUpperName } from '../../utils/index.js';
-import { handleFnComp } from '../FunctionDeclaration/index.js';
+import { getFunctionDeclaration } from '../FunctionDeclaration/index.js';
 import { importTurbo } from './importTurbo.js';
 export function getProgram() {
     const Program = function (path) {
-        let shouldImport = false;
-        const body = path.get('body');
-        for (const stt of body) {
-            if (t.isFunctionDeclaration(stt.node)) {
-                const fn = stt;
-                const name = fn.node.id.name;
-                if (isUpperName(name)) {
-                    shouldImport = true;
-                    handleFnComp(fn);
-                }
-                else if (isHookName(name)) {
-                    shouldImport = true;
-                    handleHook(fn);
-                }
-            }
-        }
-        if (shouldImport) {
+        const ctx = { shouldImport: false };
+        const FunctionDeclaration = getFunctionDeclaration(ctx);
+        path.traverse({
+            FunctionDeclaration,
+        });
+        if (ctx.shouldImport) {
             importTurbo(path);
@@ -27,0 +12,0 @@ }

package.json

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

src/example/code.ts

@@ -7,3 +7,3 @@ // const code = `function square(n) {
 
-function A(props) {
+export default function A(props) {
   return (
@@ -15,3 +15,3 @@ <div>
 
-function Filter({
+export function Filter({
   text,
@@ -26,3 +26,3 @@ }) {
 
-function useTick(start, themeColor) {
+export function useTick(start, themeColor) {
   const aa1 = expensiveFormat2(themeColor);
@@ -121,3 +121,3 @@ const aa2 = start + 10000;
 
-export default Main;
+export const MainRee = Main;
 `;
@@ -244,3 +244,3 @@
 
-      return R___N(r => ren___der(r));
+      return R___N(r => {});
     }
@@ -331,3 +331,3 @@
 
-      return R___N(r => ren___der(r));
+      return R___N(r => {});
     }
@@ -334,0 +334,0 @@

src/plugin/visitors/FunctionDeclaration/index.ts

@@ -11,26 +11,27 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { handleHook } from '../../hook/index.js';
+import { isHookName } from '../../utils/common.js';
+import { isTopLevel } from '../../utils/isTopLevel.js';
 
-export function getFunctionDeclaration(): VisitNode<
-  any,
-  t.FunctionDeclaration
-> {
+export interface Ctx {
+  shouldImport: boolean;
+}
+
+export function getFunctionDeclaration(
+  ctx: Ctx,
+): VisitNode<any, t.FunctionDeclaration> {
   const FunctionDeclaration: VisitNode<any, t.FunctionDeclaration> = function (
-    path,
+    fn,
   ) {
-    if (!t.isProgram(path.parent)) return;
-    const name = path.node.id.name;
-    if (!isUpperName(name)) {
-      if (name.startsWith('use')) {
-        handleHook(path);
-      }
+    if (!isTopLevel(fn)) {
       return;
     }
-    // console.log('ddd2');
-    preprocess(path);
-    path.traverse({
-      JSXExpressionContainer: getJSXExpressionContainer(path.get('body')),
-    });
-    iterate(path);
-    proxyParams(path);
-    wrapComponent(path);
+
+    const name = fn.node.id.name;
+    if (isUpperName(name)) {
+      ctx.shouldImport = true;
+      handleFnComp(fn);
+    } else if (isHookName(name)) {
+      ctx.shouldImport = true;
+      handleHook(fn);
+    }
   };
@@ -37,0 +38,0 @@ return FunctionDeclaration;

src/plugin/visitors/FunctionDeclaration/wrapComponent.ts

@@ -6,13 +6,20 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */
 
-export function wrapComponent(path: NodePath<t.FunctionDeclaration>) {
-  const name = path.node.id.name;
-  path.node.id.name = `${name}___`;
-  path.insertAfter(
-    t.variableDeclaration('const', [
-      t.variableDeclarator(
-        t.identifier(name),
-        t.callExpression(turboReactify(), [t.identifier(`${name}___`)]),
-      ),
-    ]),
-  );
+export function wrapComponent(fn: NodePath<t.FunctionDeclaration>) {
+  const name = fn.node.id.name;
+  fn.node.id.name = `${name}___`;
+  const reactifyCom = t.callExpression(turboReactify(), [
+    t.functionExpression(
+      fn.node.id,
+      fn.node.params,
+      t.blockStatement(fn.node.body.body),
+    ),
+  ]);
+  if (t.isExportDefaultDeclaration(fn.parent)) {
+    fn.replaceWith(reactifyCom);
+  } else {
+    const cst = t.variableDeclaration('const', [
+      t.variableDeclarator(t.identifier(name), reactifyCom),
+    ]);
+    fn.replaceWith(cst);
+  }
 }

src/plugin/visitors/Program/index.ts

 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import type { NodePath, VisitNode } from '@babel/traverse';
+import type { VisitNode } from '@babel/traverse';
 import * as t from '@babel/types';
-import { handleHook } from '../../hook/index.js';
-import { isHookName } from '../../utils/common.js';
-import { isUpperName } from '../../utils/index.js';
-import { handleFnComp } from '../FunctionDeclaration/index.js';
+import { getFunctionDeclaration } from '../FunctionDeclaration/index.js';
 import { importTurbo } from './importTurbo.js';
@@ -12,19 +9,9 @@
   const Program: VisitNode<any, t.Program> = function (path) {
-    let shouldImport = false;
-    const body = path.get('body');
-    for (const stt of body) {
-      if (t.isFunctionDeclaration(stt.node)) {
-        const fn = stt as NodePath<t.FunctionDeclaration>;
-        const name = fn.node.id.name;
-        if (isUpperName(name)) {
-          shouldImport = true;
-          handleFnComp(fn);
-        } else if (isHookName(name)) {
-          shouldImport = true;
-          handleHook(fn);
-        }
-      }
-    }
+    const ctx = { shouldImport: false };
+    const FunctionDeclaration = getFunctionDeclaration(ctx);
+    path.traverse({
+      FunctionDeclaration,
+    });
 
-    if (shouldImport) {
+    if (ctx.shouldImport) {
       importTurbo(path);
@@ -31,0 +18,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

92240

increased by0.05%

Number of package files

112

increased by1.82%

Lines of code

2502

increased by0.08%

No dependency changes