@mogura/moguchart-core 1.0.0 → 1.1.1

package/CHANGELOG.ja.md

@@ -7,6 +7,59 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 > 英語版は [CHANGELOG.md](./CHANGELOG.md) をご覧ください。
 
+## [1.1.1] - 2026-09-19
+
+### Fixed
+
+- **パッケージドキュメント同梱の修正**:
+  - `@mogura/moguchart-core` パッケージ配布物（npmパッケージ）に `README.md`、`README.ja.md`、`LICENSE`、`CHANGELOG.md`、`CHANGELOG.ja.md` を直接同梱し、npm および GitHub 上でドキュメントが正しく表示されるよう修正
+  - 各ラッパー・プラグインパッケージ（`@mogura/moguchart-plugin-export`, `@mogura/moguchart-react`, `@mogura/moguchart-vue`）に `LICENSE` ファイルを同梱
+  - `packages/core/package.json` に `repository.directory` 設定を追加し、npm から GitHub へのリンク解決を適正化
+  - ルートのビルドパイプラインにドキュメント自動同期（`sync:docs`）スクリプトを導入
+
+## [1.1.0] - 2026-09-19
+
+本バージョンでは、ライブラリの拡張性を飛躍的に高める **プラグインアーキテクチャ** を導入し、PNG / PDF エクスポート機能を独立パッケージ `@mogura/moguchart-plugin-export` としてプラグイン化・切り出しました。
+これにより、コアライブラリ（`@mogura/moguchart-core`）から重量級ライブラリ（`html2canvas-pro`, `jspdf`、計約600KB）が完全に排除され、**コア本体の超軽量化（gzip約44KB）** を達成しました。
+
+### Added
+
+- **統一プラグインアーキテクチャ（`GanttPlugin` API）の導入**:
+  - `GanttPlugin` 型定義および `PluginManager` を追加
+  - `GanttChartElement.use(plugin, config?)`: プラグインを動的に登録・初期化するメソッドを追加
+  - `GanttChartOption.plugins`: オプション経由で宣言的にプラグイン配列を渡して自動登録する機能を追加
+  - プラグインのライフサイクルフック（`install`, `destroy`, `beforeTaskUpdate`, `afterTaskUpdate`, `afterRender`）をサポート
+  - 未登録状態でプラグイン依存メソッド（`chart.exportImage` 等）が呼ばれた際、導入案内と登録方法を親切に伝えるエラーハンドリングを実装
+- **独立プラグインパッケージ `@mogura/moguchart-plugin-export` を新設**:
+  - PNG 画像および PDF への高解像度エクスポート（ヘッダー分割・スクロール位置保持対応）を独立パッケージへ移行
+  - `exportPlugin(config?)`: ガントチャートインスタンスに登録して `chart.exportImage()` を有効化するプラグインファクトリ
+  - `exportChart(chart, format, options)`: エクスポートボタン押下時など必要なタイミングでのみ遅延ロード（Dynamic Import）して直接呼び出せるスタンドアロン関数を提供
+- **公式 React ラッパーパッケージ `@mogura/moguchart-react` を新設**:
+  - Lit 公式の `@lit/react` (`createComponent`) を基盤に採用し、`<gantt-chart>` を型安全な React コンポーネント `<GanttChart />` として提供
+  - 全25種類のカスタムイベントをキャメルケースの props（`onTaskUpdate`, `onTaskClick`, `onRowReordered` 等）として型安全にサポート
+  - `ref` を通じた基底 `GanttChartElement` へのアクセスおよび命令的メソッド（`exportImage` 等）の呼び出しに対応
+  - コアの型定義・関数・定数をすべて re-export
+- **公式 Vue 3 ラッパーパッケージ `@mogura/moguchart-vue` を新設**:
+  - Vue 3 の `defineComponent` を使用した公式 `<GanttChart />` コンポーネントを提供
+  - Composition API（`<script setup>`）および Options API の双方に対応
+  - リアクティブな props（`rows`, `option`, `theme` 等）の自動同期
+  - 全25種類のカスタムイベントの Vue emits（`@task-update`, `@task-click` 等）バインディング
+  - Template Ref から呼び出せる命令的メソッドの公開（`expose`）
+  - Vue プラグイン（`app.use(MoguchartVue)`）としてのグローバル登録に対応
+  - コアの型定義・関数・定数をすべて re-export
+- **pnpm workspaces によるモノレポ構成への移行**:
+  - `packages/core`: `@mogura/moguchart-core`（超軽量コア Web Component）
+  - `packages/plugin-export`: `@mogura/moguchart-plugin-export`（PNG/PDF エクスポートプラグイン）
+  - `packages/react`: `@mogura/moguchart-react`（React 公式ラッパー）
+  - `packages/vue`: `@mogura/moguchart-vue`（Vue 3 公式ラッパー）
+
+### Changed
+
+- **`@mogura/moguchart-core` の dependencies から `html2canvas-pro` および `jspdf` を削除**:
+  - エクスポート機能を使わないユーザーにも同梱されていた約600KB超の重量級コードがコアから完全に分離され、初期読み込み・バンドルサイズが大幅に改善されました。
+- **デモ画面のエクスポート機能連携**:
+  - デモ画面（`main.ts`）で `@mogura/moguchart-plugin-export` を登録し、PNG / PDF エクスポートボタンが継続してシームレスに動作するよう対応
+
 ## [1.0.0] - 2026-09-13
 
 祝・正式リリース！🎉

