From 3f5fef40872e27d25b08afe786c526690ec013be Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Fri, 23 Sep 2022 01:29:37 +0300 Subject: [PATCH 01/11] Remove unused code --- src/components/DataTypes/Object.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/DataTypes/Object.tsx b/src/components/DataTypes/Object.tsx index 4e4869dd..9b15f022 100644 --- a/src/components/DataTypes/Object.tsx +++ b/src/components/DataTypes/Object.tsx @@ -123,7 +123,6 @@ export const ObjectType: React.FC> = (props) => { if (iterator && !Array.isArray(value)) { const elements = [] if (value instanceof Map) { - let _count = 0 for (const item of value) { // fixme: key might be a object, array, or any value for the `Map` const [k, value] = item @@ -132,7 +131,6 @@ export const ObjectType: React.FC> = (props) => { ) - _count++ } } else { let count = 0 From 50006d41d5d4fe17bb562f0e38dbd86d7739b965 Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Fri, 23 Sep 2022 01:29:46 +0300 Subject: [PATCH 02/11] Expand if --- src/hooks/useInspect.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/hooks/useInspect.ts b/src/hooks/useInspect.ts index 639da586..43956c25 100644 --- a/src/hooks/useInspect.ts +++ b/src/hooks/useInspect.ts @@ -34,15 +34,16 @@ export function useInspect (path: (string | number)[], value: any, nestedIndex?: }, [defaultInspectDepth, depth, getInspectCache, isTrap, nestedIndex, path, setInspectCache]) const [inspect, set] = useState(() => { const shouldInspect = getInspectCache(path, nestedIndex) - if (shouldInspect === undefined) { - if (nestedIndex !== undefined) { - return false - } - return isTrap - ? false - : depth < defaultInspectDepth + if (shouldInspect !== undefined) { + return shouldInspect } - return shouldInspect + if (nestedIndex !== undefined) { + return false + } + return isTrap + ? false + : depth < defaultInspectDepth + }) const setInspect = useCallback>>((apply) => { set((oldState) => { From d16104feeb86b33f762e39e2d668179e1b83600e Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Fri, 23 Sep 2022 01:31:17 +0300 Subject: [PATCH 03/11] Expand if --- src/hooks/useInspect.ts | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/hooks/useInspect.ts b/src/hooks/useInspect.ts index 43956c25..f80c0b94 100644 --- a/src/hooks/useInspect.ts +++ b/src/hooks/useInspect.ts @@ -20,16 +20,17 @@ export function useInspect (path: (string | number)[], value: any, nestedIndex?: store => store.defaultInspectDepth) useEffect(() => { const inspect = getInspectCache(path, nestedIndex) - if (inspect === undefined) { - if (nestedIndex !== undefined) { - setInspectCache(path, false, nestedIndex) - } else { - // do not inspect when it is a cycle reference, otherwise there will have a loop - const inspect = isTrap - ? false - : depth < defaultInspectDepth - setInspectCache(path, inspect) - } + if (inspect !== undefined) { + return + } + if (nestedIndex !== undefined) { + setInspectCache(path, false, nestedIndex) + } else { + // do not inspect when it is a cycle reference, otherwise there will have a loop + const inspect = isTrap + ? false + : depth < defaultInspectDepth + setInspectCache(path, inspect) } }, [defaultInspectDepth, depth, getInspectCache, isTrap, nestedIndex, path, setInspectCache]) const [inspect, set] = useState(() => { From 020a00076d393754873f0ecf39db0d19595779eb Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Fri, 23 Sep 2022 01:37:15 +0300 Subject: [PATCH 04/11] Add margin around the loop icon --- src/components/DataTypes/Object.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DataTypes/Object.tsx b/src/components/DataTypes/Object.tsx index 9b15f022..5c907314 100644 --- a/src/components/DataTypes/Object.tsx +++ b/src/components/DataTypes/Object.tsx @@ -65,7 +65,7 @@ export const PreObjectType: React.FC> = (props) => { {isTrap} From d3bfa3b2d2c5636c309c18de56671ffd48e05820 Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Fri, 23 Sep 2022 01:46:55 +0300 Subject: [PATCH 05/11] Enhance reading --- src/components/DataKeyPair.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/DataKeyPair.tsx b/src/components/DataKeyPair.tsx index de13561b..10bc31e6 100644 --- a/src/components/DataKeyPair.tsx +++ b/src/components/DataKeyPair.tsx @@ -226,18 +226,20 @@ export const DataKeyPair: React.FC = (props) => { : null } { - (isRoot && rootName !== false) - ? <>"{rootName}" - : isRoot && rootName === false - ? <> - : !isRoot && KeyRenderer.when(downstreamProps) + (isRoot + ? ( + rootName !== false + ? (quotesOnKeys ? <>"{rootName}" : <>{rootName}) + : null + ) + : KeyRenderer.when(downstreamProps) ? : nestedIndex === undefined && ( isNumberKey - ? {key} + ? {key} : quotesOnKeys ? <>"{key}" : <>{key} ) + ) } { ( From 9bce28f1da3a118a4bfe7f53991e20869faaabcf Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Fri, 23 Sep 2022 01:55:46 +0300 Subject: [PATCH 06/11] Set return type as bool --- src/stores/typeRegistry.tsx | 22 +++++++++++----------- src/type.ts | 2 +- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/stores/typeRegistry.tsx b/src/stores/typeRegistry.tsx index 2fa5eea4..2579a7bc 100644 --- a/src/stores/typeRegistry.tsx +++ b/src/stores/typeRegistry.tsx @@ -52,7 +52,7 @@ export const { } = createStore>() const objectType: DataType = { - is: (value): value is object => typeof value === 'object', + is: (value) => typeof value === 'object', Component: ObjectType, PreComponent: PreObjectType, PostComponent: PostObjectType @@ -110,7 +110,7 @@ export function predefined (): DataType[] { registerType( { - is: (value): value is boolean => typeof value === 'boolean', + is: (value) => typeof value === 'boolean', ...createEasyType( 'bool', ({ value }) => <>{value ? 'true' : 'false'}, @@ -133,7 +133,7 @@ export function predefined (): DataType[] { registerType( { - is: (value): value is Date => value instanceof Date, + is: (value) => value instanceof Date, ...createEasyType( 'date', ({ value }) => <>{value.toLocaleTimeString('en-us', displayOptions)}, @@ -146,7 +146,7 @@ export function predefined (): DataType[] { registerType( { - is: (value): value is null => value === null, + is: (value) => value === null, ...createEasyType( 'null', () => { @@ -171,7 +171,7 @@ export function predefined (): DataType[] { registerType( { - is: (value): value is undefined => value === undefined, + is: (value) => value === undefined, ...createEasyType( 'undefined', () => { @@ -198,7 +198,7 @@ export function predefined (): DataType[] { registerType( { - is: (value): value is string => typeof value === 'string', + is: (value) => typeof value === 'string', ...createEasyType( 'string', (props) => { @@ -238,7 +238,7 @@ export function predefined (): DataType[] { registerType( { - is: (value): value is Function => typeof value === 'function', + is: (value) => typeof value === 'function', Component: FunctionType, PreComponent: PreFunctionType, PostComponent: PostFunctionType @@ -249,7 +249,7 @@ export function predefined (): DataType[] { registerType( { - is: (value): value is number => typeof value === 'number' && isNaN(value), + is: (value) => typeof value === 'number' && isNaN(value), ...createEasyType( 'NaN', () => { @@ -276,7 +276,7 @@ export function predefined (): DataType[] { registerType( { - is: (value): value is number => typeof value === 'number' && + is: (value) => typeof value === 'number' && !isInt(value), ...createEasyType( 'float', @@ -291,7 +291,7 @@ export function predefined (): DataType[] { registerType( { - is: (value): value is number => typeof value === 'number' && isInt(value), + is: (value) => typeof value === 'number' && isInt(value), ...createEasyType( 'int', ({ value }) => <>{`${value}`}, @@ -305,7 +305,7 @@ export function predefined (): DataType[] { registerType( { - is: (value): value is bigint => typeof value === 'bigint', + is: (value) => typeof value === 'bigint', ...createEasyType( 'bigint', ({ value }) => <>{`${value}n`}, diff --git a/src/type.ts b/src/type.ts index 473e3d08..19eba13b 100644 --- a/src/type.ts +++ b/src/type.ts @@ -25,7 +25,7 @@ export type DataType = { /** * Whether the value belongs to the data type */ - is: (value: unknown) => value is ValueType + is: (value: unknown) => boolean Component: React.ComponentType> Editor?: React.ComponentType> PreComponent?: React.ComponentType> From 245403e3b27f475be8ddded84c9622437881545f Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Fri, 23 Sep 2022 02:03:28 +0300 Subject: [PATCH 07/11] Change generic type --- src/type.ts | 2 +- src/utils/index.ts | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/type.ts b/src/type.ts index 19eba13b..5e253458 100644 --- a/src/type.ts +++ b/src/type.ts @@ -25,7 +25,7 @@ export type DataType = { /** * Whether the value belongs to the data type */ - is: (value: unknown) => boolean + is: (value: ValueType) => boolean Component: React.ComponentType> Editor?: React.ComponentType> PreComponent?: React.ComponentType> diff --git a/src/utils/index.ts b/src/utils/index.ts index 2d6773c0..33dbb8a1 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -25,44 +25,44 @@ export const applyValue = (obj: any, path: (string | number)[], value: any) => { // case 1: you only render with a single component export function createDataType ( - is: (value: unknown) => boolean, + is: (value: ValueType) => boolean, Component: React.ComponentType> ): { - is: (value: unknown) => value is ValueType + is: (value: ValueType) => boolean Component: React.ComponentType> } // case 2: you only render with a single component with editor export function createDataType ( - is: (value: unknown) => boolean, + is: (value: ValueType) => boolean, Component: React.ComponentType>, Editor: React.ComponentType> ): { - is: (value: unknown) => value is ValueType + is: (value: ValueType) => boolean Component: React.ComponentType> Editor: React.ComponentType> } // case 3: you only render with a component with pre and post. export function createDataType ( - is: (value: unknown) => boolean, + is: (value: ValueType) => boolean, Component: React.ComponentType>, Editor: undefined, PreComponent: React.ComponentType>, PostComponent: React.ComponentType> ): { - is: (value: unknown) => value is ValueType + is: (value: ValueType) => boolean Component: React.ComponentType> PreComponent: React.ComponentType> PostComponent: React.ComponentType> } // case 4: need all of these export function createDataType ( - is: (value: unknown) => boolean, + is: (value: ValueType) => boolean, Component: React.ComponentType>, Editor: React.ComponentType>, PreComponent: React.ComponentType>, PostComponent: React.ComponentType> ): { - is: (value: unknown) => value is ValueType + is: (value: ValueType) => boolean Component: React.ComponentType> Editor: React.ComponentType> PreComponent: React.ComponentType> @@ -70,7 +70,7 @@ export function createDataType ( } export function createDataType ( - is: (value: unknown) => boolean, + is: (value: ValueType) => boolean, Component: React.ComponentType>, Editor?: React.ComponentType> | undefined, PreComponent?: React.ComponentType> | undefined, From db3ac4bce6a15b72048bea38c444b35243663a51 Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Fri, 23 Sep 2022 02:03:41 +0300 Subject: [PATCH 08/11] Adopt test --- tests/index.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 1018dcda..f7d68dfc 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -141,7 +141,7 @@ describe('render with multiple instances', () => { value={undefined} valueTypes={[ { - is: (() => true) as any, + is: () => true, Component: () => { return <>first viewer } @@ -153,7 +153,7 @@ describe('render with multiple instances', () => { value={undefined} valueTypes={[ { - is: (() => true) as any, + is: () => true, Component: () => { return <>second viewer } @@ -233,7 +233,7 @@ describe('render with props', () => { render() render( typeof value === 'string', + is: (value) => typeof value === 'string', Component: (props) => { expectTypeOf(props.value).toMatchTypeOf() return null From a8e61c4563c9e445a2332f8ad09abbb3c4526e3a Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Fri, 23 Sep 2022 02:06:30 +0300 Subject: [PATCH 09/11] Adopt README.md --- README.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index d218e781..3562f955 100644 --- a/README.md +++ b/README.md @@ -60,13 +60,14 @@ const Component = () => ( value={object} // just define it valueTypes={[ + { + is: (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'), + Component: (props) => {props.value}/, + }, + // or createDataType( - (value) => typeof value === 'string' && - value.startsWith('https://i.imgur.com'), - (props) => { - return {props.value}/ - } + (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'), + (props) => {props.value}/, ) ]} /> From 993bb2e247a6f929809a6382992605a9f050c3dc Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Fri, 23 Sep 2022 10:46:29 +0300 Subject: [PATCH 10/11] Decrease margin --- src/components/DataTypes/Object.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DataTypes/Object.tsx b/src/components/DataTypes/Object.tsx index 5c907314..0610addc 100644 --- a/src/components/DataTypes/Object.tsx +++ b/src/components/DataTypes/Object.tsx @@ -65,7 +65,7 @@ export const PreObjectType: React.FC> = (props) => { {isTrap} From 4d883442d46bcbd209c2b80972f50d6667c8d867 Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Fri, 23 Sep 2022 10:47:50 +0300 Subject: [PATCH 11/11] Downgrade types --- src/type.ts | 2 +- src/utils/index.ts | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/type.ts b/src/type.ts index 5e253458..19eba13b 100644 --- a/src/type.ts +++ b/src/type.ts @@ -25,7 +25,7 @@ export type DataType = { /** * Whether the value belongs to the data type */ - is: (value: ValueType) => boolean + is: (value: unknown) => boolean Component: React.ComponentType> Editor?: React.ComponentType> PreComponent?: React.ComponentType> diff --git a/src/utils/index.ts b/src/utils/index.ts index 33dbb8a1..12d3e7a2 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -25,44 +25,44 @@ export const applyValue = (obj: any, path: (string | number)[], value: any) => { // case 1: you only render with a single component export function createDataType ( - is: (value: ValueType) => boolean, + is: (value: unknown) => boolean, Component: React.ComponentType> ): { - is: (value: ValueType) => boolean + is: (value: unknown) => boolean Component: React.ComponentType> } // case 2: you only render with a single component with editor export function createDataType ( - is: (value: ValueType) => boolean, + is: (value: unknown) => boolean, Component: React.ComponentType>, Editor: React.ComponentType> ): { - is: (value: ValueType) => boolean + is: (value: unknown) => boolean Component: React.ComponentType> Editor: React.ComponentType> } // case 3: you only render with a component with pre and post. export function createDataType ( - is: (value: ValueType) => boolean, + is: (value: unknown) => boolean, Component: React.ComponentType>, Editor: undefined, PreComponent: React.ComponentType>, PostComponent: React.ComponentType> ): { - is: (value: ValueType) => boolean + is: (value: unknown) => boolean Component: React.ComponentType> PreComponent: React.ComponentType> PostComponent: React.ComponentType> } // case 4: need all of these export function createDataType ( - is: (value: ValueType) => boolean, + is: (value: unknown) => boolean, Component: React.ComponentType>, Editor: React.ComponentType>, PreComponent: React.ComponentType>, PostComponent: React.ComponentType> ): { - is: (value: ValueType) => boolean + is: (value: unknown) => boolean Component: React.ComponentType> Editor: React.ComponentType> PreComponent: React.ComponentType> @@ -70,7 +70,7 @@ export function createDataType ( } export function createDataType ( - is: (value: ValueType) => boolean, + is: (value: unknown) => boolean, Component: React.ComponentType>, Editor?: React.ComponentType> | undefined, PreComponent?: React.ComponentType> | undefined,