ghiscoding · ghiscoding · May 22, 2025 · May 3, 2025 · May 10, 2025 · May 16, 2025
diff --git a/package.json b/package.json
@@ -41,10 +41,10 @@
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.3.0",
-    "@aurelia/fetch-client": "^2.0.0-beta.23",
-    "@aurelia/i18n": "^2.0.0-beta.23",
-    "@aurelia/platform": "^2.0.0-beta.23",
-    "@aurelia/platform-browser": "^2.0.0-beta.23",
+    "@aurelia/fetch-client": "^2.0.0-beta.24",
+    "@aurelia/i18n": "^2.0.0-beta.24",
+    "@aurelia/platform": "^2.0.0-beta.24",
+    "@aurelia/platform-browser": "^2.0.0-beta.24",
     "@formkit/tempo": "^0.1.2",
     "@jest/types": "^29.6.3",
     "@lerna-lite/cli": "^4.0.0",

diff --git a/packages/aurelia-slickgrid/package.json b/packages/aurelia-slickgrid/package.json
@@ -46,12 +46,12 @@
     "pack": "npm pack"
   },
   "peerDependencies": {
-    "aurelia": "^2.0.0-beta.23"
+    "aurelia": "^2.0.0-beta.24"
   },
   "dependencies": {
-    "@aurelia/i18n": "^2.0.0-beta.23",
-    "@aurelia/runtime": "^2.0.0-beta.23",
-    "@aurelia/runtime-html": "^2.0.0-beta.23",
+    "@aurelia/i18n": "^2.0.0-beta.24",
+    "@aurelia/runtime": "^2.0.0-beta.24",
+    "@aurelia/runtime-html": "^2.0.0-beta.24",
     "@formkit/tempo": "^0.1.2",
     "@slickgrid-universal/common": "~5.14.0",
     "@slickgrid-universal/custom-footer-component": "~5.14.0",

diff --git a/packages/aurelia-slickgrid/src/custom-elements/aurelia-slickgrid.ts b/packages/aurelia-slickgrid/src/custom-elements/aurelia-slickgrid.ts
@@ -125,6 +125,7 @@ export class AureliaSlickgridCustomElement {
   extensionUtility: ExtensionUtility;
   filterFactory!: FilterFactory;
   filterService: FilterService;
+  gridContainer!: HTMLDivElement;
   gridEventService: GridEventService;
   gridService: GridService;
   gridStateService: GridStateService;
@@ -135,7 +136,6 @@ export class AureliaSlickgridCustomElement {
   sharedService: SharedService;
   sortService: SortService;
   treeDataService: TreeDataService;
-  gridContainer!: HTMLDivElement;
 
   @bindable({ mode: BindingMode.twoWay }) columnDefinitions: Column[] = [];
   @bindable({ mode: BindingMode.twoWay }) element!: Element;
@@ -358,8 +358,7 @@ export class AureliaSlickgridCustomElement {
     }
 
     // build SlickGrid Grid, also user might optionally pass a custom dataview (e.g. remote model)
-    this.grid = new SlickGrid(this.gridContainer, this.customDataView || this.dataview, this._columnDefinitions, this.gridOptions, this._eventPubSubService);
-    this.sharedService.dataView = this.dataview;
+    this.grid = new SlickGrid(this.gridContainer, this.customDataView || this.dataview, this._columnDefinitions, this.gridOptions, this._eventPubSubService); this.sharedService.dataView = this.dataview;
     this.sharedService.slickGrid = this.grid;
     this.sharedService.gridContainerElement = this.elm as HTMLDivElement;
     if (this.groupItemMetadataProvider) {

diff --git a/packages/aurelia-slickgrid/src/extensions/slickRowDetailView.ts b/packages/aurelia-slickgrid/src/extensions/slickRowDetailView.ts
@@ -14,17 +14,12 @@ import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-un
 import type { ICustomElementController } from '@aurelia/runtime-html';
 import { type Constructable, resolve, transient } from 'aurelia';
 
-import type { AureliaViewOutput, GridOption, RowDetailView, ViewModelBindableInputData } from '../models/index';
+import type { CreatedView, GridOption, RowDetailView, ViewModelBindableInputData } from '../models/index';
 import { AureliaUtilService } from '../services/aureliaUtil.service';
 
 const ROW_DETAIL_CONTAINER_PREFIX = 'container_';
 const PRELOAD_CONTAINER_PREFIX = 'container_loading';
 
-export interface CreatedView extends AureliaViewOutput {
-  id: string | number;
-  dataContext: any;
-}
-
 @transient()
 export class SlickRowDetailView extends UniversalSlickRowDetailView {
   protected _preloadViewModel?: Constructable;

diff --git a/packages/aurelia-slickgrid/src/index.ts b/packages/aurelia-slickgrid/src/index.ts
@@ -23,6 +23,7 @@ export { AureliaSlickgridCustomElement } from './custom-elements/aurelia-slickgr
 import type {
   AureliaGridInstance,
   AureliaViewOutput,
+  CreatedView,
   GridOption,
   RowDetailView,
   ViewModelBindableData,
@@ -33,6 +34,7 @@ import type {
 export {
   type AureliaGridInstance,
   type AureliaViewOutput,
+  type CreatedView,
   type GridOption,
   type RowDetailView,
   type ViewModelBindableData,
@@ -46,4 +48,4 @@ export {
   TranslaterService,
   disposeAllSubscriptions
 } from './services/index';
-export { SlickRowDetailView } from './extensions/slickRowDetailView'
+export { SlickRowDetailView } from './extensions/slickRowDetailView';
diff --git a/packages/aurelia-slickgrid/src/models/aureliaViewOutput.interface.ts b/packages/aurelia-slickgrid/src/models/aureliaViewOutput.interface.ts
@@ -1,5 +1,6 @@
-import type { ICustomElementController } from '@aurelia/runtime-html';
+import type { IAppRoot, ICustomElementController } from '@aurelia/runtime-html';
 
 export interface AureliaViewOutput {
+  root?: IAppRoot<object>;
   controller?: ICustomElementController<any>;
 }
diff --git a/packages/aurelia-slickgrid/src/models/rowDetailView.interface.ts b/packages/aurelia-slickgrid/src/models/rowDetailView.interface.ts
@@ -1,5 +1,6 @@
 import type { RowDetailView as UniversalRowDetailView } from '@slickgrid-universal/common';
 import type { Constructable } from 'aurelia';
+import type { AureliaViewOutput } from './aureliaViewOutput.interface';
 
 export interface RowDetailView extends UniversalRowDetailView {
   /**
@@ -14,3 +15,8 @@ export interface RowDetailView extends UniversalRowDetailView {
   /** View Model template that will be loaded once the async function finishes */
   viewModel?: Constructable;
 }
+
+export interface CreatedView extends AureliaViewOutput {
+  id: string | number;
+  dataContext: any;
+}
diff --git a/packages/aurelia-slickgrid/src/services/aureliaUtil.service.ts b/packages/aurelia-slickgrid/src/services/aureliaUtil.service.ts
@@ -1,21 +1,22 @@
-import { AppTask, type Constructable, CustomElement, IAurelia, resolve, singleton } from 'aurelia';
+import { AppTask, type Constructable, CustomElement, type IAppRoot, IAurelia, resolve, singleton } from 'aurelia';
 
-import type { AureliaViewOutput, ViewModelBindableInputData } from '../models/index';
+import type { ViewModelBindableInputData } from '../models/index';
 
 @singleton()
 export class AureliaUtilService {
   constructor(private readonly au: IAurelia = resolve(IAurelia)) { }
 
-  async createAureliaViewModelAddToSlot(viewModel: Constructable, bindableData?: ViewModelBindableInputData, targetElement?: HTMLElement): Promise<AureliaViewOutput | null> {
+  async createAureliaViewModelAddToSlot(viewModel: Constructable, bindableData?: ViewModelBindableInputData, targetElement?: HTMLElement): Promise<IAppRoot | null> {
     if (targetElement) {
       const def = CustomElement.getDefinition(viewModel);
       const addonBindable = bindableData?.addon ? 'addon.bind="bindableData.addon"' : '';
       const gridBindable = bindableData?.grid ? 'grid.bind="bindableData.grid"' : '';
       const dataViewBindable = bindableData?.dataView ? 'data-view.bind="bindableData.dataView"' : '';
       const parentBindable = bindableData?.parent ? 'parent.bind="bindableData.parent"' : '';
-  
+
       targetElement.innerHTML = `<${def.name} model.bind="bindableData.model" ${addonBindable} ${gridBindable} ${dataViewBindable} ${parentBindable}></${def.name}>`.trim();
-
+      delete (targetElement as any)['$au']?.['au:resource:custom-element'];
+
       return await this.au.enhance({
         host: targetElement,
         component: { bindableData },

diff --git a/packages/aurelia-slickgrid/src/services/translater.service.ts b/packages/aurelia-slickgrid/src/services/translater.service.ts
@@ -1,13 +1,14 @@
 import type { TranslaterService as UniversalTranslateService } from '@slickgrid-universal/common';
 import { I18N } from '@aurelia/i18n';
-import { optional, resolve } from 'aurelia';
+import { inject, optional } from 'aurelia';
 
 /**
  * This is a Translate Service Wrapper for Slickgrid-Universal monorepo lib to work properly,
  * it must implement Slickgrid-Universal TranslaterService interface to work properly
  */
+@inject(optional(I18N))
 export class TranslaterService implements UniversalTranslateService {
-  constructor(private readonly i18n: I18N | undefined = resolve(optional(I18N))) { }
+  constructor(private readonly i18n: I18N) { }
 
   /**
    * Method to return the current language used by the App

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -31,14 +31,14 @@
     "serve:demo": "vite preview"
   },
   "dependencies": {
-    "@aurelia/fetch-client": "^2.0.0-beta.23",
-    "@aurelia/i18n": "^2.0.0-beta.23",
-    "@aurelia/kernel": "^2.0.0-beta.23",
-    "@aurelia/metadata": "^2.0.0-beta.23",
-    "@aurelia/router": "^2.0.0-beta.23",
-    "@aurelia/router-lite": "^2.0.0-beta.23",
-    "@aurelia/runtime": "^2.0.0-beta.23",
-    "@aurelia/runtime-html": "^2.0.0-beta.23",
+    "@aurelia/fetch-client": "^2.0.0-beta.24",
+    "@aurelia/i18n": "^2.0.0-beta.24",
+    "@aurelia/kernel": "^2.0.0-beta.24",
+    "@aurelia/metadata": "^2.0.0-beta.24",
+    "@aurelia/router": "^2.0.0-beta.24",
+    "@aurelia/router-lite": "^2.0.0-beta.24",
+    "@aurelia/runtime": "^2.0.0-beta.24",
+    "@aurelia/runtime-html": "^2.0.0-beta.24",
     "@faker-js/faker": "^9.7.0",
     "@fnando/sparkline": "^0.3.10",
     "@formkit/tempo": "^0.1.2",
@@ -52,17 +52,17 @@
     "@slickgrid-universal/row-detail-view-plugin": "^5.14.0",
     "@slickgrid-universal/rxjs-observable": "^5.14.0",
     "@slickgrid-universal/text-export": "^5.14.0",
-    "aurelia": "^2.0.0-beta.23",
+    "aurelia": "^2.0.0-beta.24",
     "aurelia-slickgrid": "workspace:*",
     "bootstrap": "^5.3.5",
     "i18next": "^23.16.8",
     "i18next-fetch-backend": "^6.0.0",
     "rxjs": "^7.8.2"
   },
   "devDependencies": {
-    "@aurelia/testing": "^2.0.0-beta.23",
-    "@aurelia/ts-jest": "^2.0.0-beta.23",
-    "@aurelia/vite-plugin": "2.0.0-beta.23",
+    "@aurelia/testing": "^2.0.0-beta.24",
+    "@aurelia/ts-jest": "^2.0.0-beta.24",
+    "@aurelia/vite-plugin": "^2.0.0-beta.24",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.15.2",

diff --git a/packages/demo/src/examples/slickgrid/example26.ts b/packages/demo/src/examples/slickgrid/example26.ts
@@ -3,6 +3,7 @@ import {
   type AureliaGridInstance,
   AureliaUtilService,
   type Column,
+  type CreatedView,
   type EditCommand,
   Editors,
   FieldType,
@@ -45,6 +46,7 @@ export class Example26 {
   </ul>
   `;
   private _commandQueue: EditCommand[] = [];
+  private _slots: CreatedView[] = [];
   aureliaGrid!: AureliaGridInstance;
   gridOptions!: GridOption;
   columnDefinitions: Column[] = [];
@@ -332,13 +334,28 @@ export class Example26 {
     return true;
   }
 
-  renderAureliaComponent(cellNode: HTMLElement, _row: number, dataContext: any, colDef: Column) {
+  async renderAureliaComponent(cellNode: HTMLElement, _row: number, dataContext: any, colDef: Column) {
     if (colDef.params.viewModel && cellNode) {
       const bindableData = {
         model: dataContext,
         grid: this.aureliaGrid.slickGrid,
       } as ViewModelBindableInputData;
-      this.aureliaUtilService.createAureliaViewModelAddToSlot(colDef.params.viewModel, bindableData, cellNode);
+      const slotIdx = this._slots.findIndex(obj => obj.id === dataContext.id);
+      const slotObj = this._slots[slotIdx];
+      if (slotObj?.controller) {
+        await slotObj.controller.deactivate(slotObj.controller, slotObj?.controller.parent ?? null);
+        this._slots.slice(slotIdx, 1);
+      }
+      const comp = await this.aureliaUtilService.createAureliaViewModelAddToSlot(colDef.params.viewModel, bindableData, cellNode);
+      if (!slotObj) {
+        const viewInfo: CreatedView = {
+          id: dataContext.id,
+          dataContext,
+          root: comp,
+          controller: comp.controller
+        };
+        this._slots.push(viewInfo);
+      }
     }
   }