@mijadesign/mjui-parse-dsl

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

功能

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

安装

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

快速使用

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

const result = await parseDslDataWithRemoteRules(dslDocument);

console.log(result);

API

parseDslDataWithRemoteRules(dslData)

并发加载平台上的组件、图标和 OSS 规则，解析 DSL 对象或 JSON 字符串，并返回处理后的结构化结果。远程请求或规则格式校验失败时会终止解析，不回退包内规则。

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

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

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

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

可选插槽可见性

MasterGo 展开的组件实例可能保留未激活的模板子节点。解析器默认使用 preserve 模式，保持历史输出；调用方可以通过规则选择 exclude（排除）或 annotate（保留并标记）图标候选。可见性判断只作用于匹配结果，不裁剪 DSL 子树。

const result = await parseDslDataWithRemoteRules(dslDocument, {
  visibility: {
    mode: "exclude",
    rules: [
      {
        targetType: "icon",
        targetNames: ["information"],
        controller: {
          ancestorNameIncludes: ["文本标签"],
          propertyKey: "图标",
          disabledValues: ["false"],
        },
      },
    ],
  },
});

规则从图标节点向上查找最近的匹配祖先。上例只会过滤位于“文本标签”实例内部且该实例明确设置 图标=false 的 information，不会影响其他图标、组件、文本或 OSS 资源。

规则来源

解析包只使用以下平台规则，不再包含或合并项目 extraRules：

• Component：https://static-sblp.mibaodata.com/mjui-pase-dsl/component-rules.json
• Icon：https://static-sblp.mibaodata.com/mjui-pase-dsl/icon-rules.json
• OSS：https://static-sblp.mibaodata.com/mjui-pase-dsl/oss-rules.json

默认请求超时为 5 秒。三份规则分别要求数组、对象、数组的顶层结构；任一地址不可用或格式错误都会返回包含规则名称和地址的错误。

输出结构

parseDslDataWithRemoteRules 返回 Promise<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/remote-rules.ts 并发加载并校验平台上的三份规则。
• 入口层：src/index.ts 负责预处理 JSON、加载规则、调用解析器并序列化返回结果。
• 规则配置层：src/core/config.ts 使用完整远程规则生成图标、组件和 OSS 规则集合。
• 节点归一化层：src/core/normalizer.ts 把 DSL 节点转成 NormalizedNode，提前提取干净节点名、变体属性、文本和子图标。
• 匹配与结果构造层：matcher.ts 给组件规则打分，result-builders.ts 构造组件、图标和 OSS 结果。
• 后处理与摘要层：post-processors.ts 折叠特殊结构，summary.ts 汇总 imports、文档查询计划、业务组件查阅计划和统计信息。

解析流程图