done

examples/src/pages/_app.page.tsx

@@ -10,7 +10,7 @@ function MyApp({ Component, pageProps }: any) {
     <div
       className="__next infinite-dark"
       //@ts-ignore ignore
-      style={{ '--it-row-height': '3rem' }}
+      style={{ '--it-row-height': '3rem', color: 'var(--infinite-cell-color)' }}
     >
       <Component {...pageProps} />
     </div>

examples/src/pages/components/datasource/index.page.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { DataSource, useDataSource } from '@infinite-table/infinite-react';
+import { DataSource, useDataSourceState } from '@infinite-table/infinite-react';
 
 interface Person {
   name: string;
@@ -13,7 +13,7 @@ const persons: Person[] = [
 ];
 
 const Cmp = () => {
-  const ds = useDataSource<Person>();
+  const ds = useDataSourceState<Person>();
 
   const { dataArray, loading } = ds;
   return (

examples/src/pages/tests/dataloader/test-dataclient.page.tsx

@@ -0,0 +1,6 @@
+import { DataClient } from '@infinite-table/infinite-react';
+
+(globalThis as any).DataClient = DataClient;
+export default function () {
+  return <div>hello world</div>;
+}

examples/src/pages/tests/datasource/default.page.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { DataSource, useDataSource } from '@infinite-table/infinite-react';
+import { DataSource, useDataSourceState } from '@infinite-table/infinite-react';
 
 interface Person {
   name: string;
@@ -14,12 +14,12 @@ const persons: Person[] = [
 ];
 
 const Cmp = () => {
-  const ds = useDataSource<Person>();
+  const ds = useDataSourceState<Person>();
 
   const { dataArray, loading } = ds;
 
   return (
-    <div>
+    <div aria-label="container" style={{ color: 'tomato' }}>
       {loading ? 'loading' : null}
       {loading ? null : JSON.stringify(dataArray)}
     </div>

examples/src/pages/tests/datasource/default.spec.ts

@@ -1,20 +1,19 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@testing';
 
 export default test.describe.parallel('DataSource', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(`tests/datasource/default`);
-  });
+  test('should show loading for 2 seconds', async ({ page }) => {
+    await page.load();
+    const container = page.getByLabel('container');
 
-  test.skip('should show loading for 2 seconds', async ({ page }) => {
-    await expect(await page.content()).toContain('loading');
+    await expect(await container.textContent()).toContain('loading');
 
-    await page.waitForTimeout(100);
+    await page.waitForTimeout(20);
 
-    await expect(await page.content()).toContain('loading');
+    await expect(await container.textContent()).toContain('loading');
 
-    await page.waitForTimeout(250);
+    await page.waitForTimeout(200);
 
-    await expect(await page.content()).toContain('bob');
-    await expect(await page.content()).toContain('bill');
+    await expect(await container.textContent()).toContain('bob');
+    await expect(await container.textContent()).toContain('bill');
   });
 });

examples/src/pages/tests/datasource/grouped-ssr.page.tsx

@@ -3,11 +3,11 @@ import * as React from 'react';
 import {
   DataSource,
   DataSourceData,
-  useDataSource,
+  useDataSourceState,
 } from '@infinite-table/infinite-react';
 
 const Cmp = () => {
-  const ds = useDataSource<Developer>();
+  const ds = useDataSourceState<Developer>();
 
   const { dataArray, loading } = ds;
 

examples/src/pages/tests/datasource/loadDataFn.page.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { useDataSourceInternal } from '@src/index';
+
+const sinon = require('sinon');
+
+const data = sinon.spy(() => {
+  return [
+    { name: 'bob', age: 1, id: 1 },
+    { name: 'bill', age: 2, id: 2 },
+  ];
+});
+
+(globalThis as any).dataFn = data;
+export default () => {
+  const { state } = useDataSourceInternal({
+    data,
+    primaryKey: 'id',
+  });
+  (globalThis as any).dataSourceState = state;
+  return <div>hello</div>;
+};

examples/src/pages/tests/datasource/loadDataFn.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect, Page } from '@testing';
+import { getFnCalls } from '../testUtils/getFnCalls';
+
+async function getCalls({ page }: { page: Page }) {
+  return await getFnCalls('dataFn', { page });
+}
+
+export default test.describe.parallel('DataSource data fn', () => {
+  test('should work correctly', async ({ page }) => {
+    await page.load();
+
+    expect((await getCalls({ page })).length).toBe(1);
+  });
+});

examples/src/pages/tests/datasource/sortinfo-controlled.page.tsx

@@ -1,13 +1,13 @@
 import {
   DataSource,
   DataSourceSortInfo,
-  useDataSource,
+  useDataSourceState,
 } from '@infinite-table/infinite-react';
 import * as React from 'react';
 
 import { Person, persons } from './sortPersons';
 const Cmp = () => {
-  const ds = useDataSource<Person>();
+  const ds = useDataSourceState<Person>();
 
   const { dataArray, loading } = ds;
 

examples/src/pages/tests/datasource/useDataSource/default.page.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { useDataSourceInternal } from '@infinite-table/infinite-react';
+
+interface Person {
+  name: string;
+  age: number;
+  id: string | number;
+}
+
+const persons: Person[] = [
+  { name: 'bob', age: 1, id: 1 },
+  { name: 'bill', age: 2, id: 2 },
+];
+
+const personsPromise: Promise<Person[]> = new Promise((resolve) => {
+  setTimeout(() => {
+    resolve(persons);
+  }, 200);
+});
+
+const Cmp = () => {
+  const {
+    state: { loading, dataArray },
+  } = useDataSourceInternal<Person>({
+    data: personsPromise,
+    primaryKey: 'id',
+  });
+
+  return (
+    <div aria-label="container" style={{ color: 'tomato' }}>
+      {loading ? 'loading' : null}
+      {loading ? null : JSON.stringify(dataArray)}
+    </div>
+  );
+};
+
+export default () => <Cmp />;

examples/src/pages/tests/datasource/useDataSource/default.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@testing';
+
+export default test.describe.parallel('useDataSource', () => {
+  test('should show loading for 2 seconds', async ({ page }) => {
+    await page.load();
+    const container = page.getByLabel('container');
+
+    await expect(await container.textContent()).toContain('loading');
+
+    await page.waitForTimeout(20);
+
+    await expect(await container.textContent()).toContain('loading');
+
+    await page.waitForTimeout(200);
+
+    await expect(await container.textContent()).toContain('bob');
+    await expect(await container.textContent()).toContain('bill');
+  });
+});

examples/src/pages/tests/hooks/useComponentState/counter/CounterCmp.tsx

@@ -1,6 +1,6 @@
 import {
-  getComponentStateRoot,
-  useComponentState,
+  buildManagedComponent,
+  useManagedComponentState,
 } from '@src/components/hooks/useComponentState';
 
 import { Ref, useRef } from 'react';
@@ -37,23 +37,24 @@ function forwardProps() {
   };
 }
 
-const CounterComponentStateRoot = getComponentStateRoot({
-  initSetupState,
-  forwardProps,
+const { ManagedComponentContextProvider: CounterComponentStateRoot } =
+  buildManagedComponent({
+    initSetupState,
+    forwardProps,
 
-  //@ts-ignore
-  mapPropsToState: ({ state }: { state: CounterState }) => {
-    return {
-      derivedValue: state.value * 10,
-    };
-  },
-});
+    //@ts-ignore
+    mapPropsToState: ({ state }: { state: CounterState }) => {
+      return {
+        derivedValue: state.value * 10,
+      };
+    },
+  });
 
 (globalThis as any).refs = [];
 const TheActualCounter = React.memo(function TheActualCounter() {
   const renderCountRef = useRef(0);
   const { componentState: state, componentActions: actions } =
-    useComponentState<CounterState>();
+    useManagedComponentState<CounterState>();
 
   console.log(state.ref);
   (globalThis as any).refs.push(state.ref);

examples/src/pages/tests/hooks/useComponentState/loader/LoadingCmp.tsx

@@ -1,6 +1,6 @@
 import {
-  getComponentStateRoot,
-  useComponentState,
+  buildManagedComponent,
+  useManagedComponentState,
 } from '@src/components/hooks/useComponentState';
 
 export type LoadingCmpProps = {
@@ -14,7 +14,7 @@ type LoadingCmpState = {
 };
 export const LoadingBaseCmp = () => {
   const { componentState: state, componentActions: actions } =
-    useComponentState<LoadingCmpState>();
+    useManagedComponentState<LoadingCmpState>();
 
   return (
     <div>
@@ -31,7 +31,7 @@ export const LoadingBaseCmp = () => {
   );
 };
 
-const LoadingRoot = getComponentStateRoot({
+const { ManagedComponentContextProvider: LoadingRoot } = buildManagedComponent({
   forwardProps: () => {
     return {
       loading: (loading) => loading ?? false,

examples/src/pages/tests/hooks/useComponentState/loader/sortInfo/SortInfoCmp.tsx

@@ -3,8 +3,8 @@ import {
   DataSourceSortInfo,
 } from '@infinite-table/infinite-react';
 import {
-  getComponentStateRoot,
-  useComponentState,
+  buildManagedComponent,
+  useManagedComponentState,
 } from '@src/components/hooks/useComponentState';
 
 type Person = {
@@ -28,25 +28,27 @@ function normalizeSortInfo(
   return Array.isArray(sortInfo) ? sortInfo : [sortInfo];
 }
 
-const SortInfoRoot = getComponentStateRoot({
-  forwardProps: () => {
-    return {
-      sortInfo: (sortInfo: DataSourceSortInfo<Person>) =>
-        normalizeSortInfo(
-          sortInfo ?? [
-            {
-              dir: 1,
-              field: 'name',
-            },
-          ],
-        ),
-    };
+const { ManagedComponentContextProvider: SortInfoRoot } = buildManagedComponent(
+  {
+    forwardProps: () => {
+      return {
+        sortInfo: (sortInfo: DataSourceSortInfo<Person>) =>
+          normalizeSortInfo(
+            sortInfo ?? [
+              {
+                dir: 1,
+                field: 'name',
+              },
+            ],
+          ),
+      };
+    },
   },
-});
+);
 
 export const SortInfoComponent = () => {
   const { componentState: state, componentActions: actions } =
-    useComponentState<SortInfoState>();
+    useManagedComponentState<SortInfoState>();
 
   return (
     <div>