From 39bf95f2e41c897114e02619f947c780eacc1ecf Mon Sep 17 00:00:00 2001 From: xhayper Date: Fri, 9 Dec 2022 13:35:53 +0700 Subject: [PATCH 01/12] fix: typing --- src/Component.ts | 43 ++++++++++++++++++++++--------------------- tsconfig.json | 1 + 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/src/Component.ts b/src/Component.ts index e59cf7b..842f1d1 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -9,7 +9,7 @@ import { unref, watch, } from 'vue-demi' -import type { PropType } from 'vue-demi' +import type { HTMLAttributes, PropType } from 'vue-demi' import { JSONEditor } from 'vanilla-jsoneditor' import { conclude } from 'vue-global-config' import { debounce } from 'lodash-es' @@ -18,9 +18,13 @@ import { globalAttrs, globalProps } from './install' export type Mode = 'tree' | 'text' | 'table' -const modelValueProp = isVue3 ? 'modelValue' : 'value' -const updateModelValue = isVue3 ? 'update:modelValue' : 'input' -const boolAttrs = [ +type ModalValue = typeof isVue3 extends true ? 'modelValue' : 'value' +type UpdateModalValue = typeof isVue3 extends true ? 'update:modelValue' : 'input' + +const modelValueProp: ModalValue = (isVue3 ? 'modelValue' : 'value') as any +const updateModelValue: UpdateModalValue = (isVue3 ? 'update:modelValue' : 'input') as any + +const boolAttributes = [ 'mainMenuBar', 'navigationBar', 'statusBar', @@ -28,21 +32,18 @@ const boolAttrs = [ 'escapeControlCharacters', 'escapeUnicodeCharacters', 'flattenColumns', -] +] as const + +type Attributes = ModalValue | UpdateModalValue +type BoolAttributes = { + [K in typeof boolAttributes[number]]: { + type: Boolean + default: undefined + } +} -export default defineComponent({ +export default defineComponent } & { [K in Attributes]: any } & BoolAttributes, {}, {}, {}, {}, {}, {}, { 'update:mode': (mode: Mode) => void; 'update:modalValue': (value: unknown) => void; 'input': (value: unknown) => void }>({ name, - props: { - [modelValueProp]: {}, - mode: { - type: String as PropType, - }, - ...Object.fromEntries(Array.from(boolAttrs, boolAttr => [boolAttr, { - type: Boolean, - default: undefined, - }])), - }, - emits: [updateModelValue, 'update:mode'], setup(props, { attrs, emit, expose }) { const currentInstance = getCurrentInstance()?.proxy const jsonEditor = ref() @@ -54,7 +55,7 @@ export default defineComponent({ type: String as PropType, }) const initialValue = conclude([props[modelValueProp], globalProps[modelValueProp]]) - const initialBoolAttrs = Object.fromEntries(Array.from(boolAttrs, boolAttr => + const initialBoolAttrs = Object.fromEntries(Array.from(boolAttributes, boolAttr => [boolAttr, conclude([props[boolAttr], globalProps[boolAttr]])]) .filter(([, v]) => v !== undefined)) @@ -64,7 +65,7 @@ export default defineComponent({ return } preventUpdate.value = true - emit(updateModelValue, updatedContent.text === undefined + emit(updateModelValue as any, updatedContent.text === undefined ? updatedContent.json : updatedContent.text) }, 100) @@ -117,9 +118,9 @@ export default defineComponent({ }) }) - watch(() => Array.from(boolAttrs, boolAttr => props[boolAttr]), (values) => { + watch(() => Array.from(boolAttributes, boolAttr => props[boolAttr]), (values) => { jsonEditor.value.updateProps(Object.fromEntries(Array.from(values, (v, i) => - [boolAttrs[i], v]).filter(([, v]) => v !== undefined))) + [boolAttributes[i], v]).filter(([, v]) => v !== undefined))) }) watch(() => attrs, (newAttrs) => { diff --git a/tsconfig.json b/tsconfig.json index 26754a9..b3f9355 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,6 +15,7 @@ "resolveJsonModule": true, "esModuleInterop": true, "removeComments": false, + "skipLibCheck": true, "jsx": "preserve", "lib": ["esnext", "dom"], "types": ["node"], From baec18ff6751d031c06c180b2b2b4777deececf9 Mon Sep 17 00:00:00 2001 From: xhayper Date: Fri, 9 Dec 2022 13:38:19 +0700 Subject: [PATCH 02/12] fix: typing again --- src/Component.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/Component.ts b/src/Component.ts index 842f1d1..43725f2 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -36,10 +36,7 @@ const boolAttributes = [ type Attributes = ModalValue | UpdateModalValue type BoolAttributes = { - [K in typeof boolAttributes[number]]: { - type: Boolean - default: undefined - } + [K in typeof boolAttributes[number]]: boolean } export default defineComponent } & { [K in Attributes]: any } & BoolAttributes, {}, {}, {}, {}, {}, {}, { 'update:mode': (mode: Mode) => void; 'update:modalValue': (value: unknown) => void; 'input': (value: unknown) => void }>({ From a70e58d33a6399da0d1cb3df9a5bcc3d94b48bc3 Mon Sep 17 00:00:00 2001 From: xhayper Date: Fri, 9 Dec 2022 13:39:16 +0700 Subject: [PATCH 03/12] fix: packageManager field --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7754846..9d0ee79 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "pascalCasedName": "JsonEditorVue", "version": "0.10.2", "private": false, - "packageManager": "pnpm@latest", + "packageManager": "pnpm@7.16.1", "description": "JSON editor & viewer for Vue 2.6 / 2.7 / 3 & Nuxt 2 / 3.", "author": "cloydlau", "license": "MIT", From 8645981aa6c0f203ec5ecb73d91c51f19886a764 Mon Sep 17 00:00:00 2001 From: xhayper Date: Fri, 9 Dec 2022 13:47:10 +0700 Subject: [PATCH 04/12] fix: props not being accepted --- pnpm-lock.yaml | 10 +++++----- src/Component.ts | 11 +++++++++++ 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e85a951..d79fb77 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,7 +50,7 @@ devDependencies: eslint: 8.29.0 happy-dom: 8.1.0 husky: 8.0.2 - json-editor-vue: 0.10.1_nkjgdub26lwb65ofqmrbma3in4 + json-editor-vue: 0.10.2_nkjgdub26lwb65ofqmrbma3in4 lint-staged: 13.1.0 lossless-json: 2.0.3 typescript: 4.9.4 @@ -656,7 +656,7 @@ packages: dev: true /@nodelib/fs.scandir/2.1.5: - resolution: {integrity: sha1-dhnC6yGyVIP20WdUi0z9WnSIw9U=, tarball: '@nodelib/fs.scandir/download/@nodelib/fs.scandir-2.1.5.tgz'} + resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} dependencies: '@nodelib/fs.stat': 2.0.5 @@ -1577,7 +1577,7 @@ packages: dev: true /concat-map/0.0.1: - resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=, tarball: concat-map/download/concat-map-0.0.1.tgz} + resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} dev: true /constant-case/3.0.4: @@ -3127,8 +3127,8 @@ packages: hasBin: true dev: true - /json-editor-vue/0.10.1_nkjgdub26lwb65ofqmrbma3in4: - resolution: {integrity: sha512-XzHl6wtJG63pxyXIKZhicNjofA8xup/hQlwH/Q1bN+/+ODprQK4th6eqA9lz/as7h8gG5nI6ZT7gSNNl5IgQXg==} + /json-editor-vue/0.10.2_nkjgdub26lwb65ofqmrbma3in4: + resolution: {integrity: sha512-fd0b9vBgUfKFIkgNSPYSiwMRS+NydhgqiF+dCRI+cyy2MGhqcKLOenyrbshI3peAoXSvMiMG8aAmoxLiXcxCRQ==} peerDependencies: '@vue/composition-api': '>=1' vanilla-jsoneditor: '>=0' diff --git a/src/Component.ts b/src/Component.ts index 43725f2..74cafbc 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -41,6 +41,17 @@ type BoolAttributes = { export default defineComponent } & { [K in Attributes]: any } & BoolAttributes, {}, {}, {}, {}, {}, {}, { 'update:mode': (mode: Mode) => void; 'update:modalValue': (value: unknown) => void; 'input': (value: unknown) => void }>({ name, + props: { + [modelValueProp]: {}, + mode: { + type: String as PropType, + }, + ...Object.fromEntries(Array.from(boolAttributes, boolAttr => [boolAttr, { + type: Boolean, + default: undefined, + }])), + } as any, + emits: [updateModelValue, 'update:mode'], setup(props, { attrs, emit, expose }) { const currentInstance = getCurrentInstance()?.proxy const jsonEditor = ref() From 505f0d261b9dd07ad01c7a655ac67501c8dc3551 Mon Sep 17 00:00:00 2001 From: xhayper Date: Fri, 9 Dec 2022 13:52:00 +0700 Subject: [PATCH 05/12] chore: update pnpm --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9d0ee79..39be1be 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "pascalCasedName": "JsonEditorVue", "version": "0.10.2", "private": false, - "packageManager": "pnpm@7.16.1", + "packageManager": "pnpm@7.18.1", "description": "JSON editor & viewer for Vue 2.6 / 2.7 / 3 & Nuxt 2 / 3.", "author": "cloydlau", "license": "MIT", From 1a06503145b62075fe9e410e27f7a5ce1a672183 Mon Sep 17 00:00:00 2001 From: xhayper Date: Fri, 9 Dec 2022 14:29:52 +0700 Subject: [PATCH 06/12] fix: properly fix typing --- src/Component.ts | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/Component.ts b/src/Component.ts index 74cafbc..5931776 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -9,7 +9,7 @@ import { unref, watch, } from 'vue-demi' -import type { HTMLAttributes, PropType } from 'vue-demi' +import type { PropType } from 'vue-demi' import { JSONEditor } from 'vanilla-jsoneditor' import { conclude } from 'vue-global-config' import { debounce } from 'lodash-es' @@ -18,10 +18,10 @@ import { globalAttrs, globalProps } from './install' export type Mode = 'tree' | 'text' | 'table' -type ModalValue = typeof isVue3 extends true ? 'modelValue' : 'value' +type ModalValueProp = typeof isVue3 extends true ? 'modelValue' : 'value' type UpdateModalValue = typeof isVue3 extends true ? 'update:modelValue' : 'input' -const modelValueProp: ModalValue = (isVue3 ? 'modelValue' : 'value') as any +const modelValueProp: ModalValueProp = (isVue3 ? 'modelValue' : 'value') as any const updateModelValue: UpdateModalValue = (isVue3 ? 'update:modelValue' : 'input') as any const boolAttributes = [ @@ -34,23 +34,19 @@ const boolAttributes = [ 'flattenColumns', ] as const -type Attributes = ModalValue | UpdateModalValue -type BoolAttributes = { - [K in typeof boolAttributes[number]]: boolean -} - -export default defineComponent } & { [K in Attributes]: any } & BoolAttributes, {}, {}, {}, {}, {}, {}, { 'update:mode': (mode: Mode) => void; 'update:modalValue': (value: unknown) => void; 'input': (value: unknown) => void }>({ +export default defineComponent({ name, + inheritAttrs: true, props: { [modelValueProp]: {}, mode: { type: String as PropType, }, - ...Object.fromEntries(Array.from(boolAttributes, boolAttr => [boolAttr, { + ...(Object.fromEntries(Array.from(boolAttributes, boolAttr => [boolAttr, { type: Boolean, default: undefined, - }])), - } as any, + }])) as { [key in typeof boolAttributes[number]]: { type: BooleanConstructor; default: undefined } }), + }, emits: [updateModelValue, 'update:mode'], setup(props, { attrs, emit, expose }) { const currentInstance = getCurrentInstance()?.proxy From bd8878c0b0f03d1448fb9780868df6730c192264 Mon Sep 17 00:00:00 2001 From: xhayper Date: Fri, 9 Dec 2022 14:31:03 +0700 Subject: [PATCH 07/12] fix: last fix --- src/Component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Component.ts b/src/Component.ts index 5931776..1346ffb 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -43,9 +43,9 @@ export default defineComponent({ type: String as PropType, }, ...(Object.fromEntries(Array.from(boolAttributes, boolAttr => [boolAttr, { - type: Boolean, + type: Boolean as PropType, default: undefined, - }])) as { [key in typeof boolAttributes[number]]: { type: BooleanConstructor; default: undefined } }), + }])) as { [key in typeof boolAttributes[number]]: { type: PropType; default: undefined } }), }, emits: [updateModelValue, 'update:mode'], setup(props, { attrs, emit, expose }) { From c33706ba99b6ee8ce142dd1271198bde6bcea23e Mon Sep 17 00:00:00 2001 From: xhayper Date: Fri, 9 Dec 2022 14:39:15 +0700 Subject: [PATCH 08/12] feat: use .map instead of Array.from --- src/Component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Component.ts b/src/Component.ts index 1346ffb..28ef7d5 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -42,10 +42,10 @@ export default defineComponent({ mode: { type: String as PropType, }, - ...(Object.fromEntries(Array.from(boolAttributes, boolAttr => [boolAttr, { + ...(Object.fromEntries(boolAttributes.map(boolAttr => [boolAttr, { type: Boolean as PropType, - default: undefined, - }])) as { [key in typeof boolAttributes[number]]: { type: PropType; default: undefined } }), + default: false, + }])) as { [key in typeof boolAttributes[number]]: { type: PropType; default: boolean } }), }, emits: [updateModelValue, 'update:mode'], setup(props, { attrs, emit, expose }) { From 0a8d1ac03c005841e402479373967b66632fb0b3 Mon Sep 17 00:00:00 2001 From: xhayper Date: Fri, 9 Dec 2022 14:41:11 +0700 Subject: [PATCH 09/12] remove: as any --- src/Component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Component.ts b/src/Component.ts index 28ef7d5..9212c5b 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -69,7 +69,7 @@ export default defineComponent({ return } preventUpdate.value = true - emit(updateModelValue as any, updatedContent.text === undefined + emit(updateModelValue, updatedContent.text === undefined ? updatedContent.json : updatedContent.text) }, 100) From b1a5a84d2e73ad739ab635fedeb2206f70d1557d Mon Sep 17 00:00:00 2001 From: xhayper Date: Fri, 9 Dec 2022 14:46:01 +0700 Subject: [PATCH 10/12] fix: typing yet again --- src/Component.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/Component.ts b/src/Component.ts index 9212c5b..3f1dcef 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -18,11 +18,8 @@ import { globalAttrs, globalProps } from './install' export type Mode = 'tree' | 'text' | 'table' -type ModalValueProp = typeof isVue3 extends true ? 'modelValue' : 'value' -type UpdateModalValue = typeof isVue3 extends true ? 'update:modelValue' : 'input' - -const modelValueProp: ModalValueProp = (isVue3 ? 'modelValue' : 'value') as any -const updateModelValue: UpdateModalValue = (isVue3 ? 'update:modelValue' : 'input') as any +const modelValueProp: any = isVue3 ? 'modelValue' : 'value' +const updateModelValue: any = isVue3 ? 'update:modelValue' : 'input' const boolAttributes = [ 'mainMenuBar', @@ -38,7 +35,7 @@ export default defineComponent({ name, inheritAttrs: true, props: { - [modelValueProp]: {}, + [modelValueProp as any]: {}, mode: { type: String as PropType, }, From 666c4ef26b3bc12230fd8c20718dfa53651c52cb Mon Sep 17 00:00:00 2001 From: xhayper Date: Fri, 9 Dec 2022 14:48:23 +0700 Subject: [PATCH 11/12] remove: unnessecary as any --- src/Component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Component.ts b/src/Component.ts index 3f1dcef..3f4a10e 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -35,7 +35,7 @@ export default defineComponent({ name, inheritAttrs: true, props: { - [modelValueProp as any]: {}, + [modelValueProp]: {}, mode: { type: String as PropType, }, From 44868dbdf3fa3336bb760686384267756cb0a5c5 Mon Sep 17 00:00:00 2001 From: Cloyd Lau <31238760+cloydlau@users.noreply.github.com> Date: Sun, 11 Dec 2022 16:03:37 +0800 Subject: [PATCH 12/12] Update Component.ts --- src/Component.ts | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/Component.ts b/src/Component.ts index 3f4a10e..dd9be72 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -20,8 +20,7 @@ export type Mode = 'tree' | 'text' | 'table' const modelValueProp: any = isVue3 ? 'modelValue' : 'value' const updateModelValue: any = isVue3 ? 'update:modelValue' : 'input' - -const boolAttributes = [ +const boolAttrs = [ 'mainMenuBar', 'navigationBar', 'statusBar', @@ -39,10 +38,10 @@ export default defineComponent({ mode: { type: String as PropType, }, - ...(Object.fromEntries(boolAttributes.map(boolAttr => [boolAttr, { + ...(Object.fromEntries(boolAttrs.map(boolAttr => [boolAttr, { type: Boolean as PropType, - default: false, - }])) as { [key in typeof boolAttributes[number]]: { type: PropType; default: boolean } }), + default: undefined, + }])) as { [key in typeof boolAttrs[number]]: { type: PropType; default: undefined } }), }, emits: [updateModelValue, 'update:mode'], setup(props, { attrs, emit, expose }) { @@ -56,7 +55,7 @@ export default defineComponent({ type: String as PropType, }) const initialValue = conclude([props[modelValueProp], globalProps[modelValueProp]]) - const initialBoolAttrs = Object.fromEntries(Array.from(boolAttributes, boolAttr => + const initialBoolAttrs = Object.fromEntries(Array.from(boolAttrs, boolAttr => [boolAttr, conclude([props[boolAttr], globalProps[boolAttr]])]) .filter(([, v]) => v !== undefined)) @@ -119,9 +118,9 @@ export default defineComponent({ }) }) - watch(() => Array.from(boolAttributes, boolAttr => props[boolAttr]), (values) => { + watch(() => Array.from(boolAttrs, boolAttr => props[boolAttr]), (values) => { jsonEditor.value.updateProps(Object.fromEntries(Array.from(values, (v, i) => - [boolAttributes[i], v]).filter(([, v]) => v !== undefined))) + [boolAttrs[i], v]).filter(([, v]) => v !== undefined))) }) watch(() => attrs, (newAttrs) => {