@spark-view/spark-component

SPARK 组件系统核心 - 提供组件管理、能力系统和生命周期控制

特性

• 组件注册 - 统一的组件注册和管理机制
• 能力系统 - Provider/Consumer 模式的依赖注入
• 懒加载 - 支持动态导入和按需加载
• 生命周期 - 完整的组件生命周期管理
• 命名空间 API - 统一的 Spark 命名空间

安装

pnpm add @spark-view/spark-component

快速开始

1. 注册组件

import { Spark } from '@spark-view/spark-component'
import MyGridComponent from './MyGridComponent.vue'

// 静态注册
Spark.register('my-grid', MyGridComponent)

// 懒加载注册
Spark.register('my-chart', () => import('./MyChartComponent.vue'))

// 批量注册（推荐）
const reg = Spark.createRegister(import.meta.glob('./*.vue'))
reg.registerAll({
  'my-grid': './MyGridComponent.vue',
  'my-chart': './MyChartComponent.vue'
})

2. 安装插件

import { createApp } from 'vue'

const app = createApp(App)
// 使用全局单例（推荐）
app.use(Spark.createPlugin())

3. 使用组件

<script setup lang="ts">
import { useSparkComponent } from '@spark-view/spark-component'

const { provide, consume } = useSparkComponent({
  type: 'my-grid'
})

// 提供能力（必须在 setup 同步阶段调用）
provide('dataSource', {
  getData: () => fetchData()
})

// 消费能力（必须在 setup 同步阶段调用）
const logger = consume('logger')
</script>

核心概念

能力系统

组件间通过能力系统通信，避免紧耦合：

// Provider 提供能力（setup 同步阶段）
provide('columnManager', {
  addColumn: (col) => columns.value.push(col),
  removeColumn: (id) => columns.value = columns.value.filter(c => c.id !== id)
})

// Consumer 消费能力（setup 同步阶段）
const columnManager = consume('columnManager')
// ⚠️ provide/consume 必须在 setup() 同步阶段调用，不要在 onMounted/watch/async 中使用

命名空间 API

所有 API 通过 Spark 命名空间统一访问：

import { Spark } from '@spark-view/spark-component'

// 注册组件
Spark.register('my-component', MyComponent)

// 安装 Vue 插件（使用全局单例）
app.use(Spark.createPlugin())

// 类型定义
import type { ComponentContext } from '@spark-view/spark-component'

API 文档

完整 API 文档请查看 API.md

依赖

{
  "@spark-view/spark-utils": "workspace:*",
  "vue": "^3.4.0"
}

开发命令

pnpm run typecheck   # 类型检查
pnpm run test        # 运行测试
pnpm run build       # 构建包

License

MIT