mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
splitted code from function & added decyle to core
This commit is contained in:
srgooglo
parent
5747809cf8
commit
de40ddf1f8
@ -1,168 +1,132 @@
|
||||
import React from 'react';
|
||||
import * as antd from 'antd'
|
||||
import * as Icons from 'components/Icons'
|
||||
import { __legacy__objectToArray } from 'core'
|
||||
import { __legacy__objectToArray, getCircularReplacer, decycle } from 'core'
|
||||
|
||||
const serializeFlags = {
|
||||
__cycle_flag: true // with id 0
|
||||
}
|
||||
|
||||
export default function DebugPanel(data) {
|
||||
function isFlagId(e, id) {
|
||||
return serializeFlags[Object.keys(e)[id ?? 0]]
|
||||
}
|
||||
|
||||
const serializeFlags = {
|
||||
__cycle_flag: true // with id 0
|
||||
}
|
||||
|
||||
function isFlagId(e, id) {
|
||||
return serializeFlags[Object.keys(e)[id ?? 0]]
|
||||
}
|
||||
|
||||
function getCircularReplacer() {
|
||||
const seen = new WeakSet();
|
||||
return (key, value) => {
|
||||
if (typeof value === "object" && value !== null) {
|
||||
if (seen.has(value)) {
|
||||
return { __cycle_flag: true }
|
||||
}
|
||||
seen.add(value)
|
||||
}
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
function decycle(obj, stack = []) {
|
||||
if (!obj || typeof obj !== 'object')
|
||||
return obj;
|
||||
|
||||
if (stack.includes(obj)) {
|
||||
return { __cycle_flag: true }
|
||||
}
|
||||
|
||||
let s = stack.concat([obj]);
|
||||
|
||||
return Array.isArray(obj)
|
||||
? obj.map(x => decycle(x, s))
|
||||
: Object.fromEntries(
|
||||
Object.entries(obj)
|
||||
.map(([k, v]) => [k, decycle(v, s)]));
|
||||
}
|
||||
|
||||
const getErrorRender = (e, error) => {
|
||||
return (
|
||||
<div key={e.key} >
|
||||
<div style={{ display: "flex", alignItems: "center", padding: "12px 16px", height: "47px", backgroundColor: "#d9d9d9" }} key={e.key} >
|
||||
This could not be rendered > ({e.key}) [{typeof (e.value)}]
|
||||
</div>
|
||||
<div>
|
||||
<antd.Collapse>
|
||||
<antd.Collapse.Panel header="See error" >
|
||||
<div style={{ margin: '0 5px 15px 5px', wordBreak: "break-all" }} >
|
||||
<span>{error.toString()}</span>
|
||||
</div>
|
||||
</antd.Collapse.Panel>
|
||||
</antd.Collapse>
|
||||
</div>
|
||||
const getErrorRender = (e, error) => {
|
||||
return (
|
||||
<div key={e.key} >
|
||||
<div style={{ display: "flex", alignItems: "center", padding: "12px 16px", height: "47px", backgroundColor: "#d9d9d9" }} key={e.key} >
|
||||
This could not be rendered > ({e.key}) [{typeof (e.value)}]
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div>
|
||||
<antd.Collapse>
|
||||
<antd.Collapse.Panel header="See error" >
|
||||
<div style={{ margin: '0 5px 15px 5px', wordBreak: "break-all" }} >
|
||||
<span>{error.toString()}</span>
|
||||
</div>
|
||||
</antd.Collapse.Panel>
|
||||
</antd.Collapse>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const getDecoratorStr = (e, json) => {
|
||||
try {
|
||||
switch (typeof (e.value)) {
|
||||
case "string": {
|
||||
return `(${json.length}) characters`
|
||||
const getDecoratorStr = (e, json) => {
|
||||
try {
|
||||
switch (typeof (e.value)) {
|
||||
case "string": {
|
||||
return `(${json.length}) characters`
|
||||
}
|
||||
case "object": {
|
||||
if (e.value == null) {
|
||||
return `Empty (null/undefined)`
|
||||
}
|
||||
case "object": {
|
||||
if (e.value == null) {
|
||||
return `Empty (null/undefined)`
|
||||
}
|
||||
if (isFlagId(e.value, 0)) {
|
||||
return <span><Icons.RefreshCw /> Cylic </span>
|
||||
}
|
||||
if (typeof (e.value.length) !== "undefined") {
|
||||
return `Lenght (${e.value.length})`
|
||||
}
|
||||
if (typeof (Object.keys(e.value).length) !== "undefined") {
|
||||
return `Lenght (${Object.keys(e.value).length})`
|
||||
}
|
||||
return `Immeasurable (by error) (not valid object)`
|
||||
if (isFlagId(e.value, 0)) {
|
||||
return <span><Icons.RefreshCw /> Cylic </span>
|
||||
}
|
||||
case "array": {
|
||||
if (typeof (e.value.length) !== "undefined") {
|
||||
return `Lenght (${e.value.length})`
|
||||
}
|
||||
case "boolean": {
|
||||
return <antd.Tag color={e.value ? "blue" : "volcano"} > {e.value ? "true" : "false"} </antd.Tag>
|
||||
if (typeof (Object.keys(e.value).length) !== "undefined") {
|
||||
return `Lenght (${Object.keys(e.value).length})`
|
||||
}
|
||||
case "number": {
|
||||
return <antd.Tag > {e.value} </antd.Tag>
|
||||
}
|
||||
default:
|
||||
return `Immeasurable / Invalid`
|
||||
return `Immeasurable (by error) (not valid object)`
|
||||
}
|
||||
} catch (error) {
|
||||
return <strong>Immeasurable (by error)</strong>
|
||||
case "array": {
|
||||
return `Lenght (${e.value.length})`
|
||||
}
|
||||
case "boolean": {
|
||||
return <antd.Tag color={e.value ? "blue" : "volcano"} > {e.value ? "true" : "false"} </antd.Tag>
|
||||
}
|
||||
case "number": {
|
||||
return <antd.Tag > {e.value} </antd.Tag>
|
||||
}
|
||||
default:
|
||||
return `Immeasurable / Invalid`
|
||||
}
|
||||
} catch (error) {
|
||||
return <strong>Immeasurable (by error)</strong>
|
||||
}
|
||||
}
|
||||
|
||||
const getContent = (e) => {
|
||||
try {
|
||||
switch (typeof (e.value)) {
|
||||
case "string": {
|
||||
return e.value
|
||||
}
|
||||
case "object": {
|
||||
if (e.value == null) {
|
||||
return `${e.value}`
|
||||
}
|
||||
if (isFlagId(e.value, 0)) {
|
||||
return <div key={e.key} style={{ display: "flex", alignItems: "center", padding: "12px 16px", height: "47px", backgroundColor: "#d9d9d9" }} >
|
||||
<Icons.RefreshCw /> This cannot be rendered because a cylic has been detected
|
||||
</div>
|
||||
}
|
||||
if (Object.keys(e.value).length > 0) { // trying create nested
|
||||
return <div>
|
||||
{DebugPanel(e.value)}
|
||||
</div>
|
||||
}
|
||||
return JSON.stringify(e.value, getCircularReplacer())
|
||||
}
|
||||
case "array": {
|
||||
return JSON.stringify(e.value, getCircularReplacer())
|
||||
}
|
||||
case "boolean": {
|
||||
return `${e.value}`
|
||||
}
|
||||
default:
|
||||
return `${e.value}`
|
||||
const getContent = (e) => {
|
||||
try {
|
||||
switch (typeof (e.value)) {
|
||||
case "string": {
|
||||
return e.value
|
||||
}
|
||||
case "object": {
|
||||
if (e.value == null) {
|
||||
return `${e.value}`
|
||||
}
|
||||
if (isFlagId(e.value, 0)) {
|
||||
return <div key={e.key} style={{ display: "flex", alignItems: "center", padding: "12px 16px", height: "47px", backgroundColor: "#d9d9d9" }} >
|
||||
<Icons.RefreshCw /> This cannot be rendered because a cylic has been detected
|
||||
</div>
|
||||
}
|
||||
if (Object.keys(e.value).length > 0) { // trying create nested
|
||||
return <div>
|
||||
{DebugPanel(e.value)}
|
||||
</div>
|
||||
}
|
||||
return JSON.stringify(e.value, getCircularReplacer())
|
||||
}
|
||||
case "array": {
|
||||
return JSON.stringify(e.value, getCircularReplacer())
|
||||
}
|
||||
case "boolean": {
|
||||
return `${e.value}`
|
||||
}
|
||||
default:
|
||||
return `${e.value}`
|
||||
}
|
||||
} catch (error) {
|
||||
return getErrorRender(e, error)
|
||||
}
|
||||
}
|
||||
|
||||
const getType = (e) => {
|
||||
if (e !== null && isFlagId(e, 0)) {
|
||||
return `[loop]`
|
||||
}
|
||||
return `[${typeof (e)}]`
|
||||
}
|
||||
|
||||
export default function DebugPanel(data) {
|
||||
if (!data) return false
|
||||
return __legacy__objectToArray(decycle(data)).map(e => {
|
||||
try {
|
||||
const content = getContent(e)
|
||||
return (
|
||||
<antd.Collapse style={{ border: '0px' }} key={e.key}>
|
||||
<antd.Collapse.Panel key={e.key} header={<div>{getType(e.value)} <strong>{e.key}</strong> | {getDecoratorStr(e, content)} </div>} >
|
||||
<div style={{ margin: '0 5px 15px 5px', wordBreak: "break-all" }} >
|
||||
<span>{content}</span>
|
||||
</div>
|
||||
</antd.Collapse.Panel>
|
||||
</antd.Collapse>
|
||||
)
|
||||
} catch (error) {
|
||||
return getErrorRender(e, error)
|
||||
}
|
||||
}
|
||||
|
||||
const modelToMap = (data) => {
|
||||
if (!data) return false
|
||||
const getType = (e) => {
|
||||
if (e !== null && isFlagId(e, 0)) {
|
||||
return `[loop]`
|
||||
}
|
||||
return `[${typeof (e)}]`
|
||||
}
|
||||
|
||||
return __legacy__objectToArray(decycle(data)).map(e => {
|
||||
try {
|
||||
const content = getContent(e)
|
||||
return (
|
||||
<antd.Collapse style={{ border: '0px' }} key={e.key}>
|
||||
<antd.Collapse.Panel key={e.key} header={<div>{getType(e.value)} <strong>{e.key}</strong> | {getDecoratorStr(e, content)} </div>} >
|
||||
<div style={{ margin: '0 5px 15px 5px', wordBreak: "break-all" }} >
|
||||
<span>{content}</span>
|
||||
</div>
|
||||
</antd.Collapse.Panel>
|
||||
</antd.Collapse>
|
||||
)
|
||||
} catch (error) {
|
||||
return getErrorRender(e, error)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return modelToMap(data)
|
||||
})
|
||||
}
|
||||
@ -34,6 +34,36 @@ export const clientInfo = {
|
||||
layout: platform.layout
|
||||
};
|
||||
|
||||
export function getCircularReplacer() {
|
||||
const seen = new WeakSet();
|
||||
return (key, value) => {
|
||||
if (typeof value === "object" && value !== null) {
|
||||
if (seen.has(value)) {
|
||||
return { __cycle_flag: true }
|
||||
}
|
||||
seen.add(value)
|
||||
}
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
export function decycle(obj, stack = []) {
|
||||
if (!obj || typeof obj !== 'object')
|
||||
return obj;
|
||||
|
||||
if (stack.includes(obj)) {
|
||||
return { __cycle_flag: true }
|
||||
}
|
||||
|
||||
let s = stack.concat([obj]);
|
||||
|
||||
return Array.isArray(obj)
|
||||
? obj.map(x => decycle(x, s))
|
||||
: Object.fromEntries(
|
||||
Object.entries(obj)
|
||||
.map(([k, v]) => [k, decycle(v, s)]));
|
||||
}
|
||||
|
||||
export function getBuild() {
|
||||
let build = {
|
||||
stable: false
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user