@ornery/ui-grid-vanilla 1.0.6 → 1.0.7

package/dist/index.d.mts

@@ -291,6 +291,8 @@ declare class VanillaGridController {
     private labels;
     private visibleColumns;
     private apiRegistered;
+    private disposed;
+    private wasmEngineInitRequested;
     private readonly subscribers;
     readonly gridApi: UiGridApi;
     constructor(options: GridOptions);
@@ -479,6 +481,7 @@ declare class VanillaGridController {
         scrollLeft: number;
     }) | null, restore: ((scrollTop: number, scrollLeft: number) => void) | null): void;
     private refresh;
+    private maybeEnableWasmEngine;
     private emit;
     private findRowById;
     private buildRowsFromData;

package/dist/index.d.ts

@@ -291,6 +291,8 @@ declare class VanillaGridController {
     private labels;
     private visibleColumns;
     private apiRegistered;
+    private disposed;
+    private wasmEngineInitRequested;
     private readonly subscribers;
     readonly gridApi: UiGridApi;
     constructor(options: GridOptions);
@@ -479,6 +481,7 @@ declare class VanillaGridController {
         scrollLeft: number;
     }) | null, restore: ((scrollTop: number, scrollLeft: number) => void) | null): void;
     private refresh;
+    private maybeEnableWasmEngine;
     private emit;
     private findRowById;
     private buildRowsFromData;

package/dist/index.js

