@iyulab/flex-table 0.63.0 → 0.64.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.64.0] - 2026-10-08
+
+### Added
+
+- **`useODataSource` and `useArraySource` return `source`** — the source the hook binds, the same object every render.
+  A React screen hands it to a list skeleton that binds its views itself (`<ListPage source={orders.source}>`,
+  `bindSource(orders.source, el)`) and keeps its options as props, instead of building the source with `useMemo`,
+  reading it with `useSyncExternalStore` and calling `update` from an effect. `useArraySource`'s `source` reads the
+  hook's state and notifies its subscribers after each commit.
+
 ## [0.63.0] - 2026-10-08
 
 ### Added

package/README.md

@@ -911,6 +911,7 @@ The hook returns:
 | `search` / `setSearch` | Current search term and its setter (resets to page 0) |
 | `refresh` | Re-run the current request |
 | `fetchAll` | The whole result of the current conditions — the source's `fetchAll` (below), for exporting what the list shows |
+| `source` | The source the hook binds (the same object every render) — hand it to a list skeleton that binds views itself: `<ListPage source={orders.source}>` (`@iyulab/enterprise/react`) or `bindSource(orders.source, element)`. `useArraySource` returns one too, over its own state |
 
 #### Search semantics
 

package/dist/array/types.d.ts

@@ -1,6 +1,7 @@
 import type { SortCriteria } from '../core/sorting.js';
 import type { SourceError } from '../core/source-error.js';
 import type { FetchAllOptions } from '../core/fetch-all.js';
