Giter VIP home page Giter VIP logo

gogocode's People

Contributors

atqq avatar bigfengyu avatar btea avatar eyis avatar markthree avatar senyawang avatar shuerguo999 avatar thewei avatar william24255 avatar wudi3 avatar yexi-xf avatar zhangdaren avatar zhuscat avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gogocode's Issues

涉及到作用域的替换应该怎么弄?

如下代码:

var n = {};
n.n = square(10);

function ajax(){
    console.log(n)
    $.ajax({
        url:"",
        success:function(n){
            console.log(n)
        }
    })
}

function square(n) {
    return n * n;
}

如果我想把上面的代码转换为:

var number = {};
number.n = square(10);

function ajax(){
    console.log(number)
    $.ajax({
        url:"",
        success:function(n){
            console.log(n)
        }
    })
}

function square(n) {
    return n * n;
}

应该怎么实现呢?

前提:n所在的函数名不固定,位置也不固定。

对html模板的注释,非人为操作,自动添加了多余空格

解析模板
<!-- html模板的注释 -->
使用这段代码解析,什么都不做,注释被自动加了前后空格
function transform(fileInfo, api, options) { const $ = api.gogocode const source = fileInfo.source // 在这里返回你生成的代码 return $(source, { parseOptions: { language: 'html' } }) .generate() }
求教是使用方式有问题还是代码问题呢~

转换后出现多余的逗号

const $ = require("gogocode");
const code = $.loadFile("index.tsx");

const AST = $(code)
.replace("<View $$$ />", "<div $$$ />")
.replace("<View $$$>$$", "<div $$$>$$")
.replace("<Text $$$ />", "<span $$$ />")
.replace("<Text $$$>$$", "<span $$$>$$")
.generate();
console.log(AST);

打印结果:

, {children}, , {closeable ? ( ) : null},

// index.tsx的内容:
<View
onClick={onClick}
className={classNames(${clsPrefix}-tag, ${clsPrefix}-tag--${type}, {
[size-${size}]: size,
})}
{...props}

<Text className={${clsPrefix}-tag-text}>{children}
{closeable ? (
<Icon
className={${clsPrefix}-tag-delete}
name="success"
onClick={handleClose}
/>
) : null}

antd 样式没生效

看测试用例里没有引入 css 文件
image

然后我自己试了一下也没有生效,配置如下:

const importPlugin = require('esbuild-dynamic-import-plugin')
const esbuild = require('esbuild')

esbuild.build({
  plugins: [
      importPlugin({
          options: [{
            libraryName: "antd",
            style: true,   // or 'css'
          }],
      })
  ]
})

如何找到对象中属性a,根据规则替换属性b

const obj = {
    '学生': 'student',
    '教师': 'teacher',
    '厨师': 'cooker'
}

const descList1 = [{
    index: 1,
    name: 'name1',
    desc: '学生',
}, {
    index: 2,
    name: 'name2',
    desc: '教师'
}, {
    index: 3,
    name: 'name3',
    desc: '厨师'
}];

=>

const descList1 = [{
    index: 1,
    name: 'student',
    desc: '学生',
}, {
    index: 2,
    name: 'teacher',
    desc: '教师'
}, {
    index: 3,
    name: 'cooker',
    desc: '厨师'
}];

类型描述文件有误

$.js中添加了此属性

main.writeFile = writeFile;

在类型描述文件里缺失该属性
修改为

    interface $ {
      (code: string, options?: GoGoOption): GoGoAST;
      loadFile(path: string, options: GoGoOption): GoGoAST;
      writeFile(code:string,path:string)
    }

此时,在ts中可以正确推导出

bug in gogocode-plugin-vue SyntaxError: ';' expected. (5:40)

gogocode-plugin-vue 1.0.10
gogocode-cli 0.2.17

gogocode -s ./src/index.ts -t gogocode-plugin-vue -o ./src-out/index.ts


transform start

transform error: /home/mas/Documents/my-vue-router-project/src/index.ts
SyntaxError: ';' expected. (5:40)
  3 | import { initloadingid } from "./initloadingid.ts";
  4 | import "./error-alert.js";
> 5 | import * as VueRouter from 'vue-router'import * as Vue from 'vue';
    |                                        ^
  6 | import "@masx200/webpack-react-vue-spa-awesome-config/registerserviceworker.js";
  7 |
  8 | // import "webpack-react-vue-spa-awesome-config/ie11babelpolyfill";
    at e (/home/mas/Downloads/node-v16.5.0-linux-x64/node-v16.5.0-linux-x64/lib/node_modules/gogocode-plugin-vue/node_modules/prettier/parser-typescript.js:1:322)
    at /home/mas/Downloads/node-v16.5.0-linux-x64/node-v16.5.0-linux-x64/lib/node_modules/gogocode-plugin-vue/node_modules/prettier/parser-typescript.js:22:3248894
    at Object.parse (/home/mas/Downloads/node-v16.5.0-linux-x64/node-v16.5.0-linux-x64/lib/node_modules/gogocode-plugin-vue/node_modules/prettier/parser-typescript.js:22:3248927)
    at Object.parse$a [as parse] (/home/mas/Downloads/node-v16.5.0-linux-x64/node-v16.5.0-linux-x64/lib/node_modules/gogocode-plugin-vue/node_modules/prettier/index.js:13684:19)
    at coreFormat (/home/mas/Downloads/node-v16.5.0-linux-x64/node-v16.5.0-linux-x64/lib/node_modules/gogocode-plugin-vue/node_modules/prettier/index.js:15215:16)
    at formatWithCursor$1 (/home/mas/Downloads/node-v16.5.0-linux-x64/node-v16.5.0-linux-x64/lib/node_modules/gogocode-plugin-vue/node_modules/prettier/index.js:15455:14)
    at /home/mas/Downloads/node-v16.5.0-linux-x64/node-v16.5.0-linux-x64/lib/node_modules/gogocode-plugin-vue/node_modules/prettier/index.js:60228:12
    at Object.format (/home/mas/Downloads/node-v16.5.0-linux-x64/node-v16.5.0-linux-x64/lib/node_modules/gogocode-plugin-vue/node_modules/prettier/index.js:60248:12)
    at transform (/home/mas/Downloads/node-v16.5.0-linux-x64/node-v16.5.0-linux-x64/lib/node_modules/gogocode-plugin-vue/index.js:47:30)
    at /home/mas/Downloads/node-v16.5.0-linux-x64/node-v16.5.0-linux-x64/pnpm-global/5/node_modules/.pnpm/[email protected]/node_modules/gogocode-cli/src/commands/transform.js:196:22 {
  loc: { start: { line: 5, column: 40 } },
  codeFrame: '\x1B[0m \x1B[90m 3 |\x1B[39m \x1B[36mimport\x1B[39m { initloadingid } \x1B[36mfrom\x1B[39m \x1B[32m"./initloadingid.ts"\x1B[39m\x1B[33m;\x1B[39m\x1B[0m\n' +
    '\x1B[0m \x1B[90m 4 |\x1B[39m \x1B[36mimport\x1B[39m \x1B[32m"./error-alert.js"\x1B[39m\x1B[33m;\x1B[39m\x1B[0m\n' +
    "\x1B[0m\x1B[31m\x1B[1m>\x1B[22m\x1B[39m\x1B[90m 5 |\x1B[39m \x1B[36mimport\x1B[39m \x1B[33m*\x1B[39m \x1B[36mas\x1B[39m \x1B[33mVueRouter\x1B[39m \x1B[36mfrom\x1B[39m \x1B[32m'vue-router'\x1B[39m\x1B[36mimport\x1B[39m \x1B[33m*\x1B[39m \x1B[36mas\x1B[39m \x1B[33mVue\x1B[39m \x1B[36mfrom\x1B[39m \x1B[32m'vue'\x1B[39m\x1B[33m;\x1B[39m\x1B[0m\n" +                                                                           
    '\x1B[0m \x1B[90m   |\x1B[39m                                        \x1B[31m\x1B[1m^\x1B[22m\x1B[39m\x1B[0m\n' +
    '\x1B[0m \x1B[90m 6 |\x1B[39m \x1B[36mimport\x1B[39m \x1B[32m"@masx200/webpack-react-vue-spa-awesome-config/registerserviceworker.js"\x1B[39m\x1B[33m;\x1B[39m\x1B[0m\n' +
    '\x1B[0m \x1B[90m 7 |\x1B[39m\x1B[0m\n' +
    '\x1B[0m \x1B[90m 8 |\x1B[39m \x1B[90m// import "webpack-react-vue-spa-awesome-config/ie11babelpolyfill";\x1B[39m\x1B[0m'
}

transform failed!

import "./styles.ts";
//@ts-ignore
import { initloadingid } from "./initloadingid.ts";
import "./error-alert.js";
import VueRouter from "vue-router";
//@ts-ignore
// import SimpleStoreManager from "@masx200/vue-simple-global-state-store-manager"; // bindGlobalStore // initGlobalState,
import Vue from "vue";
import "@masx200/webpack-react-vue-spa-awesome-config/registerserviceworker.js";

// import "webpack-react-vue-spa-awesome-config/ie11babelpolyfill";
("use strict");
const rootele =
    document.getElementById("root") ||
    document.body.appendChild(document.createElement("div"));
Object.assign(rootele, { id: "root" });
if (!document.getElementById("app")) {
    rootele &&
        (rootele.innerHTML = `<div id=${initloadingid}>
<h1>loading</h1>
<span class="mui-spinner mui-spinner-custom">

</span></div>`);
}
// eslint-disable-next-line no-undef

window.addEventListener(
    "load",
    () => {
        //   import("bootstrap/dist/js/bootstrap.bundle");
        import("clipboard").then((module) => {
            const ClipboardJS = module.default;
            new ClipboardJS(".btn").on("success", function (e) {
                e.clearSelection();
            });
        });
    },
    { once: true }
);

Vue.config.productionTip = false;
Vue.config.silent = true;
Vue.config.devtools = true;
Vue.use(VueRouter);
// console.log(SimpleStore);
// Vue.use(SimpleStoreManager);
Vue.config.errorHandler = function (err, vm, info) {
    throw err;
};
import("./vue-index-render.js").then(({ router, default: AppHome }) => {
    const container =
        document.getElementById("app") ||
        rootele.appendChild(document.createElement("div"));
    Object.assign(container, { id: "app" });
    // var AppHome=default
    const vm = new Vue({
        router,

        render(h) {
            return h(AppHome);
        },
    });
    rootele && vm.$mount(container);
    Object.assign(vm.$el, {
        id: "app",
    });
});

示例代码输出结果,对分号的处理不解

对于文件/gogocode/packages/gogocode-starter/src/start.js

输入内容为:

import a from 'a';
console.log('get A');
var b = console.log();
console.log.bind();
var c = console.log;
console.log = func;

执行后实际输出结果:

import a from 'a';
;
var b = void 0
console.log.bind();
var c = function(){}
console.log = func;

而start.js文件中描述的期望结果是:

import a from 'a';
var b = void 0;
console.log.bind()
var c = function(){};
console.log = func

以上两个结果,可以明显看出,
第二行剩下分号,期望结果是没有输出,
倒数第二行结尾没有分号,期望结果是有分号,
那么,假如把输入压缩成一行,结果会出问题:

改为输入:

import a from 'a';console.log('get A');var b = console.log();console.log.bind();var c = console.log;console.log = func;

输出结果:

import a from 'a';;var b = void 0 console.log.bind();var c = function(){}console.log = func;

可以看到,由于丢失分号,输出结果是执行不了的。

Async function return type wont get matched

Given the following input code:

export default async (
    data: Request<{ msg: string }>
): Promise<string> => {
    console.log(`Received echo request: ${data}`)
    return data.msg
}

This code:

 const match = ast.find(`export default async ($$$1): $$$2 => { $$$3 }`)

Wont match $$$2 at all (only $$$1 and $$$3 are getting matched).

If I change $$$2 to $_$2, then the match will be Promise, but without the generic.

Is there a workaround for that?

Thanks!

转换后出现多余的逗号

const $ = require("gogocode");
const code = $.loadFile("index.tsx");

const AST = $(code)
.replace("<View $$$ />", "<div $$$ />")
.replace("<View $$$>$$", "<div $$$>$$")
.replace("<Text $$$ />", "<span $$$ />")
.replace("<Text $$$>$$", "<span $$$>$$")
.generate();
console.log(AST);

打印结果:

, {children}, , {closeable ? ( ) : null},

// index.tsx的内容:
<View
onClick={onClick}
className={classNames(${clsPrefix}-tag, ${clsPrefix}-tag--${type}, {
[size-${size}]: size,
})}
{...props}

<Text className={${clsPrefix}-tag-text}>{children}
{closeable ? (
<Icon
className={${clsPrefix}-tag-delete}
name="success"
onClick={handleClose}
/>
) : null}

need node12+

pls note runtime should on node 12+.
from the error:
ReferenceError: globalThis is not defined

Immediately invoked function

Hi, thank you for this awesome tool. Really love that and it helped me a lot. But I am struggling with one example -> immediately invoked functions. I have function like this:

(function(param_1, param_2) {
    // Code that runs in your function
})({"config": {...}, "data": {..}}, {"actions": {...}, "misc": {...}})

I need to extract parameters of this function {"config": {...}, "data": {..}}, {"actions": {...}, "misc": {...}}, can you please help me how to achive that?

Thanks a lot!!!!

bug in gogocode-plugin-vue 没有转化beforeDestroy

bug in gogocode-plugin-vue 没有转化beforeDestroy

gogocode -s ./src/test.js -t gogocode-plugin-vue -o ./src-out/test.js
'use strict'
function 获取当前时间() {
  return new Date().toString().slice(0, new Date().toString().indexOf('GMT'))
}
import * as Vue from 'vue'
var timer
var about = Vue.extend({
  name: 'about',
  data() {
    return {
      nowtime: 获取当前时间(),
      msg: 'Welcome to Your Vue.js App',
    }
  },
  methods: {},
  mounted() {
    document.title = 'vue-router-project-' + 'about'
    let setnowtime = (t) => {
      this.nowtime = t
    }
    timer = setInterval(() => {
      setnowtime(获取当前时间())
    }, 1100)
  },
  beforeDestroy() {
    clearInterval(timer)
  },
})
export default about
"use strict";
function 获取当前时间() {
    return new Date().toString().slice(0, new Date().toString().indexOf("GMT"));
}
import Vue from "vue";
var timer;
var about = Vue.extend({
    name: "about",
    data() {
        return {
            nowtime: 获取当前时间(),
            msg: "Welcome to Your Vue.js App",
        };
    },
    methods: {},
    mounted() {
        document.title = "vue-router-project-" + "about";
        let setnowtime = (t) => {
            this.nowtime = t;
        };
        timer = setInterval(() => {
            setnowtime(获取当前时间());
        }, 1100);
    },
    beforeDestroy() {
        clearInterval(timer);
    },
});
export default about;

希望增加一个find后的获取节点数量的api

我目前是 通过try catch find后返回的ast内的match 来判断是否有匹配到,如果匹配到,则通过循环判断匹配到几个 ,可否增加个 类似于 getLength 的api 获取匹配到几个?

怎么循环遍历并修改其中的节点属性呢?

`
AST.find('const $$1 = import($$2)').each(node => {
const temp = node.match
map.set(temp[1][0].value, temp[2][0].value)
})
AST.find('component: $
$').each(node => {
const temp = node[0]['match'][0][0].value
node[0]['match'][0][0].value = map.get(temp)
})

`

如何获取js代码中的注释内容?

我在官方文档里面没有找到。希望能够获取 "//" 以及“/* */”以及多行注释这样的。
我本来想用这种方式$(code).find('//$$$').after('123').root().generate(); 但是没有效果。

bug in gogocode-plugin-vue 没有转化Vue.extend

bug in gogocode-plugin-vue
没有转化Vue.extend
转化前后没有任何区别?

gogocode -s ./src/vue-app-home.js -t gogocode-plugin-vue -o ./src-out/vue-app-home.js
import { hashchangehandler } from './vue-index-render'
import { 调整导航栏和主体的距离 } from './调整导航栏和主体的距离'
import $ from 'jquery'
import * as Vue from 'vue'
let App = Vue.extend({
  name: 'App',
  data() {
    return {
      isActive1: window.location.hash == '#/' ? true : false,
      isActive2: window.location.hash == '#/huami' ? true : false,
      isActive3: window.location.hash == '#/about' ? true : false,
    }
  },
  methods: {
    togglecollapsenavbar() {
      $('#example-navbar-collapse').toggle()
    },
    myfreshdata() {
      ;(this.isActive1 = window.location.hash === '#/'),
        (this.isActive2 = window.location.hash === '#/huami'),
        (this.isActive3 = window.location.hash === '#/about')
    },
  },
  mounted() {
    var initloadele = document.getElementById(initloadingid)
    initloadele && (initloadele.style.display = 'none')
    this.myfreshdata()
    hashchangehandler()
    $('#mynavul').on('click', hashchangehandler)
    // $("#my主体").css("padding-top", $("#my导航栏").height());
    // requestAnimationFrame(() => {
    //     $("#my主体").css("padding-top", $("#my导航栏").height());
    // });
    // let timer = setInterval(() => {
    //     $("#my主体").css("padding-top", $("#my导航栏").height());
    //     //console.log($("#my导航栏").height());
    // }, 0);
    // setTimeout(() => {
    //     $("#my主体").css("padding-top", $("#my导航栏").height());
    //     //console.log($("#my导航栏").height());
    //     clearInterval(timer);
    // }, 1000);
    调整导航栏和主体的距离()
  },
})
export default App
import { initloadingid } from './initloadingid.ts'

TS类型定义错误

.find(`const $_$1 = $_$body`)

对match结果取值的时候会报错:

funcNode.match["body"][0].node // match的索引只能为数字,并且没有node属性。

tiny-emitter/instance和入口文件的问题

依赖问题

运行 gogocode -s package.json -t gogocode-plugin-vue -o package.json 给我加了个啥 tiny-emitter/instance 依赖,npm 上没有:

image

入口文件问题

transform in progress: [===========----------] 11/21    文件转换异常,规则:globalApi,文件:/Users/username/Documents/development/code/test/vue/migration/project/src/main.js TypeError: Cannot read property 'type' of null
    at AST.insertSiblingNode (/usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/Ast.js:447:70)
    at /usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/Ast.js:504:18
    at Array.forEach (<anonymous>)
    at AST.after (/usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/Ast.js:503:14)
    at /usr/local/lib/node_modules/gogocode-plugin-vue/src/global-api.js:50:34
    at Array.forEach (<anonymous>)
    at /usr/local/lib/node_modules/gogocode-plugin-vue/src/global-api.js:46:28
    at AST.each (/usr/local/lib/node_modules/gogocode-cli/node_modules/gogocode/src/Ast.js:73:13)
    at Object.module.exports [as rule] (/usr/local/lib/node_modules/gogocode-plugin-vue/src/global-api.js:32:44)
    at /usr/local/lib/node_modules/gogocode-plugin-vue/index.js:33:28
transform in progress: [=====================] 21/21    

可以看下这个 case 存在什么转换问题(原入口文件):

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import i18n from './i18n'
import './registerServiceWorker'
import VueCookies from 'vue-cookies'
import '@mdi/font/css/materialdesignicons.css'
import SoftUI from './components/SoftUI'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueCookies)
Vue.use(SoftUI)
Vue.use(VueAxios, axios)
Vue.config.productionTip = false