package/CHANGELOG.md

@@ -7,6 +7,58 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 > Read this in [日本語 (Japanese)](./CHANGELOG.ja.md).
 
+## [1.1.1] - 2026-09-19
+
+### Fixed
+
+- **Package Documentation Bundle**:
+  - Bundled `README.md`, `README.ja.md`, `LICENSE`, `CHANGELOG.md`, and `CHANGELOG.ja.md` directly into the `@mogura/moguchart-core` package distribution so that documentation is correctly rendered on npm and GitHub.
+  - Added `LICENSE` files to all wrapper and plugin packages (`@mogura/moguchart-plugin-export`, `@mogura/moguchart-react`, `@mogura/moguchart-vue`).
+  - Added repository `directory` configuration to `packages/core/package.json` for proper npm GitHub link resolution.
+  - Added automated `sync:docs` script into the root build pipeline to keep all package documentation synchronized.
+
+## [1.1.0] - 2026-09-19
+
+This release introduces a modular **Plugin Architecture** that significantly elevates the extensibility of Moguchart, extracting the PNG and PDF export features into a dedicated package: `@mogura/moguchart-plugin-export`.
+As a result, heavy third-party dependencies (`html2canvas-pro` and `jspdf`, ~600KB unminified) have been completely removed from the core library (`@mogura/moguchart-core`), making the core bundle ultra-lightweight (**~44KB gzipped**).
+
+### Added
+
+- **Unified Plugin Architecture (`GanttPlugin` API)**:
+  - Added `GanttPlugin` interface and `PluginManager`
+  - `GanttChartElement.use(plugin, config?)`: Public method to dynamically register and initialize plugins
+  - `GanttChartOption.plugins`: Option property allowing declarative registration of an array of plugins
+  - Plugin lifecycle hooks (`install`, `destroy`, `beforeTaskUpdate`, `afterTaskUpdate`, `afterRender`)
+  - Clear, user-friendly error guidance when calling plugin-dependent methods (such as `chart.exportImage`) without the plugin installed
+- **Dedicated Plugin Package `@mogura/moguchart-plugin-export`**:
+  - High-fidelity PNG and multi-page PDF export utility migrated into an independent workspace package
+  - `exportPlugin(config?)`: Plugin factory to register with the Gantt chart instance and enable `chart.exportImage()`
+  - `exportChart(chart, format, options)`: Standalone export function enabling on-demand, dynamic imports for code-splitting
+- **Official React Wrapper Package `@mogura/moguchart-react`**:
+  - Built on `@lit/react` (`createComponent`) to provide `<GanttChart />` as a fully type-safe React component
+  - All 25 custom events mapped to camelCase props (`onTaskUpdate`, `onTaskClick`, `onRowReordered`, etc.)
+  - Seamless `ref` support to access the underlying `GanttChartElement` instance and imperative methods (`exportImage`, etc.)
+  - Full re-export of all `@mogura/moguchart-core` types and utilities
+- **Official Vue 3 Wrapper Package `@mogura/moguchart-vue`**:
+  - Built with Vue 3 `defineComponent` supporting both Composition API (`<script setup>`) and Options API
+  - Automatic reactive synchronization of props (`rows`, `option`, `theme`, etc.)
+  - All 25 custom events forwarded to standard Vue emits (`@task-update`, `@task-click`, etc.)
+  - Public imperative methods exposed via Template Ref
+  - Global registration support via Vue Plugin (`app.use(MoguchartVue)`)
+  - Full re-export of all `@mogura/moguchart-core` types and utilities
+- **pnpm Workspaces Monorepo Setup**:
+  - `packages/core`: `@mogura/moguchart-core` (ultra-lightweight core Web Component)
+  - `packages/plugin-export`: `@mogura/moguchart-plugin-export` (PNG/PDF export plugin)
+  - `packages/react`: `@mogura/moguchart-react` (official React wrapper)
+  - `packages/vue`: `@mogura/moguchart-vue` (official Vue 3 wrapper)
+
+### Changed
+
+- **Removed `html2canvas-pro` and `jspdf` from `@mogura/moguchart-core` dependencies**:
+  - Over 600KB of export dependencies are no longer imposed on users who only need the Gantt chart display and scheduling capabilities.
+- **Updated Demo Application**:
+  - Registered `@mogura/moguchart-plugin-export` in the demo page (`main.ts`) so that PNG and PDF export buttons continue to work seamlessly.
+
 ## [1.0.0] - 2026-09-13
 
 Official Major Release! 🎉

