@easy-editor/materials-dashboard-bar-chart 0.0.2

package/.vite/plugins/vite-plugin-external-deps.ts

@@ -0,0 +1,224 @@
+/**
+ * Vite Plugin: External Dependencies
+ * 外部依赖插件 - 在开发模式下将 React/ReactDOM 外部化
+ *
+ * 用途：
+ * - 防止 Vite 将 React/ReactDOM 打包进开发服务器的模块
+ * - 强制使用父应用（dashboard）提供的 React 实例
+ * - 解决双 React 实例导致的 "Invalid hook call" 错误
+ */
+
+import type { Plugin } from 'vite'
+
+interface ExternalDepsOptions {
+  /** 需要外部化的依赖列表 */
+  externals?: string[]
+  /** 全局变量映射 */
+  globals?: Record<string, string>
+}
+
+const DEFAULT_EXTERNALS = ['react', 'react-dom', 'react/jsx-runtime']
+
+const DEFAULT_GLOBALS: Record<string, string> = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'react/jsx-runtime': 'jsxRuntime',
+}
+
+/**
+ * 创建外部依赖插件
+ */
+export function externalDeps(options: ExternalDepsOptions = {}): Plugin {
+  const externals = options.externals || DEFAULT_EXTERNALS
+  const globals = { ...DEFAULT_GLOBALS, ...options.globals }
+
+  // 虚拟模块前缀
+  const VIRTUAL_PREFIX = '\0virtual:external:'
+
+  return {
+    name: 'vite-plugin-external-deps',
+    enforce: 'pre',
+
+    // 在开发模式下拦截模块解析
+    resolveId(id) {
+      // 检查是否是需要外部化的依赖
+      if (externals.includes(id)) {
+        // 返回虚拟模块 ID（\0 前缀告诉 Vite 这是虚拟模块）
+        return VIRTUAL_PREFIX + id
+      }
+      return null
+    },
+
+    // 加载外部模块的代理代码
+    load(id) {
+      // 检查是否是虚拟外部模块
+      if (!id.startsWith(VIRTUAL_PREFIX)) {
+        return null
+      }
+
+      const moduleName = id.slice(VIRTUAL_PREFIX.length)
+      const globalName = globals[moduleName]
+
+      if (!globalName) {
+        throw new Error(
+          `[vite-plugin-external-deps] No global mapping found for "${moduleName}". ` +
+            `Please add it to the globals option.`
+        )
+      }
+
+      // 对于 react，导出常用的命名导出
+      if (moduleName === 'react') {
+        return `
+// External module: react -> window.${globalName}
+const React = window.${globalName};
+if (!React) {
+  throw new Error(
+    'External dependency "react" (window.${globalName}) is not available. ' +
+    'Make sure the parent application has loaded it globally.'
+  );
+}
+
+// 导出默认导出
+export default React;
+
+// 导出常用的命名导出
+export const {
+  useState,
+  useEffect,
+  useContext,
+  useReducer,
+  useCallback,
+  useMemo,
+  useRef,
+  useImperativeHandle,
+  useLayoutEffect,
+  useDebugValue,
+  useDeferredValue,
+  useTransition,
+  useId,
+  useSyncExternalStore,
+  Fragment,
+  StrictMode,
+  Suspense,
+  createElement,
+  createContext,
+  forwardRef,
+  lazy,
+  memo,
+  startTransition,
+  Component,
+  PureComponent,
+  Children,
+  cloneElement,
+  isValidElement,
+} = React;
+`
+      }
+
+      // 对于 react-dom，导出常用的命名导出
+      if (moduleName === 'react-dom') {
+        return `
+// External module: react-dom -> window.${globalName}
+const ReactDOM = window.${globalName};
+if (!ReactDOM) {
+  throw new Error(
+    'External dependency "react-dom" (window.${globalName}) is not available. ' +
+    'Make sure the parent application has loaded it globally.'
+  );
+}
+
+// 导出默认导出
+export default ReactDOM;
+
+// 导出常用的命名导出
+export const {
+  createRoot,
+  hydrateRoot,
+  render,
+  hydrate,
+  unmountComponentAtNode,
+  findDOMNode,
+  flushSync,
+} = ReactDOM;
+`
+      }
+
+      // 对于 react/jsx-runtime
+      if (moduleName === 'react/jsx-runtime') {
+        return `
+// External module: react/jsx-runtime -> window.${globalName}
+const jsxRuntime = window.${globalName};
+if (!jsxRuntime) {
+  throw new Error(
+    'External dependency "react/jsx-runtime" (window.${globalName}) is not available. ' +
+    'Make sure the parent application has loaded it globally.'
+  );
+}
+
+// 导出 JSX 运行时函数
+export const { jsx, jsxs, Fragment } = jsxRuntime;
+export default jsxRuntime;
+`
+      }
+
+      // 对于 @easy-editor/core
+      if (moduleName === '@easy-editor/core') {
+        return `
+// External module: @easy-editor/core -> window.${globalName}
+const EasyEditorCore = window.${globalName};
+if (!EasyEditorCore) {
+  throw new Error(
+    'External dependency "@easy-editor/core" (window.${globalName}) is not available. ' +
+    'Make sure the parent application has loaded it globally.'
+  );
+}
+
+// 导出整个模块
+export default EasyEditorCore;
+export * from '\0virtual:external:@easy-editor/core:named';
+`
+      }
+
+      // 处理 @easy-editor/core 的命名导出
+      if (id === '\0virtual:external:@easy-editor/core:named') {
+        return `
+const EasyEditorCore = window.${globals['@easy-editor/core']};
+// 尝试导出所有属性
+const keys = Object.keys(EasyEditorCore || {});
+const exports = {};
+keys.forEach(key => {
+  exports[key] = EasyEditorCore[key];
+});
+export default exports;
+`
+      }
+
+      // 默认情况：简单的全局变量代理
+      return `
+// External module: ${moduleName} -> window.${globalName}
+const mod = window.${globalName};
+if (!mod) {
+  throw new Error(
+    'External dependency "${moduleName}" (window.${globalName}) is not available. ' +
+    'Make sure the parent application has loaded it globally.'
+  );
+}
+export default mod;
+`
+    },
+
+    // 配置 Rollup 外部化（用于构建）
+    config(config) {
+      return {
+        build: {
+          rollupOptions: {
+            external: externals,
+            output: {
+              globals,
+            },
+          },
+        },
+      }
+    },
+  }
+}