new Vue({
    router,
    store,
    i18n,
    data: function() {
        return {
            dark: false,
        }
    },
    render: h => h(App)
}).$mount('#app')

转换过程报错

  1. router文件报错:
 文件转换异常,规则:router,文件:./src/router/index.js 
Error: buildAstByAstStory: VueRouter.createWebHashHistory(),routes:constantRouterMap,scrollBehavior: () => ({ y: 0 })}
    at Object.buildAstByAstStr (...

实际代码

export default new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})
  1. 组件中报错,但实际上代码中是没有这个div标签的,并且其他标签也是闭合
transform error: ./src/views/Config/Shelves/CreateDialog.vue
SyntaxError: Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (281:3)
  279 |         </span>
  280 |   
> 281 |   </div></el-dialog></template>
      |   ^^^^^^
  282 |
  283 | <script>
    at U ...

请问selector如何匹配不等于

打个比方:
import A from 'a';
import B from 'b';
import C from 'c';
想替换from后面不等于‘a'的import代码,类似与
“import $_$ from '[!a]'"这个意思
请问一下选择器要怎么写?谢谢

bug in gogocode-plugin-vue 转化有亿点问题: 2.没有转化new Vue

1.没有转化new VueRouter(已经解决)
2.没有转化new Vue
3.少了一句话Vue.use(VueRouter);(已经解决)
应该改成app.use(router)(已经解决)

