Skip to content

Commit cdc154a

Browse files
kunaltaitkarkunaltaitkar
committed
add/remove methods
1 parent 5c1fceb commit cdc154a

File tree

5 files changed

+288
-126
lines changed

5 files changed

+288
-126
lines changed

‎example/Demo.vue‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
<button @click="addMounted">Add mounted</button>
1010
<button @click="parseCode">Parse</button>
1111
<button @click="downloadScript()">Download Script</button>
12+
<button @click="addMethod">Add method</button>
13+
<button @click="removeMethod">Remove method</button>
1214
<p align="center">Input</p>
1315
<textarea
1416
cols="91"
@@ -39,7 +41,7 @@ export default {
3941
return {}
4042
},
4143
mounted() {console.log(1)},
42-
methods: {}
44+
methods: {save(a,b) {console.log('this is method')}}
4345
}`,
4446
output: '{}',
4547
instance: '',
@@ -82,6 +84,15 @@ export default {
8284
this.instance.addMounted(this.mountedBody)
8385
this.input = this.instance.script
8486
this.mountedBody = ''
87+
},
88+
addMethod() {
89+
this.instance.addMethod('test', "console.log('this is test method')", "args1,arg2")
90+
this.instance.addMethod('test2', "console.log('this is test 2 method')")
91+
this.input = this.instance.script
92+
},
93+
removeMethod() {
94+
this.instance.removeMethod('test2')
95+
this.input = this.instance.script
8596
}
8697
},
8798
}

‎index.js‎

Lines changed: 119 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,33 @@
11
import Vue from 'vue'
2-
import { extractAndUpdateData, setNestedObject, deletePropertyPath, extractAndUpdateMounted } from './modules/helpers'
2+
import { extractAndUpdateData, setNestedObject, deletePropertyPath, extractAndUpdateMounted, extractMethodsFromScript, updateMethod, removeNewLine } from './modules/helpers'
33
import { scriptSectionProcessing } from './modules/common'
4+
import { pattern } from './modules/constant'
5+
46

5-
let dataRegex = /data\s*\(\s*\)\s*\{\s*return\s*{([^]*)}/g
6-
let mountedRegex = /mounted\s*\(\s*\)\s*{([^]*)}/g
77
class VueScriptParser {
88
constructor(vueScript = '') {
99

1010
//set original script
1111
this.script = vueScript
1212

1313
//load imports
14-
14+
1515

1616
//load data
1717
this.data = this.dataReader()
1818

1919

2020
//load mounted
2121
this.mounted = this.mountedReader()
22-
22+
2323

2424
//load methods
25+
this.methods = this.methodsReader()
2526

2627
}
2728

2829
dataReader () {
29-
let processedData = extractAndUpdateData(this.script, dataRegex)
30+
let processedData = extractAndUpdateData(this.script, pattern.dataRegex)
3031

3132
let dataFunc = new Function('return {' + processedData.oldData + '}')
3233
let vm = new Vue({
@@ -48,7 +49,7 @@ class VueScriptParser {
4849
}
4950

5051
addData (key, value) {
51-
let processedData = extractAndUpdateData(this.script, dataRegex)
52+
let processedData = extractAndUpdateData(this.script, pattern.dataRegex)
5253

5354
let dataFunc = new Function('return {' + processedData.oldData + '}')
5455
let vm = new Vue({
@@ -73,15 +74,15 @@ class VueScriptParser {
7374
)
7475

7576
this.script = this.script.replace(
76-
/data\s*\(\s*\)\s*\{\s*return\s*{([^]*)}/g,
77+
pattern.dataRegex,
7778
script
7879
)
7980

8081
}
81-
82+
8283
removeData (key) {
8384

84-
let processedData = extractAndUpdateData(this.script, dataRegex)
85+
let processedData = extractAndUpdateData(this.script, pattern.dataRegex)
8586

8687
let dataFunc = new Function('return {' + processedData.oldData + '}')
8788
let vm = new Vue({
@@ -91,7 +92,7 @@ class VueScriptParser {
9192
let obj = JSON.parse(JSON.stringify(vm._data))
9293

9394
deletePropertyPath(obj, key)
94-
95+
9596
vm._data = obj
9697

9798
let script =
@@ -106,7 +107,7 @@ class VueScriptParser {
106107
)
107108

108109
this.script = this.script.replace(
109-
/data\s*\(\s*\)\s*\{\s*return\s*{([^]*)}/g,
110+
pattern.dataRegex,
110111
script
111112
)
112113

@@ -115,12 +116,12 @@ class VueScriptParser {
115116
mountedReader () {
116117

117118
let newScript = ''
118-
let matchMounted = this.script.match(mountedRegex)
119+
let matchMounted = this.script.match(pattern.mountedRegex)
119120

120121
if (!matchMounted) {
121122
newScript = '\n mounted() { \n' + '\n}'
122123
} else {
123-
let data = scriptSectionProcessing(this.script, mountedRegex)
124+
let data = scriptSectionProcessing(this.script, pattern.mountedRegex)
124125
newScript = data.methodsString.substring(data.firstIndex + 1, data.lastIndex)
125126
}
126127

@@ -130,15 +131,117 @@ class VueScriptParser {
130131
addMounted (body) {
131132

132133
let updatedVueScript = extractAndUpdateMounted(
133-
mountedRegex,
134+
pattern.mountedRegex,
134135
this.script,
135136
body
136-
);
137+
)
137138

138139
if (updatedVueScript) {
139140
this.script = updatedVueScript
140141
}
141142
}
143+
144+
methodsReader () {
145+
let matchMethods = this.script.match(pattern.methodsRegex)
146+
if (!matchMethods) {
147+
let data = scriptSectionProcessing(this.script)
148+
149+
this.script =
150+
data.methodsString.substring(0, data.lastIndex) +
151+
',\n methods : {}\n' +
152+
data.methodsString[data.lastIndex]
153+
}
154+
let methodsData = extractMethodsFromScript(pattern.methodsRegex, this.script)
155+
156+
return methodsData || []
157+
158+
}
159+
160+
addMethod (name = '', body = '', args = '') {
161+
162+
let newMethod = {
163+
name: name,
164+
args: args,
165+
body: body
166+
}
167+
168+
let matchMethods = this.script.match(pattern.methodsRegex)
169+
if (!matchMethods) {
170+
let data = this.scriptSectionProcessing(this.script)
171+
172+
this.script =
173+
data.methodsString.substring(0, data.lastIndex) +
174+
',\n methods : {}\n' +
175+
data.methodsString[data.lastIndex]
176+
}
177+
let methodsData = extractMethodsFromScript(pattern.methodsRegex, this.script)
178+
179+
let updatedMethods = updateMethod(newMethod, methodsData)
180+
181+
182+
let { methodsString, firstIndex, lastIndex } = scriptSectionProcessing(
183+
this.script,
184+
pattern.methodsRegex
185+
)
186+
187+
updatedMethods =
188+
methodsString.substring(0, firstIndex + 1) +
189+
updatedMethods +
190+
methodsString.substring(lastIndex, methodsString.length)
191+
192+
this.script = this.script.replace(pattern.methodsRegex, updatedMethods)
193+
}
194+
195+
removeMethod (name = '') {
196+
197+
let matchMethods = this.script.match(pattern.methodsRegex)
198+
if (!name || !matchMethods) {
199+
return
200+
}
201+
202+
let methodsData = extractMethodsFromScript(pattern.methodsRegex, this.script)
203+
var existingMethods = {};
204+
(methodsData || []).forEach(function (item) {
205+
if (item.name === name) {
206+
return
207+
}
208+
existingMethods[item.name] = new Function(
209+
item.args,
210+
item.body
211+
)
212+
})
213+
214+
const vm = new Vue({
215+
methods: existingMethods
216+
})
217+
218+
let updatedMethodsData = ``
219+
220+
Object.keys(vm.$options.methods).forEach((key, index) => {
221+
let temp = String(vm.$options.methods[key]).replace(
222+
'function anonymous',
223+
key
224+
)
225+
temp = removeNewLine(temp)
226+
227+
updatedMethodsData +=
228+
Object.keys(vm.$options.methods).length - 1 === index
229+
? temp
230+
: temp + ','
231+
})
232+
233+
let { methodsString, firstIndex, lastIndex } = scriptSectionProcessing(
234+
this.script,
235+
pattern.methodsRegex
236+
)
237+
238+
updatedMethodsData =
239+
methodsString.substring(0, firstIndex + 1) +
240+
updatedMethodsData +
241+
methodsString.substring(lastIndex, methodsString.length)
242+
243+
this.script = this.script.replace(pattern.methodsRegex, updatedMethodsData)
244+
}
142245
}
143246

144247
export default VueScriptParser

‎modules/constant.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
2+
3+
const pattern = {
4+
dataRegex: /data\s*\(\s*\)\s*\{\s*return\s*{([^]*)}/g,
5+
mountedRegex: /mounted\s*\(\s*\)\s*{([^]*)}/g,
6+
methodsRegex: /methods\s*:\s*{([^]*)}/g
7+
}
8+
9+
Object.freeze(pattern)
10+
11+
export { pattern }
12+
13+

0 commit comments

Comments
 (0)