Skip to content

Commit 5c1fceb

Browse files
kunaltaitkarkunaltaitkar
committed
Add and remove method added for data and mounted
1 parent 90b42d3 commit 5c1fceb

File tree

7 files changed

+298
-112
lines changed

7 files changed

+298
-112
lines changed

‎example/Demo.vue‎

Lines changed: 63 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
11
<template>
22
<div>
33
<div class="inline-div">
4+
<input placeholder="Variable name" v-model="variable.key"/>
5+
<input placeholder="Variable value" v-model="variable.val"/>
6+
<button @click="addVariable">Add variable</button>
7+
<button @click="removeVariable">Remove variable</button>
8+
<textarea v-model="mountedBody" placeholder="mounted body"></textarea>
9+
<button @click="addMounted">Add mounted</button>
10+
<button @click="parseCode">Parse</button>
11+
<button @click="downloadScript()">Download Script</button>
412
<p align="center">Input</p>
5-
<textarea cols="91" @input="parseCode" rows="39" class="inline-txtarea" v-model="input"></textarea>
13+
<textarea
14+
cols="91"
15+
rows="37"
16+
class="inline-txtarea"
17+
v-model="input"
18+
></textarea>
619
</div>
720
<div class="inline-div">
821
<p align="center">Output</p>
9-
<textarea cols="91" rows="39" class="inline-txtarea" v-model="output"></textarea>
22+
<textarea
23+
cols="91"
24+
rows="37"
25+
class="inline-txtarea"
26+
v-model="output"
27+
></textarea>
1028
</div>
1129
</div>
1230
</template>
@@ -16,15 +34,55 @@ import VueScriptParser from '../index'
1634
export default {
1735
data() {
1836
return {
19-
input: ``,
37+
input: `export default {
38+
data() {
39+
return {}
40+
},
41+
mounted() {console.log(1)},
42+
methods: {}
43+
}`,
2044
output: '{}',
45+
instance: '',
46+
variable: {
47+
key: '',
48+
val: ''
49+
},
50+
mountedBody: ''
2151
}
2252
},
53+
mounted() {
54+
this.instance = new VueScriptParser(this.input)
55+
this.output = JSON.stringify(this.instance, undefined, 2)
56+
},
2357
methods: {
2458
parseCode() {
25-
let instance = new VueScriptParser(this.input)
26-
this.output = JSON.stringify(instance, undefined, 2)
59+
this.instance = new VueScriptParser(this.input)
60+
this.output = JSON.stringify(this.instance, undefined, 2)
61+
},
62+
addVariable() {
63+
this.instance.addData(this.variable.key, this.variable.val)
64+
this.input = this.instance.script
65+
this.variable = {
66+
key: '',
67+
val:''
68+
}
69+
},
70+
removeVariable() {
71+
this.instance.removeData(this.variable.key)
72+
this.input = this.instance.script
73+
this.variable = {
74+
key: '',
75+
val:''
76+
}
2777
},
78+
downloadScript() {
79+
alert(this.instance.script)
80+
},
81+
addMounted() {
82+
this.instance.addMounted(this.mountedBody)
83+
this.input = this.instance.script
84+
this.mountedBody = ''
85+
}
2886
},
2987
}
3088
</script>

‎index.js‎

Lines changed: 123 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,143 @@
1-
import Data from './modules/data'
2-
import Methods from './modules/methods'
3-
import Mounted from './modules/mounted'
4-
import Imports from './modules/imports'
1+
import Vue from 'vue'
2+
import { extractAndUpdateData, setNestedObject, deletePropertyPath, extractAndUpdateMounted } from './modules/helpers'
3+
import { scriptSectionProcessing } from './modules/common'
54

