@threestarsoftware/tssgrid 0.1.36 → 0.1.37

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.37] - 2026-11-06
+
+### 追加（公式フレームワークアダプタ）
+- **React / Vue 3 の薄い公式アダプタを追加**（`@threestarsoftware/tssgrid/react`・`@threestarsoftware/tssgrid/vue`）。競合（`ag-grid-react` / `@handsontable/react`）と同じ「コアはフレームワーク非依存のまま・薄いコンポーネントがライフサイクルと props を橋渡し」の形。**コアは無依存を維持**＝`react` / `vue` は **peerDependency（任意・`peerDependenciesMeta.optional`）**、アダプタは `React.createElement` / `Vue.h` で手書き＝**ビルド不要（UMD）**。
+  - グリッドは**アンコントロールド**：マウントで生成・アンマウントで `destroy()`、**cell を React/Vue で描かない**（高速）。値は **ref で公開した grid 本体（命令API）** ＋ `onAfterChange` 等のコールバック。`data` プロップは参照が変わった時だけ `setData`（毎レンダー新配列を渡すとリセット＝頻繁な更新は命令APIで）。
+  - React: `<TssGridReact columns={..} data={..} onAfterChange={..} ref={ref} />`、`ref.current` が grid 本体。StrictMode 二重マウント安全（`destroy` 冪等）、SSR/Next 安全（構築は `useEffect`＝クライアント専用）。
+  - Vue: `<TssGridVue :columns :data :options="{ onAfterChange }" ref="g" />`、`g.grid()` が grid 本体。
+  - `columns/data/plugins/options` と全 `on*` コールバックをそのまま透過。型（`.d.ts`）付き。例 `examples/react.html` / `examples/vue.html`（CDN UMD のノービルドデモ）。
+
 ## [0.1.36] - 2026-11-06
 
 inline ピッカー3兄弟（**tss-time / tss-calendar / tss-datetime**）に共通して潜んでいた「ポップアップの `<select>` が使えない／確定がピッカー内部の値を書き戻す／編集中の表示が食い違う」を一掃。土台としてコアに2つの affordance を追加。

package/README.md

@@ -78,9 +78,39 @@ const { TssGrid, HistoryManager } = require('@threestarsoftware/tssgrid');
 
 ## フレームワークで使う（React / Vue / Angular）
 
