@trellisjs/react 0.1.0-alpha.1

package/dist/index.d.mts

@@ -0,0 +1,75 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { TrellisAPI, TrellisOptions, ColumnDef, DataRow, SlotContext } from '@trellisjs/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * 在元件間共享 Trellis API 的 Context。
+ */
+declare const TrellisContext: react.Context<TrellisAPI<Record<string, unknown>> | null>;
+/**
+ * 從 context 取得 Trellis API 的 hook。
+ * 必須在 TrellisContext.Provider 內使用。
+ */
+declare function useTrellisContext<T = Record<string, unknown>>(): TrellisAPI<T>;
+
+/**
+ * 建立和管理 Trellis 實例的 hook。
+ *
+ * - 只建立一次實例（useState lazy initializer）。
+ * - 狀態變更時觸發重新渲染。
+ * - 相容 React StrictMode 雙重掛載。
+ */
+declare function useTrellis<T extends Record<string, unknown>>(options: TrellisOptions<T>): {
+    api: TrellisAPI<T>;
+};
+
+/**
+ * 無頭式 Table 元件。
+ * 渲染 <table> 包含 <thead> 和 <tbody>。
+ */
+declare function Table(): react_jsx_runtime.JSX.Element;
+
+interface TableHeadProps<T = Record<string, unknown>> {
+    columns: ColumnDef<T>[];
+}
+declare function TableHead<T>({ columns }: TableHeadProps<T>): react_jsx_runtime.JSX.Element;
+
+interface TableBodyProps<T = Record<string, unknown>> {
+    data: DataRow<T>[];
+    columns: ColumnDef<T>[];
+}
+declare function TableBody<T>({ data, columns }: TableBodyProps<T>): react_jsx_runtime.JSX.Element;
+
+interface TableRowProps<T = Record<string, unknown>> {
+    row: DataRow<T>;
+    columns: ColumnDef<T>[];
+}
+declare function Tr<T>({ row, columns }: TableRowProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ThProps<T = Record<string, unknown>> {
+    column: ColumnDef<T>;
+}
+declare function Th<T>({ column }: ThProps<T>): react_jsx_runtime.JSX.Element;
+
+interface TdProps<T = Record<string, unknown>> {
+    row: DataRow<T>;
+    column: ColumnDef<T>;
+}
+declare function Td<T>({ row, column }: TdProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SlotRendererProps {
+    /** 要渲染的插槽名稱 */
+    name: string;
+    /** 傳遞給插槽渲染器的 context */
+    context?: SlotContext;
+    /** 插槽未註冊時的備用內容 */
+    fallback?: ReactNode;
+}
+/**
+ * 從 Trellis 插槽註冊表渲染具名插槽。
+ * 若未註冊則使用 `fallback` 屬性或渲染空內容。
+ */
+declare function SlotRenderer({ name, context, fallback, }: SlotRendererProps): react_jsx_runtime.JSX.Element;
+
+export { SlotRenderer, Table, TableBody, TableHead, Td, Th, Tr, TrellisContext, useTrellis, useTrellisContext };

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { TrellisAPI, TrellisOptions, ColumnDef, DataRow, SlotContext } from '@trellisjs/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * 在元件間共享 Trellis API 的 Context。
+ */
+declare const TrellisContext: react.Context<TrellisAPI<Record<string, unknown>> | null>;
+/**
+ * 從 context 取得 Trellis API 的 hook。
+ * 必須在 TrellisContext.Provider 內使用。
+ */
+declare function useTrellisContext<T = Record<string, unknown>>(): TrellisAPI<T>;
+
+/**
+ * 建立和管理 Trellis 實例的 hook。
+ *
+ * - 只建立一次實例（useState lazy initializer）。
+ * - 狀態變更時觸發重新渲染。
+ * - 相容 React StrictMode 雙重掛載。
+ */
+declare function useTrellis<T extends Record<string, unknown>>(options: TrellisOptions<T>): {
+    api: TrellisAPI<T>;
+};
+
+/**
+ * 無頭式 Table 元件。
+ * 渲染 <table> 包含 <thead> 和 <tbody>。
+ */
+declare function Table(): react_jsx_runtime.JSX.Element;
+
+interface TableHeadProps<T = Record<string, unknown>> {
+    columns: ColumnDef<T>[];
+}
+declare function TableHead<T>({ columns }: TableHeadProps<T>): react_jsx_runtime.JSX.Element;
+
+interface TableBodyProps<T = Record<string, unknown>> {
+    data: DataRow<T>[];
+    columns: ColumnDef<T>[];
+}
+declare function TableBody<T>({ data, columns }: TableBodyProps<T>): react_jsx_runtime.JSX.Element;
+
+interface TableRowProps<T = Record<string, unknown>> {
+    row: DataRow<T>;
+    columns: ColumnDef<T>[];
+}
+declare function Tr<T>({ row, columns }: TableRowProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ThProps<T = Record<string, unknown>> {
+    column: ColumnDef<T>;
+}
+declare function Th<T>({ column }: ThProps<T>): react_jsx_runtime.JSX.Element;
+
+interface TdProps<T = Record<string, unknown>> {
+    row: DataRow<T>;
+    column: ColumnDef<T>;
+}
+declare function Td<T>({ row, column }: TdProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SlotRendererProps {
+    /** 要渲染的插槽名稱 */
+    name: string;
+    /** 傳遞給插槽渲染器的 context */
+    context?: SlotContext;
+    /** 插槽未註冊時的備用內容 */
+    fallback?: ReactNode;
+}
+/**
+ * 從 Trellis 插槽註冊表渲染具名插槽。
+ * 若未註冊則使用 `fallback` 屬性或渲染空內容。
+ */
+declare function SlotRenderer({ name, context, fallback, }: SlotRendererProps): react_jsx_runtime.JSX.Element;
+
+export { SlotRenderer, Table, TableBody, TableHead, Td, Th, Tr, TrellisContext, useTrellis, useTrellisContext };

package/dist/index.js

@@ -0,0 +1,154 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  SlotRenderer: () => SlotRenderer,
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableHead: () => TableHead,
+  Td: () => Td,
+  Th: () => Th,
+  Tr: () => Tr,
+  TrellisContext: () => TrellisContext,
+  useTrellis: () => useTrellis,
+  useTrellisContext: () => useTrellisContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context.tsx
+var import_react = require("react");
+var TrellisContext = (0, import_react.createContext)(null);
+function useTrellisContext() {
+  const ctx = (0, import_react.useContext)(TrellisContext);
+  if (!ctx) {
+    throw new Error("useTrellisContext must be used within a <TrellisProvider>");
+  }
+  return ctx;
+}
+
+// src/hooks/use-trellis.ts
+var import_react2 = require("react");
+var import_core = require("@trellisjs/core");
+function useTrellis(options) {
+  const [trellis] = (0, import_react2.useState)(() => new import_core.Trellis(options));
+  const [, setVersion] = (0, import_react2.useState)(0);
+  (0, import_react2.useEffect)(() => {
+    const unsubscribe = trellis.api.subscribe(() => {
+      setVersion((v) => v + 1);
+    });
+    return unsubscribe;
+  }, [trellis]);
+  return { api: trellis.api };
+}
+
+// src/components/th.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Th({ column }) {
+  const style = {};
+  if (column.width) style.width = column.width;
+  if (column.minWidth) style.minWidth = column.minWidth;
+  if (column.maxWidth) style.maxWidth = column.maxWidth;
+  if (column.align) style.textAlign = column.align;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: Object.keys(style).length > 0 ? style : void 0, children: column.header });
+}
+
+// src/components/thead.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function TableHead({ columns }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: columns.filter((col) => col.visible !== false).map((col) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Th, { column: col }, col.id)) }) });
+}
+
+// src/components/td.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function getCellValue(row, column) {
+  const { accessor } = column;
+  if (typeof accessor === "function") {
+    return accessor(row.original);
+  }
+  return row.original[accessor];
+}
+function Td({ row, column }) {
+  const value = getCellValue(row, column);
+  const style = {};
+  if (column.align) style.textAlign = column.align;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: Object.keys(style).length > 0 ? style : void 0, children: value != null ? String(value) : "" });
+}
+
+// src/components/tr.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Tr({ row, columns }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { children: columns.filter((col) => col.visible !== false).map((col) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Td, { row, column: col }, col.id)) });
+}
+
+// src/components/tbody.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function TableBody({ data, columns }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { children: data.map((row) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tr, { row, columns }, row.id)) });
+}
+
+// src/components/table.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Table() {
+  const api = useTrellisContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TableHead, { columns: api.getState().columns }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      TableBody,
+      {
+        data: api.getState().data,
+        columns: api.getState().columns
+      }
+    )
+  ] });
+}
+
+// src/slots/slot-renderer.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function SlotRenderer({
+  name,
+  context,
+  fallback = null
+}) {
+  const api = useTrellisContext();
+  const renderer = api.getSlot(name);
+  if (!renderer) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: fallback });
+  }
+  const content = renderer(context ?? {});
+  if (content !== null && content !== void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: fallback });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SlotRenderer,
+  Table,
+  TableBody,
+  TableHead,
+  Td,
+  Th,
+  Tr,
+  TrellisContext,
+  useTrellis,
+  useTrellisContext
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/context.tsx","../src/hooks/use-trellis.ts","../src/components/th.tsx","../src/components/thead.tsx","../src/components/td.tsx","../src/components/tr.tsx","../src/components/tbody.tsx","../src/components/table.tsx","../src/slots/slot-renderer.tsx"],"sourcesContent":["// Trellis React 適配器\n\n// Context\nexport { TrellisContext, useTrellisContext } from './context';\n\n// Hooks\nexport { useTrellis } from './hooks/use-trellis';\n\n// 元件\nexport {\n  Table,\n  TableHead,\n  TableBody,\n  Tr,\n  Th,\n  Td,\n} from './components';\n\n// 插槽\nexport { SlotRenderer } from './slots/slot-renderer';\n","import { createContext, useContext } from 'react';\nimport type { TrellisAPI } from '@trellisjs/core';\n\n/**\n * 在元件間共享 Trellis API 的 Context。\n */\nexport const TrellisContext = createContext<TrellisAPI | null>(null);\n\n/**\n * 從 context 取得 Trellis API 的 hook。\n * 必須在 TrellisContext.Provider 內使用。\n */\nexport function useTrellisContext<T = Record<string, unknown>>(): TrellisAPI<T> {\n  const ctx = useContext(TrellisContext);\n  if (!ctx) {\n    throw new Error('useTrellisContext must be used within a <TrellisProvider>');\n  }\n  return ctx as TrellisAPI<T>;\n}\n","import { useState, useEffect } from 'react';\nimport { Trellis } from '@trellisjs/core';\nimport type { TrellisAPI, TrellisOptions } from '@trellisjs/core';\n\n/**\n * 建立和管理 Trellis 實例的 hook。\n *\n * - 只建立一次實例（useState lazy initializer）。\n * - 狀態變更時觸發重新渲染。\n * - 相容 React StrictMode 雙重掛載。\n */\nexport function useTrellis<T extends Record<string, unknown>>(\n  options: TrellisOptions<T>,\n): { api: TrellisAPI<T> } {\n  // useState initializer 只執行一次，不會被 StrictMode cleanup 重置\n  const [trellis] = useState(() => new Trellis(options));\n  const [, setVersion] = useState(0);\n\n  useEffect(() => {\n    const unsubscribe = trellis.api.subscribe(() => {\n      setVersion((v) => v + 1);\n    });\n\n    return unsubscribe;\n  }, [trellis]);\n\n  return { api: trellis.api };\n}\n","import type { ColumnDef } from '@trellisjs/core';\n\ninterface ThProps<T = Record<string, unknown>> {\n  column: ColumnDef<T>;\n}\n\nexport function Th<T>({ column }: ThProps<T>) {\n  const style: React.CSSProperties = {};\n  if (column.width) style.width = column.width;\n  if (column.minWidth) style.minWidth = column.minWidth;\n  if (column.maxWidth) style.maxWidth = column.maxWidth;\n  if (column.align) style.textAlign = column.align;\n\n  return (\n    <th style={Object.keys(style).length > 0 ? style : undefined}>\n      {column.header}\n    </th>\n  );\n}\n","import type { ColumnDef } from '@trellisjs/core';\nimport { Th } from './th';\n\ninterface TableHeadProps<T = Record<string, unknown>> {\n  columns: ColumnDef<T>[];\n}\n\nexport function TableHead<T>({ columns }: TableHeadProps<T>) {\n  return (\n    <thead>\n      <tr>\n        {columns\n          .filter((col) => col.visible !== false)\n          .map((col) => (\n            <Th key={col.id} column={col} />\n          ))}\n      </tr>\n    </thead>\n  );\n}\n","import type { ColumnDef, DataRow } from '@trellisjs/core';\n\ninterface TdProps<T = Record<string, unknown>> {\n  row: DataRow<T>;\n  column: ColumnDef<T>;\n}\n\nfunction getCellValue<T>(row: DataRow<T>, column: ColumnDef<T>): unknown {\n  const { accessor } = column;\n  if (typeof accessor === 'function') {\n    return accessor(row.original);\n  }\n  return row.original[accessor];\n}\n\nexport function Td<T>({ row, column }: TdProps<T>) {\n  const value = getCellValue(row, column);\n  const style: React.CSSProperties = {};\n  if (column.align) style.textAlign = column.align;\n\n  return (\n    <td style={Object.keys(style).length > 0 ? style : undefined}>\n      {value != null ? String(value) : ''}\n    </td>\n  );\n}\n","import type { ColumnDef, DataRow } from '@trellisjs/core';\nimport { Td } from './td';\n\ninterface TableRowProps<T = Record<string, unknown>> {\n  row: DataRow<T>;\n  columns: ColumnDef<T>[];\n}\n\nexport function Tr<T>({ row, columns }: TableRowProps<T>) {\n  return (\n    <tr>\n      {columns\n        .filter((col) => col.visible !== false)\n        .map((col) => (\n          <Td key={col.id} row={row} column={col} />\n        ))}\n    </tr>\n  );\n}\n","import type { ColumnDef, DataRow } from '@trellisjs/core';\nimport { Tr } from './tr';\n\ninterface TableBodyProps<T = Record<string, unknown>> {\n  data: DataRow<T>[];\n  columns: ColumnDef<T>[];\n}\n\nexport function TableBody<T>({ data, columns }: TableBodyProps<T>) {\n  return (\n    <tbody>\n      {data.map((row) => (\n        <Tr key={row.id} row={row} columns={columns} />\n      ))}\n    </tbody>\n  );\n}\n","import { TableHead } from './thead';\nimport { TableBody } from './tbody';\nimport { useTrellisContext } from '../context';\n\n/**\n * 無頭式 Table 元件。\n * 渲染 <table> 包含 <thead> 和 <tbody>。\n */\nexport function Table() {\n  const api = useTrellisContext();\n\n  return (\n    <table>\n      <TableHead columns={api.getState().columns} />\n      <TableBody\n        data={api.getState().data}\n        columns={api.getState().columns}\n      />\n    </table>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { useTrellisContext } from '../context';\nimport type { SlotContext } from '@trellisjs/core';\n\ninterface SlotRendererProps {\n  /** 要渲染的插槽名稱 */\n  name: string;\n  /** 傳遞給插槽渲染器的 context */\n  context?: SlotContext;\n  /** 插槽未註冊時的備用內容 */\n  fallback?: ReactNode;\n}\n\n/**\n * 從 Trellis 插槽註冊表渲染具名插槽。\n * 若未註冊則使用 `fallback` 屬性或渲染空內容。\n */\nexport function SlotRenderer({\n  name,\n  context,\n  fallback = null,\n}: SlotRendererProps) {\n  const api = useTrellisContext();\n  const renderer = api.getSlot(name);\n\n  if (!renderer) {\n    return <>{fallback}</>;\n  }\n\n  const content = renderer(context ?? {});\n\n  if (content !== null && content !== undefined) {\n    return <>{content}</>;\n  }\n\n  return <>{fallback}</>;\n}\n"],"mappings":"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","names":["import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,118 @@
+// src/context.tsx
+import { createContext, useContext } from "react";
+var TrellisContext = createContext(null);
+function useTrellisContext() {
+  const ctx = useContext(TrellisContext);
+  if (!ctx) {
+    throw new Error("useTrellisContext must be used within a <TrellisProvider>");
+  }
+  return ctx;
+}
+
+// src/hooks/use-trellis.ts
+import { useState, useEffect } from "react";
+import { Trellis } from "@trellisjs/core";
+function useTrellis(options) {
+  const [trellis] = useState(() => new Trellis(options));
+  const [, setVersion] = useState(0);
+  useEffect(() => {
+    const unsubscribe = trellis.api.subscribe(() => {
+      setVersion((v) => v + 1);
+    });
+    return unsubscribe;
+  }, [trellis]);
+  return { api: trellis.api };
+}
+
+// src/components/th.tsx
+import { jsx } from "react/jsx-runtime";
+function Th({ column }) {
+  const style = {};
+  if (column.width) style.width = column.width;
+  if (column.minWidth) style.minWidth = column.minWidth;
+  if (column.maxWidth) style.maxWidth = column.maxWidth;
+  if (column.align) style.textAlign = column.align;
+  return /* @__PURE__ */ jsx("th", { style: Object.keys(style).length > 0 ? style : void 0, children: column.header });
+}
+
+// src/components/thead.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function TableHead({ columns }) {
+  return /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: columns.filter((col) => col.visible !== false).map((col) => /* @__PURE__ */ jsx2(Th, { column: col }, col.id)) }) });
+}
+
+// src/components/td.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function getCellValue(row, column) {
+  const { accessor } = column;
+  if (typeof accessor === "function") {
+    return accessor(row.original);
+  }
+  return row.original[accessor];
+}
+function Td({ row, column }) {
+  const value = getCellValue(row, column);
+  const style = {};
+  if (column.align) style.textAlign = column.align;
+  return /* @__PURE__ */ jsx3("td", { style: Object.keys(style).length > 0 ? style : void 0, children: value != null ? String(value) : "" });
+}
+
+// src/components/tr.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Tr({ row, columns }) {
+  return /* @__PURE__ */ jsx4("tr", { children: columns.filter((col) => col.visible !== false).map((col) => /* @__PURE__ */ jsx4(Td, { row, column: col }, col.id)) });
+}
+
+// src/components/tbody.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function TableBody({ data, columns }) {
+  return /* @__PURE__ */ jsx5("tbody", { children: data.map((row) => /* @__PURE__ */ jsx5(Tr, { row, columns }, row.id)) });
+}
+
+// src/components/table.tsx
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+function Table() {
+  const api = useTrellisContext();
+  return /* @__PURE__ */ jsxs("table", { children: [
+    /* @__PURE__ */ jsx6(TableHead, { columns: api.getState().columns }),
+    /* @__PURE__ */ jsx6(
+      TableBody,
+      {
+        data: api.getState().data,
+        columns: api.getState().columns
+      }
+    )
+  ] });
+}
+
+// src/slots/slot-renderer.tsx
+import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
+function SlotRenderer({
+  name,
+  context,
+  fallback = null
+}) {
+  const api = useTrellisContext();
+  const renderer = api.getSlot(name);
+  if (!renderer) {
+    return /* @__PURE__ */ jsx7(Fragment, { children: fallback });
+  }
+  const content = renderer(context ?? {});
+  if (content !== null && content !== void 0) {
+    return /* @__PURE__ */ jsx7(Fragment, { children: content });
+  }
+  return /* @__PURE__ */ jsx7(Fragment, { children: fallback });
+}
+export {
+  SlotRenderer,
+  Table,
+  TableBody,
+  TableHead,
+  Td,
+  Th,
+  Tr,
+  TrellisContext,
+  useTrellis,
+  useTrellisContext
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.tsx","../src/hooks/use-trellis.ts","../src/components/th.tsx","../src/components/thead.tsx","../src/components/td.tsx","../src/components/tr.tsx","../src/components/tbody.tsx","../src/components/table.tsx","../src/slots/slot-renderer.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { TrellisAPI } from '@trellisjs/core';\n\n/**\n * 在元件間共享 Trellis API 的 Context。\n */\nexport const TrellisContext = createContext<TrellisAPI | null>(null);\n\n/**\n * 從 context 取得 Trellis API 的 hook。\n * 必須在 TrellisContext.Provider 內使用。\n */\nexport function useTrellisContext<T = Record<string, unknown>>(): TrellisAPI<T> {\n  const ctx = useContext(TrellisContext);\n  if (!ctx) {\n    throw new Error('useTrellisContext must be used within a <TrellisProvider>');\n  }\n  return ctx as TrellisAPI<T>;\n}\n","import { useState, useEffect } from 'react';\nimport { Trellis } from '@trellisjs/core';\nimport type { TrellisAPI, TrellisOptions } from '@trellisjs/core';\n\n/**\n * 建立和管理 Trellis 實例的 hook。\n *\n * - 只建立一次實例（useState lazy initializer）。\n * - 狀態變更時觸發重新渲染。\n * - 相容 React StrictMode 雙重掛載。\n */\nexport function useTrellis<T extends Record<string, unknown>>(\n  options: TrellisOptions<T>,\n): { api: TrellisAPI<T> } {\n  // useState initializer 只執行一次，不會被 StrictMode cleanup 重置\n  const [trellis] = useState(() => new Trellis(options));\n  const [, setVersion] = useState(0);\n\n  useEffect(() => {\n    const unsubscribe = trellis.api.subscribe(() => {\n      setVersion((v) => v + 1);\n    });\n\n    return unsubscribe;\n  }, [trellis]);\n\n  return { api: trellis.api };\n}\n","import type { ColumnDef } from '@trellisjs/core';\n\ninterface ThProps<T = Record<string, unknown>> {\n  column: ColumnDef<T>;\n}\n\nexport function Th<T>({ column }: ThProps<T>) {\n  const style: React.CSSProperties = {};\n  if (column.width) style.width = column.width;\n  if (column.minWidth) style.minWidth = column.minWidth;\n  if (column.maxWidth) style.maxWidth = column.maxWidth;\n  if (column.align) style.textAlign = column.align;\n\n  return (\n    <th style={Object.keys(style).length > 0 ? style : undefined}>\n      {column.header}\n    </th>\n  );\n}\n","import type { ColumnDef } from '@trellisjs/core';\nimport { Th } from './th';\n\ninterface TableHeadProps<T = Record<string, unknown>> {\n  columns: ColumnDef<T>[];\n}\n\nexport function TableHead<T>({ columns }: TableHeadProps<T>) {\n  return (\n    <thead>\n      <tr>\n        {columns\n          .filter((col) => col.visible !== false)\n          .map((col) => (\n            <Th key={col.id} column={col} />\n          ))}\n      </tr>\n    </thead>\n  );\n}\n","import type { ColumnDef, DataRow } from '@trellisjs/core';\n\ninterface TdProps<T = Record<string, unknown>> {\n  row: DataRow<T>;\n  column: ColumnDef<T>;\n}\n\nfunction getCellValue<T>(row: DataRow<T>, column: ColumnDef<T>): unknown {\n  const { accessor } = column;\n  if (typeof accessor === 'function') {\n    return accessor(row.original);\n  }\n  return row.original[accessor];\n}\n\nexport function Td<T>({ row, column }: TdProps<T>) {\n  const value = getCellValue(row, column);\n  const style: React.CSSProperties = {};\n  if (column.align) style.textAlign = column.align;\n\n  return (\n    <td style={Object.keys(style).length > 0 ? style : undefined}>\n      {value != null ? String(value) : ''}\n    </td>\n  );\n}\n","import type { ColumnDef, DataRow } from '@trellisjs/core';\nimport { Td } from './td';\n\ninterface TableRowProps<T = Record<string, unknown>> {\n  row: DataRow<T>;\n  columns: ColumnDef<T>[];\n}\n\nexport function Tr<T>({ row, columns }: TableRowProps<T>) {\n  return (\n    <tr>\n      {columns\n        .filter((col) => col.visible !== false)\n        .map((col) => (\n          <Td key={col.id} row={row} column={col} />\n        ))}\n    </tr>\n  );\n}\n","import type { ColumnDef, DataRow } from '@trellisjs/core';\nimport { Tr } from './tr';\n\ninterface TableBodyProps<T = Record<string, unknown>> {\n  data: DataRow<T>[];\n  columns: ColumnDef<T>[];\n}\n\nexport function TableBody<T>({ data, columns }: TableBodyProps<T>) {\n  return (\n    <tbody>\n      {data.map((row) => (\n        <Tr key={row.id} row={row} columns={columns} />\n      ))}\n    </tbody>\n  );\n}\n","import { TableHead } from './thead';\nimport { TableBody } from './tbody';\nimport { useTrellisContext } from '../context';\n\n/**\n * 無頭式 Table 元件。\n * 渲染 <table> 包含 <thead> 和 <tbody>。\n */\nexport function Table() {\n  const api = useTrellisContext();\n\n  return (\n    <table>\n      <TableHead columns={api.getState().columns} />\n      <TableBody\n        data={api.getState().data}\n        columns={api.getState().columns}\n      />\n    </table>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { useTrellisContext } from '../context';\nimport type { SlotContext } from '@trellisjs/core';\n\ninterface SlotRendererProps {\n  /** 要渲染的插槽名稱 */\n  name: string;\n  /** 傳遞給插槽渲染器的 context */\n  context?: SlotContext;\n  /** 插槽未註冊時的備用內容 */\n  fallback?: ReactNode;\n}\n\n/**\n * 從 Trellis 插槽註冊表渲染具名插槽。\n * 若未註冊則使用 `fallback` 屬性或渲染空內容。\n */\nexport function SlotRenderer({\n  name,\n  context,\n  fallback = null,\n}: SlotRendererProps) {\n  const api = useTrellisContext();\n  const renderer = api.getSlot(name);\n\n  if (!renderer) {\n    return <>{fallback}</>;\n  }\n\n  const content = renderer(context ?? {});\n\n  if (content !== null && content !== undefined) {\n    return <>{content}</>;\n  }\n\n  return <>{fallback}</>;\n}\n"],"mappings":"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","names":["jsx","jsx","jsx","jsx","jsx","jsx"]}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@trellisjs/react",
+  "version": "0.1.0-alpha.1",
+  "description": "Trellis 的 React 適配器 — 無頭式資料表格元件",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  },
+  "peerDependencies": {
+    "@trellisjs/core": "workspace:*",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@trellisjs/core": "workspace:*",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "jsdom": "^26.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.1.0"
+  },
+  "license": "MIT",
+  "sideEffects": false
+}