Like 0
Fork 0

Last active 1 year ago

jackz's Avatar Jackie revised this gist 3 years ago. Go to revision

1 file changed, 9 insertions, 21 deletions

convert-vue2-vue3-comp.js

@@ -1,30 +1,19 @@
1 1 const header = [
2 - `import Modal from '@/components/Modal'`
2 + `import SectionNode from '@/components/sections/SectionNode.vue'`
3 3 ]
4 4 const exported = {
5 + name: "SectionNode",
5 6 props: {
6 - data: {
7 - type: Object
8 - },
9 - prefix: String
7 + node: Object
10 8 },
11 9 methods: {
12 - format(input) {
13 - return input
14 - .replace(/%cmd%/, this.prefix + this.data.name)
15 - .replace(/%name%/, this.data.name)
16 - .replace(/%prefix%/, this.prefix)
17 - },
18 - close() {
19 - this.$emit('close')
20 - }
21 - },
22 - computed: {
23 - active() {
24 - return this.data && this.data.name !== null && this.data.name !== undefined
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}`)
25 14 }
26 15 }
27 - }
16 + };
28 17 // end
29 18
30 19 function cleanCode(input) {
@@ -37,7 +26,6 @@ function cleanCode(input) {
37 26
38 27 function objToStr(input) {
39 28 return JSON.stringify(input, (key, val) => {
40 - console.log(val, typeof val, val.constructor.name)
41 29 if(typeof(val) === "function") {
42 30 val = `-${val.name}-`
43 31 }
@@ -130,7 +118,7 @@ function getHooks() {
130 118
131 119 let output = header.join("\n") + `\nimport { ref, watch, computed, onBeforeMount, onMounted, defineEmits } from 'vue'\n`
132 120 output += `import { useRoute, useRouter } from 'vue-router'\n\n`
133 - output += `const emit = defineEmits([])'\n`
121 + output += `const emit = defineEmits([])\n`
134 122 output += `const route = useRoute()\nconst router = useRouter()\n`
135 123 output += getProps() + "\n"
136 124 output += getData() + "\n"

jackz's Avatar Jackie revised this gist 3 years ago. Go to revision

1 file changed, 57 insertions, 7 deletions

convert-vue2-vue3-comp.js

@@ -1,5 +1,31 @@
1 - // Put everything under export default { into exported (as an object)
2 - const exported = {}
1 + const header = [
2 + `import Modal from '@/components/Modal'`
3 + ]
4 + const exported = {
5 + props: {
6 + data: {
7 + type: Object
8 + },
9 + prefix: String
10 + },
11 + methods: {
12 + format(input) {
13 + return input
14 + .replace(/%cmd%/, this.prefix + this.data.name)
15 + .replace(/%name%/, this.data.name)
16 + .replace(/%prefix%/, this.prefix)
17 + },
18 + close() {
19 + this.$emit('close')
20 + }
21 + },
22 + computed: {
23 + active() {
24 + return this.data && this.data.name !== null && this.data.name !== undefined
25 + }
26 + }
27 + }
28 + // end
3 29
4 30 function cleanCode(input) {
5 31 return input
@@ -9,17 +35,39 @@ function cleanCode(input) {
9 35 .replace(/\$(route|router)\.value/g, '$1')
10 36 }
11 37
38 + function objToStr(input) {
39 + return JSON.stringify(input, (key, val) => {
40 + console.log(val, typeof val, val.constructor.name)
41 + if(typeof(val) === "function") {
42 + val = `-${val.name}-`
43 + }
44 + return val
45 + }, 2)
46 + .replace(/"([^"]+)":/g, '$1:')
47 + .replace(/"-([a-zA-Z]+)-"/g, '$1')
48 + }
49 +
50 + function getProps() {
51 + let output = ""
52 + if(exported.props) {
53 + output = `const props = defineProps(${objToStr(exported.props)})`
54 + }
55 + return output
56 + }
57 +
12 58 function getData() {
59 + let output = ""
60 + if(exported.data) {
13 61 let data = exported.data()
14 - let output = ""
15 62 for(var key in data) {
16 63 let v = data[key]
17 64 if(v && typeof v === "object") {
18 - v = JSON.stringify(data[key], null, 2).replace(/"([^"]+)":/g, '$1:')
65 + v = objToStr(data[key])
19 66 }
20 67 output += `let ${key} = ref(${v})\n`
21 68 }
22 - return output
69 + }
70 + return output
23 71 }
24 72
25 73 function getWatch() {
@@ -80,9 +128,11 @@ function getHooks() {
80 128 }
81 129
82 130
83 - let output = `import { ref, watch, computed, onBeforeMount, onMounted } from 'vue'\n`
84 - output += `import { useRoute, useRouter } from 'vue-router'\n`
131 + let output = header.join("\n") + `\nimport { ref, watch, computed, onBeforeMount, onMounted, defineEmits } from 'vue'\n`
132 + output += `import { useRoute, useRouter } from 'vue-router'\n\n`
133 + output += `const emit = defineEmits([])'\n`
85 134 output += `const route = useRoute()\nconst router = useRouter()\n`
135 + output += getProps() + "\n"
86 136 output += getData() + "\n"
87 137 output += getWatch() + "\n"
88 138 output += getComputed() + "\n"

jackz's Avatar Jackie revised this gist 3 years ago. Go to revision

1 file changed, 92 insertions

convert-vue2-vue3-comp.js(file created)

@@ -0,0 +1,92 @@
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)
Newer Older

Powered by Opengist ⋅ Load: 47ms⋅

English