perf: debounce now only works under text mode · cloydlau/json-editor-vue@811a7b3 (original) (raw)
``
1
`+
import type { JSONContent, JSONEditorPropsOptional, TextContent } from 'vanilla-jsoneditor'
`
``
2
`+
import type { App, Plugin, PropType } from 'vue-demi'
`
1
3
`import { destr, safeDestr } from 'destr'
`
2
4
`import { debounce } from 'lodash-es'
`
3
5
`import { JSONEditor, Mode } from 'vanilla-jsoneditor'
`
4
6
`import { computed, defineComponent, getCurrentInstance, h, isVue3, onMounted, onUnmounted, ref, unref, watch, watchEffect } from 'vue-demi'
`
5
7
`import { conclude, resolveConfig } from 'vue-global-config'
`
6
``
`-
import type { JSONEditorPropsOptional } from 'vanilla-jsoneditor'
`
7
``
`-
import type { App, Plugin, PropType } from 'vue-demi'
`
8
8
`import { PascalCasedName as name } from '../package.json'
`
9
9
``
10
10
`type SFCWithInstall = T & Plugin
`
``
11
`+
type UpdatedContent = JSONContent & Partial
`
11
12
`interface Parser { parse: typeof destr, stringify: typeof JSON.stringify }
`
12
13
``
13
14
`const propsGlobal: Record<string, any> = {}
`
`@@ -19,11 +20,11 @@ enum ModelValueProp {
`
19
20
`}
`
20
21
`const modelValueProp: ModelValueProp = isVue3 ? ModelValueProp.vue3 : ModelValueProp.vue2
`
21
22
``
22
``
`-
enum UpdateModelValue {
`
``
23
`+
enum UpdateModelValueEvent {
`
23
24
`vue3 = 'update:modelValue',
`
24
25
`vue2 = 'input',
`
25
26
`}
`
26
``
`-
const updateModelValue = isVue3 ? UpdateModelValue.vue3 : UpdateModelValue.vue2
`
``
27
`+
const updateModelValueEvent = isVue3 ? UpdateModelValueEvent.vue3 : UpdateModelValueEvent.vue2
`
27
28
``
28
29
`const boolAttrs = [
`
29
30
`'mainMenuBar',
`
`@@ -80,7 +81,7 @@ const JsonEditorVue = defineComponent({
`
80
81
`},
`
81
82
` props,
`
82
83
`emits: {
`
83
``
`-
[updateModelValue](_payload: any) {
`
``
84
`+
[updateModelValueEvent](_payload: any) {
`
84
85
`return true
`
85
86
`},
`
86
87
`'update:mode': function (_payload: Mode) {
`
`@@ -118,7 +119,8 @@ const JsonEditorVue = defineComponent({
`
118
119
`type: Boolean as PropType,
`
119
120
`}))
`
120
121
`let parse = destr
`
121
``
`-
const onChange = debounce((updatedContent: { json?: any, text?: string }) => {
`
``
122
+
``
123
`+
const updateModelValue = (updatedContent: UpdatedContent) => {
`
122
124
`preventUpdatingContent.value = true
`
123
125
`if (!stringifiedComputed.value && updatedContent.text) {
`
124
126
`if (jsonEditor.value && !jsonEditor.value.validate()) {
`
`@@ -127,12 +129,22 @@ const JsonEditorVue = defineComponent({
`
127
129
`updatedContent.text = undefined
`
128
130
`}
`
129
131
`emit(
`
130
``
`-
updateModelValue,
`
``
132
`+
updateModelValueEvent,
`
131
133
`updatedContent.text === undefined
`
132
134
` ? updatedContent.json
`
133
135
` : updatedContent.text,
`
134
136
`)
`
135
``
`-
}, debounceComputed.value)
`
``
137
`+
}
`
``
138
`+
const updateModelValueDebounced = debounce(updateModelValue, debounceComputed.value)
`
``
139
+
``
140
`+
const onChange = (updatedContent: UpdatedContent) => {
`
``
141
`+
if (modeComputed.value === 'text') {
`
``
142
`+
updateModelValueDebounced(updatedContent)
`
``
143
`+
}
`
``
144
`+
else {
`
``
145
`+
updateModelValue(updatedContent)
`
``
146
`+
}
`
``
147
`+
}
`
136
148
``
137
149
`const mergeFunction = (accumulator: (...args: any) => unknown, currentValue: (...args: any) => unknown) => (...args: any) => {
`
138
150
`accumulator(...args)
`