gist:1116ec986f464fa5a53e27a4bfd331c4

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

// Put everything under export default { into exported (as an object)
const exported = {}

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 getData() {
    let data = exported.data()
    let output = ""
    for(var key in data) {
        let v = data[key]
        if(v && typeof v === "object") {
            v = JSON.stringify(data[key], null, 2).replace(/"([^"]+)":/g, '$1:')
        }
        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 = `import { ref, watch, computed, onBeforeMount, onMounted } from 'vue'\n`
output += `import { useRoute, useRouter } from 'vue-router'\n`
output += `const route = useRoute()\nconst router = useRouter()\n`
output += getData() + "\n"
output += getWatch() + "\n"
output += getComputed() + "\n"
output += getMethods() + "\n"
output += getHooks() + "\n"

console.log(output)

1	// Put everything under export default { into exported (as an object)
2	const exported = {}
3
4	function cleanCode(input) {
5	return input
6	.replace(/this\.([a-zA-Z$_]+)\(/g, '$1(')
7	.replace(/this\.([a-zA-Z$_]+)/g, '$1.value')
8	.replace(/\$emit/g, 'emit')
9	.replace(/\$(route\|router)\.value/g, '$1')
10	}
11
12	function getData() {
13	let data = exported.data()
14	let output = ""
15	for(var key in data) {
16	let v = data[key]
17	if(v && typeof v === "object") {
18	v = JSON.stringify(data[key], null, 2).replace(/"([^"]+)":/g, '$1:')
19	}
20	output += `let ${key} = ref(${v})\n`
21	}
22	return output
23	}
24
25	function getWatch() {
26	let output = ""
27	if(exported.watch) {
28	for(const key in exported.watch) {
29	let func = exported.watch[key].handler.toString()
30	.replace(/handler$(.)$\s{(.*)}/s, (match, p1, p2) => {
31	return `(${p1}) => { ${cleanCode(p2)} }`
32	})
33	output += `watch(${key}, ${func})\n`
34	}
35	}
36	return output
37	}
38
39	function getComputed() {
40	let output = ""
41	if(exported.computed) {
42	for(const key in exported.computed) {
43	let func = exported.computed[key].toString()
44	.replace(new RegExp(`${key}\\s\$(.)\$\\s{(.)}`,'s'), (match, p1, p2) => {
45	return `(${p1}) => { ${cleanCode(p2)} }`
46	})
47	output += `const ${key} = computed(${func})\n`
48	}
49	}
50	return output
51	}
52
53	function getMethods() {
54	let output = ""
55	if(exported.methods) {
56	for(const key in exported.methods) {
57	let func = exported.methods[key].toString()
58	.replace(/([a-zA-Z\s]+\s)?([a-zA-Z_]+)\s$([a-zA-Z,\s])$\s{(.)}/s, (match, p1, p2, p3, p4) => {
59	return `${p1\|\|''}function ${p2}(${p3}) {\n${cleanCode(p4)}\n}\n`
60	})
61	output += func
62	}
63	}
64	return output
65	}
66
67	function getHooks() {
68	let output = ""
69	if(exported.created) {
70	const rawfunc = exported.created.toString()
71	const func = rawfunc.slice(rawfunc.indexOf("{") + 1, rawfunc.lastIndexOf("}"));
72	output += `onBeforeMount(() => {\n${cleanCode(func)}\n})`
73	}
74	if(exported.mounted) {
75	const rawfunc = exported.mounted.toString()
76	const func = rawfunc.slice(rawfunc.indexOf("{") + 1, rawfunc.lastIndexOf("}"));
77	output += `onMounted(() => {\n${cleanCode(func)}\n})`
78	}
79	return output
80	}
81
82
83	let output = `import { ref, watch, computed, onBeforeMount, onMounted } from 'vue'\n`
84	output += `import { useRoute, useRouter } from 'vue-router'\n`
85	output += `const route = useRoute()\nconst router = useRouter()\n`
86	output += getData() + "\n"
87	output += getWatch() + "\n"
88	output += getComputed() + "\n"
89	output += getMethods() + "\n"
90	output += getHooks() + "\n"
91
92	console.log(output)