Jackie revised this gist . 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" | |
Jackie revised this gist . 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" | |
Jackie revised this gist . 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