gogocode -s ./src/index.ts -t gogocode-plugin-vue -o ./src-out/index.ts

index.ts

import "./styles.ts";
//@ts-ignore
import { initloadingid } from "./initloadingid.ts";
import "./error-alert.js";
import VueRouter from "vue-router";
//@ts-ignore
// import SimpleStoreManager from "@masx200/vue-simple-global-state-store-manager"; // bindGlobalStore // initGlobalState,
import Vue from "vue";
import "@masx200/webpack-react-vue-spa-awesome-config/registerserviceworker.js";

// import "webpack-react-vue-spa-awesome-config/ie11babelpolyfill";
("use strict");
const rootele =
    document.getElementById("root") ||
    document.body.appendChild(document.createElement("div"));
Object.assign(rootele, { id: "root" });
if (!document.getElementById("app")) {
    rootele &&
        (rootele.innerHTML = `<div id=${initloadingid}>
<h1>loading</h1>
<span class="mui-spinner mui-spinner-custom">

</span></div>`);
}
// eslint-disable-next-line no-undef

window.addEventListener(
    "load",
    () => {
        //   import("bootstrap/dist/js/bootstrap.bundle");
        import("clipboard").then((module) => {
            const ClipboardJS = module.default;
            new ClipboardJS(".btn").on("success", function (e) {
                e.clearSelection();
            });
        });
    },
    { once: true }
);