package/README.ja.md

@@ -44,9 +44,8 @@ Vue, React, Angular, Svelte など、どのフレームワークでも動作す
   - 進捗ラベル表示（配置カスタマイズ・カスタムフォーマット対応）
   - 進捗変更イベント（`task-progress-change`）の発火
   - 行・プロジェクト全体の進捗率計算ユーティリティ関数
-  - ミニマップへの進捗状況の自動反映
-- 📷 **エクスポート**: PNG画像およびPDF形式でのガントチャート全体エクスポート（自動ダウンロード対応、スクロール位置保持）
-- ✨ **高度な連携**:
+- 🧩 **プラグインアーキテクチャ**: コア本体を超軽量（数十KB）に保ちつつ、画像・PDFエクスポート等の機能をプラグインとして柔軟に拡張可能
+- 📷 **エクスポート（プラグイン）**: `@mogura/moguchart-plugin-export` による PNG画像およびPDF形式でのガントチャート全体エクスポート（自動ダウンロード対応、スクロール位置保持）
   - 外部からのドラッグ＆ドロップによるタスク作成
   - タスクの移動/コピーモード
   - スナップ機能（時間単位でのグリッドスナップ）
@@ -64,181 +63,228 @@ Vue, React, Angular, Svelte など、どのフレームワークでも動作す
   - プログラムからの開閉操作（`toggleRowCollapse`, `collapseAll`, `expandAll`）
 - ⌨️ **キーボード操作**: 矢印キーでのナビゲーション・選択・Shift+矢印キーでのタスク移動・Deleteキーでの削除
 