package/.vite/plugins/vite-plugin-material-dev.ts

@@ -0,0 +1,218 @@
+/**
+ * Vite Plugin for Material Development
+ * 物料开发 Vite 插件 - 提供物料调试所需的 API 和 WebSocket 通知
+ */
+
+import type { Plugin, ViteDevServer } from 'vite'
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import { WebSocketServer, WebSocket } from 'ws'
+
+interface MaterialDevPluginOptions {
+  /** 物料入口文件路径 */
+  entry?: string
+  /** WebSocket 端口（默认与 HTTP 端口相同） */
+  wsPort?: number
+}
+
+/**
+ * 物料开发插件
+ * 提供：
+ * - /api/health - 健康检查
+ * - /api/material - 物料信息
+ * - WebSocket 通知 - 文件变更时通知连接的客户端
+ */
+export function materialDevPlugin(options: MaterialDevPluginOptions = {}): Plugin {
+  const { entry = '/src/index.tsx' } = options
+
+  let server: ViteDevServer
+  let wss: WebSocketServer | null = null
+  const clients = new Set<WebSocket>()
+
+  // 广播消息给所有连接的客户端
+  function broadcast(message: object) {
+    const data = JSON.stringify(message)
+    for (const client of clients) {
+      if (client.readyState === WebSocket.OPEN) {
+        client.send(data)
+      }
+    }
+  }
+
+  return {
+    name: 'vite-plugin-material-dev',
+
+    configureServer(_server) {
+      server = _server
+
+      // 创建 WebSocket 服务器，复用 Vite 的 HTTP 服务器
+      wss = new WebSocketServer({ noServer: true })
+
+      // 处理 WebSocket 升级请求
+      server.httpServer?.on('upgrade', (request, socket, head) => {
+        // 只处理 /ws 路径的 WebSocket 请求，避免与 Vite HMR 冲突
+        if (request.url === '/ws' || request.url === '/__material_ws__') {
+          wss?.handleUpgrade(request, socket, head, ws => {
+            wss?.emit('connection', ws, request)
+          })
+        }
+      })
+
+      wss.on('connection', ws => {
+        console.log('[MaterialDevPlugin] Client connected')
+        clients.add(ws)
+
+        // 发送连接成功消息
+        ws.send(
+          JSON.stringify({
+            type: 'connected',
+            message: 'Material dev server connected',
+            timestamp: Date.now(),
+          }),
+        )
+
+        ws.on('close', () => {
+          console.log('[MaterialDevPlugin] Client disconnected')
+          clients.delete(ws)
+        })
+
+        ws.on('error', error => {
+          console.error('[MaterialDevPlugin] WebSocket error:', error)
+          clients.delete(ws)
+        })
+      })
+
+      // 处理 CORS 预检请求（需要在其他中间件之前）
+      server.middlewares.use((req: IncomingMessage, res: ServerResponse, next: () => void) => {
+        if (req.method === 'OPTIONS') {
+          res.setHeader('Access-Control-Allow-Origin', '*')
+          res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
+          res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
+          res.statusCode = 204
+          res.end()
+          return
+        }
+        next()
+      })
+
+      // 健康检查 API
+      server.middlewares.use('/api/health', (_req: IncomingMessage, res: ServerResponse) => {
+        res.setHeader('Content-Type', 'application/json')
+        res.setHeader('Access-Control-Allow-Origin', '*')
+        res.end(
+          JSON.stringify({
+            status: 'ok',
+            timestamp: Date.now(),
+            server: 'vite',
+            wsPath: '/ws',
+          }),
+        )
+      })
+
+      // 物料信息 API
+      server.middlewares.use('/api/material', async (_req: IncomingMessage, res: ServerResponse) => {
+        res.setHeader('Content-Type', 'application/json')
+        res.setHeader('Access-Control-Allow-Origin', '*')
+
+        try {
+          // 使用 Vite 的 SSR 模块加载能力加载物料模块
+          const module = await server.ssrLoadModule(entry)
+
+          const meta = module.meta || module.default?.meta
+          const component = module.component || module.default
+
+          if (!meta) {
+            res.statusCode = 400
+            res.end(
+              JSON.stringify({
+                error: 'Material meta not found. Make sure to export "meta" from the entry file.',
+              }),
+            )
+            return
+          }
+
+          // 返回物料信息
+          const materialInfo = {
+            // 基本信息
+            name: meta.componentName,
+            title: meta.title,
+            version: meta.npm?.version || '0.0.0-dev',
+            group: meta.group,
+            category: meta.category,
+
+            // 入口信息
+            entry,
+
+            // 模块状态
+            hasComponent: !!component,
+            hasMeta: !!meta,
+            hasConfigure: !!meta.configure,
+            hasSnippets: Array.isArray(meta.snippets) && meta.snippets.length > 0,
+
+            // WebSocket 路径
+            wsPath: '/ws',
+          }
+
+          res.end(JSON.stringify(materialInfo))
+        } catch (error) {
+          console.error('[MaterialDevPlugin] Failed to load material:', error)
+          res.statusCode = 500
+          res.end(
+            JSON.stringify({
+              error: error instanceof Error ? error.message : String(error),
+            }),
+          )
+        }
+      })
+
+      // 在服务器启动时打印信息
+      server.httpServer?.once('listening', () => {
+        const address = server.httpServer?.address()
+        const port = typeof address === 'object' && address ? address.port : 5001
+        const host = server.config.server.host || 'localhost'
+
+        setTimeout(() => {
+          console.log('')
+          console.log('\x1b[36m%s\x1b[0m', '  Material Dev Server Ready')
+          console.log('')
+          console.log(`  Health Check:  http://${host}:${port}/api/health`)
+          console.log(`  Material Info: http://${host}:${port}/api/material`)
+          console.log(`  Module Entry:  http://${host}:${port}${entry}`)
+          console.log(`  WebSocket:     ws://${host}:${port}/ws`)
+          console.log('')
+          console.log('\x1b[33m%s\x1b[0m', '  Connect this URL in EasyEditor to start debugging')
+          console.log('')
+        }, 100)
+      })
+    },
+
+    // 监听 Vite 的 HMR 事件，转发给我们的 WebSocket 客户端
+    handleHotUpdate({ file, modules }) {
+      console.log(`[MaterialDevPlugin] File changed: ${file}`)
+
+      // 通知所有连接的客户端
+      broadcast({
+        type: 'update',
+        file,
+        timestamp: Date.now(),
+        modules: modules.map(m => m.id),
+      })
+
+      // 返回 undefined 让 Vite 继续处理 HMR
+      return
+    },
+
+    // 插件关闭时清理
+    closeBundle() {
+      if (wss) {
+        for (const client of clients) {
+          client.close()
+        }
+        clients.clear()
+        wss.close()
+        wss = null
+      }
+    },
+  }
+}
+
+export default materialDevPlugin

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @easy-editor/materials-dashboard-bar-chart
+
+## 0.0.2
+
+### Patch Changes
+
+- feat: new setters

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright © 2025-PRESENT JinSo <https://github.com/JinSooo>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.