Skip to content

Commit

Permalink
feat: show object summary everywhere
Browse files Browse the repository at this point in the history
  • Loading branch information
Aeolun committed Nov 19, 2021
1 parent b9f534f commit 8773195
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 113 deletions.
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
"scripts": {
"build": "tsc",
"watch": "tsc -w",
"prepublish": "npm run build",
"release": "standard-version",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
Expand All @@ -16,7 +18,8 @@
"jsondiffpatch": "0.4.1",
"localforage": "1.10.0",
"react-base16-styling": "0.8.1",
"react-json-tree": "0.15.1"
"react-json-tree": "0.15.1",
"standard-version": "7.0.0"
},
"devDependencies": {
"react": "^17.0.2",
Expand Down
21 changes: 21 additions & 0 deletions src/GetItemString.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { getText, IS_IMMUTABLE_KEY } from "./utils";
import React from "react";
import { base16Theme } from "./base16theme";

export const getItemString = (
type: string,
data: any,
dataTypeKey: string | symbol | undefined,
isWideLayout: boolean,
isDiff?: boolean
) => (
<span
style={{
color: base16Theme.base04,
}}
>
{data[IS_IMMUTABLE_KEY] ? "Immutable" : ""}
{dataTypeKey && data[dataTypeKey] ? `${data[dataTypeKey] as string} ` : ""}
{getText(type, data, isWideLayout, isDiff)}
</span>
);
93 changes: 1 addition & 92 deletions src/JSONDiff.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,99 +2,8 @@ import React, { Component, CSSProperties } from "react";
import JSONTree from "react-json-tree";
import { Delta } from "jsondiffpatch";
import { Base16Theme } from "react-base16-styling";
import { isCollection, isIndexed, isKeyed } from "immutable";
import { base16Theme } from "./base16theme";

const IS_IMMUTABLE_KEY = "@@__IS_IMMUTABLE__@@";

function isIterable(obj: any) {
return (
obj !== null &&
typeof obj === "object" &&
!Array.isArray(obj) &&
typeof obj[window.Symbol.iterator] === "function"
);
}

function isImmutable(value: any) {
return isKeyed(value) || isIndexed(value) || isCollection(value);
}

function getShortTypeString(val: any, diff: boolean | undefined) {
if (diff && Array.isArray(val)) {
val = val[val.length === 2 ? 1 : 0];
}

if (isIterable(val) && !isImmutable(val)) {
return "(…)";
} else if (Array.isArray(val)) {
return val.length > 0 ? "[…]" : "[]";
} else if (val === null) {
return "null";
} else if (val === undefined) {
return "undef";
} else if (typeof val === "object") {
// eslint-disable-next-line @typescript-eslint/ban-types
return Object.keys(val as {}).length > 0 ? "{…}" : "{}";
} else if (typeof val === "function") {
return "fn";
} else if (typeof val === "string") {
return `"${val.substr(0, 10) + (val.length > 10 ? "…" : "")}"`;
} else if (typeof val === "symbol") {
return "symbol";
} else {
return val;
}
}

function getText(
type: string,
data: any,
isWideLayout: boolean,
isDiff: boolean | undefined
) {
if (type === "Object") {
// eslint-disable-next-line @typescript-eslint/ban-types
const keys = Object.keys(data as {});
if (!isWideLayout) return keys.length ? "{…}" : "{}";

const str = keys
.slice(0, 3)
.map(
(key) => `${key}: ${getShortTypeString(data[key], isDiff) as string}`
)
.concat(keys.length > 3 ? ["…"] : [])
.join(", ");

return `{ ${str} }`;
} else if (type === "Array") {
if (!isWideLayout) return data.length ? "[…]" : "[]";

const str = data
.slice(0, 4)
.map((val: any) => getShortTypeString(val, isDiff))
.concat(data.length > 4 ? ["…"] : [])
.join(", ");

return `[${str as string}]`;
} else {
return type;
}
}

const getItemString = (
type: string,
data: any,
dataTypeKey: string | symbol | undefined,
isWideLayout: boolean,
isDiff?: boolean
) => (
<span style={{ color: colors.neutral }}>
{data[IS_IMMUTABLE_KEY] ? "Immutable" : ""}
{dataTypeKey && data[dataTypeKey] ? `${data[dataTypeKey] as string} ` : ""}
{getText(type, data, isWideLayout, isDiff)}
</span>
);
import { getItemString } from "./GetItemString";

function stringifyAndShrink(val: any, isWideLayout?: boolean) {
if (val === null) {
Expand Down
38 changes: 18 additions & 20 deletions src/StoreActions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import JSONDiff from "./JSONDiff";
import { base16Theme } from "./base16theme";
import React from "react";
import { loggerState } from "./integratedLogger";
import { getItemString } from "./GetItemString";

const Popup = styled.div`
height: 40%;
Expand Down Expand Up @@ -156,6 +157,7 @@ const ActionItem = styled.div<{ selected: boolean }>`

const NodeAction = styled.span`
text-decoration: underline;
cursor: pointer;
color: ${base16Theme.base0A};
&:hover {
color: ${base16Theme.base0C};
Expand All @@ -179,7 +181,6 @@ export const StoreActions = (props: {
const [filterPath, setFilterPath] = useState([]);
const [version, setVersion] = useState(Math.random());
const [current, setCurrent] = useState<any>(undefined);
const [invert, setInvert] = useState(false);
const actionList = useRef<HTMLDivElement>(null);

props.store.subscribe(() => {
Expand Down Expand Up @@ -211,7 +212,7 @@ export const StoreActions = (props: {
});
}}
>
[Root]
Pin
</NodeAction>
</Label>
);
Expand All @@ -232,6 +233,10 @@ export const StoreActions = (props: {
return returnItem;
};

const getItemStringLocal = useCallback((type: string, data: any) => {
return getItemString(type, data, undefined, true, false);
}, []);

console.log("keyPath", filterPath);

return (
Expand All @@ -241,13 +246,6 @@ export const StoreActions = (props: {
<Header>
<div>StoreActions</div>
<Menu>
<MenuItem
onClick={() => {
setInvert(!invert);
}}
>
Invert
</MenuItem>
<MenuItem
onClick={async () => {
await localforage.setItem(
Expand All @@ -260,14 +258,15 @@ export const StoreActions = (props: {
Save
</MenuItem>
<MenuItem
onClick={async () => {
const data = await localforage.getItem(
"@@integratedLogger/savedState"
);
props.store.dispatch({
type: "@@integratedLogger/setstore",
payload: data,
});
onClick={() => {
localforage
.getItem("@@integratedLogger/savedState")
.then((data) => {
props.store.dispatch({
type: "@@integratedLogger/setstore",
payload: data,
});
});
}}
>
Load
Expand Down Expand Up @@ -368,7 +367,6 @@ export const StoreActions = (props: {
delta={rootItem(current.diff, filterPath)}
collectionLimit={10}
labelRenderer={renderLabel}
invertTheme={invert}
isWideLayout={true}
dataTypeKey={undefined}
/>
Expand All @@ -379,7 +377,7 @@ export const StoreActions = (props: {
theme={base16Theme}
data={current.action}
collectionLimit={10}
invertTheme={invert}
getItemString={getItemStringLocal}
shouldExpandNode={(keyPath, data, level) => {
return !Array.isArray(data) || data.length < 10
? true
Expand All @@ -391,8 +389,8 @@ export const StoreActions = (props: {
<JSONTree
theme={base16Theme}
labelRenderer={renderLabel}
getItemString={getItemStringLocal}
collectionLimit={10}
invertTheme={invert}
hideRoot
data={rootItem(current.stateAfter, filterPath)}
/>
Expand Down
78 changes: 78 additions & 0 deletions src/utils.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { isCollection, isIndexed, isKeyed } from "immutable";

export const IS_IMMUTABLE_KEY = "@@__IS_IMMUTABLE__@@";

function isIterable(obj: any) {
return (
obj !== null &&
typeof obj === "object" &&
!Array.isArray(obj) &&
typeof obj[window.Symbol.iterator] === "function"
);
}

function isImmutable(value: any) {
return isKeyed(value) || isIndexed(value) || isCollection(value);
}

function getShortTypeString(val: any, diff: boolean | undefined) {
if (diff && Array.isArray(val)) {
val = val[val.length === 2 ? 1 : 0];
}

if (isIterable(val) && !isImmutable(val)) {
return "(…)";
} else if (Array.isArray(val)) {
return val.length > 0 ? "[…]" : "[]";
} else if (val === null) {
return "null";
} else if (val === undefined) {
return "undef";
} else if (typeof val === "object") {
// eslint-disable-next-line @typescript-eslint/ban-types
return Object.keys(val as {}).length > 0 ? "{…}" : "{}";
} else if (typeof val === "function") {
return "fn";
} else if (typeof val === "string") {
return `"${val.substr(0, 10) + (val.length > 10 ? "…" : "")}"`;
} else if (typeof val === "symbol") {
return "symbol";
} else {
return val;
}
}

export function getText(
type: string,
data: any,
isWideLayout: boolean,
isDiff: boolean | undefined
) {
if (type === "Object") {
// eslint-disable-next-line @typescript-eslint/ban-types
const keys = Object.keys(data as {});
if (!isWideLayout) return keys.length ? "{…}" : "{}";

const str = keys
.slice(0, 3)
.map(
(key) => `${key}: ${getShortTypeString(data[key], isDiff) as string}`
)
.concat(keys.length > 3 ? ["…"] : [])
.join(", ");

return `{ ${str} }`;
} else if (type === "Array") {
if (!isWideLayout) return data.length ? "[…]" : "[]";

const str = data
.slice(0, 4)
.map((val: any) => getShortTypeString(val, isDiff))
.concat(data.length > 4 ? ["…"] : [])
.join(", ");

return `[${str as string}]`;
} else {
return type;
}
}

0 comments on commit 8773195

Please sign in to comment.