feat: implement plugin architecture for table features

Author: geodask

.changeset/eleven-facts-repeat.md

@@ -0,0 +1,20 @@
+---
+'svelte-reactive-table': minor
+---
+
+feat: implement plugin architecture for table features
+
+This update redesigns how table features work by introducing a standardized plugin system. Features like pagination, sorting, and column visibility are now implemented as plugins with a consistent interface.
+
+Improvements include:
+
+- New plugin system with `table.use(plugin)` method
+- Enhanced pagination state with `hasNextPage`, `hasPreviousPage`, `isFirstPage`, `isLastPage`, and `pageItemRange`
+- Better TypeScript types for improved type safety
+- Standardized plugin lifecycle with init and cleanup methods
+
+BREAKING CHANGES:
+
+- Plugins must now be attached to tables using `table.use(plugin)`
+- Plugin state is accessed through `table.plugins.[pluginId].state`
+- Navigation methods are now renamed to `goToNextPage`, `goToPreviousPage`, `goToFirstPage`, `goToLastPage`

eslint.config.js

@@ -26,7 +26,9 @@ export default ts.config(
 		languageOptions: {
 			parserOptions: {
 				projectService: true,
-				extraFileExtensions: ['.svelte']
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig: './**/svelte.config.js'
 			}
 		}
 	},
@@ -39,4 +41,4 @@ export default ts.config(
 			}
 		}
 	}
-);
+);

package.json

@@ -3,6 +3,7 @@
 	"version": "1.0.0",
 	"description": "Monorepo for svelte-reactive-table",
 	"main": "index.js",
+	"type": "module",
 	"private": true,
 	"scripts": {
 		"ci:publish": "turbo run build --filter=svelte-reactive-table && changeset publish",

packages/svelte-reactive-table/src/lib/core/index.ts

@@ -1,12 +1,2 @@
 export { reactiveTable } from './table.svelte.js';
-export type {
-	ReactiveTable,
-	ColumnDef,
-	Column,
-	Cell,
-	Row,
-	TableOptions,
-	ReactiveTableBase,
-	PaginationFeature,
-	ColumnVisibilityFeature
-} from './table.svelte.js';
+export * from './types/index.js';

packages/svelte-reactive-table/src/lib/core/table.svelte.spec.ts

@@ -1,8 +1,8 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { reactivePagination } from '../features/pagination/index.js';
+import { reactivePagination } from '../plugins/pagination/index.js';
 import { reactiveTable, type ColumnDef, type ReactiveTable } from './index.js';
-import { reactiveColumnVisibility } from '../features/column-visibility/index.js';
-import { reactiveSorting } from '$lib/features/sorting/sorting.svelte.js';
+import { reactiveColumnVisibility } from '../plugins/column-visibility/index.js';
+import { reactiveSorting } from '$lib/plugins/sorting/sorting.svelte.js';
 
 type Person = {
 	id: number;
@@ -212,38 +212,36 @@ describe('reactiveTable', () => {
 	});
 
 	it('should add pagination feature when option is provided', () => {
-		const tableWithPagination = reactiveTable(sampleData, columns, {
-			pagination: reactivePagination({ pageSize: 2 })
-		});
+		const tableWithPagination = reactiveTable(sampleData, columns).use(
+			reactivePagination({ pageSize: 2 })
+		);
 
-		expect(tableWithPagination.pagination).toBeDefined();
-		expect(tableWithPagination.pagination.pageSize).toBe(2);
-		expect(tableWithPagination.pagination.pageCount).toBe(2);
+		expect(tableWithPagination.plugins.pagination).toBeDefined();
+		expect(tableWithPagination.plugins.pagination.pageSize).toBe(2);
+		expect(tableWithPagination.plugins.pagination.pageCount).toBe(2);
 		expect(tableWithPagination.rows).toHaveLength(2); // First 2 rows
 	});
 
 	it('should add column visibility feature when option is provided', () => {
-		const tableWithColumnVisvibility = reactiveTable(sampleData, columns, {
-			columnVisibility: reactiveColumnVisibility({
-				hiddenColumns: ['age']
-			})
-		});
+		const tableWithColumnVisvibility = reactiveTable(sampleData, columns).use(
+			reactiveColumnVisibility({ hiddenColumns: ['age'] })
+		);
 
-		expect(tableWithColumnVisvibility.columnVisibility).toBeDefined();
-		expect(tableWithColumnVisvibility.columnVisibility.hiddenColumns).toEqual(['age']);
+		expect(tableWithColumnVisvibility.plugins.columnVisibility).toBeDefined();
+		expect(tableWithColumnVisvibility.plugins.columnVisibility.hiddenColumns).toEqual(['age']);
 		expect(tableWithColumnVisvibility.columns).toHaveLength(3);
 	});
 
 	it('should add sorting feature when option is provided', () => {
-		const tableWithSorting = reactiveTable(sampleData, columns, {
-			sorting: reactiveSorting({
+		const tableWithSorting = reactiveTable(sampleData, columns).use(
+			reactiveSorting({
 				columnSortings: [{ key: 'name', direction: 'asc' }]
 			})
-		});
+		);
 
-		expect(tableWithSorting.sorting).toBeDefined();
-		expect(tableWithSorting.sorting.columnSortings).toHaveLength(1);
-		expect(tableWithSorting.sorting.columnSortings[0].key).toBe('name');
-		expect(tableWithSorting.sorting.columnSortings[0].direction).toBe('asc');
+		expect(tableWithSorting.plugins.sorting).toBeDefined();
+		expect(tableWithSorting.plugins.sorting.columnSortings).toHaveLength(1);
+		expect(tableWithSorting.plugins.sorting.columnSortings[0].key).toBe('name');
+		expect(tableWithSorting.plugins.sorting.columnSortings[0].direction).toBe('asc');
 	});
 });