@pyreon/charts 0.9.0 → 0.11.0

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@pyreon/charts",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Reactive ECharts bridge for Pyreon — lazy loading, signal-driven, Canvas by default",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/pyreon/fundamentals.git",
-    "directory": "packages/charts"
+    "url": "https://github.com/pyreon/pyreon.git",
+    "directory": "packages/fundamentals/charts"
   },
   "homepage": "https://github.com/pyreon/fundamentals/tree/main/packages/charts#readme",
   "bugs": {
-    "url": "https://github.com/pyreon/fundamentals/issues"
+    "url": "https://github.com/pyreon/pyreon/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -42,11 +42,18 @@
     "build": "vl_rolldown_build",
     "dev": "vl_rolldown_build-watch",
     "test": "vitest run",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check ."
   },
   "peerDependencies": {
-    "@pyreon/core": ">=0.7.0 <0.8.0",
-    "@pyreon/reactivity": ">=0.7.0 <0.8.0",
+    "@pyreon/core": "^0.11.0",
+    "@pyreon/reactivity": "^0.11.0",
     "echarts": ">=5.6.0"
+  },
+  "devDependencies": {
+    "@pyreon/core": "^0.11.0",
+    "@pyreon/reactivity": "^0.11.0",
+    "@pyreon/runtime-dom": "^0.11.0",
+    "echarts": "^6.0.0"
   }
 }

package/src/chart-component.tsx

@@ -1,8 +1,15 @@
-import type { VNodeChild } from '@pyreon/core'
-import { effect } from '@pyreon/reactivity'
-import type { EChartsOption } from 'echarts'
-import type { ChartProps } from './types'
-import { useChart } from './use-chart'
+import type { VNodeChild } from "@pyreon/core"
+import { effect } from "@pyreon/reactivity"
+import type { EChartsOption } from "echarts"
+import type { ECElementEvent } from "echarts/core"
+import type { ChartProps } from "./types"
+import { useChart } from "./use-chart"
+
+/**
+ * Handler type that bridges our duck-typed ChartEventParams with
+ * echarts' internal ECElementEvent. Used for event binding casts.
+ */
+type ECHandler = (params: ECElementEvent) => boolean | undefined
 
 /**
  * Reactive chart component. Wraps useChart in a div with automatic
@@ -42,11 +49,12 @@ export function Chart<TOption extends EChartsOption = EChartsOption>(
     const inst = chart.instance()
     if (!inst) return
 
-    // Handlers are duck-typed ChartEventParams — cast needed because
-    // echarts/core and echarts export incompatible private class types
-    if (props.onClick) inst.on('click', props.onClick as any)
-    if (props.onMouseover) inst.on('mouseover', props.onMouseover as any)
-    if (props.onMouseout) inst.on('mouseout', props.onMouseout as any)
+    // Handlers are duck-typed ChartEventParams — cast through unknown
+    // to ECHandler because echarts/core and echarts export incompatible
+    // private class types for ECElementEvent.
+    if (props.onClick) inst.on("click", props.onClick as unknown as ECHandler)
+    if (props.onMouseover) inst.on("mouseover", props.onMouseover as unknown as ECHandler)
+    if (props.onMouseout) inst.on("mouseout", props.onMouseout as unknown as ECHandler)
   })
 
   return () => <div ref={chart.ref} style={props.style} class={props.class} />

package/src/index.ts

@@ -22,7 +22,7 @@
  * ```
  */
 
-export { Chart } from './chart-component'
+export { Chart } from "./chart-component"
 // Chart configuration types
 // Re-exported ECharts types for consumer convenience —
 // consumers get full autocomplete without importing echarts directly
@@ -60,5 +60,5 @@ export type {
   UseChartConfig,
   UseChartResult,
   VisualMapComponentOption,
-} from './types'
-export { useChart } from './use-chart'
+} from "./types"
+export { useChart } from "./use-chart"

package/src/loader.ts