Vue.config.productionTip = false;
Vue.config.silent = true;
Vue.config.devtools = true;
Vue.use(VueRouter);
// console.log(SimpleStore);
// Vue.use(SimpleStoreManager);
Vue.config.errorHandler = function (err, vm, info) {
    throw err;
};
import("./vue-index-render.js").then(({ router, default: AppHome }) => {
    const container =
        document.getElementById("app") ||
        rootele.appendChild(document.createElement("div"));
    Object.assign(container, { id: "app" });
    // var AppHome=default
    const vm = new Vue({
        router,

        render(h) {
            return h(AppHome);
        },
    });
    rootele && vm.$mount(container);
    Object.assign(vm.$el, {
        id: "app",
    });
});

index.ts

import '@masx200/webpack-react-vue-spa-awesome-config/registerserviceworker.js'
import * as Vue from 'vue'
import * as VueRouter from 'vue-router'
import './error-alert.js'
//@ts-ignore
import { initloadingid } from './initloadingid.ts'
import './styles.ts'

// import "webpack-react-vue-spa-awesome-config/ie11babelpolyfill";
;('use strict')
const rootele =
  document.getElementById('root') ||
  document.body.appendChild(document.createElement('div'))
Object.assign(rootele, { id: 'root' })
if (!document.getElementById('app')) {
  rootele &&
    (rootele.innerHTML = `<div id=${initloadingid}>
<h1>loading</h1>
<span class="mui-spinner mui-spinner-custom">

</span></div>`)
}
// eslint-disable-next-line no-undef

