@forge-kit/plugin-json-viewer 0.0.1

package/dist/icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1763716801467" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1687" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M213.333333 128h85.333334v85.333333H213.333333v213.333334a85.333333 85.333333 0 0 1-85.333333 85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333v213.333334h85.333334v85.333333H213.333333c-45.653333-11.52-85.333333-38.4-85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 0-85.333333-85.333333H0v-85.333334h42.666667a85.333333 85.333333 0 0 0 85.333333-85.333333V213.333333a85.333333 85.333333 0 0 1 85.333333-85.333333m597.333334 0a85.333333 85.333333 0 0 1 85.333333 85.333333v170.666667a85.333333 85.333333 0 0 0 85.333333 85.333333h42.666667v85.333334h-42.666667a85.333333 85.333333 0 0 0-85.333333 85.333333v170.666667a85.333333 85.333333 0 0 1-85.333333 85.333333h-85.333334v-85.333333h85.333334v-213.333334a85.333333 85.333333 0 0 1 85.333333-85.333333 85.333333 85.333333 0 0 1-85.333333-85.333333V213.333333h-85.333334V128h85.333334m-298.666667 512a42.666667 42.666667 0 0 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667 42.666666 42.666667 42.666667 0 0 1-42.666667-42.666666 42.666667 42.666667 0 0 1 42.666667-42.666667m-170.666667 0a42.666667 42.666667 0 0 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667 42.666666 42.666667 42.666667 0 0 1-42.666666-42.666666 42.666667 42.666667 0 0 1 42.666666-42.666667m341.333334 0a42.666667 42.666667 0 0 1 42.666666 42.666667 42.666667 42.666667 0 0 1-42.666666 42.666666 42.666667 42.666667 0 0 1-42.666667-42.666666 42.666667 42.666667 0 0 1 42.666667-42.666667z" fill="" p-id="1688"></path></svg>

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@forge-kit/plugin-json-viewer",
+  "version": "0.0.1",
+  "type": "module",
+  "entry": "./dist/app.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "author": "yu.pan <panyupy@vip.qq.com>",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@forge-kit/component": "workspace:*",
+    "@forge-kit/forge-kit": "workspace:*",
+    "@forge-kit/icons": "workspace:*",
+    "classnames": "^2.5.1",
+    "jsonc-parser": "^3.3.1",
+    "prettier": "^3.6.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.1.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.3",
+    "vite": "^7.2.2",
+    "@forge-kit/vite-plugin-forge-kit": "workspace:*"
+  }
+}

package/src/App.less

@@ -0,0 +1,44 @@
+html, body, #root {
+  -webkit-app-region: drag;
+  background-color: transparent; /* 保持透明 */
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.forge-kit-plugin-json-viewer {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  &-content {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    .formatted-viewer-card,
+    .text-area-card {
+      flex: 1;
+
+      .text-area {
+        height: 100%;
+      }
+    }
+
+    .json-viewer-card-layout {
+      display: flex;
+      flex-direction: column;
+
+      .layout-title {
+        padding-bottom: var(--space-3);
+        border-bottom: solid 1px var(--gray-5);
+      }
+
+      .layout-content {
+        padding-top: var(--space-3);
+        flex: 1;
+        overflow: hidden;
+      }
+    }
+  }
+}

package/src/App.tsx