@@ -54,6 +54,7 @@ var FrameworkSlotBridge = class {
   constructor(host) {
     this.host = host;
   }
+  host;
   flaggedCells = /* @__PURE__ */ new Set();
   flaggedHeaders = /* @__PURE__ */ new Set();
   flaggedFilters = /* @__PURE__ */ new Set();
@@ -2371,6 +2372,8 @@ var VanillaGridController = class {
   labels;
   visibleColumns = [];
   apiRegistered = false;
+  disposed = false;
+  wasmEngineInitRequested = false;
   subscribers = /* @__PURE__ */ new Set();
   gridApi;
   constructor(options) {
@@ -2579,6 +2582,7 @@ var VanillaGridController = class {
    * subscriptions). */
   disposeLanguageListener = null;
   dispose() {
+    this.disposed = true;
     this.disposeLanguageListener?.();
     this.disposeLanguageListener = null;
     this.subscribers.clear();
@@ -3579,6 +3583,7 @@ var VanillaGridController = class {
     this.saveStateScrollRestore = restore;
   }
   refresh() {
+    this.maybeEnableWasmEngine();
     const orderedColumns = orderVisibleColumns(this.options.columnDefs, this.columnOrder);
     const applyWidthOverrides = (columns) => columns.map((col) => {
       const override = this.columnWidthOverrides[col.name];
@@ -3642,6 +3647,19 @@ var VanillaGridController = class {
     }
     this.emit();
   }
+  maybeEnableWasmEngine() {
+    if (this.wasmEngineInitRequested || (0, import_ui_grid_core5.activeGridEngineBackend)() === "rust-wasm") {
+      return;
+    }
+    this.wasmEngineInitRequested = true;
+    void (0, import_ui_grid_core5.enableUiGridWasmEngine)().then(() => {
+      if (!this.disposed) {
+        this.refresh();
+      }
+    }).catch(() => {
+      this.wasmEngineInitRequested = false;
+    });
+  }
   emit() {
     const snapshot = this.getSnapshot();
     for (const subscriber of this.subscribers) {

package/dist/index.mjs

@@ -27,6 +27,7 @@ var FrameworkSlotBridge = class {
   constructor(host) {
     this.host = host;
   }
+  host;
   flaggedCells = /* @__PURE__ */ new Set();
   flaggedHeaders = /* @__PURE__ */ new Set();
   flaggedFilters = /* @__PURE__ */ new Set();
@@ -2235,6 +2236,7 @@ var IconRegistry = class {
 // src/grid-controller.ts
 import {
   SORT_DIRECTIONS as SORT_DIRECTIONS2,
+  activeGridEngineBackend,
   beginGridCellEditCommand,
   buildGridRows,
   buildGridCellContext,
@@ -2250,6 +2252,7 @@ import {
   defaultGridEngine,
   expandAllGridRowsCommand,
   expandAllGridTreeRowsCommand,
+  enableUiGridWasmEngine,
   findGridRowById as coreFindGridRowById,
   formatGridCellDisplayValue,
   getCellValue as getCellValue3,
@@ -2458,6 +2461,8 @@ var VanillaGridController = class {
   labels;
   visibleColumns = [];
   apiRegistered = false;
+  disposed = false;
+  wasmEngineInitRequested = false;
   subscribers = /* @__PURE__ */ new Set();
   gridApi;
   constructor(options) {
@@ -2666,6 +2671,7 @@ var VanillaGridController = class {
    * subscriptions). */
   disposeLanguageListener = null;
   dispose() {
+    this.disposed = true;
     this.disposeLanguageListener?.();
     this.disposeLanguageListener = null;
     this.subscribers.clear();
@@ -3666,6 +3672,7 @@ var VanillaGridController = class {
     this.saveStateScrollRestore = restore;
   }
   refresh() {
+    this.maybeEnableWasmEngine();
     const orderedColumns = orderVisibleColumns(this.options.columnDefs, this.columnOrder);
     const applyWidthOverrides = (columns) => columns.map((col) => {
       const override = this.columnWidthOverrides[col.name];
@@ -3729,6 +3736,19 @@ var VanillaGridController = class {
     }
     this.emit();
   }
+  maybeEnableWasmEngine() {
+    if (this.wasmEngineInitRequested || activeGridEngineBackend() === "rust-wasm") {
+      return;
+    }
+    this.wasmEngineInitRequested = true;
+    void enableUiGridWasmEngine().then(() => {
+      if (!this.disposed) {
+        this.refresh();
+      }
+    }).catch(() => {
+      this.wasmEngineInitRequested = false;
+    });
+  }
   emit() {
     const snapshot = this.getSnapshot();
     for (const subscriber of this.subscribers) {

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@ornery/ui-grid-vanilla",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Vanilla DOM wrapper for the Rust/WASM-backed @ornery/ui-grid-core custom element",
   "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "main": "dist/index.js",
@@ -13,7 +14,13 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./browser": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/browser/ui-grid-element.js",
+      "default": "./dist/browser/ui-grid-element.js"
+    },
+    "./browser/ui-grid-element.js": "./dist/browser/ui-grid-element.js"
   },
   "dependencies": {
     "@ornery/ui-grid-core": "1.0.6"

package/src/browser.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from 'vitest';
+
+import './browser';
+
+describe('browser entry', () => {
+  it('auto-registers the standalone grid element', () => {
+    expect(customElements.get('ui-grid-element')).toBeDefined();
+  });
+});

package/src/browser.ts

@@ -0,0 +1,8 @@
+export * from './index';
+export { defineStandaloneUiGridElement } from './ui-grid-standalone.element';
+
+import { defineStandaloneUiGridElement } from './ui-grid-standalone.element';
+
+if (typeof window !== 'undefined' && typeof customElements !== 'undefined') {
+  void defineStandaloneUiGridElement();
+}

package/src/grid-controller.ts

@@ -1,5 +1,6 @@
 import {
   SORT_DIRECTIONS,
+  activeGridEngineBackend,
   beginGridCellEditCommand,
   buildGridRows,
   buildGridCellContext,
@@ -15,6 +16,7 @@ import {
   defaultGridEngine,
   expandAllGridRowsCommand,
   expandAllGridTreeRowsCommand,
+  enableUiGridWasmEngine,
   findGridRowById as coreFindGridRowById,
   formatGridCellDisplayValue,
   getCellValue,
@@ -343,6 +345,8 @@ export class VanillaGridController {
   private labels: GridLabels;
   private visibleColumns: GridColumnDef[] = [];
   private apiRegistered = false;
+  private disposed = false;
+  private wasmEngineInitRequested = false;
 
   private readonly subscribers = new Set<GridControllerSubscriber>();
 
@@ -591,6 +595,7 @@ export class VanillaGridController {
    * subscriptions). */
   private disposeLanguageListener: (() => void) | null = null;
   dispose(): void {
+    this.disposed = true;
     this.disposeLanguageListener?.();
     this.disposeLanguageListener = null;
     this.subscribers.clear();
@@ -1811,6 +1816,8 @@ export class VanillaGridController {
   }
 
   private refresh(): void {
+    this.maybeEnableWasmEngine();
+
     const orderedColumns = orderVisibleColumns(this.options.columnDefs, this.columnOrder);
     const applyWidthOverrides = (columns: GridColumnDef[]): GridColumnDef[] =>
       columns.map((col) => {
@@ -1897,6 +1904,23 @@ export class VanillaGridController {
     this.emit();
   }
 
+  private maybeEnableWasmEngine(): void {
+    if (this.wasmEngineInitRequested || activeGridEngineBackend() === 'rust-wasm') {
+      return;
+    }
+
+    this.wasmEngineInitRequested = true;
+    void enableUiGridWasmEngine()
+      .then(() => {
+        if (!this.disposed) {
+          this.refresh();
+        }
+      })
+      .catch(() => {
+        this.wasmEngineInitRequested = false;
+      });
+  }
+
   private emit(): void {
     const snapshot = this.getSnapshot();
     for (const subscriber of this.subscribers) {

package/src/index.integration.test.ts

@@ -4,9 +4,11 @@ import * as core from '@ornery/ui-grid-core';
 import {
   SORT_DIRECTIONS,
   activeGridEngineBackend,
+  buildGridRows,
   clearRustWasmGridEngine,
 } from '@ornery/ui-grid-core';
 import {
+  defineStandaloneUiGridElement,
   mountVanillaUiGrid,
   registerVanillaUiGridRustModule,
   type GridOptions,
@@ -177,8 +179,25 @@ describe('mountVanillaUiGrid integration', () => {
     ]);
   });
 
-  it('does not auto-enable the wasm engine during controller refreshes', () => {
-    const enableSpy = vi.spyOn(core, 'enableUiGridWasmEngine');
+  it('lazy-loads the wasm engine once and refreshes through it when ready', async () => {
+    const enableSpy = vi.spyOn(core, 'enableUiGridWasmEngine').mockImplementation(async () => {
+      core.registerRustWasmGridEngine({
+        buildPipeline(context) {
+          return {
+            visibleRows: buildGridRows(
+              context.options,
+              context.rowSize,
+              context.hiddenRowReasons,
+              context.expandedRows,
+            ),
+            displayItems: [],
+            virtualizationEnabled: false,
+            pipelineMs: 123,
+            totalItems: context.options.data.length,
+          };
+        },
+      });
+    });
 
     const controller = createVanillaGridController({
       id: 'controller-wasm-bootstrap',
@@ -191,14 +210,20 @@ describe('mountVanillaUiGrid integration', () => {
       enableFiltering: true,
     });
 
-    expect(enableSpy).not.toHaveBeenCalled();
-    expect(activeGridEngineBackend()).toBe('typescript');
+    expect(enableSpy).toHaveBeenCalledTimes(1);
+
+    await waitFor(() => {
+      const snapshot = controller.getSnapshot();
+      return activeGridEngineBackend() === 'rust-wasm' && snapshot.pipeline.pipelineMs === 123
+        ? snapshot
+        : null;
+    });
 
     controller.setFilter('name', 'Alpha');
     controller.sortColumn('name', SORT_DIRECTIONS.asc);
 
-    expect(enableSpy).not.toHaveBeenCalled();
-    expect(controller.getSnapshot().pipeline.pipelineMs).not.toBe(123);
+    expect(enableSpy).toHaveBeenCalledTimes(1);
+    expect(controller.getSnapshot().pipeline.pipelineMs).toBe(123);
     enableSpy.mockRestore();
   });
 
@@ -322,4 +347,5 @@ describe('mountVanillaUiGrid integration', () => {
     expect((grid.options.data as Array<{ id: string; name: string }>)[0].name).toBe('Gamma');
     expect(grid.options.minRowsToShow).toBe(20);
   });
+
 });

package/tsup.config.ts

@@ -1,10 +1,25 @@
 import { defineConfig } from 'tsup';
 import { scssInlineEsbuild } from './scss-plugin';
 
-export default defineConfig({
-  entry: ['src/index.ts'],
-  format: ['esm', 'cjs'],
-  dts: true,
-  tsconfig: './tsconfig.json',
-  esbuildPlugins: [scssInlineEsbuild()],
-});
+export default defineConfig([
+  {
+    entry: ['src/index.ts'],
+    format: ['esm', 'cjs'],
+    dts: true,
+    tsconfig: './tsconfig.json',
+    esbuildPlugins: [scssInlineEsbuild()],
+  },
+  {
+    entry: { 'ui-grid-element': 'src/browser.ts' },
+    format: ['esm'],
+    dts: false,
+    splitting: false,
+    platform: 'browser',
+    target: 'es2022',
+    outDir: 'dist/browser',
+    outExtension: () => ({ js: '.js' }),
+    tsconfig: './tsconfig.json',
+    noExternal: ['@ornery/ui-grid-core'],
+    esbuildPlugins: [scssInlineEsbuild()],
+  },
+]);