window.addEventListener(
  'load',
  () => {
    //   import("bootstrap/dist/js/bootstrap.bundle");
    import('clipboard').then((module) => {
      const ClipboardJS = module.default
      new ClipboardJS('.btn').on('success', function (e) {
        e.clearSelection()
      })
    })
  },
  { once: true }
)

window.$vueApp.config.silent = true
window.$vueApp.config.devtools = true
// console.log(SimpleStore);
// Vue.use(SimpleStoreManager);
window.$vueApp.config.errorHandler = function (err, vm, info) {
  throw err
}
import('./vue-index-render.js').then(({ router, default: AppHome }) => {
  const container =
    document.getElementById('app') ||
    rootele.appendChild(document.createElement('div'))
  Object.assign(container, { id: 'app' })
  // var AppHome=default
  const vm = new Vue({
    router,

    render() {
      return Vue.h(AppHome)
    },
  })
  rootele && vm.$mount(container)
  Object.assign(vm.$el, {
    id: 'app',
  })
})

包含作用域的变量如何简单的替换,而不漏网或误替换呢?

比如代码:

var n = {};
n.n = 10;

function ajax(){
  var obj = {a:1, n:2}
    var {a, n} = obj;
    console.log("没想到吧,我又来了", n)

  var fun = function(n){
    console.log(n)
  }
    
}