@@ -0,0 +1,238 @@
+import prettier from "prettier/standalone";
+import prettierPluginBabel from "prettier/plugins/babel";
+import prettierPluginEstree from "prettier/plugins/estree";
+import {Flex, TextArea, Text, Box, ScrollArea, Card, Theme} from "@forge-kit/component";
+import {parseTree} from "jsonc-parser";
+import type {Node, NodeType} from "jsonc-parser";
+import React, {useContext, useEffect, useState} from "react";
+import {TriangleRightIcon, FilePlusIcon, FileMinusIcon, MagicWandIcon} from '@forge-kit/icons'
+import type {ComponentProps} from 'react'
+import '@forge-kit/component/style.css'
+import classNames from "classnames";
+import './App.less'
+
+type ColorConfig = Partial<Record<NodeType, ComponentProps<typeof Text>['color']>>
+
+interface JsonViewerOperate {
+    isCollapsed: boolean;
+    operateId: string;
+}
+
+interface JsonViewerCtxVal extends JsonViewerOperate {
+    isCollapsed: boolean;
+    operateId: string;
+    colorConfig?: ColorConfig
+}
+
+const JsonViewerContext = React.createContext<Partial<JsonViewerCtxVal>>({})
+
+interface JsonNodeProps {
+    label?: string
+    jsonNode?: Node
+}
+
+/**
+ * 渲染JSON节点
+ * @param props
+ * @constructor
+ */
+const JsonNode: React.FC<JsonNodeProps> = (props) => {
+    const {jsonNode} = props
+    if (jsonNode?.type === 'object') return <JsonNodeContainer {...props} />
+    if (jsonNode?.type === 'array') return <JsonNodeContainer {...props} />
+    if (jsonNode?.type === 'property') return <JsonNodeProperty {...props} />
+    return <JsonNodeValue {...props} />
+}
+
+type JsonNodeContainerProps = JsonNodeProps
+
+/**
+ * 渲染JSON节点容器
+ * @param props
+ * @constructor
+ */
+const JsonNodeContainer: React.FC<JsonNodeContainerProps> = (props) => {
+    const {label, jsonNode} = props
+    // 解析JSON节点类型和子节点
+    const {type: jsonNodeType, children: jsonNodeChildren = [], parent} = jsonNode || {}
+    // 初始化折叠状态为true
+    const [isCollapsed, setIsCollapsed] = useState<boolean>(false)
+    // 从上下文获取操作ID和折叠状态
+    const {operateId, isCollapsed: contextIsCollapsed} = useContext(JsonViewerContext) || {}
+    // 判断是否为复杂类型节点（对象或数组）
+    const isComplexType = ['object', 'array'].includes(jsonNodeType!)
+    // 判断是否为数组节点
+    const isArrayNode = jsonNodeType === 'array'
+    // 判断是否为根节点
+    const isRootNode = Boolean(!parent)
+
+    useEffect(() => {
+        setIsCollapsed(Boolean(contextIsCollapsed))
+    }, [operateId])
+
+    return (
+        <Flex direction={isComplexType ? 'column' : 'row'} pl={isRootNode ? '0' : '4'} align="start">
+            <Flex align="center" gap="1" mr="1" onClick={() => setIsCollapsed(!isCollapsed)}>
+                {/* 渲染JSON节点折叠图标 */}
+                <Flex width="16px" align="center">{isComplexType && <TriangleRightIcon width={16} height={16}/>}</Flex>
+                {/* 渲染JSON节点标签 */}
+                {!isRootNode && <Text color="purple">{label}:</Text>}
+                {/* 渲染JSON节点类型 */}
+                <Box>
+                    {/* 渲染JSON节点类型 */}
+                    {isComplexType && <Text>{jsonNodeType}</Text>}
+                    {/* 渲染JSON节点数组长度 */}
+                    {isArrayNode && <Text>({jsonNodeChildren?.length})</Text>}
+                </Box>
+            </Flex>
+            {/* 渲染JSON节点值 */}
+            {!isComplexType && <JsonNode jsonNode={jsonNode}/>}
+            {/* 渲染JSON节点子节点 */}
+            {isComplexType && !isCollapsed && (
+                <Flex direction="column">
+                    {jsonNodeChildren.map((child, index) => {
+                        // 渲染JSON节点属性
+                        if (isArrayNode) return <JsonNodeContainer label={String(index)} jsonNode={child}/>
+                        // 渲染JSON节点数组元素
+                        return <JsonNode jsonNode={child}/>
+                    })}
+                </Flex>
+            )}
+        </Flex>
+    )
+}
+
+/**
+ * 渲染JSON节点属性
+ * @param props
+ * @constructor
+ */
+const JsonNodeProperty: React.FC<JsonNodeProps> = (props) => {
+    const {jsonNode} = props
+    const [key, value] = jsonNode?.children || []
+    return <JsonNodeContainer label={key.value} jsonNode={value}/>
+}
+
+/**
+ * 渲染JSON节点值
+ * @param props
+ * @constructor
+ */
+const JsonNodeValue: React.FC<JsonNodeProps> = (props) => {
+    const {jsonNode,} = props
+    const {type, value} = jsonNode || {}
+    const {colorConfig = {}} = useContext(JsonViewerContext) || {}
+    if (!type) return null
+    return <Text color={colorConfig[type]}>{type === "string" ? `"${value}"` : String(value)}</Text>
+}
+
+
+interface JsonViewerProps extends JsonNodeProps {
+    className?: string
+    colorConfig?: ColorConfig
+    operate?: Partial<JsonViewerOperate>
+}
+
+/**
+ * 渲染JSON查看器
+ * @param props
+ * @constructor
+ */
+const JsonViewer: React.FC<JsonViewerProps> = (props) => {
+    const {className, jsonNode, colorConfig, operate = {}} = props
+    return (
+        <ScrollArea className={className} type="auto" scrollbars="vertical">
+            <JsonViewerContext.Provider value={{...operate, colorConfig}}>
+                <JsonNode jsonNode={jsonNode}/>
+            </JsonViewerContext.Provider>
+        </ScrollArea>
+    )
+}
+
+interface CardLayoutProps {
+    title?: string
+    extra?: React.ReactNode
+    className?: string
+    children?: React.ReactNode
+}
+
+const CardLayout: React.FC<CardLayoutProps> = (props) => {
+    const {title, extra, className, children} = props
+    return (
+        <Card className={classNames("json-viewer-card-layout", className)}>
+            <Flex className="layout-title" justify="between" align="center">
+                <Text size="1">{title}</Text>
+                <Flex align="center" gap="2">{extra}</Flex>
+            </Flex>
+            <Box className="layout-content">{children}</Box>
+        </Card>
+    )
+}
+
+/**
+ * 默认颜色配置
+ */
+const colorConfig: ColorConfig = {
+    string: "green",
+    boolean: "orange",
+    number: "orange",
+    null: "orange",
+}
+
+export const App: React.FC = () => {
+
+    const [json, setJson] = useState("");
+
+    const [jsonViewerOperate, setJsonViewerOperate] = useState<Partial<JsonViewerOperate>>({})
+
+    const errors: any[] = []
+
+    const result = parseTree(json, errors)
+
+    const handleFormatJson = async () => {
+        const result = await prettier.format(json, {
+            parser: "json",
+            printWidth: 0,
+            plugins: [prettierPluginBabel, prettierPluginEstree],
+        })
+        return setJson(result)
+    }
+
+    const handleJsonViewerCollapse = () => {
+        const operateId = Date.now().toString(16)
+        setJsonViewerOperate({isCollapsed: true, operateId})
+    }
+
+    const handleJsonViewerExpand = () => {
+        const operateId = Date.now().toString(16)
+        setJsonViewerOperate({isCollapsed: false, operateId})
+    }
+
+    const handleTextAreaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const {value} = event.target
+        setJson(value)
+    }
+
+    const sourceInputExtra = <MagicWandIcon width={18} height={18} onClick={handleFormatJson}/>
+
+    const parsedTreeViewExtra = (
+        <>
+            <FilePlusIcon width={18} height={18} onClick={handleJsonViewerExpand}/>
+            <FileMinusIcon width={18} height={18} onClick={handleJsonViewerCollapse}/>
+        </>
+    )
+
+    return (
+        <Theme className="forge-kit-plugin-json-viewer" accentColor="gray" appearance="dark" radius="full"
+               apply={import.meta.env.DEV}>
+            <Flex className="forge-kit-plugin-json-viewer-content" gap="4">
+                <CardLayout className="text-area-card" title="SOURCE INPUT" extra={sourceInputExtra}>
+                    <TextArea className="text-area" size="3" value={json} onChange={handleTextAreaChange}/>
+                </CardLayout>
+                <CardLayout className="formatted-viewer-card" title="PARSED TREE VIEW" extra={parsedTreeViewExtra}>
+                    <JsonViewer jsonNode={result} colorConfig={colorConfig} operate={jsonViewerOperate}/>
+                </CardLayout>
+            </Flex>
+        </Theme>
+    )
+}

