@slidev-react/client 0.2.5

package/CHANGELOG.md

@@ -0,0 +1,42 @@
+# @slidev-react/client
+
+## 0.2.0
+
+### Minor Changes
+
+- ## v0.2.0
+
+  ### Features
+
+  - Add React Compiler support for automatic render optimization
+  - Add code splitting for better bundle optimization
+
+  ### Bug Fixes
+
+  - Fix Mermaid diagram type errors
+
+### Patch Changes
+
+- Updated dependencies
+  - @slidev-react/core@0.2.0
+
+## 0.1.0
+
+### Minor Changes
+
+- ## v0.1.0
+
+  ### Features
+
+  - Add React Compiler support for automatic render optimization
+  - Add code splitting for better bundle optimization
+
+  ### Bug Fixes
+
+  - Fix Mermaid diagram type errors
+
+### Patch Changes
+
+- Updated dependencies [ca342f8]
+- Updated dependencies
+  - @slidev-react/core@0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 slidev-react contributors
+
+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.

package/README.md

@@ -0,0 +1,16 @@
+# `@slidev-react/client`
+
+`@slidev-react/client` 承接浏览器端能力：
+
+- React app 入口
+- providers
+- presentation UI / stage
+- theme 和 MDX runtime 组合
+
+当前这部分源码已经主要收进：
+
+- `packages/client/src/app`
+- `packages/client/src/features/presentation`
+- `packages/client/src/theme`
+- `packages/client/src/ui`
+- `packages/client/src/addons`

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@slidev-react/client",
+  "version": "0.2.5",
+  "description": "Browser-side React app and presentation UI for slidev-react",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "katex": "0.16.33",
+    "lucide-react": "0.568.0",
+    "plantuml-encoder": "1.4.0",
+    "shiki": "4.0.1",
+    "shiki-magic-move": "1.2.1",
+    "zod": "4.3.6",
+    "@slidev-react/core": "0.2.5"
+  },
+  "peerDependencies": {
+    "@antv/g-svg": ">=2.0.0",
+    "@antv/g2": ">=5.0.0",
+    "@mdx-js/react": ">=3.0.0",
+    "mermaid": ">=11.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@antv/g-svg": {
+      "optional": true
+    },
+    "@antv/g2": {
+      "optional": true
+    },
+    "mermaid": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/addons/AddonProvider.tsx

@@ -0,0 +1,25 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import { resolveSlideAddons } from "./registry";
+import type { ResolvedSlideAddons } from "./types";
+
+const AddonContext = createContext<ResolvedSlideAddons | null>(null);
+
+export function AddonProvider({
+  addonIds,
+  children,
+}: {
+  addonIds?: string[];
+  children: ReactNode;
+}) {
+  const addonKey = useMemo(() => (addonIds ?? []).join("\0"), [addonIds]);
+  const addons = useMemo(() => resolveSlideAddons(addonIds), [addonIds, addonKey]);
+
+  return <AddonContext.Provider value={addons}>{children}</AddonContext.Provider>;
+}
+
+export function useSlideAddons() {
+  const context = useContext(AddonContext);
+  if (!context) throw new Error("useSlideAddons must be used inside AddonProvider");
+
+  return context;
+}

package/src/addons/g2/G2Chart.tsx

@@ -0,0 +1,370 @@
+import { Chart as G2Chart, type G2Spec, register } from '@antv/g2'
+import { Renderer as SvgRenderer } from '@antv/g-svg'
+import { useEffect, useRef, useState } from 'react'
+
+// Register composite marks from plotlib (gauge, liquid, wordCloud, boxplot)
+import { plotlib } from '@antv/g2/esm/lib/plot'
+for (const [key, value] of Object.entries(plotlib())) {
+  register(key as Parameters<typeof register>[0], value as Parameters<typeof register>[1])
+}
+
+import { buildSlidevTheme, sizePresets, type ChartSize } from './chartThemeTokens'
+import { chartPresets, type PresetName } from './chartPresets'
+
+// ---------------------------------------------------------------------------
+// Base Chart — L1 (G2Spec passthrough with theme/preset support)
+// ---------------------------------------------------------------------------
+
+type ChartProps = G2Spec & {
+  width?: number
+  height?: number
+  /** Named size preset */
+  size?: ChartSize
+  /** Named chart preset */
+  preset?: PresetName
+}
+
+export function Chart({
+  width,
+  height,
+  size,
+  preset,
+  ...spec
+}: ChartProps) {
+  const resolved = resolveSize(width, height, size)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const chartRef = useRef<G2Chart | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+
+    let cancelled = false
+
+    const render = async () => {
+      try {
+        setError(null)
+
+        if (chartRef.current) {
+          try { chartRef.current.destroy() } catch { /* noop */ }
+          chartRef.current = null
+        }
+
+        const chart = new G2Chart({
+          container: el,
+          renderer: new SvgRenderer(),
+          width: resolved.width,
+          height: resolved.height,
+        })
+
+        // Merge: preset defaults → user spec → theme
+        const presetSpec = preset ? (chartPresets[preset] ?? {}) : {}
+        const userTheme = typeof spec.theme === 'object' ? spec.theme : {}
+        const slidevTheme = buildSlidevTheme()
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- G2Spec is a huge union; casting is the pragmatic escape
+        chart.options({
+          ...presetSpec,
+          ...spec,
+          width: resolved.width,
+          height: resolved.height,
+          theme: { type: 'classic', ...slidevTheme, ...userTheme },
+        } as any)
+
+        if (cancelled) { chart.destroy(); return }
+
+        chartRef.current = chart
+        await chart.render()
+
+        if (cancelled) {
+          chart.destroy()
+          chartRef.current = null
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err))
+        }
+      }
+    }
+
+    void render()
+
+    return () => {
+      cancelled = true
+      if (chartRef.current) {
+        try { chartRef.current.destroy() } catch { /* noop */ }
+        chartRef.current = null
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resolved.width, resolved.height, preset, JSON.stringify(spec)])
+
+  if (error) {
+    return (
+      <div className="my-3 rounded-xl border border-rose-300 bg-rose-50 p-3 text-sm text-rose-900">
+        Chart render error: {error}
+      </div>
+    )
+  }
+
+  return (
+    <div ref={containerRef} style={{ width: resolved.width, height: resolved.height }} />
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function resolveSize(
+  width: number | undefined,
+  height: number | undefined,
+  size: ChartSize | undefined,
+) {
+  if (width !== undefined || height !== undefined) {
+    return {
+      width: width ?? sizePresets.full.width,
+      height: height ?? sizePresets.full.height,
+    }
+  }
+  const preset = size ? sizePresets[size] : sizePresets.full
+  return { width: preset.width, height: preset.height }
+}
+
+// ---------------------------------------------------------------------------
+// Semantic chart components — L3
+// ---------------------------------------------------------------------------
+
+type SemanticBase = {
+  data: Record<string, unknown>[]
+  width?: number
+  height?: number
+  size?: ChartSize
+}
+
+/* ─── BarChart ─── */
+
+type BarChartProps = SemanticBase & {
+  x: string
+  y: string
+  color?: string
+  group?: string
+  stack?: boolean
+}
+
+export function BarChart({ data, x, y, color, group, stack, ...rest }: BarChartProps) {
+  const encode: Record<string, unknown> = { x, y }
+  if (color) encode.color = color
+  if (group) encode.color = group
+  const transform = stack ? [{ type: 'stackY' as const }] : undefined
+  return <Chart type="interval" data={data} encode={encode} transform={transform} {...rest} />
+}
+
+/* ─── LineChart ─── */
+
+type LineChartProps = SemanticBase & {
+  x: string
+  y: string
+  color?: string
+  curve?: boolean
+}
+
+export function LineChart({ data, x, y, color, ...rest }: LineChartProps) {
+  const encode: Record<string, unknown> = { x, y }
+  if (color) encode.color = color
+  return <Chart type="line" data={data} encode={encode} {...rest} />
+}
+
+/* ─── AreaChart ─── */
+
+type AreaChartProps = SemanticBase & {
+  x: string
+  y: string
+  color?: string
+  stack?: boolean
+}
+
+export function AreaChart({ data, x, y, color, stack, ...rest }: AreaChartProps) {
+  const encode: Record<string, unknown> = { x, y }
+  if (color) encode.color = color
+  const transform = stack ? [{ type: 'stackY' as const }] : undefined
+  return <Chart type="area" data={data} encode={encode} transform={transform} {...rest} />
+}
+
+/* ─── ScatterChart ─── */
+
+type ScatterChartProps = SemanticBase & {
+  x: string
+  y: string
+  color?: string
+  sizeField?: string
+  shape?: string
+}
+
+export function ScatterChart({ data, x, y, color, sizeField, shape, ...rest }: ScatterChartProps) {
+  const encode: Record<string, unknown> = { x, y }
+  if (color) encode.color = color
+  if (sizeField) encode.size = sizeField
+  if (shape) encode.shape = shape
+  return <Chart type="point" data={data} encode={encode} {...rest} />
+}
+
+/* ─── PieChart ─── */
+
+type PieChartProps = SemanticBase & {
+  value: string
+  label: string
+  color?: string
+  donut?: boolean
+}
+
+export function PieChart({ data, value, label, color, donut, ...rest }: PieChartProps) {
+  const encode: Record<string, unknown> = { y: value, color: color ?? label }
+  const innerRadius = donut ? 0.6 : undefined
+  return (
+    <Chart
+      type="interval"
+      data={data}
+      encode={encode}
+      coordinate={{ type: 'theta' }}
+      style={{ stroke: '#fff', lineWidth: 1, ...(innerRadius !== undefined ? { innerRadius } : {}) }}
+      {...rest}
+    />
+  )
+}
+
+/* ─── RadarChart ─── */
+
+type RadarChartProps = SemanticBase & {
+  x: string
+  y: string
+  color?: string
+  area?: boolean
+}
+
+export function RadarChart({ data, x, y, color, area, ...rest }: RadarChartProps) {
+  const encode: Record<string, unknown> = { x, y }
+  if (color) encode.color = color
+  if (area) {
+    return (
+      <Chart
+        type="area"
+        data={data}
+        encode={encode}
+        coordinate={{ type: 'polar' }}
+        style={{ fillOpacity: 0.5 }}
+        axis={{ x: { grid: true }, y: { zIndex: 1, title: false } }}
+        {...rest}
+      />
+    )
+  }
+  return (
+    <Chart
+      type="line"
+      data={data}
+      encode={encode}
+      coordinate={{ type: 'polar' }}
+      axis={{ x: { grid: true }, y: { zIndex: 1, title: false } }}
+      {...rest}
+    />
+  )
+}
+
+/* ─── HeatmapChart ─── */
+
+type HeatmapChartProps = SemanticBase & {
+  x: string
+  y: string
+  color: string
+}
+
+export function HeatmapChart({ data, x, y, color, ...rest }: HeatmapChartProps) {
+  return (
+    <Chart
+      type="cell"
+      data={data}
+      encode={{ x, y, color }}
+      style={{ inset: 0.5 }}
+      {...rest}
+    />
+  )
+}
+
+/* ─── FunnelChart ─── */
+
+type FunnelChartProps = SemanticBase & {
+  x: string
+  y: string
+  color?: string
+}
+
+export function FunnelChart({ data, x, y, color, ...rest }: FunnelChartProps) {
+  const encode: Record<string, unknown> = { x, y, color: color ?? x, shape: 'funnel' }
+  return <Chart type="interval" data={data} encode={encode} coordinate={{ transform: [{ type: 'transpose' }] }} {...rest} />
+}
+
+/* ─── WordCloud ─── */
+
+type WordCloudProps = SemanticBase & {
+  text: string
+  value: string
+  color?: string
+}
+
+export function WordCloudChart({ data, text, value, color, ...rest }: WordCloudProps) {
+  const encode: Record<string, unknown> = { text, value }
+  if (color) encode.color = color
+  return <Chart type="wordCloud" data={data} encode={encode} legend={false} {...rest} />
+}
+
+/* ─── GaugeChart ─── */
+
+type GaugeChartProps = {
+  value: number
+  min?: number
+  max?: number
+  width?: number
+  height?: number
+  size?: ChartSize
+}
+
+export function GaugeChart({ value, min = 0, max = 100, ...rest }: GaugeChartProps) {
+  const data = { value: { target: value, total: max - min, name: '' } }
+  return <Chart type="gauge" data={data} {...rest} />
+}
+
+/* ─── TreemapChart ─── */
+
+type TreemapChartProps = {
+  data: Record<string, unknown>
+  value: string
+  width?: number
+  height?: number
+  size?: ChartSize
+}
+
+export function TreemapChart({ data, value, ...rest }: TreemapChartProps) {
+  return (
+    <Chart
+      type="treemap"
+      data={{ value: data }}
+      encode={{ value }}
+      {...rest}
+    />
+  )
+}
+
+/* ─── WaterfallChart ─── */
+
+type WaterfallChartProps = SemanticBase & {
+  x: string
+  y: string
+  color?: string
+}
+
+export function WaterfallChart({ data, x, y, color, ...rest }: WaterfallChartProps) {
+  const encode: Record<string, unknown> = { x, y }
+  if (color) encode.color = color
+  return <Chart type="interval" data={data} encode={encode} transform={[{ type: 'diffY' as const }]} {...rest} />
+}

package/src/addons/g2/chartPresets.ts

@@ -0,0 +1,43 @@
+import type { G2Spec } from '@antv/g2'
+
+/**
+ * Named presets that expand into partial G2Spec configurations.
+ * Use via `<Chart preset="pie" />` or in semantic components.
+ */
+export type PresetName = keyof typeof chartPresets
+
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+export const chartPresets = {
+  // --- Basic marks ---
+  bar:        { type: 'interval' } as Partial<G2Spec>,
+  column:     { type: 'interval', coordinate: { transform: [{ type: 'transpose' }] } } as Partial<G2Spec>,
+  line:       { type: 'line' } as Partial<G2Spec>,
+  area:       { type: 'area' } as Partial<G2Spec>,
+  scatter:    { type: 'point' } as Partial<G2Spec>,
+
+  // --- Polar / radial ---
+  pie:        { type: 'interval', coordinate: { type: 'theta' }, style: { stroke: '#fff', lineWidth: 1 } } as Partial<G2Spec>,
+  donut:      { type: 'interval', coordinate: { type: 'theta' }, style: { stroke: '#fff', lineWidth: 1, innerRadius: 0.6 } } as Partial<G2Spec>,
+  rose:       { type: 'interval', coordinate: { type: 'polar' } } as Partial<G2Spec>,
+  radar:      { type: 'line', coordinate: { type: 'polar' } } as Partial<G2Spec>,
+  radial:     { type: 'interval', coordinate: { type: 'radial' } } as Partial<G2Spec>,
+
+  // --- Statistical ---
+  histogram:  { type: 'rect', transform: [{ type: 'binX', y: 'count' }] } as Partial<G2Spec>,
+  heatmap:    { type: 'cell' } as Partial<G2Spec>,
+
+  // --- Hierarchy / relational ---
+  treemap:    { type: 'treemap' } as Partial<G2Spec>,
+  sunburst:   { type: 'sunburst' } as Partial<G2Spec>,
+  sankey:     { type: 'sankey' } as Partial<G2Spec>,
+  wordcloud:  { type: 'wordCloud' } as Partial<G2Spec>,
+
+  // --- Indicator (registered via plotlib) ---
+  gauge:      { type: 'gauge' } as Partial<G2Spec>,
+  liquid:     { type: 'liquid' } as Partial<G2Spec>,
+
+  // --- Composite ---
+  funnel:     { type: 'interval', coordinate: { transform: [{ type: 'transpose' }] } } as Partial<G2Spec>,
+  waterfall:  { type: 'interval', transform: [{ type: 'diffY' }] } as Partial<G2Spec>,
+} as const
+/* eslint-enable @typescript-eslint/consistent-type-assertions */

package/src/addons/g2/chartThemeTokens.ts

@@ -0,0 +1,124 @@
+import type { G2Theme } from '@antv/g2/esm/runtime/types/theme'
+
+// ---------------------------------------------------------------------------
+// Color palettes
+// ---------------------------------------------------------------------------
+
+/** 10-color categorical palette for series / groups */
+export const categoryPalette = [
+  '#60a5fa', // blue
+  '#34d399', // emerald
+  '#a78bfa', // violet
+  '#f472b6', // pink
+  '#fbbf24', // amber
+  '#f87171', // red
+  '#22d3ee', // cyan
+  '#fb923c', // orange
+  '#818cf8', // indigo
+  '#2dd4bf', // teal
+]
+
+/** Sequential palette for heatmaps / density (light → dark green) */
+export const sequentialPalette = [
+  '#dcfce7', '#86efac', '#4ade80', '#22c55e', '#15803d', '#052e16',
+]
+
+/** Diverging palette for positive/negative deviation */
+export const divergingPalette = [
+  '#ef4444', '#fca5a5', '#fefce8', '#86efac', '#22c55e',
+]
+
+/** Semantic colors for business meaning */
+export const semanticColors = {
+  positive: '#22c55e',
+  negative: '#ef4444',
+  warning:  '#f59e0b',
+  neutral:  '#94a3b8',
+}
+
+// ---------------------------------------------------------------------------
+// Resolve CSS variables at runtime
+// ---------------------------------------------------------------------------
+
+function resolveVar(name: string, fallback: string): string {
+  if (typeof document === 'undefined') return fallback
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+  return value || fallback
+}
+
+export function resolveChartFont(): string {
+  return resolveVar(
+    '--font-sans',
+    'Inter, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Build G2 theme
+// ---------------------------------------------------------------------------
+
+export function buildSlidevTheme(): G2Theme {
+  const font = resolveChartFont()
+  const textColor = resolveVar('--slide-color-body', '#0f172a')
+  const mutedColor = resolveVar('--slide-color-muted', '#475569')
+  const accent = '#22c55e'
+
+  return {
+    color: accent,
+    category10: categoryPalette,
+    category20: categoryPalette,
+    axis: {
+      labelFontSize: 17,
+      labelFill: mutedColor,
+      labelFontFamily: font,
+      titleFontSize: 19,
+      titleFill: textColor,
+      titleFontFamily: font,
+      titleFontWeight: 'bold',
+      gridStroke: '#e2e8f0',
+      gridStrokeOpacity: 1,
+      lineStroke: '#94a3b8',
+      lineLineWidth: 1,
+      tickStroke: '#94a3b8',
+    },
+    legendCategory: {
+      itemLabelFontSize: 18,
+      itemLabelFill: mutedColor,
+      itemLabelFontFamily: font,
+      titleFontSize: 19,
+      titleFill: textColor,
+      titleFontFamily: font,
+      titleFontWeight: 'bold',
+    },
+    title: {
+      titleFontSize: 22,
+      titleFill: textColor,
+      titleFontFamily: font,
+      titleFontWeight: 'bold',
+      subtitleFontSize: 17,
+      subtitleFill: mutedColor,
+      subtitleFontFamily: font,
+    },
+    label: {
+      fontSize: 18,
+      fontFamily: font,
+      fill: mutedColor,
+    },
+  }
+}
+
+
+// ---------------------------------------------------------------------------
+// Default sizes
+// ---------------------------------------------------------------------------
+
+export type ChartSize = 'full' | 'wide' | 'half' | 'compact' | 'mini'
+
+export const sizePresets: Record<ChartSize, { width: number; height: number }> = {
+  full:    { width: 1280, height: 600 },
+  wide:    { width: 1280, height: 500 },
+  half:    { width: 600,  height: 400 },
+  compact: { width: 400,  height: 300 },
+  mini:    { width: 200,  height: 80 },
+}
+