fix: Duplicate declaration error

yklydxtt · Aug 13, 2021 · 1b353c4 · 1b353c4
1 parent 738ae95
commit 1b353c4
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
@@ -16,6 +16,16 @@ ctfc -i react-demo.js -o fc.js
 ```
 就会将 react-demo.js文件中的class组件转化成function组件，并生成fc.js
 
+## 😘 贡献者指南
+安装
+```js
+npm i
+```
+建立连接
+```js
+npm link
+```
+
 ## todos
 - getDerivedStateFromProps处理
 - "state={}"写法兼容

diff --git a/TODO.md b/TODO.md
@@ -0,0 +1,12 @@
+# 计划列表
+这里列出会在未来添加的新功能，和已经完成的功能
+
+- [x] "state={}"写法兼容
+- [x] componentDidMount转化
+- [x] componentWillUnmount转化
+- [ ] decorator支持
+- [ ] 添加ci
+- [ ] 添加测试用例
+- [ ] getDerivedStateFromProps处理
+- [ ] UNSAFE_componentWillMount转化
+- [ ] 解决this问题
diff --git a/src/Transformer.js b/src/Transformer.js
@@ -46,7 +46,8 @@ class Transformer {
                 _self.state.forEach(item => {
                     const decl = t.arrayPattern([t.identifier(item.key), t.identifier(`set${item.key[0].toUpperCase()}${item.key.slice(1)}`)]);
                     const call = t.callExpression(t.identifier("useState"), [item.value])
-                    _self.componentBody.unshift(t.variableDeclaration("const", [t.variableDeclarator(decl, call)]))
+                    // 防止命名重复的问题，暂时用var
+                    _self.componentBody.unshift(t.variableDeclaration("var", [t.variableDeclarator(decl, call)]))
                 });
                 const blockStatements = t.blockStatement(_self.componentBody);
                 path.replaceWith(t.functionDeclaration(path.node.id, [t.identifier('props')], blockStatements));
@@ -88,14 +89,17 @@ class Transformer {
         const fnoe=this.handleOuterExpress();
         // 处理hooks的引入
         const fnhi=this.handleHooksImports();
-        const fns={...fnoe,...fnhi};
+        // 处理state为var的问题
+        const fnVar=this.handleReplaceVar();
+        const fns={...fnoe,...fnhi,...fnVar};
         traverse(ast,fns);
         this.ast = ast;
     }
 
     handleClassFn=(path)=>{
         const node = path.node;
         const methodName = node.key.name;
+        // 处理state={}
         if(node.value&&node.value.type==='ObjectExpression'){
             if(node.key.name==='state'){
                 node.value.properties.forEach(item => {
@@ -185,6 +189,16 @@ class Transformer {
         }
     }
 
+    handleReplaceVar=()=>{
+        return {
+            VariableDeclaration(path){
+                if(path.node.declarations&&path.node.declarations[0].init&&path.node.declarations[0].init.callee&&path.node.declarations[0].init.callee.name==='useState'){
+                    path.node.kind="const";
+                }
+            }
+        }
+    }
+
     createArrowFn=(node)=>{
         const body = node.body;
         let arrowFn;
@@ -203,7 +217,8 @@ class Transformer {
     }
 
     output = () => {
-        fs.writeFileSync(this.outFile, this.code)
+        fs.writeFileSync(this.outFile, this.code);
+        log(`${this.outFile}文件生成成功！`,'success')
     }
 
     genFc = () => {