function test(){
	n = 5;
    var fun = function(){
    console.log(n)
  }
}

function test2(n){
	n = 5;
}
ajax()

需要顶级n为abc,替换后代码为:

var abc = {};
abc.n = 10;

function ajax() {
  var obj = {
    a: 1,
    n: 2
  };
  var {
    a,
    n
  } = obj;
  console.log("没想到吧,我又来了", n);

  var fun = function (n) {
    console.log(n);
  };
}

function test() {
  abc = 5;

  var fun = function () {
    console.log(abc);
  };
}

function test2(n) {
  n = 5;
}

ajax();

使用babel,仅三行解决:

  if(t.isObjectExpression(path.node.init) && t.isProgram(path.parentPath.parentPath)){
    path.scope.rename("n", "abc")    
  }

使用gogocode,我还没法像这么简洁的弄出来,可以预想到,会有一堆代码。

bug report

  • $ggcode(code).find("import $_$ from 'asd'") 不会返回 specifier 的 imported,默认使用 local 作为返回
  • .attr() 的set/get 定义不支持返回节点数组(specifiers),目前需要 ts-ignore

问题一

$ggcode(code).find(`import $_$ from 'components'`);
// 第二种写法 $ggcode(code).find(`import { $$$ } from 'components'`);

image
image

