接着上一篇 gogocode AST 抽象语法树修改器使用例子 (三)
背景
由于前段时间 webstorm 不提示 antd-vue3 的组件属性问题 见=》 如何修复 WebStorm 不提示 antd-vue 3 的组件问题
迫于无奈,只能使用下面这种命名方式
那么就需要将以往项目中所有的 a-button
这种命名的组件,转换为 AButton
我们来看下代码如何实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
| export function antdTransform($: AstType, source: string): string { source = transformTag(source);
return source; }
function transformTag(source) { if (!~source.indexOf("<template>")) { return source; }
let templateCode = $(source, { parseOptions: { language: "vue", }, }) .find("<template></template>") .eq(0) .generate(); templateCode = templateCode.replace(/<(a\-[\w-]+)/g, (all, match) => { let newTagName = nameRulesLine2HugeHump(match);
return `<${newTagName}`; });
templateCode = templateCode.replace(/<\/(a\-[\w-]+)\s?>/g, (all, match) => { let newTagName = nameRulesLine2HugeHump(match);
return `\n</${newTagName}>\n`; });
templateCode = templateCode.trim();
if (templateCode.length > 0) { source = source.replace( /<template>.*<\/template>/isu, `<template>\n${templateCode}\n</template>` ); }
return source; }
/** * 将串烧命名法转换为大驼峰命名 * a-form => AForm * @constructor */ export function nameRulesLine2HugeHump(name) { name = name.replace(/-(\w)/g, (all, letter) => { return letter.toUpperCase(); });
name = name.replace(/^\w/, (s) => s.toUpperCase());
return name; }
|