package/src/icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1763716801467" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1687" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M213.333333 128h85.333334v85.333333H213.333333v213.333334a85.333333 85.333333 0 0 1-85.333333 85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333v213.333334h85.333334v85.333333H213.333333c-45.653333-11.52-85.333333-38.4-85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 0-85.333333-85.333333H0v-85.333334h42.666667a85.333333 85.333333 0 0 0 85.333333-85.333333V213.333333a85.333333 85.333333 0 0 1 85.333333-85.333333m597.333334 0a85.333333 85.333333 0 0 1 85.333333 85.333333v170.666667a85.333333 85.333333 0 0 0 85.333333 85.333333h42.666667v85.333334h-42.666667a85.333333 85.333333 0 0 0-85.333333 85.333333v170.666667a85.333333 85.333333 0 0 1-85.333333 85.333333h-85.333334v-85.333333h85.333334v-213.333334a85.333333 85.333333 0 0 1 85.333333-85.333333 85.333333 85.333333 0 0 1-85.333333-85.333333V213.333333h-85.333334V128h85.333334m-298.666667 512a42.666667 42.666667 0 0 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667 42.666666 42.666667 42.666667 0 0 1-42.666667-42.666666 42.666667 42.666667 0 0 1 42.666667-42.666667m-170.666667 0a42.666667 42.666667 0 0 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667 42.666666 42.666667 42.666667 0 0 1-42.666666-42.666666 42.666667 42.666667 0 0 1 42.666666-42.666667m341.333334 0a42.666667 42.666667 0 0 1 42.666666 42.666667 42.666667 42.666667 0 0 1-42.666666 42.666666 42.666667 42.666667 0 0 1-42.666667-42.666666 42.666667 42.666667 0 0 1 42.666667-42.666667z" fill="" p-id="1688"></path></svg>

package/src/main.tsx

@@ -0,0 +1,30 @@
+import {StrictMode} from 'react'
+import ReactDOM from "react-dom/client";
+import {definePlugin} from '@forge-kit/forge-kit'
+import {App} from './App.tsx'
+
+let rootInstance: ReturnType<typeof ReactDOM.createRoot> | null = null;
+
+const plugin = definePlugin({
+    bundleId: "com.forge-kit.plugin.json-viewer",
+    name: 'JSON 解析工具',
+    icon: `${import.meta.env.BASE_URL}icon.svg`,
+    description: "JSON 解析工具",
+    mount: (container: any) => {
+        rootInstance = ReactDOM.createRoot(container);
+        rootInstance.render(
+            <StrictMode>
+                <App/>
+            </StrictMode>,
+        )
+    },
+    unmount: () => {
+        if (!rootInstance) return
+        rootInstance.unmount();
+        rootInstance = null;
+    }
+});
+if (import.meta.env.DEV) plugin.mount(document.getElementById('root')!)
+
+export default plugin
+