gist:1116ec986f464fa5a53e27a4bfd331c4

convert-vue2-vue3-comp.js · 3.4 KiB · JavaScript Raw

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)

1	const header = [
2	`import SectionNode from '@/components/sections/SectionNode.vue'`
3	]
4	const exported = {
5	name: "SectionNode",
6	props: {
7	node: Object
8	},
9	methods: {
10	gotoHeader() {
11	const element = document.getElementById(this.node.key)
12	if(element) element.scrollIntoView()
13	else console.warn(`Element not found: ${this.node.key}`)
14	}
15	}
16	};
17	// end
18
19	function cleanCode(input) {
20	return input
21	.replace(/this\.([a-zA-Z$_]+)\(/g, '$1(')
22	.replace(/this\.([a-zA-Z$_]+)/g, '$1.value')
23	.replace(/\$emit/g, 'emit')
24	.replace(/\$(route\|router)\.value/g, '$1')
25	}
26
27	function objToStr(input) {
28	return JSON.stringify(input, (key, val) => {
29	if(typeof(val) === "function") {
30	val = `-${val.name}-`
31	}
32	return val
33	}, 2)
34	.replace(/"([^"]+)":/g, '$1:')
35	.replace(/"-([a-zA-Z]+)-"/g, '$1')
36	}
37
38	function getProps() {
39	let output = ""
40	if(exported.props) {
41	output = `const props = defineProps(${objToStr(exported.props)})`
42	}
43	return output
44	}
45
46	function getData() {
47	let output = ""
48	if(exported.data) {
49	let data = exported.data()
50	for(var key in data) {
51	let v = data[key]
52	if(v && typeof v === "object") {
53	v = objToStr(data[key])
54	}
55	output += `let ${key} = ref(${v})\n`
56	}
57	}
58	return output
59	}
60
61	function getWatch() {
62	let output = ""
63	if(exported.watch) {
64	for(const key in exported.watch) {
65	let func = exported.watch[key].handler.toString()
66	.replace(/handler$(.)$\s{(.*)}/s, (match, p1, p2) => {
67	return `(${p1}) => { ${cleanCode(p2)} }`
68	})
69	output += `watch(${key}, ${func})\n`
70	}
71	}
72	return output
73	}
74
75	function getComputed() {
76	let output = ""
77	if(exported.computed) {
78	for(const key in exported.computed) {
79	let func = exported.computed[key].toString()
80	.replace(new RegExp(`${key}\\s\$(.)\$\\s{(.)}`,'s'), (match, p1, p2) => {
81	return `(${p1}) => { ${cleanCode(p2)} }`
82	})
83	output += `const ${key} = computed(${func})\n`
84	}
85	}
86	return output
87	}
88
89	function getMethods() {
90	let output = ""
91	if(exported.methods) {
92	for(const key in exported.methods) {
93	let func = exported.methods[key].toString()
94	.replace(/([a-zA-Z\s]+\s)?([a-zA-Z_]+)\s$([a-zA-Z,\s])$\s{(.)}/s, (match, p1, p2, p3, p4) => {
95	return `${p1\|\|''}function ${p2}(${p3}) {\n${cleanCode(p4)}\n}\n`
96	})
97	output += func
98	}
99	}
100	return output
101	}
102
103	function getHooks() {
104	let output = ""
105	if(exported.created) {
106	const rawfunc = exported.created.toString()
107	const func = rawfunc.slice(rawfunc.indexOf("{") + 1, rawfunc.lastIndexOf("}"));
108	output += `onBeforeMount(() => {\n${cleanCode(func)}\n})`
109	}
110	if(exported.mounted) {
111	const rawfunc = exported.mounted.toString()
112	const func = rawfunc.slice(rawfunc.indexOf("{") + 1, rawfunc.lastIndexOf("}"));
113	output += `onMounted(() => {\n${cleanCode(func)}\n})`
114	}
115	return output
116	}
117
118
119	let output = header.join("\n") + `\nimport { ref, watch, computed, onBeforeMount, onMounted, defineEmits } from 'vue'\n`
120	output += `import { useRoute, useRouter } from 'vue-router'\n\n`
121	output += `const emit = defineEmits([])\n`
122	output += `const route = useRoute()\nconst router = useRouter()\n`
123	output += getProps() + "\n"
124	output += getData() + "\n"
125	output += getWatch() + "\n"
126	output += getComputed() + "\n"
127	output += getMethods() + "\n"
128	output += getHooks() + "\n"
129
130	console.log(output)