-専用ラッパーは**作りません**。vanilla on DOM なので CRA/Vite/Next/Webpack/Angular/Nuxt でそのまま動きます。コツは **マウント時に生成し、アンマウント時に `grid.destroy()`** するだけ（リスナ・ResizeObserver・DOM を後始末。idempotent）。
+**React / Vue には薄い公式アダプタ**（`@threestarsoftware/tssgrid/react`・`/vue`）があります。コアは無依存のまま＝`react`・`vue` は **peerDependency（任意）**、アダプタは `React.createElement` / `Vue.h` で手書き＝**ノービルド**。グリッドは「アンコントロールド」（マウントで生成・アンマウントで `destroy()`・**cell は React/Vue で描かない**＝高速）、値は **ref で公開した grid 本体（命令API）** ＋ `onAfterChange` 等のコールバック、`data` プロップは「差し替え」用（参照が変わった時だけ `setData`）。動く例: [`examples/react.html`](https://tssgrid.threestarsoftware.co.jp/examples/react.html) / [`examples/vue.html`](https://tssgrid.threestarsoftware.co.jp/examples/vue.html)。
 
-**React**:
+**React（公式アダプタ）**:
+```jsx
+import { useRef } from 'react';
+import { TssGridReact } from '@threestarsoftware/tssgrid/react';
+import '@threestarsoftware/tssgrid/tssgrid.css';
+
+function Grid({ columns, data }) {
+  const ref = useRef(null);   // ref.current = grid 本体（命令API）
+  return <TssGridReact columns={columns} data={data}
+    onAfterChange={(ch, src) => console.log(ch, src)} ref={ref} />;
+  // 例: ref.current.sortBy('age','desc') / ref.current.getRows()
+}
+```
+
+**Vue 3（公式アダプタ）**:
+```vue
+<script setup>
+import { ref } from 'vue';
+import { TssGridVue } from '@threestarsoftware/tssgrid/vue';
+import '@threestarsoftware/tssgrid/tssgrid.css';
+const g = ref(null);   // g.value.grid() = grid 本体
+</script>
+<template>
+  <TssGridVue :columns="columns" :data="data"
+    :options="{ onAfterChange: (ch, src) => console.log(ch, src) }" ref="g" />
+</template>
+```
+
+アダプタを使わず**依存ゼロで直接**使うこともできます（vanilla on DOM。CRA/Vite/Next/Webpack/Angular/Nuxt でそのまま。コツは **マウント時に生成し、アンマウント時に `grid.destroy()`**）。
+
+**React（直接）**:
 ```jsx
 import { useEffect, useRef } from 'react';
 import { TssGrid } from '@threestarsoftware/tssgrid';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threestarsoftware/tssgrid",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "description": "軽量・ノービルド・日本語IME堅牢な編集グリッド（vanilla JS / 依存なし / MIT）。Excel ライクな入力画面を <script> タグ1本で。",
   "license": "MIT",
   "author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",
@@ -67,9 +67,29 @@
       "types": "./plugins/tss-comment.d.ts",
       "default": "./plugins/tss-comment.js"
     },
+    "./react": {
+      "types": "./react/index.d.ts",
+      "default": "./react/index.js"
+    },
+    "./vue": {
+      "types": "./vue/index.d.ts",
+      "default": "./vue/index.js"
+    },
     "./plugins/*": "./plugins/*",
     "./package.json": "./package.json"
   },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
   "unpkg": "src/tssgrid.js",
   "jsdelivr": "src/tssgrid.js",
   "sideEffects": [
@@ -83,6 +103,8 @@
     "src/tssgrid.css",
     "src/tssgrid.d.ts",
     "plugins/",
+    "react/",
+    "vue/",
     "README.md",
     "CHANGELOG.md",
     "LICENSE"

package/react/index.d.ts

@@ -0,0 +1,19 @@
+// TssGridReact — TssGrid の薄い React アダプタの型。
+import * as React from 'react';
+import { TssGrid, TssGridOptions } from '../src/tssgrid';
+
+// トップレベルに書ける定番オプション＋全 on* コールバックは Partial<TssGridOptions> として受ける。
+// それ以外は options={{…}} でまとめて渡す。className / style は host の <div> に付く。
+export interface TssGridReactProps extends Partial<TssGridOptions> {
+  className?: string;
+  style?: React.CSSProperties;
+  options?: TssGridOptions;
+}
+
+// ref には grid 本体（命令API）が入る。
+declare const TssGridReact: React.ForwardRefExoticComponent<
+  TssGridReactProps & React.RefAttributes<TssGrid>
+>;
+
+export default TssGridReact;
+export { TssGridReact };

package/react/index.js

@@ -0,0 +1,74 @@
+/*! TssGridReact — TssGrid の薄い React アダプタ（UMD・ノービルド・react は peerDependency）
+ *
+ *  方針（競合 ag-grid-react / @handsontable/react と同じ）:
+ *   - グリッドは「アンコントロールド」= マウント時に1回生成し、アンマウントで destroy()。cell を React で描かない（高速）。
+ *   - 値の読み書きは ref 経由の命令API（grid 本体）＋ onAfterChange 等のコールバック。data プロップは「差し替え」用。
+ *   - 全ての on* コールバック（onAfterChange / onEditEnd …）と columns/data/plugins/options をそのまま TssGrid へ渡す。
+ *
+ *  使い方:
+ *    import { TssGridReact } from '@threestarsoftware/tssgrid/react';
+ *    import '@threestarsoftware/tssgrid/tssgrid.css';
+ *    const ref = useRef(null);
+ *    <TssGridReact columns={cols} data={rows} plugins={[...]}
+ *                  onAfterChange={(ch, src) => ...} ref={ref} />
+ *    // 命令API: ref.current.sortBy('col','desc') / ref.current.getRows() など（grid 本体）
+ *
+ *  注意:
+ *   - data は「参照が変わった時だけ」setData されます（毎レンダー新配列を渡すと毎回リセット＝カーソルも飛ぶ）。
+ *     頻繁な更新は ref の命令API（setValue/ appendRows 等）を使うのが定石。
+ *   - 構築は useEffect（クライアント専用）なので SSR/Next でもそのまま（サーバでは空 div）。columns を変えたい時は key で remount。
+ */
+(function (root, factory) {
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = factory(require('react'), require('../src/tssgrid.js'));
+  } else {
+    root.TssGridReact = factory(root.React, { TssGrid: root.TssGrid });
+  }
+})(typeof self !== 'undefined' ? self : this, function (React, core) {
+  'use strict';
+  var TssGrid = core && (core.TssGrid || core);
+  var h = React.createElement;
+  // トップレベルに書ける定番オプション（それ以外は options={{…}} で）。
+  var PASS = { columns: 1, headers: 1, data: 1, plugins: 1, name: 1, width: 1, height: 1, rowHeight: 1, rowHeaders: 1, colHeaders: 1, minSpareRows: 1, maxRows: 1, history: 1, virtual: 1, hiddenColumns: 1 };
+
+  function buildOptions(props) {
+    var o = {};
+    if (props.options) for (var k in props.options) o[k] = props.options[k];
+    for (var key in props) {
+      if (PASS[key]) o[key] = props[key];
+      else if (/^on[A-Z]/.test(key) && typeof props[key] === 'function') o[key] = props[key];   // on* コールバック総通し
+    }
+    return o;
+  }
+
+  var TssGridReact = React.forwardRef(function (props, ref) {
+    var hostRef = React.useRef(null);
+    var gridRef = React.useRef(null);
+    var propsRef = React.useRef(props);
+    propsRef.current = props;
+    var firstData = React.useRef(true);
+    var readyState = React.useState(0);                           // grid 生成後に ref（命令API）を更新させるためのバンプ
+
+    React.useEffect(function () {                                  // 生成は1回（アンコントロールド）。StrictMode 二重でも destroy が冪等。
+      var grid = new TssGrid(hostRef.current, buildOptions(propsRef.current));
+      gridRef.current = grid;
+      firstData.current = true;
+      readyState[1](function (n) { return n + 1; });              // ref.current = grid 本体 に更新（useImperativeHandle を再評価）
+      return function () { try { grid.destroy(); } catch (e) {} if (gridRef.current === grid) gridRef.current = null; };
+    }, []);
+
+    React.useEffect(function () {                                  // data の参照が変わったら差し替え（初回=生成時の data を使うのでスキップ）
+      if (firstData.current) { firstData.current = false; return; }
+      var g = gridRef.current;
+      if (g && propsRef.current.data != null) g.setData(propsRef.current.data);
+    }, [props.data]);
+
+    React.useImperativeHandle(ref, function () { return gridRef.current; }, [readyState[0]]);   // grid 本体を命令API として公開（生成後に更新）
+
+    return h('div', { ref: hostRef, className: props.className, style: props.style });
+  });
+  TssGridReact.displayName = 'TssGridReact';
+  TssGridReact.TssGridReact = TssGridReact;   // import { TssGridReact } / import TssGridReact どちらも通す
+  TssGridReact.default = TssGridReact;
+  return TssGridReact;
+});

package/vue/index.d.ts

@@ -0,0 +1,15 @@
+// TssGridVue — TssGrid の薄い Vue 3 アダプタの型。
+import { DefineComponent } from 'vue';
+import { TssGrid, TssGridOptions } from '../src/tssgrid';
+
+export type TssGridVueProps = Partial<TssGridOptions> & { options?: TssGridOptions };
+
+// expose: grid() で grid 本体（命令API）を返す。
+export interface TssGridVueExposed {
+  grid(): TssGrid | null;
+}
+
+declare const TssGridVue: DefineComponent<TssGridVueProps>;
+
+export default TssGridVue;
+export { TssGridVue };

package/vue/index.js

@@ -0,0 +1,56 @@
+/*! TssGridVue — TssGrid の薄い Vue 3 アダプタ（UMD・ノービルド・vue は peerDependency）
+ *
+ *  方針（React アダプタと同じ）: グリッドはアンコントロールド。マウントで生成・アンマウントで destroy()。
+ *   値の読み書きは expose した grid 本体（命令API）＋ on* コールバック。data プロップは「差し替え」用。
+ *
+ *  使い方:
+ *    import { TssGridVue } from '@threestarsoftware/tssgrid/vue';
+ *    import '@threestarsoftware/tssgrid/tssgrid.css';
+ *    <TssGridVue :columns="cols" :data="rows" :plugins="[...]" :options="{ onAfterChange }" ref="g" />
+ *    // 命令API: this.$refs.g.grid().sortBy('col','desc') など（grid 本体を返す）
+ *
+ *  注意: on* コールバックは :options（例 :options="{ onAfterChange: fn }"）か、@after-change などの属性で渡せます。
+ *        data は参照が変わった時だけ setData（毎回新配列はリセット＝カーソルが飛ぶ）。頻繁な更新は grid の命令APIで。
+ */
+(function (root, factory) {
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = factory(require('vue'), require('../src/tssgrid.js'));
+  } else {
+    root.TssGridVue = factory(root.Vue, { TssGrid: root.TssGrid });
+  }
+})(typeof self !== 'undefined' ? self : this, function (Vue, core) {
+  'use strict';
+  var TssGrid = core && (core.TssGrid || core);
+  var PASS = ['columns', 'data', 'plugins', 'headers', 'name', 'width', 'height', 'rowHeight', 'rowHeaders', 'colHeaders', 'minSpareRows', 'maxRows', 'history', 'virtual', 'hiddenColumns'];
+
+  var TssGridVue = Vue.defineComponent({
+    name: 'TssGridVue',
+    inheritAttrs: false,   // on* 属性を div に二重付けしない
+    props: {
+      columns: Array, data: Array, plugins: Array, options: Object, headers: Array,
+      name: String, width: [Number, String], height: [Number, String],
+      rowHeight: Number, rowHeaders: { type: Boolean, default: undefined }, minSpareRows: Number,
+    },
+    setup: function (props, ctx) {
+      var el = Vue.ref(null);
+      var grid = null;
+      function buildOptions() {
+        var o = {};
+        if (props.options) for (var k in props.options) o[k] = props.options[k];
+        PASS.forEach(function (key) { if (props[key] !== undefined) o[key] = props[key]; });
+        var attrs = ctx.attrs || {};
+        for (var a in attrs) { if (/^on[A-Z]/.test(a) && typeof attrs[a] === 'function') o[a] = attrs[a]; }   // @after-change 等＝attrs の onAfterChange
+        return o;
+      }
+      Vue.onMounted(function () { grid = new TssGrid(el.value, buildOptions()); });
+      Vue.onBeforeUnmount(function () { if (grid) { try { grid.destroy(); } catch (e) {} grid = null; } });
+      Vue.watch(function () { return props.data; }, function (d) { if (grid && d != null) grid.setData(d); });   // 参照が変わったら差し替え
+      ctx.expose({ grid: function () { return grid; } });                                                       // grid 本体を命令API として公開
+      return function () { return Vue.h('div', { ref: el }); };
+    },
+  });
+
+  TssGridVue.TssGridVue = TssGridVue;
+  TssGridVue.default = TssGridVue;
+  return TssGridVue;
+});