+## パッケージ一覧（エコシステム）
+
+Moguchart は柔軟なモノレポ構成となっており、用途やフレームワークに合わせてパッケージを選択できます：
+
+| パッケージ | 説明 |
+|---|---|
+| **[@mogura/moguchart-core](https://www.npmjs.com/package/@mogura/moguchart-core)** | コア Web Component（Lit製）。フレームワーク非依存で単体動作します。 |
+| **[@mogura/moguchart-react](https://www.npmjs.com/package/@mogura/moguchart-react)** | **公式 React ラッパー**。型安全な Props、イベント、ref を提供します。 |
+| **[@mogura/moguchart-vue](https://www.npmjs.com/package/@mogura/moguchart-vue)** | **公式 Vue 3 ラッパー**。Composition API、リアクティブ Props、emits を提供します。 |
+| **[@mogura/moguchart-plugin-export](https://www.npmjs.com/package/@mogura/moguchart-plugin-export)** | **公式エクスポートプラグイン**。高解像度 PNG および PDF 出力を提供します。 |
+
+---
+
 ## インストール
 
+お使いの環境に合わせてインストールしてください：
+
 ```bash
+# Core (Web Components / Vanilla JS)
 pnpm add @mogura/moguchart-core
-# または
-npm install @mogura/moguchart-core
+
+# React アプリケーションの場合
+pnpm add @mogura/moguchart-react @mogura/moguchart-core
+
+# Vue 3 アプリケーションの場合
+pnpm add @mogura/moguchart-vue @mogura/moguchart-core
 ```
 
 ## APIリファレンス
 
 詳細な API リファレンスは [API.ja.md](./doc/API.ja.md) または [英語版 (API.md)](./doc/API.md) を参照してください。
 
-## Vue.js での使用例
+---
 
-Vue.js (Vue 3) で使用する場合のサンプルです。
-Web Components を使用するため、`vite.config.ts` などでカスタム要素として認識させる設定が必要な場合があります。
+## React での使用例（公式ラッパー）
 
-```html
-<script setup lang="ts">
-  import { ref } from 'vue'
-  import '@mogura/moguchart-core'
-  import type { GanttRow, GanttChartOption, TaskUpdateEventDetail } from '@mogura/moguchart-core'
+[`@mogura/moguchart-react`](./packages/react/README.ja.md) を使用すると、React の合成イベントや Props、`ref` を通じた命令的メソッド呼び出しが完全に型安全に動作します：
+
+```tsx
+import React, { useRef } from 'react'
+import {
+  GanttChart,
+  type GanttChartElement,
+  type GanttRow,
+  type GanttChartOption,
+  type TaskUpdateEventDetail,
+} from '@mogura/moguchart-react'
+import { ExportPlugin } from '@mogura/moguchart-plugin-export'
 
-  const rows = ref<GanttRow[]>([
+export default function App() {
+  const chartRef = useRef<GanttChartElement>(null)
+
+  const rows: GanttRow[] = [
     {
       id: 'row-1',
-      name: 'Project A',
+      name: '開発フェーズ',
       tasks: [
         {
-          id: 't-1',
-          name: 'Task 1',
-          start: new Date('2024-01-01'),
-          end: new Date('2024-01-05'),
-          style: 'background-color: #60a5fa',
+          id: 'task-1',
+          name: '要件定義',
+          start: new Date('2026-04-01'),
+          end: new Date('2026-04-10'),
+          progress: 100,
         },
-      ],
-      markers: [
         {
-          id: 'marker-1',
-          name: 'レビュー期限',
-          date: new Date('2024-01-03'),
-          type: 'triangle-down',
-          color: '#ef4444',
+          id: 'task-2',
+          name: '実装',
+          start: new Date('2026-04-11'),
+          end: new Date('2026-04-25'),
+          progress: 50,
         },
       ],
     },
-  ])
+  ]
 
-  const option = ref<GanttChartOption>({
+  const option: GanttChartOption = {
     calendar: {
-      start: new Date('2024-01-01'),
-      end: new Date('2024-03-31'),
-      pxPerDay: 30,
-      showCurrentTime: true,
-      milestones: [
-        {
-          id: 'ms-1',
-          name: 'リリース',
-          start: new Date('2024-02-01'),
-          color: '#8b5cf6',
-        },
-      ],
+      start: new Date('2026-04-01'),
+      end: new Date('2026-04-30'),
+      pxPerDay: 40,
     },
-    bar: { height: 28 },
-    rowHeader: { width: 200 },
-    theme: 'system',
-  })
-
-  const handleTaskUpdate = (e: Event) => {
-    const detail = (e as CustomEvent<TaskUpdateEventDetail>).detail
-    console.log('Task updated:', detail)
+    plugins: [new ExportPlugin()],
   }
-</script>
 
-<template>
-  <div style="height: 500px;">
-    <gantt-chart :rows="rows" :option="option" @task-update="handleTaskUpdate"></gantt-chart>
-  </div>
-</template>
+  const handleTaskUpdate = (e: CustomEvent<TaskUpdateEventDetail>) => {
+    console.log('タスクが更新されました:', e.detail)
+  }
+
+  const handleExportPng = async () => {
+    await chartRef.current?.exportImage({ format: 'png', scale: 2 })
+  }
+
+  return (
+    <div style={{ height: '600px' }}>
+      <button onClick={handleExportPng}>PNGエクスポート</button>
+      <GanttChart
+        ref={chartRef}
+        rows={rows}
+        option={option}
+        theme="light"
+        onTaskUpdate={handleTaskUpdate}
+        style={{ width: '100%', height: '100%' }}
+      />
+    </div>
+  )
+}
 ```
 
-## React での使用例
+---
 
-React で使用する場合のサンプルです。
-Web Components のプロパティやイベントを扱うため、`ref` を使用して実装します。
+## Vue 3 での使用例（公式ラッパー）
 
-```tsx
-import { useEffect, useRef, useState } from 'react'
-import '@mogura/moguchart-core'
-import type { GanttRow, GanttChartOption, TaskUpdateEventDetail } from '@mogura/moguchart-core'
+[`@mogura/moguchart-vue`](./packages/vue/README.ja.md) を使用すると、Composition API（`<script setup>`）でリアクティブな Props や Vue 標準のイベントハンドリング（`@task-update` 等）を直感的に扱えます：
 
-// TypeScript で使用する場合の型定義
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      'gantt-chart': any
-    }
-  }
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  GanttChart,
+  type GanttChartInstance,
+  type GanttRow,
+  type GanttChartOption,
+  type TaskUpdateEventDetail,
+} from '@mogura/moguchart-vue'
+import { ExportPlugin } from '@mogura/moguchart-plugin-export'
+
+const chartRef = ref<GanttChartInstance | null>(null)
+
+const rows = ref<GanttRow[]>([
+  {
+    id: 'row-1',
+    name: '開発フェーズ',
+    tasks: [
+      {
+        id: 'task-1',
+        name: '要件定義',
+        start: new Date('2026-04-01'),
+        end: new Date('2026-04-10'),
+        progress: 100,
+      },
+    ],
+  },
+])
+
+const option: GanttChartOption = {
+  calendar: {
+    start: new Date('2026-04-01'),
+    end: new Date('2026-04-30'),
+    pxPerDay: 40,
+  },
+  plugins: [new ExportPlugin()],
 }
 
-export default function App() {
-  const chartRef = useRef<any>(null)
+const handleTaskUpdate = (detail: TaskUpdateEventDetail) => {
+  console.log('タスクが更新されました:', detail)
+}
 
-  const [rows] = useState<GanttRow[]>([
-    {
-      id: 'row-1',
-      name: 'Project A',
-      tasks: [
-        {
-          id: 't-1',
-          name: 'Task 1',
-          start: new Date('2024-01-01'),
-          end: new Date('2024-01-05'),
-          style: 'background-color: #60a5fa',
-        },
-      ],
-      markers: [
-        {
-          id: 'marker-1',
-          name: 'レビュー期限',
-          date: new Date('2024-01-03'),
-          type: 'triangle-down',
-          color: '#ef4444',
-        },
-      ],
-    },
-  ])
+const handleExportPng = async () => {
+  await chartRef.value?.exportImage({ format: 'png', scale: 2 })
+}
+</script>
 
-  const [option] = useState<GanttChartOption>({
-    calendar: {
-      start: new Date('2024-01-01'),
-      end: new Date('2024-03-31'),
-      pxPerDay: 30,
-      showCurrentTime: true,
-      milestones: [
-        {
-          id: 'ms-1',
-          name: 'リリース',
-          start: new Date('2024-02-01'),
-          color: '#8b5cf6',
-        },
-      ],
-    },
-    bar: { height: 28 },
-    rowHeader: { width: 200 },
-    theme: 'system',
-  })
-
-  useEffect(() => {
-    const chart = chartRef.current
-    if (!chart) return
-
-    // プロパティの設定
-    chart.rows = rows
-    chart.option = option
-
-    // イベントリスナーの設定
-    const handleTaskUpdate = (e: Event) => {
-      const detail = (e as CustomEvent<TaskUpdateEventDetail>).detail
-      console.log('Task updated:', detail)
-    }
+<template>
+  <div style="height: 600px;">
+    <button @click="handleExportPng">PNGエクスポート</button>
+    <GanttChart
+      ref="chartRef"
+      :rows="rows"
+      :option="option"
+      theme="light"
+      @task-update="handleTaskUpdate"
+      style="width: 100%; height: 100%;"
+    />
+  </div>
+</template>
+```
+
+---
+
+## Web Components (Vanilla JS) での使用例
 
-    chart.addEventListener('task-update', handleTaskUpdate)
+フレームワークを使わずにプレーンな HTML / JavaScript で使用する場合：
 
-    return () => {
-      chart.removeEventListener('task-update', handleTaskUpdate)
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script type="module">
+    import '@mogura/moguchart-core'
+
+    const chart = document.querySelector('gantt-chart')
+    chart.rows = [
+      {
+        id: 'row-1',
+        name: 'タスクグループ 1',
+        tasks: [
+          {
+            id: 'task-1',
+            name: 'タスク 1',
+            start: new Date('2026-04-01'),
+            end: new Date('2026-04-10'),
+          },
+        ],
+      },
+    ]
+    chart.option = {
+      calendar: {
+        start: new Date('2026-04-01'),
+        end: new Date('2026-04-30'),
+        pxPerDay: 40,
+      },
     }
-  }, [rows, option])
 
-  return (
-    <div style={{ height: '500px' }}>
-      <gantt-chart ref={chartRef}></gantt-chart>
-    </div>
-  )
-}
+    chart.addEventListener('task-update', (e) => {
+      console.log('Updated:', e.detail)
+    })
+  </script>
+</head>
+<body>
+  <gantt-chart style="width: 100%; height: 500px;"></gantt-chart>
+</body>
+</html>
 ```
 
 ## 主要機能
@@ -671,19 +717,40 @@ document.addEventListener('mousemove', (e) => {
 })
 ```
 
-#### exportImage
+#### エクスポートプラグイン (`@mogura/moguchart-plugin-export`)
 
-ガントチャート全体を PNG 画像または PDF 形式でエクスポートします。
+ガントチャート全体を PNG 画像または PDF 形式でエクスポートします。エクスポート機能はプラグイン（`@mogura/moguchart-plugin-export`）として提供されており、必要な場合のみ導入することでコア本体を超軽量に保てます。
+
+```bash
+pnpm add @mogura/moguchart-plugin-export
+```
 
 ```javascript
+import '@mogura/moguchart-core'
+import { exportPlugin } from '@mogura/moguchart-plugin-export'
+
+// チャートにプラグインを登録（chart.use または option.plugins）
+chart.use(exportPlugin())
+
 // PNG画像として自動ダウンロード
 await chart.exportImage('png', {
-  fileName: 'gantt-chart.png',
+  filename: 'gantt-chart',
   download: true,
+  scale: 2,
 })
 
 // PDFとしてBlobを取得
-const pdfBlob = await chart.exportImage('pdf')
+const pdfBlob = await chart.exportImage('pdf', {
+  filename: 'gantt-chart',
+  download: true,
+})
+```
+
+または、エクスポートボタン押下時など必要なタイミングでのみ遅延ロード（Dynamic Import）してスタンドアロン関数を実行することも可能です：
+
+```javascript
+const { exportChart } = await import('@mogura/moguchart-plugin-export')
+await exportChart(chart, 'png', { download: true })
 ```
 
 #### ズーム操作 (zoomTo / zoomToFit / resetZoom)