@revolist/svelte-datagrid 4.21.11 → 4.22.1

package/README.md

@@ -11,6 +11,12 @@
   <img src="https://badgen.net/bundlephobia/tree-shaking/@revolist/revogrid" alt="Tree shaking"/>
   <img src="https://img.shields.io/bundlephobia/min/@revolist/revogrid" alt="Bundle size"/>
   <img src="https://sonarcloud.io/api/project_badges/measure?project=revolist_revogrid&metric=alert_status" alt="Sonar Quality Gate"/>
+  <a href="https://github.com/revolist/revogrid/actions/workflows/unit.yml">
+        <img src="https://github.com/revolist/revogrid/actions/workflows/unit.yml/badge.svg" alt="Workflow status badge" loading="lazy" height="20">
+  </a>
+  <a href="https://github.com/revolist/revogrid/actions/workflows/e2e.yml">
+        <img src="https://github.com/revolist/revogrid/actions/workflows/e2e.yml/badge.svg" alt="Workflow status badge" loading="lazy" height="20">
+  </a>
 </p>
 
 
@@ -18,6 +24,9 @@
 <p align="center">
 Support Millions of cells and thousands of columns easy and efficiently for fast data rendering. Easy to use.
 </p>
+<p align="center">
+Used by some of the largest companies in Europe and the United States.
+</p>
 
 <p align="center">
   <a href="https://rv-grid.com/demo/">Demo and API</a> •