specifier 是由 imported + local 组成,like this -> import { a as b } from 'c';

image

不知道是否是有意做了精简?

问题二,attr 的 ts 定义有问题,目前需要ignore

const item = root.find(`import { $$$ } from 'zent'`);

const curSpecifiers = item.attr('specifiers'); // 定义声明返回是个Node, 但实际上是 Node[], 所以还是要加 ts-ignore
// ... 几行逻辑

// 开始设置specifiers,这里originNodes作为Node[], 目前ts只接受Node / string, 所以这边写了 ts-ignore
item.attr('specifiers', originNodes);

(小声bb 文档有点简陋了 翻源码还比较好理解一点 /手动狗头)

怎么修改变量本身和引用呢?

改变变量名 n -> number:

// before
function square(n) {
  return n * n;
}

var n = {};
n.n = square(10);
// after
function square(number) {
  return number * number;
}

var n = {};
n.n = square(10); 

如何分析一个文件夹下面的所有文件呢?

const $ = require('gogocode')

const input = `

const list = [
{
text: "A策略",
value: 1,
tips: "Atip",
},
{
text: "B策略",
value: 2,
tips: "Btip",
},
{
text: "C策略",
value: 3,
tips: "Ctip",
},
];
const output = $(input2).replace(
'{ text: $$1, value: $$2, $$$ }',
'{ name: $$1, id: $$2, $$$ }'
).generate();

// 上面这样仅仅分析了一段代码
希望可以直接分析文件夹下面的所有内容

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.