splitted code from function & added decyle to core

src/components/ParamsList/index.js

@@ -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 = {
+const getErrorRender = (e, error) => {
-        __cycle_flag: true // with id 0
+    return (
-    }
+        <div key={e.key} >
-
+            <div style={{ display: "flex", alignItems: "center", padding: "12px 16px", height: "47px", backgroundColor: "#d9d9d9" }} key={e.key} >
-    function isFlagId(e, id) {
+                This could not be rendered > ({e.key}) [{typeof (e.value)}]
-        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>
             </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) => {
+const getDecoratorStr = (e, json) => {
-        try {
+    try {
-            switch (typeof (e.value)) {
+        switch (typeof (e.value)) {
-                case "string": {
+            case "string": {
-                    return `(${json.length}) characters`
+                return `(${json.length}) characters`
+            }
+            case "object": {
+                if (e.value == null) {
+                    return `Empty (null/undefined)`
                 }
-                case "object": {
+                if (isFlagId(e.value, 0)) {
-                    if (e.value == null) {
+                    return <span><Icons.RefreshCw /> Cylic </span>
-                        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)`
                 }
-                case "array": {
+                if (typeof (e.value.length) !== "undefined") {
                     return `Lenght (${e.value.length})`
                 }
-                case "boolean": {
+                if (typeof (Object.keys(e.value).length) !== "undefined") {
-                    return <antd.Tag color={e.value ? "blue" : "volcano"} > {e.value ? "true" : "false"} </antd.Tag>
+                    return `Lenght (${Object.keys(e.value).length})`
                 }
-                case "number": {
+                return `Immeasurable (by error) (not valid object)`
-                    return <antd.Tag > {e.value} </antd.Tag>
-                }
-                default:
-                    return `Immeasurable / Invalid`
             }
-        } catch (error) {
+            case "array": {
-            return <strong>Immeasurable (by error)</strong>
+                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) => {
+const getContent = (e) => {
-        try {
+    try {
-            switch (typeof (e.value)) {
+        switch (typeof (e.value)) {
-                case "string": {
+            case "string": {
-                    return e.value
+                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}`
             }
+            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)
 }

src/core/index.js

@@ -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