feat: enhance DevTools support for Inula 2.0 with new hooks and event notifications

Author: Eomnational

next-packages/runtime/src/index.ts

@@ -1,3 +1,30 @@
+// DevTools 支持：在模块加载时就设置标记并通知 DevTools
+if (typeof window !== 'undefined') {
+  const win = window as any;
+  
+  // 标记为 Inula 2.0（用于 DevTools 检测）
+  win.__INULA_V2__ = true;
+  win.__INULA_NEXT__ = true;
+  
+  console.log('[Inula Next] Runtime loaded, version 2.0');
+  
+  // 主动通知 DevTools：2.0 运行时已加载
+  // 发送自定义事件
+  const event = new CustomEvent('__INULA_V2_LOADED__', {
+    detail: { version: '2.0', timestamp: Date.now() }
+  });
+  window.dispatchEvent(event);
+  
+  // 也通过自定义事件通知（不需要用 DevTools 消息格式）
+  setTimeout(() => {
+    window.postMessage({
+      type: '__INULA_V2_READY__',  // 这是自定义事件，不需要改
+      version: '2.0',
+      from: 'inula-runtime'
+    }, '*');
+  }, 0);
+}
+
 export * from './render';
 export * from './Nodes';
 export * from './types';

next-packages/runtime/src/render.ts

@@ -12,7 +12,49 @@ export const render = (compNode: CompNode, container: HTMLElement) => {
   if (container == null) {
     throw new Error('Render target is empty. Please provide a valid DOM element.');
   }
+  
+  // DevTools 支持：设置全局标记
+  if (typeof window !== 'undefined') {
+    const win = window as any;
+    
+    // 标记为 Inula 2.0
+    if (!win.__INULA_V2__) {
+      win.__INULA_V2__ = true;
+      win.__INULA_NEXT__ = true;
+    }
+    
+    // 设置 render 函数到 window，以便 DevTools 拦截
+    if (!win.render) {
+      win.render = render;
+    }
+    
+    // 通知 DevTools 有新的渲染
+    if (win.__INULA_DEV_TOOL_V2_HELPER__) {
+      win.__INULA_DEV_TOOL_V2_HELPER__.registerCompNode(compNode);
+      win.__INULA_DEV_TOOL_V2_HELPER__.rootCompNodes.push(compNode);
+    }
+  }
+  
   container.innerHTML = '';
   insertNode(container as InulaHTMLNode, compNode, 0);
   runDidMount();
+  
+  // 渲染完成后通知 DevTools
+  if (typeof window !== 'undefined') {
+    const win = window as any;
+    if (win.__INULA_DEV_TOOL_V2_HELPER__) {
+      // 延迟发送，确保 DOM 已更新
+      setTimeout(() => {
+        const tree = win.__INULA_DEV_TOOL_V2_HELPER__.collectComponentTree();
+        window.postMessage({
+          type: 'DevTool_Msg_Label',  // 必须使用这个标签
+          payload: {
+            type: 'vNode trees infos',
+            data: [tree],
+          },
+          from: 'dev tool hook',
+        }, '*');
+      }, 0);
+    }
+  }
 };

packages/inula-dev-tools/src/adapters/index.ts

@@ -0,0 +1,68 @@
+/**
+ * 适配器工厂
+ * 根据版本自动选择合适的适配器
+ */
+
+import { InulaVersion, ComponentTreeNode, ComponentDetail } from '../comm/types';
+import { V1Adapter } from './v1Adapter';
+import { V2Adapter } from './v2Adapter';
+
+export class AdapterFactory {
+  private v1Adapter: V1Adapter;
+  private v2Adapter: V2Adapter;
+
+  constructor() {
+    this.v1Adapter = new V1Adapter();
+    this.v2Adapter = new V2Adapter();
+  }
+
+  /**
+   * 获取适配器
+   */
+  getAdapter(version: InulaVersion) {
+    return version === InulaVersion.V1 ? this.v1Adapter : this.v2Adapter;
+  }
+
+  /**
+   * 解析组件树
+   */
+  parseComponentTree(data: any, version: InulaVersion): ComponentTreeNode[] {
+    const adapter = this.getAdapter(version);
+    return adapter.parseComponentTree(data);
+  }
+
+  /**
+   * 构建树形结构
+   */
+  buildTree(nodes: ComponentTreeNode[], version: InulaVersion): ComponentTreeNode[] {
+    const adapter = this.getAdapter(version);
+    return adapter.buildTree(nodes);
+  }
+
+  /**
+   * 解析组件详情
+   */
+  parseComponentDetail(data: any, id: string | number, version: InulaVersion): ComponentDetail {
+    const adapter = this.getAdapter(version);
+    return adapter.parseComponentDetail(data, id);
+  }
+
+  /**
+   * 格式化更新数据
+   */
+  formatUpdateData(id: string | number, ...args: any[]): any {
+    // 根据参数数量判断版本
+    if (args.length === 3) {
+      // V1: attrName, path, value
+      return this.v1Adapter.formatUpdateData(id, args[0], args[1], args[2]);
+    } else {
+      // V2: propName, value
+      return this.v2Adapter.formatUpdateData(id, args[0], args[1]);
+    }
+  }
+}
+
+export const adapterFactory = new AdapterFactory();
+
+export { V1Adapter } from './v1Adapter';
+export { V2Adapter } from './v2Adapter';