+import type { ArraySource } from './source.js';
 export interface UseArraySourceOptions<T> {
     /** 페이지당 행 수. `useODataSource`와 동일 기본값. */
     pageSize?: number;
@@ -30,7 +31,11 @@ export interface UseArraySourceOptions<T> {
      */
     searchFields?: (row: T) => Array<string | number | boolean | null | undefined>;
 }
+/** `useArraySource` 의 `source` — 목록 골격(`ListPage` · `bindSource`)에 넘기는 소스. 이 훅의 상태를 읽고 조작은 훅으로 간다. */
+export type HookArraySource<T> = Omit<ArraySource<T>, 'update'>;
 export interface UseArraySourceResult<T> {
+    /** 이 훅의 상태를 소스 모양으로 — `<ListPage source={orders.source}>` · `bindSource(orders.source, el)`. 늘 같은 객체다. */
+    source: HookArraySource<T>;
     /** 현재 페이지의 행(검색+정렬 적용 후 slice). */
     data: T[];
     /** 검색+정렬 적용 후, 페이지 나누기 전의 총 건수(`useODataSource`의 `@odata.count`와 동일 의미). */

package/dist/odata/types.d.ts

@@ -1,9 +1,11 @@
 import type { SortCriteria } from '../core/sorting.js';
-import type { ODataSourceOptions, ODataSourceState } from './source.js';
+import type { ODataSource, ODataSourceOptions, ODataSourceState } from './source.js';
 import type { FetchAllOptions } from '../core/fetch-all.js';
 /** `useODataSource` 의 옵션 — 프레임워크 중립 소스(`createODataSource`)의 설정과 같다. `initial*` 은 첫 렌더에서만 읽힌다. */
 export type UseODataSourceOptions = ODataSourceOptions;
 export interface UseODataSourceResult<T> extends ODataSourceState<T> {
+    /** 이 훅이 묶은 소스 — 목록 골격(`<ListPage source={orders.source}>` · `bindSource`)에 넘긴다. 늘 같은 객체다. */
+    source: ODataSource<T>;
     setPage: (page: number) => void;
     /** 페이지 크기를 바꾸고 첫 장으로 간다. */
     setPageSize: (size: number) => void;

package/dist/react.js

@@ -2,20 +2,21 @@ import { t as e } from "./flex-table-BufHlQ2v.js";
 import { n as t, r as n, u as r } from "./fetch-all-DkdNzWrF.js";
 import { t as i } from "./source-dm6qXFh1.js";
 import { n as a, t as o } from "./view-DuDIMoXV.js";
-import s, { useCallback as c, useEffect as l, useMemo as u, useState as d, useSyncExternalStore as f } from "react";
-import { createComponent as p } from "@lit/react";
+import s, { useCallback as c, useEffect as l, useLayoutEffect as u, useMemo as d, useRef as f, useState as p, useSyncExternalStore as m } from "react";
+import { createComponent as h } from "@lit/react";
 //#region src/odata/use-odata-source.ts
-function m(e, t = {}) {
-	let [n] = d(() => i(e, t));
+function g(e, t = {}) {
+	let [n] = p(() => i(e, t));
 	l(() => {
 		n.update(e, t);
 	});
-	let r = f(n.subscribe, n.getState, n.getState), a = c((e) => {
+	let r = m(n.subscribe, n.getState, n.getState), a = c((e) => {
 		let t = e.detail?.criteria;
 		t && n.setSort(t);
 	}, [n]);
 	return {
 		...r,
+		source: n,
 		setPage: n.setPage,
 		setPageSize: n.setPageSize,
 		onSortChange: a,
@@ -26,66 +27,107 @@ function m(e, t = {}) {
 }
 //#endregion
 //#region src/array/use-array-source.ts
-function h(e, t = {}) {
-	let { pageSize: n = 20, defaultOrderBy: i, initialPage: s = 0, initialSearch: l = "", initialSort: f, columns: p, searchFields: m } = t, h = r({
+function _(e, t = {}) {
+	let { pageSize: n = 20, defaultOrderBy: i, initialPage: s = 0, initialSearch: l = "", initialSort: m, columns: h, searchFields: g } = t, _ = r({
 		defaultOrderBy: i,
 		initialPage: s,
 		initialSearch: l,
-		initialSort: f
-	}), [g, _] = d(h.page), [v, y] = d(h.sortCriteria), [b, x] = d(h.search), [S, C] = d(n), [w, T] = d(n);
-	n !== w && (T(n), C(n), _(0));
-	let E = c((e) => {
-		C(e), _(0);
-	}, []), D = c((e) => {
-		x(e), _(0);
-	}, []), O = c((e) => {
+		initialSort: m
+	}), [v, y] = p(_.page), [b, x] = p(_.sortCriteria), [S, C] = p(_.search), [w, T] = p(n), [E, D] = p(n);
+	n !== E && (D(n), T(n), y(0));
+	let O = c((e) => {
+		T(e), y(0);
+	}, []), k = c((e) => {
+		C(e), y(0);
+	}, []), A = c((e) => {
 		let t = e.detail?.criteria;
-		t && (y(t), _(0));
-	}, []), k = c(() => {}, []), A = c((t) => a(e, {
-		search: b,
-		sortCriteria: v,
-		columns: p,
-		searchFields: m
+		t && (x(t), y(0));
+	}, []), j = c(() => {}, []), M = c((t) => a(e, {
+		search: S,
+		sortCriteria: b,
+		columns: h,
+		searchFields: g
 	}, t), [
 		e,
+		S,
 		b,
-		v,
-		p,
-		m
-	]), { data: j, totalCount: M } = u(() => o(e, {
-		search: b,
-		sortCriteria: v,
-		page: g,
-		pageSize: S,
-		columns: p,
-		searchFields: m
+		h,
+		g
+	]), { data: N, totalCount: P } = d(() => o(e, {
+		search: S,
+		sortCriteria: b,
+		page: v,
+		pageSize: w,
+		columns: h,
+		searchFields: g
 	}), [
 		e,
+		S,
 		b,
 		v,
-		g,
-		S,
-		p,
-		m
-	]), N = M === 0 ? 0 : Math.ceil(M / S) - 1;
-	return g > N && _(N), {
-		data: j,
-		totalCount: M,
+		w,
+		h,
+		g
+	]), F = P === 0 ? 0 : Math.ceil(P / w) - 1;
+	v > F && y(F);
+	let I = d(() => ({
+		data: N,
+		totalCount: P,
+		loading: !1,
+		error: null,
+		page: v,
+		pageSize: w,
+		sortCriteria: b,
+		search: S
+	}), [
+		N,
+		P,
+		v,
+		w,
+		b,
+		S
+	]), L = f(I), R = f(M), z = f(/* @__PURE__ */ new Set());
+	u(() => {
+		if (R.current = M, L.current !== I) {
+			L.current = I;
+			for (let e of [...z.current]) e();
+		}
+	}, [I, M]);
+	let [B] = p(() => ({
+		getState: () => L.current,
+		subscribe(e) {
+			return z.current.add(e), () => {
+				z.current.delete(e);
+			};
+		},
+		setPage: y,
+		setPageSize: O,
+		setSort(e) {
+			x(e), y(0);
+		},
+		setSearch: k,
+		refresh: j,
+		fetchAll: (e) => R.current(e)
+	}));
+	return {
+		source: B,
+		data: N,
+		totalCount: P,
 		loading: !1,
 		error: null,
-		page: g,
-		setPage: _,
-		pageSize: S,
-		setPageSize: E,
-		sortCriteria: v,
-		onSortChange: O,
-		search: b,
-		setSearch: D,
-		refresh: k,
-		fetchAll: A
+		page: v,
+		setPage: y,
+		pageSize: w,
+		setPageSize: O,
+		sortCriteria: b,
+		onSortChange: A,
+		search: S,
+		setSearch: k,
+		refresh: j,
+		fetchAll: M
 	};
 }
-var g = p({
+var v = h({
 	tagName: "flex-table",
 	elementClass: e,
 	react: s,
@@ -124,4 +166,4 @@ var g = p({
 	}
 });
 //#endregion
-export { g as FlexTableReact, t as RowLimitError, n as SourceRequestError, h as useArraySource, m as useODataSource };
+export { v as FlexTableReact, t as RowLimitError, n as SourceRequestError, _ as useArraySource, g as useODataSource };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.63.0",
+  "version": "0.64.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",
@@ -89,8 +89,8 @@
   "devDependencies": {
     "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.7",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@typescript-eslint/eslint-plugin": "^8.64.0",
     "@typescript-eslint/parser": "^8.64.0",
     "@vitest/browser-playwright": "^5.0.0",