@@ -39,6 +48,8 @@ Support Millions of cells and thousands of columns easy and efficiently for fast
 
 - **[Accessibility](https://rv-grid.com/guide/wcag)**: Follows WAI-ARIA best practices.
 
+- **[RTL Support](https://rv-grid.com/guide/rtl)**: Comprehensive Right-to-Left language support for Arabic, Hebrew, Persian, and other RTL languages. Features automatic column reordering, proper text alignment, and layout adjustments for RTL interfaces.
+
 - **[Keyboard Support](https://rv-grid.com/guide/defs#Keyboard)**:
   - Excel-like focus for efficient navigation and editing.
   - Seamless copy/paste from Excel, Google Sheets, or any other sheet format.
@@ -116,6 +127,8 @@ Support Millions of cells and thousands of columns easy and efficiently for fast
   - Nested grids: Build a grid inside a grid, showcasing advanced editing options and user interactions for a more dynamic data presentation.
   - Context Menu: Build context menus for any grid element - from cells to headers. Cut, copy, paste, add rows, modify columns, and more. Fully customizable with your own actions and behaviors.
 
+- **[AI Agents and MCP](https://rv-grid.com/guide/mcp)**: Connect Codex, Cursor, Claude Code, and VS Code to version-aware RevoGrid docs, examples, migrations, feature availability, and typed API context.
+
 
 > ⚠️ **Note**: Repository Notice: This repo is read-only. Create new issues at the [revogrid repo](https://github.com/revolist/revogrid)
 
@@ -143,18 +156,32 @@ yarn add @revolist/svelte-datagrid;
 ```svelte
 // App.svelte
 <script lang="ts">
-    import { RevoGrid, type ColumnRegular } from '@revolist/svelte-datagrid';
-    const source = [
+  import {
+    Editor,
+    RevoGrid,
+    Template,
+    type ColumnRegular,
+    type Editors,
+  } from '@revolist/svelte-datagrid';
+  import OperationCell from './OperationCell.svelte';
+  import OperationEditor from './OperationEditor.svelte';
+
+  const OPERATION_EDITOR = 'operation';
+
+  const source = [
     {
       name: '1',
       details: 'Item 1',
+      operation: 'Edit',
     },
     {
       name: '2',
       details: 'Item 2',
+      operation: 'Edit',
     },
   ];
-    const columns: ColumnRegular[] = [
+
+  const columns: ColumnRegular[] = [
     {
       prop: 'name',
       name: 'First',
@@ -166,14 +193,28 @@ yarn add @revolist/svelte-datagrid;
       prop: 'details',
       name: 'Second',
     },
+    {
+      prop: 'operation',
+      name: 'Operation',
+      cellTemplate: Template(OperationCell),
+      editor: OPERATION_EDITOR,
+    },
   ];
+
+  const editors: Editors = {
+    [OPERATION_EDITOR]: Editor(OperationEditor),
+  };
 </script>
 
 <main>
-	<RevoGrid {source} {columns}></RevoGrid>
+  <RevoGrid {source} {columns} {editors}></RevoGrid>
 </main>
 ```
 
+`Template(Component)` is the explicit Svelte component bridge for `cellTemplate`.
+Native RevoGrid templates like `cellTemplate(h, props)` still work unchanged.
+Use `Editor(Component)` to register Svelte components as custom editors.
+
 
 [Example and guide](https://rv-grid.com/guide/svelte/)
 
@@ -249,6 +290,29 @@ If you or your company would like to support the ongoing development of RevoGrid
 Thank you for supporting RevoGrid! 🙏
 
 
+## Testing
+
+[![Unit Tests](https://github.com/revolist/revogrid/actions/workflows/ci-unit.yml/badge.svg?branch=main)](https://github.com/revolist/revogrid/actions/workflows/ci-unit.yml)
+[![E2E Tests](https://github.com/revolist/revogrid/actions/workflows/ci-e2e.yml/badge.svg?branch=main)](https://github.com/revolist/revogrid/actions/workflows/ci-e2e.yml)
+
+RevoGrid is thoroughly tested to ensure reliability and stability.
+
+| Suite | Command | Scope |
+|---|---|---|
+| Unit | `npm run test` | Services, utilities, pure logic |
+| E2E (Playwright) | `npm run test:e2e` | Real browser rendering & interaction |
+
+### E2E Tests
+
+End-to-end tests use [@stencil/playwright](https://www.npmjs.com/package/@stencil/playwright) to run `<revo-grid>` in a real Chromium browser. The dev server starts automatically when you run:
+
+```bash
+npm run test:e2e
+```
+
+Test files live in `e2e/` and share helpers from `e2e/helpers.ts`:
+
+
 ## Contributing
 
 By getting involved, you'll have the opportunity to enhance your skills, gain valuable experience, and make a significant impact on an innovative project. Your contribution, no matter how big or small, is valuable.

package/dist/lib/components/RevoGrid.d.ts

@@ -0,0 +1 @@
+export default function RevoGrid($$anchor: any, $$props: any): any;

package/dist/lib/editor.adapter.d.ts

@@ -0,0 +1,26 @@
+import { ColumnDataSchemaModel, EditCell, EditorBase, HyperFunc, VNode } from '@revolist/revogrid';
+import { Component } from 'svelte';
+import { SvelteElement } from './renderer';
+export type EditorType = Partial<EditCell> & {
+    column: ColumnDataSchemaModel;
+    save: (value: any, preventFocus?: boolean) => void;
+    close: (focusNext?: boolean) => void;
+    [key: string]: any;
+};
+export declare class SvelteEditorAdapter implements EditorBase {
+    private EditorComponent;
+    column: ColumnDataSchemaModel;
+    private save;
+    private close;
+    element: SvelteElement | null;
+    editCell?: EditCell;
+    private renderedComponent;
+    constructor(EditorComponent: Component<EditorType>, column: ColumnDataSchemaModel, save: (value: any, preventFocus?: boolean) => void, close: (focusNext?: boolean) => void);
+    beforeUpdate(): void;
+    beforeDisconnect(): void;
+    beforeAutoSave(value?: any): any;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    getValue(): any;
+    render(h: HyperFunc<VNode>): VNode;
+}

package/dist/lib/editor.d.ts

@@ -0,0 +1,8 @@
+import { EditorCtr } from '@revolist/revogrid';
+import { Component } from 'svelte';
+import { EditorType } from './editor.adapter';
+export { SvelteEditorAdapter, type EditorType } from './editor.adapter';
+/**
+ * Create an editor constructor from a Svelte component.
+ */
+export declare const Editor: (EditorComponent: Component<EditorType>) => EditorCtr;

package/dist/lib/index.d.ts

@@ -0,0 +1,5 @@
+export type * from '@revolist/revogrid';
+export * from '@revolist/revogrid/loader';
+export * from './revogrid';
+export { Template, SvelteTemplateConstructor, type RenderedComponent, type SvelteCellProps, type SvelteElement, } from './renderer';
+export { Editor, type EditorType, SvelteEditorAdapter } from './editor';

package/dist/lib/reactive-props.svelte.d.ts

@@ -0,0 +1,5 @@
+export type ReactiveProps<T extends Record<string, any>> = {
+    props: T;
+    update: (nextProps: T) => void;
+};
+export declare function createReactiveProps<T extends Record<string, any>>(initialProps: T): ReactiveProps<T>;

package/dist/lib/renderer.d.ts

@@ -0,0 +1,22 @@
+import { CellTemplateProp, ColumnDataSchemaModel, ColumnTemplateProp, HyperFunc, VNode } from '@revolist/revogrid';
+import { Component } from 'svelte';
+import { ReactiveProps } from './reactive-props.svelte';
+export type SvelteCellProps = CellTemplateProp & {
+    addition?: any;
+    [key: string]: any;
+};
+export interface SvelteElement extends HTMLElement {
+    _svelteTemplate?: RenderedComponent<any>;
+}
+export interface RenderedComponent<T extends Record<string, any>> {
+    component: Component<T>;
+    instance: Record<string, any>;
+    props: ReactiveProps<T>;
+    update: (newProps: T) => void;
+    destroy: () => void;
+}
+export declare function SvelteTemplateConstructor<T extends Record<string, any>>(el: SvelteElement | null, SvelteComponent: Component<T>, initialProps: T, lastEl?: RenderedComponent<T> | null, context?: Map<any, any> | undefined): RenderedComponent<T> | null;
+/**
+ * Render a Svelte component in a RevoGrid column cell template.
+ */
+export declare const Template: <TProps extends Record<string, any> = SvelteCellProps>(SvelteComponent: Component<TProps>, customProps?: Partial<TProps>) => (h: HyperFunc<VNode>, p: ColumnDataSchemaModel | ColumnTemplateProp | CellTemplateProp, addition?: any) => VNode;

package/dist/lib/revogrid.d.ts

@@ -0,0 +1,2 @@
+import { default as RevoGrid } from './components/RevoGrid';
+export { RevoGrid };

package/dist/lib/svelte/index.d.ts

@@ -0,0 +1,2 @@
+import { default as RevoGrid } from './RevoGrid.svelte';
+export { RevoGrid };