@mijadesign/mjui-parse-dsl

@mijadesign/mjui-parse-dsl 用于把 MasterGo 导出的 DSL 解析成 Mija Design 移动端组件、图标和 OSS 图片资源的结构化结果。解析结果会直接返回给调用方，供后续 D2C 代码生成、组件文档查询、文件下载和规则调试使用。

功能

• 解析 DSL 对象或 JSON 字符串
• 识别 MJUI 标准组件、图标组件和 OSS 图片资源、未命中OSS资源集合
• 根据组件变体属性生成 propsDraft，根据文本和子节点生成 slotsDraft
• 自动生成组件和图标 import 语句
• 生成 MCP 组件文档查询计划
• 支持通过 extraRules 扩展图标、组件和 OSS 资源规则
• 输出低置信度、未映射变体等诊断信息，方便补齐规则

安装

npm install @mijadesign/mjui-parse-dsl
# 或
pnpm add @mijadesign/mjui-parse-dsl
# 或
yarn add @mijadesign/mjui-parse-dsl

快速使用

import { parseDslData } from "@mijadesign/mjui-parse-dsl";

const result = parseDslData(dslDocument, {
  extraRules,
});

console.log(result);

API

parseDslData(dslData, options?)

解析 DSL 对象或 JSON 字符串，并返回处理后的结构化结果。

import { parseDslData } from "@mijadesign/mjui-parse-dsl";

const result = parseDslData({
  nodes: [
    {
      type: "INSTANCE",
      id: "105:07803",
      name: "Button",
      componentInfo: {
        properties: {
          类型: "主按钮",
          尺寸: "大",
        },
      },
    },
  ],
});

dslData 同时兼容直接 DSL 文档和嵌套 DSL 文档：

parseDslData({ nodes: [] });
parseDslData({ dsl: { nodes: [] } });
parseDslData('{"nodes":[]}');

createDslParser(options?)

创建解析器实例。适合需要自己控制 parse 和 summary 生成时使用。

import { createDslParser } from "@mijadesign/mjui-parse-dsl";

const parser = createDslParser({
  extraRules,
});

const results = parser.parse(dslDocument);
const summary = parser.generateSummary(results);

Options

interface ParserOptions {
  extraRules?: {
    iconRules?: Record<string, ComponentConfig>;
    componentRules?: ComponentRule[];
    ossRules?: OssRule[];
  };
}

输出结构

parseDslData 返回 ParseResult：

interface ParseResult {
  components: Array<{
    id: string;
    name: string;
    component: string;
    type: "component" | "icon" | "oss";
    importStatement: string;
    docQuery?: string;
    confidence?: number;
    matchedBy?: string[];
    props: Record<string, any>;
    propsDraft?: Record<string, any>;
    slotsDraft?: Record<string, any>;
    sourceInfo: SourceInfo;
    source?: {
      nodeId: string;
      nodeType: string;
      name: string;
      componentSetName?: string;
      properties?: Record<string, string>;
    };
    diagnostics?: Diagnostic[];
    asset?: {
      key?: string;
      ossPath?: string;
      url?: string;
      urlExpression?: string;
      mastergoUrl?: string;
      width?: number;
      height?: number;
      variant?: Record<string, string>;
    };
  }>;
  imports: string[];
  mcpPlan: Array<{
    tool: "get_component_doc";
    name: string;
    reason: string;
  }>;
  projectComponentPlan: Array<{
    name: string;
    source: string;
    codePath?: string;
    reason: string;
  }>;
  diagnostics: Diagnostic[];
  summary: {
    total: number;
    icons: number;
    components: number;
    ossImages?: number;
    lowConfidence?: number;
    diagnostics?: number;
  };
}

返回结构示例：

{
  "components": [
    {
      "id": "105:07803",
      "name": "Selector",
      "component": "Selector",
      "type": "component",
      "importStatement": "import { Selector } from '@mijadesign/mjui-react-taro';",
      "docQuery": "Selector",
      "confidence": 0.95,
      "matchedBy": ["componentSetName", "variantKeys"],
      "props": {
        "options": [
          { "label": "选项一", "value": 0 },
          { "label": "选项二", "value": 1 }
        ],
        "defaultValue": 0
      }
    }
  ],
  "imports": ["import { Selector } from '@mijadesign/mjui-react-taro';"],
  "mcpPlan": [
    {
      "tool": "get_component_doc",
      "name": "Selector",
      "reason": "页面中识别到 Selector，生成代码前需要确认 props 和示例。"
    }
  ],
  "projectComponentPlan": [],
  "diagnostics": [],
  "summary": {
    "total": 1,
    "icons": 0,
    "components": 1,
    "ossImages": 0,
    "lowConfidence": 0,
    "diagnostics": 0
  }
}

整体设计

解析包分为五层：

• 入口层：src/index.ts 负责预处理 JSON、调用解析器并序列化返回结果。
• 规则配置层：src/core/config.ts 合并内置规则和外部 extraRules，生成图标、组件和 OSS 规则集合。
• 节点归一化层：src/core/normalizer.ts 把 DSL 节点转成 NormalizedNode，提前提取干净节点名、变体属性、文本和子图标。
• 匹配与结果构造层：matcher.ts 给组件规则打分，result-builders.ts 构造组件、图标和 OSS 结果。
• 后处理与摘要层：post-processors.ts 折叠特殊结构，summary.ts 汇总 imports、文档查询计划、业务组件查阅计划和统计信息。

解析流程图