modernx-gui 1.1.1

package/README.md

@@ -0,0 +1,237 @@
+# ModernX GUI
+
+Development GUI with real-time visualization for ModernX applications, providing comprehensive debugging and state inspection capabilities.
+
+## Features
+
+- **Real-time Visualization**: Live display of Redux state and actions
+- **Project Structure Analysis**: Automatic detection and visualization of ModernX models
+- **WebSocket Communication**: Real-time data synchronization between app and GUI
+- **Action History**: Complete history of Redux actions with timestamps and payloads
+- **State Inspector**: Visual tree view of application state
+- **Hot Module Replacement**: Automatic GUI updates during development
+
+## Installation
+
+```bash
+npm install modernx-gui --save-dev
+```
+
+## Usage
+
+### Command Line Interface
+
+Start the GUI from any ModernX project directory:
+
+```bash
+npx modernx-gui
+```
+
+This will:
+1. Automatically detect your ModernX project structure
+2. Start a local development server
+3. Open your default browser to the GUI interface
+4. Begin real-time state monitoring
+
+### Programmatic Integration
+
+```javascript
+import modernx from 'modernx';
+import gui from 'modernx-gui';
+
+const app = modernx({
+  plugins: [
+    gui({
+      port: 3000,
+      autoOpen: true,
+      websocket: true,
+    }),
+  ],
+});
+```
+
+### CLI Integration
+
+When creating a new ModernX project, you can include the GUI automatically:
+
+```bash
+npx modernx create my-app --tools gui
+```
+
+## GUI Interface
+
+### Project Structure Panel
+
+- **Models List**: Displays all detected ModernX models
+- **File Tree**: Shows project structure and relationships
+- **Configuration**: Shows current ModernX configuration
+
+### State Viewer
+
+- **Current State**: Real-time display of application state
+- **State Tree**: Expandable tree view of nested state
+- **State Diff**: Visual diff between state changes
+
+### Action History
+
+- **Action Timeline**: Chronological list of all actions
+- **Action Details**: Payload, timestamp, and metadata
+- **State Transitions**: Visual representation of state changes
+
+### Real-time Monitoring
+
+- **Live Updates**: Automatic state and action updates
+- **Performance Metrics**: Action execution time and performance
+- **Error Tracking**: Visual error reporting and stack traces
+
+## Configuration Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `port` | number | `3000` | GUI server port |
+| `autoOpen` | boolean | `true` | Auto-open browser |
+| `websocket` | boolean | `true` | Enable WebSocket communication |
+| `host` | string | `'localhost'` | GUI server host |
+
+### Example Configuration
+
+```javascript
+gui({
+  port: 3001,
+  autoOpen: false,
+  websocket: true,
+  host: '0.0.0.0', // Allow remote connections
+});
+```
+
+## Development Workflow
+
+### 1. Start Development Server
+
+```bash
+cd my-modernx-app
+npx modernx-gui
+```
+
+### 2. Start Your Application
+
+```bash
+npm run dev
+```
+
+### 3. Open GUI Interface
+
+The GUI will automatically:
+- Detect your running ModernX application
+- Connect via WebSocket for real-time updates
+- Display current state and action history
+
+### 4. Monitor and Debug
+
+Use the GUI interface to:
+- Inspect current application state
+- Review action history and payloads
+- Monitor performance metrics
+- Track state changes in real-time
+
+## WebSocket Protocol
+
+The GUI communicates with your application via WebSocket:
+
+```javascript
+// Send state update to GUI
+ws.send(JSON.stringify({
+  type: 'state_update',
+  payload: newState,
+  timestamp: Date.now(),
+}));
+
+// Send action to GUI
+ws.send(JSON.stringify({
+  type: 'action',
+  payload: {
+    type: 'USER_ACTION',
+    payload: actionData,
+  },
+  timestamp: Date.now(),
+}));
+```
+
+## Migration from DVA GUI
+
+If you're migrating from DVA, the ModernX GUI provides enhanced capabilities:
+
+```javascript
+// DVA GUI (Electron-based)
+import dva from 'dva';
+import gui from 'dva-gui';
+
+// ModernX GUI (Web-based, enhanced)
+import modernx from 'modernx';
+import gui from 'modernx-gui';
+
+// Enhanced features:
+// - WebSocket real-time communication
+// - Cross-browser compatibility
+// - Hot module replacement
+// - Enhanced state visualization
+```
+
+## Browser Compatibility
+
+- **Chrome**: Full support
+- **Firefox**: Full support  
+- **Safari**: Full support
+- **Edge**: Full support
+- **Legacy browsers**: Graceful degradation
+
+## Development
+
+### Building
+
+```bash
+npm run build
+```
+
+### Development Mode
+
+```bash
+npm run dev
+```
+
+### Testing
+
+```bash
+npm test
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **GUI not connecting**
+   - Check if WebSocket is enabled
+   - Verify port availability
+   - Check firewall settings
+
+2. **Project not detected**
+   - Ensure `package.json` has ModernX dependency
+   - Check for `src/models/` directory
+   - Verify project structure
+
+3. **Browser not opening**
+   - Check default browser settings
+   - Try manual browser navigation to GUI URL
+   - Verify port is not in use
+
+### Debug Mode
+
+Enable debug logging:
+
+```bash
+DEBUG=modernx-gui:* npx modernx-gui
+```
+
+## License
+
+MIT

package/bin/modernx-gui

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+
+const { startServer } = require('../lib/server');
+const { detectProject } = require('../lib/project-detector');
+const { openBrowser } = require('../lib/browser');
+
+async function main() {
+  try {
+    console.log('🚀 Starting ModernX GUI...');
+    
+    // Detect current project structure
+    const projectInfo = await detectProject(process.cwd());
+    console.log('📁 Project detected:', projectInfo.name);
+    
+    // Start development server
+    const server = await startServer({
+      port: 3000,
+      projectInfo,
+    });
+    
+    console.log(`🌐 GUI Server running at: ${server.url}`);
+    
+    // Open browser automatically
+    await openBrowser(server.url);
+    console.log('✅ ModernX GUI is ready!');
+    
+  } catch (error) {
+    console.error('❌ Failed to start ModernX GUI:', error.message);
+    process.exit(1);
+  }
+}
+
+main();

package/bin/modernx-gui-dev

@@ -0,0 +1,326 @@
+#!/usr/bin/env node
+
+/**
+ * ModernX GUI 开发版本启动脚本
+ * 直接使用源代码，无需构建
+ */
+
+const express = require('express');
+const WebSocket = require('ws');
+const path = require('path');
+const fs = require('fs');
+
+// 直接导入源代码模块
+const { detectProject } = require('./src/lib/project-detector.js');
+
+async function openBrowser(url) {
+  try {
+    const { execSync } = require('child_process');
+    const platform = process.platform;
+    
+    if (platform === 'darwin') {
+      execSync(`open "${url}"`);
+    } else if (platform === 'win32') {
+      execSync(`start "${url}"`);
+    } else {
+      execSync(`xdg-open "${url}"`);
+    }
+    
+    console.log(`🌐 已在浏览器中打开: ${url}`);
+  } catch (error) {
+    console.warn('无法自动打开浏览器:', error.message);
+    console.log(`请手动访问: ${url}`);
+  }
+}
+
+async function startServer(options = {}) {
+  const app = express();
+  const port = options.port || 3000;
+  
+  // 创建一个简单的 HTML 界面（因为还没有构建前端）
+  app.get('/', (req, res) => {
+    const html = `
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ModernX GUI - 开发版</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; }
+        .header { background: #2563eb; color: white; padding: 1rem; display: flex; justify-content: space-between; align-items: center; }
+        .header h1 { font-size: 1.5rem; }
+        .status { display: flex; align-items: center; gap: 0.5rem; }
+        .status-dot { width: 12px; height: 12px; border-radius: 50%; background: #10b981; }
+        .container { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - 60px); }
+        .sidebar { background: white; border-right: 1px solid #e5e7eb; padding: 1rem; overflow-y: auto; }
+        .main-content { padding: 1rem; overflow-y: auto; }
+        .card { background: white; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+        .card h3 { margin-bottom: 0.5rem; color: #374151; }
+        .state-display { background: #1f2937; color: #10b981; padding: 1rem; border-radius: 4px; font-family: 'Monaco', 'Consolas', monospace; font-size: 0.875rem; white-space: pre-wrap; max-height: 300px; overflow-y: auto; }
+        .action-item { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 4px; padding: 0.75rem; margin-bottom: 0.5rem; }
+        .action-type { font-weight: 600; color: #2563eb; }
+        .action-time { font-size: 0.75rem; color: #6b7280; margin-left: 0.5rem; }
+        .action-payload { background: #1f2937; color: #f3f4f6; padding: 0.5rem; border-radius: 4px; font-family: monospace; font-size: 0.75rem; margin-top: 0.5rem; white-space: pre-wrap; }
+        .models-list ul { list-style: none; }
+        .models-list li { background: #f3f4f6; padding: 0.5rem; border-radius: 4px; margin-bottom: 0.25rem; }
+        .connection-status { display: flex; align-items: center; gap: 0.5rem; }
+        .connected { color: #10b981; }
+        .disconnected { color: #ef4444; }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <h1>🎨 ModernX GUI</h1>
+        <div class="connection-status">
+            <div class="status-dot"></div>
+            <span id="connection-status">连接中...</span>
+        </div>
+    </header>
+    
+    <div class="container">
+        <aside class="sidebar">
+            <div class="card">
+                <h3>📁 项目信息</h3>
+                <div id="project-info">
+                    <p>加载中...</p>
+                </div>
+            </div>
+            
+            <div class="card">
+                <h3>📊 模型列表</h3>
+                <div class="models-list">
+                    <ul id="models-list">
+                        <li>加载中...</li>
+                    </ul>
+                </div>
+            </div>
+        </aside>
+        
+        <main class="main-content">
+            <div class="card">
+                <h3>🔄 当前状态</h3>
+                <div class="state-display" id="state-display">
+{
+  "user": {
+    "currentUser": null,
+    "loading": false,
+    "error": null
+  },
+  "counter": {
+    "count": 0,
+    "history": []
+  }
+}
+                </div>
+            </div>
+            
+            <div class="card">
+                <h3>⚡ 动作历史</h3>
+                <div id="actions-history">
+                    <div class="action-item">
+                        <div>
+                            <span class="action-type">等待动作...</span>
+                            <span class="action-time">--:--:--</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        let ws;
+        let actions = [];
+        
+        // 连接 WebSocket
+        function connectWebSocket() {
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            ws = new WebSocket(\`\${protocol}//\${window.location.host}\`);
+            
+            ws.onopen = () => {
+                console.log('Connected to ModernX GUI');
+                document.getElementById('connection-status').textContent = '已连接';
+                document.querySelector('.status-dot').style.background = '#10b981';
+            };
+            
+            ws.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    
+                    if (data.type === 'state_update') {
+                        document.getElementById('state-display').textContent = JSON.stringify(data.payload, null, 2);
+                    } else if (data.type === 'action') {
+                        addActionToHistory(data.payload);
+                    }
+                } catch (error) {
+                    console.error('Error parsing message:', error);
+                }
+            };
+            
+            ws.onclose = () => {
+                console.log('Disconnected from ModernX GUI');
+                document.getElementById('connection-status').textContent = '连接断开';
+                document.querySelector('.status-dot').style.background = '#ef4444';
+                // 尝试重连
+                setTimeout(connectWebSocket, 2000);
+            };
+        }
+        
+        // 添加动作到历史记录
+        function addActionToHistory(action) {
+            actions.unshift(action);
+            if (actions.length > 50) actions.pop(); // 只保留最近50条
+            
+            const historyContainer = document.getElementById('actions-history');
+            historyContainer.innerHTML = actions.map(action => \`
+                <div class="action-item">
+                    <div>
+                        <span class="action-type">\${action.type}</span>
+                        <span class="action-time">\${new Date(action.timestamp).toLocaleTimeString()}</span>
+                    </div>
+                    <div class="action-payload">\${JSON.stringify(action.payload, null, 2)}</div>
+                </div>
+            \`).join('');
+        }
+        
+        // 加载项目信息
+        async function loadProjectInfo() {
+            try {
+                const response = await fetch('/api/project');
+                const projectInfo = await response.json();
+                
+                document.getElementById('project-info').innerHTML = \`
+                    <p><strong>项目名称:</strong> \${projectInfo.name || '未知'}</p>
+                    <p><strong>项目路径:</strong> \${projectInfo.path || '未知'}</p>
+                    <p><strong>ModernX 项目:</strong> \${projectInfo.isModernX ? '✅ 是' : '❌ 否'}</p>
+                \`;
+                
+                const modelsList = document.getElementById('models-list');
+                if (projectInfo.models && projectInfo.models.length > 0) {
+                    modelsList.innerHTML = projectInfo.models.map(model => 
+                        \`<li>\${model}</li>\`
+                    ).join('');
+                } else {
+                    modelsList.innerHTML = '<li>暂无模型文件</li>';
+                }
+            } catch (error) {
+                console.error('Failed to load project info:', error);
+            }
+        }
+        
+        // 初始化
+        document.addEventListener('DOMContentLoaded', () => {
+            connectWebSocket();
+            loadProjectInfo();
+        });
+    </script>
+</body>
+</html>`;
+    res.send(html);
+  });
+  
+  // API endpoint for project info
+  app.get('/api/project', (req, res) => {
+    res.json(options.projectInfo || {});
+  });
+  
+  // WebSocket server for real-time communication
+  const server = app.listen(port, () => {
+    console.log(`🚀 ModernX GUI 服务器运行在端口 ${port}`);
+  });
+  
+  const wss = new WebSocket.Server({ server });
+  
+  // Handle WebSocket connections
+  wss.on('connection', (ws) => {
+    console.log('📡 客户端连接到 GUI');
+    
+    ws.on('message', (message) => {
+      try {
+        const data = JSON.parse(message);
+        console.log('📨 收到消息:', data);
+        
+        // Broadcast to all clients
+        wss.clients.forEach((client) => {
+          if (client.readyState === WebSocket.OPEN) {
+            client.send(JSON.stringify(data));
+          }
+        });
+      } catch (error) {
+        console.error('❌ 处理消息错误:', error);
+      }
+    });
+    
+    ws.on('close', () => {
+      console.log('📡 客户端断开连接');
+    });
+  });
+  
+  return {
+    server,
+    wss,
+    url: `http://localhost:${port}`,
+    port,
+  };
+}
+
+async function main() {
+  try {
+    console.log('🚀 启动 ModernX GUI (开发版)...');
+    
+    // 检测当前项目结构
+    const projectInfo = await detectProject(process.cwd());
+    console.log('📁 项目检测完成:', projectInfo.name);
+    
+    // 启动开发服务器
+    const server = await startServer({
+      port: 3000,
+      projectInfo,
+    });
+    
+    console.log(`🌐 GUI 服务器地址: ${server.url}`);
+    
+    // 自动打开浏览器
+    await openBrowser(server.url);
+    console.log('✅ ModernX GUI 已就绪!');
+    console.log('');
+    console.log('💡 提示:');
+    console.log('  - 这是一个开发版本，使用临时界面');
+    console.log('  - 完整功能需要构建前端代码');
+    console.log('  - 可以手动发送状态更新进行测试');
+    console.log('');
+    console.log('🔧 测试命令:');
+    console.log('  curl -X POST http://localhost:3000/api/test -d \'{"type":"state_update","payload":{"test":"hello"}}\'');
+    
+    // 添加测试端点
+    server.server.on('request', (req, res) => {
+      if (req.method === 'POST' && req.url === '/api/test') {
+        let body = '';
+        req.on('data', chunk => body += chunk);
+        req.on('end', () => {
+          try {
+            const data = JSON.parse(body);
+            server.wss.clients.forEach(client => {
+              if (client.readyState === WebSocket.OPEN) {
+                client.send(JSON.stringify(data));
+              }
+            });
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ success: true, message: '数据已广播' }));
+          } catch (error) {
+            res.writeHead(400, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Invalid JSON' }));
+          }
+        });
+      }
+    });
+    
+  } catch (error) {
+    console.error('❌ 启动 ModernX GUI 失败:', error.message);
+    process.exit(1);
+  }
+}
+
+main();