@@ -16,86 +16,86 @@ type LooseOption = Record<string, unknown> & {
 
 type ModuleLoader = () => Promise<unknown>
 
+/** The argument type that `echarts/core.use()` accepts. */
+type EChartsUseArg = Parameters<typeof import("echarts/core").use>[0]
+
 // ─── Chart type mapping ─────────────────────────────────────────────────────
 
 const CHARTS: Record<string, ModuleLoader> = {
-  bar: () => import('echarts/charts').then((m) => m.BarChart),
-  line: () => import('echarts/charts').then((m) => m.LineChart),
-  pie: () => import('echarts/charts').then((m) => m.PieChart),
-  scatter: () => import('echarts/charts').then((m) => m.ScatterChart),
-  radar: () => import('echarts/charts').then((m) => m.RadarChart),
-  heatmap: () => import('echarts/charts').then((m) => m.HeatmapChart),
-  treemap: () => import('echarts/charts').then((m) => m.TreemapChart),
-  sunburst: () => import('echarts/charts').then((m) => m.SunburstChart),
-  sankey: () => import('echarts/charts').then((m) => m.SankeyChart),
-  funnel: () => import('echarts/charts').then((m) => m.FunnelChart),
-  gauge: () => import('echarts/charts').then((m) => m.GaugeChart),
-  graph: () => import('echarts/charts').then((m) => m.GraphChart),
-  tree: () => import('echarts/charts').then((m) => m.TreeChart),
-  boxplot: () => import('echarts/charts').then((m) => m.BoxplotChart),
-  candlestick: () => import('echarts/charts').then((m) => m.CandlestickChart),
-  parallel: () => import('echarts/charts').then((m) => m.ParallelChart),
-  themeRiver: () => import('echarts/charts').then((m) => m.ThemeRiverChart),
-  effectScatter: () =>
-    import('echarts/charts').then((m) => m.EffectScatterChart),
-  lines: () => import('echarts/charts').then((m) => m.LinesChart),
-  pictorialBar: () => import('echarts/charts').then((m) => m.PictorialBarChart),
-  custom: () => import('echarts/charts').then((m) => m.CustomChart),
-  map: () => import('echarts/charts').then((m) => m.MapChart),
+  bar: () => import("echarts/charts").then((m) => m.BarChart),
+  line: () => import("echarts/charts").then((m) => m.LineChart),
+  pie: () => import("echarts/charts").then((m) => m.PieChart),
+  scatter: () => import("echarts/charts").then((m) => m.ScatterChart),
+  radar: () => import("echarts/charts").then((m) => m.RadarChart),
+  heatmap: () => import("echarts/charts").then((m) => m.HeatmapChart),
+  treemap: () => import("echarts/charts").then((m) => m.TreemapChart),
+  sunburst: () => import("echarts/charts").then((m) => m.SunburstChart),
+  sankey: () => import("echarts/charts").then((m) => m.SankeyChart),
+  funnel: () => import("echarts/charts").then((m) => m.FunnelChart),
+  gauge: () => import("echarts/charts").then((m) => m.GaugeChart),
+  graph: () => import("echarts/charts").then((m) => m.GraphChart),
+  tree: () => import("echarts/charts").then((m) => m.TreeChart),
+  boxplot: () => import("echarts/charts").then((m) => m.BoxplotChart),
+  candlestick: () => import("echarts/charts").then((m) => m.CandlestickChart),
+  parallel: () => import("echarts/charts").then((m) => m.ParallelChart),
+  themeRiver: () => import("echarts/charts").then((m) => m.ThemeRiverChart),
+  effectScatter: () => import("echarts/charts").then((m) => m.EffectScatterChart),
+  lines: () => import("echarts/charts").then((m) => m.LinesChart),
+  pictorialBar: () => import("echarts/charts").then((m) => m.PictorialBarChart),
+  custom: () => import("echarts/charts").then((m) => m.CustomChart),
+  map: () => import("echarts/charts").then((m) => m.MapChart),
 }
 
 // ─── Component mapping ──────────────────────────────────────────────────────
 
 // Multiple config keys can map to the same component (xAxis/yAxis → Grid)
 const COMPONENTS: Record<string, ModuleLoader> = {
-  grid: () => import('echarts/components').then((m) => m.GridComponent),
-  xAxis: () => import('echarts/components').then((m) => m.GridComponent),
-  yAxis: () => import('echarts/components').then((m) => m.GridComponent),
-  polar: () => import('echarts/components').then((m) => m.PolarComponent),
-  radar: () => import('echarts/components').then((m) => m.RadarComponent),
-  geo: () => import('echarts/components').then((m) => m.GeoComponent),
-  tooltip: () => import('echarts/components').then((m) => m.TooltipComponent),
-  legend: () => import('echarts/components').then((m) => m.LegendComponent),
-  toolbox: () => import('echarts/components').then((m) => m.ToolboxComponent),
-  title: () => import('echarts/components').then((m) => m.TitleComponent),
-  dataZoom: () => import('echarts/components').then((m) => m.DataZoomComponent),
-  visualMap: () =>
-    import('echarts/components').then((m) => m.VisualMapComponent),
-  timeline: () => import('echarts/components').then((m) => m.TimelineComponent),
-  graphic: () => import('echarts/components').then((m) => m.GraphicComponent),
-  brush: () => import('echarts/components').then((m) => m.BrushComponent),
-  calendar: () => import('echarts/components').then((m) => m.CalendarComponent),
-  dataset: () => import('echarts/components').then((m) => m.DatasetComponent),
-  aria: () => import('echarts/components').then((m) => m.AriaComponent),
+  grid: () => import("echarts/components").then((m) => m.GridComponent),
+  xAxis: () => import("echarts/components").then((m) => m.GridComponent),
+  yAxis: () => import("echarts/components").then((m) => m.GridComponent),
+  polar: () => import("echarts/components").then((m) => m.PolarComponent),
+  radar: () => import("echarts/components").then((m) => m.RadarComponent),
+  geo: () => import("echarts/components").then((m) => m.GeoComponent),
+  tooltip: () => import("echarts/components").then((m) => m.TooltipComponent),
+  legend: () => import("echarts/components").then((m) => m.LegendComponent),
+  toolbox: () => import("echarts/components").then((m) => m.ToolboxComponent),
+  title: () => import("echarts/components").then((m) => m.TitleComponent),
+  dataZoom: () => import("echarts/components").then((m) => m.DataZoomComponent),
+  visualMap: () => import("echarts/components").then((m) => m.VisualMapComponent),
+  timeline: () => import("echarts/components").then((m) => m.TimelineComponent),
+  graphic: () => import("echarts/components").then((m) => m.GraphicComponent),
+  brush: () => import("echarts/components").then((m) => m.BrushComponent),
+  calendar: () => import("echarts/components").then((m) => m.CalendarComponent),
+  dataset: () => import("echarts/components").then((m) => m.DatasetComponent),
+  aria: () => import("echarts/components").then((m) => m.AriaComponent),
 }
 
 // Series-level features
 const SERIES_FEATURES: Record<string, ModuleLoader> = {
-  markPoint: () =>
-    import('echarts/components').then((m) => m.MarkPointComponent),
-  markLine: () => import('echarts/components').then((m) => m.MarkLineComponent),
-  markArea: () => import('echarts/components').then((m) => m.MarkAreaComponent),
+  markPoint: () => import("echarts/components").then((m) => m.MarkPointComponent),
+  markLine: () => import("echarts/components").then((m) => m.MarkLineComponent),
+  markArea: () => import("echarts/components").then((m) => m.MarkAreaComponent),
 }
 
 // ─── Renderers ──────────────────────────────────────────────────────────────
 
 const RENDERERS: Record<string, ModuleLoader> = {
-  canvas: () => import('echarts/renderers').then((m) => m.CanvasRenderer),
-  svg: () => import('echarts/renderers').then((m) => m.SVGRenderer),
+  canvas: () => import("echarts/renderers").then((m) => m.CanvasRenderer),
+  svg: () => import("echarts/renderers").then((m) => m.SVGRenderer),
 }
 
 // ─── Core loading ───────────────────────────────────────────────────────────
 
-let coreModule: typeof import('echarts/core') | null = null
-let corePromise: Promise<typeof import('echarts/core')> | null = null
+let coreModule: typeof import("echarts/core") | null = null
+let corePromise: Promise<typeof import("echarts/core")> | null = null
 
 /**
  * Lazily load echarts/core. Cached after first call.
  */
-export async function getCore(): Promise<typeof import('echarts/core')> {
+export async function getCore(): Promise<typeof import("echarts/core")> {
   if (coreModule) return coreModule
   if (!corePromise) {
-    corePromise = import('echarts/core').then((m) => {
+    corePromise = import("echarts/core").then((m) => {
       coreModule = m
       return m
     })
@@ -106,7 +106,7 @@ export async function getCore(): Promise<typeof import('echarts/core')> {
 /**
  * Get the cached core module (null if not yet loaded).
  */
-export function getCoreSync(): typeof import('echarts/core') | null {
+export function getCoreSync(): typeof import("echarts/core") | null {
   return coreModule
 }
 
@@ -116,7 +116,7 @@ const registered = new Set<string>()
 const inflight = new Map<string, Promise<void>>()
 
 async function loadAndRegister(
-  core: typeof import('echarts/core'),
+  core: typeof import("echarts/core"),
   key: string,
   loader: ModuleLoader,
 ): Promise<void> {
@@ -124,7 +124,7 @@ async function loadAndRegister(
   if (inflight.has(key)) return inflight.get(key)
 
   const promise = loader().then((mod) => {
-    core.use(mod as any)
+    core.use(mod as EChartsUseArg)
     registered.add(key)
     inflight.delete(key)
   })
@@ -139,47 +139,44 @@ async function loadAndRegister(
  */
 export async function ensureModules(
   option: LooseOption,
-  renderer: 'canvas' | 'svg' = 'canvas',
-): Promise<typeof import('echarts/core')> {
+  renderer: "canvas" | "svg" = "canvas",
+): Promise<typeof import("echarts/core")> {
   const core = await getCore()
   const loads: Promise<void>[] = []
 
   // Renderer (always needed)
-  loads.push(
-    loadAndRegister(core, `renderer:${renderer}`, RENDERERS[renderer]!),
-  )
+  const rendererLoader = RENDERERS[renderer]
+  if (rendererLoader) loads.push(loadAndRegister(core, `renderer:${renderer}`, rendererLoader))
 
   // Normalize series to array for analysis
   const rawSeries = option.series
   const seriesList: Record<string, unknown>[] = rawSeries
-    ? ((Array.isArray(rawSeries) ? rawSeries : [rawSeries]) as Record<
-        string,
-        unknown
-      >[])
+    ? ((Array.isArray(rawSeries) ? rawSeries : [rawSeries]) as Record<string, unknown>[])
     : []
 
   // Chart types from series[].type
   for (const s of seriesList) {
     const type = s.type as string | undefined
-    if (type && CHARTS[type]) {
-      loads.push(loadAndRegister(core, `chart:${type}`, CHARTS[type]!))
+    const chartLoader = type ? CHARTS[type] : undefined
+    if (chartLoader) {
+      loads.push(loadAndRegister(core, `chart:${type}`, chartLoader))
     }
   }
 
   // Components from top-level config keys
   for (const key of Object.keys(option)) {
-    if (COMPONENTS[key]) {
-      loads.push(loadAndRegister(core, `component:${key}`, COMPONENTS[key]!))
+    const compLoader = COMPONENTS[key]
+    if (compLoader) {
+      loads.push(loadAndRegister(core, `component:${key}`, compLoader))
     }
   }
 
   // Series-level features (markPoint, markLine, markArea)
   for (const s of seriesList) {
     for (const key of Object.keys(s)) {
-      if (SERIES_FEATURES[key]) {
-        loads.push(
-          loadAndRegister(core, `feature:${key}`, SERIES_FEATURES[key]!),
-        )
+      const featureLoader = SERIES_FEATURES[key]
+      if (featureLoader) {
+        loads.push(loadAndRegister(core, `feature:${key}`, featureLoader))
       }
     }
   }
@@ -205,7 +202,7 @@ export async function ensureModules(
 export function manualUse(...modules: unknown[]): void {
   const core = getCoreSync()
   if (core) {
-    core.use(modules as any)
+    core.use(modules as EChartsUseArg)
   } else {
     // Core not loaded yet — queue for when it loads
     getCore().then((c) => c.use(modules as any))

package/src/manual.ts

@@ -25,12 +25,12 @@
  * ```
  */
 
-export { Chart } from './chart-component'
-export { manualUse as use } from './loader'
+export { Chart } from "./chart-component"
+export { manualUse as use } from "./loader"
 export type {
   ChartProps,
   EChartsOption,
   UseChartConfig,
   UseChartResult,
-} from './types'
-export { useChart } from './use-chart'
+} from "./types"
+export { useChart } from "./use-chart"