5+
let dataRegex = /data\s*\(\s*\)\s*\{\s*return\s*{([^]*)}/g
6+
let mountedRegex = /mounted\s*\(\s*\)\s*{([^]*)}/g
67
class VueScriptParser {
78
constructor(vueScript = '') {
89

910
//set original script
1011
this.script = vueScript
1112

1213
//load imports
13-
let importsProcessor = new Imports(vueScript)
14-
this.imports = importsProcessor.imports
14+
1515

1616
//load data
17-
let dataProcessor = new Data(vueScript)
18-
this.data = dataProcessor.data
17+
this.data = this.dataReader()
18+
1919

2020
//load mounted
21-
let mountedProcessor = new Mounted(vueScript)
22-
this.mounted = mountedProcessor.mounted
21+
this.mounted = this.mountedReader()
22+
2323

2424
//load methods
25-
let methodsProcessor = new Methods(vueScript)
26-
this.methods = methodsProcessor.methods
27-
25+
2826
}
29-
addVariable () {
30-
27+
28+
dataReader () {
29+
let processedData = extractAndUpdateData(this.script, dataRegex)
30+
31+
let dataFunc = new Function('return {' + processedData.oldData + '}')
32+
let vm = new Vue({
33+
data: dataFunc
34+
})
35+
36+
37+
let result = []
38+
39+
Object.keys(vm._data).forEach(key => {
40+
result.push({
41+
key: key,
42+
value: vm._data[key]
43+
})
44+
})
45+
46+
47+
return result
3148
}
32-
removeVariable () {
49+
50+
addData (key, value) {
51+
let processedData = extractAndUpdateData(this.script, dataRegex)
52+
53+
let dataFunc = new Function('return {' + processedData.oldData + '}')
54+
let vm = new Vue({
55+
data: dataFunc
56+
})
57+
58+
vm._data = setNestedObject(
59+
vm._data,
60+
key.split('.'),
61+
value
62+
)
63+
64+
let script =
65+
processedData.data.methodsString.substring(
66+
0,
67+
processedData.data.firstIndex
68+
) +
69+
JSON.stringify(vm._data) +
70+
processedData.data.methodsString.substring(
71+
processedData.data.lastIndex + 1,
72+
processedData.data.methodsString.length
73+
)
74+
75+
this.script = this.script.replace(
76+
/data\s*\(\s*\)\s*\{\s*return\s*{([^]*)}/g,
77+
script
78+
)
79+
80+
}
81+
82+
removeData (key) {
83+
84+
let processedData = extractAndUpdateData(this.script, dataRegex)
85+
86+
let dataFunc = new Function('return {' + processedData.oldData + '}')
87+
let vm = new Vue({
88+
data: dataFunc
89+
})
90+
91+
let obj = JSON.parse(JSON.stringify(vm._data))
92+
93+
deletePropertyPath(obj, key)
3394

95+
vm._data = obj
96+
97+
let script =
98+
processedData.data.methodsString.substring(
99+
0,
100+
processedData.data.firstIndex
101+
) +
102+
JSON.stringify(vm._data) +
103+
processedData.data.methodsString.substring(
104+
processedData.data.lastIndex + 1,
105+
processedData.data.methodsString.length
106+
)
107+
108+
this.script = this.script.replace(
109+
/data\s*\(\s*\)\s*\{\s*return\s*{([^]*)}/g,
110+
script
111+
)
112+
113+
114+
}
115+
mountedReader () {
116+
117+
let newScript = ''
118+
let matchMounted = this.script.match(mountedRegex)
119+
120+
if (!matchMounted) {
121+
newScript = '\n mounted() { \n' + '\n}'
122+
} else {
123+
let data = scriptSectionProcessing(this.script, mountedRegex)
124+
newScript = data.methodsString.substring(data.firstIndex + 1, data.lastIndex)
125+
}
126+
127+
return newScript
128+
}
129+
130+
addMounted (body) {
131+
132+
let updatedVueScript = extractAndUpdateMounted(
133+
mountedRegex,
134+
this.script,
135+
body
136+
);
137+
138+
if (updatedVueScript) {
139+
this.script = updatedVueScript
140+
}
34141
}
35142
}
36143

‎modules/data.js‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

0 commit comments

Comments
 (0)