const header = [ `import SectionNode from '@/components/sections/SectionNode.vue'` ] const exported = { name: "SectionNode", props: { node: Object }, methods: { gotoHeader() { const element = document.getElementById(this.node.key) if(element) element.scrollIntoView() else console.warn(`Element not found: ${this.node.key}`) } } }; // end function cleanCode(input) { return input .replace(/this\.([a-zA-Z$_]+)\(/g, '$1(') .replace(/this\.([a-zA-Z$_]+)/g, '$1.value') .replace(/\$emit/g, 'emit') .replace(/\$(route|router)\.value/g, '$1') } function objToStr(input) { return JSON.stringify(input, (key, val) => { if(typeof(val) === "function") { val = `-${val.name}-` } return val }, 2) .replace(/"([^"]+)":/g, '$1:') .replace(/"-([a-zA-Z]+)-"/g, '$1') } function getProps() { let output = "" if(exported.props) { output = `const props = defineProps(${objToStr(exported.props)})` } return output } function getData() { let output = "" if(exported.data) { let data = exported.data() for(var key in data) { let v = data[key] if(v && typeof v === "object") { v = objToStr(data[key]) } output += `let ${key} = ref(${v})\n` } } return output } function getWatch() { let output = "" if(exported.watch) { for(const key in exported.watch) { let func = exported.watch[key].handler.toString() .replace(/handler\((.*)\)\s*{(.*)}/s, (match, p1, p2) => { return `(${p1}) => { ${cleanCode(p2)} }` }) output += `watch(${key}, ${func})\n` } } return output } function getComputed() { let output = "" if(exported.computed) { for(const key in exported.computed) { let func = exported.computed[key].toString() .replace(new RegExp(`${key}\\s*\\((.*)\\)\\s*{(.*)}`,'s'), (match, p1, p2) => { return `(${p1}) => { ${cleanCode(p2)} }` }) output += `const ${key} = computed(${func})\n` } } return output } function getMethods() { let output = "" if(exported.methods) { for(const key in exported.methods) { let func = exported.methods[key].toString() .replace(/([a-zA-Z\s]+\s)?([a-zA-Z_]+)\s*\(([a-zA-Z,\s]*)\)\s*{(.*)}/s, (match, p1, p2, p3, p4) => { return `${p1||''}function ${p2}(${p3}) {\n${cleanCode(p4)}\n}\n` }) output += func } } return output } function getHooks() { let output = "" if(exported.created) { const rawfunc = exported.created.toString() const func = rawfunc.slice(rawfunc.indexOf("{") + 1, rawfunc.lastIndexOf("}")); output += `onBeforeMount(() => {\n${cleanCode(func)}\n})` } if(exported.mounted) { const rawfunc = exported.mounted.toString() const func = rawfunc.slice(rawfunc.indexOf("{") + 1, rawfunc.lastIndexOf("}")); output += `onMounted(() => {\n${cleanCode(func)}\n})` } return output } let output = header.join("\n") + `\nimport { ref, watch, computed, onBeforeMount, onMounted, defineEmits } from 'vue'\n` output += `import { useRoute, useRouter } from 'vue-router'\n\n` output += `const emit = defineEmits([])\n` output += `const route = useRoute()\nconst router = useRouter()\n` output += getProps() + "\n" output += getData() + "\n" output += getWatch() + "\n" output += getComputed() + "\n" output += getMethods() + "\n" output += getHooks() + "\n" console.log(output)