packages/inula-dev-tools/src/adapters/v1Adapter.ts

@@ -0,0 +1,122 @@
+/**
+ * Inula 1.0 版本适配器
+ * 将 1.0 版本的数据格式转换为统一格式
+ */
+
+import { ComponentTreeNode, ComponentDetail, InulaVersion } from '../comm/types';
+
+export class V1Adapter {
+  /**
+   * 将 1.0 版本的 VNode 树转换为统一的组件树格式
+   */
+  parseComponentTree(vNodeData: any[]): ComponentTreeNode[] {
+    const result: ComponentTreeNode[] = [];
+    
+    // 1.0 版本的数据格式：[id, nameObj, parentId, key, ...]
+    for (let i = 0; i < vNodeData.length; i += 4) {
+      const id = vNodeData[i];
+      const nameObj = vNodeData[i + 1];
+      const parentId = vNodeData[i + 2];
+      const key = vNodeData[i + 3];
+
+      const node: ComponentTreeNode = {
+        id,
+        name: typeof nameObj === 'object' ? nameObj.itemName : nameObj,
+        type: typeof nameObj === 'object' && nameObj.badge?.length > 0 
+          ? nameObj.badge[0] 
+          : 'Component',
+        parentId: parentId || undefined,
+        version: InulaVersion.V1,
+        rawData: {
+          id,
+          nameObj,
+          parentId,
+          key,
+        },
+      };
+
+      result.push(node);
+    }
+
+    return result;
+  }
+
+  /**
+   * 构建树形结构
+   */
+  buildTree(nodes: ComponentTreeNode[]): ComponentTreeNode[] {
+    const nodeMap = new Map<string | number, ComponentTreeNode>();
+    const roots: ComponentTreeNode[] = [];
+
+    // 创建节点映射
+    nodes.forEach(node => {
+      nodeMap.set(node.id, { ...node, children: [] });
+    });
+
+    // 构建父子关系
+    nodes.forEach(node => {
+      const currentNode = nodeMap.get(node.id)!;
+      if (node.parentId) {
+        const parent = nodeMap.get(node.parentId);
+        if (parent) {
+          if (!parent.children) {
+            parent.children = [];
+          }
+          parent.children.push(currentNode);
+        } else {
+          roots.push(currentNode);
+        }
+      } else {
+        roots.push(currentNode);
+      }
+    });
+
+    return roots;
+  }
+
+  /**
+   * 将 1.0 版本的组件属性转换为统一格式
+   */
+  parseComponentDetail(attrs: any, id: string | number): ComponentDetail {
+    return {
+      id,
+      name: attrs.name || 'Unknown',
+      type: attrs.type || 'Component',
+      props: this.parseAttrs(attrs.parsedProps),
+      state: this.parseAttrs(attrs.parsedState),
+      hooks: attrs.parsedHooks,
+      version: InulaVersion.V1,
+      rawData: attrs,
+    };
+  }
+
+  /**
+   * 解析属性数组
+   */
+  private parseAttrs(attrs: any[]): Record<string, any> {
+    if (!attrs || !Array.isArray(attrs)) {
+      return {};
+    }
+
+    const result: Record<string, any> = {};
+    attrs.forEach(attr => {
+      if (attr && attr.itemName) {
+        result[attr.itemName] = attr.value;
+      }
+    });
+
+    return result;
+  }
+
+  /**
+   * 将统一格式的属性值转换回 1.0 格式用于更新
+   */
+  formatUpdateData(id: string | number, attrName: string, path: string[], value: any): any {
+    return {
+      id,
+      itemName: attrName,
+      path,
+      value,
+    };
+  }
+}