ag-grid-aurelia-plugin 31.3.4

package/README.md

@@ -0,0 +1,83 @@
+ag-Grid Aurelia Component
+==============
+
+This project contains the Aurelia Component for use with ag-Grid.
+
+Usage
+==============
+
+Please refer to www.ag-grid.com for full documentation on ag-Grid and Aurelia integration. Also take a look a the provided examples at https://github.com/ag-grid/ag-grid-aurelia-example.
+
+Frameworks Supported
+====================
+Framework specific Getting Started guides:
+[Angular 1](https://www.ag-grid.com/best-angularjs-data-grid/) | [Angular 2](https://www.ag-grid.com/best-angular-2-data-grid/) | [Aurelia](https://www.ag-grid.com/best-aurelia-data-grid/)
+[Javascript](https://www.ag-grid.com/best-javascript-data-grid/) | [React](https://www.ag-grid.com/best-react-data-grid/) | [TypeScript](https://www.ag-grid.com/ag-grid-typescript-webpack-2/)
+[VueJS](https://www.ag-grid.com/best-vuejs-data-grid/) | [Web Components](https://www.ag-grid.com/best-web-component-data-grid/)
+
+In your main entry.
+```
+aurelia.use
+    .standardConfiguration()
+    .plugin('ag-grid-aurelia');
+```
+
+In your view model
+```
+import {GridOptions} from 'ag-grid';
+export class MyGridPage {
+
+    public gridOptions:GridOptions;
+
+    constructor() {
+        this.gridOptions = <GridOptions>{};
+        this.gridOptions.rowData = [{id: 1, name: 'Shane'}, {id: 2, name: 'Sean'}];
+    }
+
+    public onGridReady(){
+        console.log('Grid is ready!!');
+        console.log('1st col field = ' + this.gridOptions.columnDefs[0].field);
+    }
+
+    public onIdClicked(row){
+        console.log('id clicked ' + row.id);
+    }
+}
+
+
+```
+In your view template.  Here we are adding columns using markup. ColumnDefs can be added from your view model if you wish.
+```
+<template>
+    <div style="width: 100%; height: 350px;">
+      <ag-grid-aurelia grid-options.bind="gridOptions" class="ag-material"
+                       row-height.bind="48"
+                       grid-ready.call="onGridReady()">
+        <ag-grid-column header-name="My Group Column">
+          <ag-grid-column header-name="Id" field="id">
+              <ag-cell-template>
+                <button md-button class="btn accent"  click.delegate="params.context.onIdClicked(params.data)">${params.value}</button>
+              </ag-cell-template>
+          </ag-grid-column>
+          <ag-grid-column header-name="Name" field="name" >
+          </ag-grid-column>
+        </ag-grid-column>
+
+      </ag-grid-aurelia>
+    </div>
+
+</template>
+```
+
+Building
+==============
+
+To build:
+- npm install
+- npm install gulp -g
+- npm install aurelia-framework
+- npm install ag-grid
+- (or: npm install aurelia-framework@1.0.x && npm install ag-grid@13.0.2)
+
+- npm run build
+# ag-grid-aurelia1

package/main.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/agGridAurelia';
+export * from './lib/agGridColumn';
+export * from './lib/agTemplate';
+export * from './lib/aureliaFrameworkFactory';

package/main.js

@@ -0,0 +1,19 @@
+var PLATFORM = require('aurelia-pal').PLATFORM;
+
+exports.AgGridAurelia = require('./lib/agGridAurelia').AgGridAurelia;
+exports.AgGridColumn = require('./lib/agGridColumn').AgGridColumn;
+exports.AgCellTemplate = require('./lib/agTemplate').AgCellTemplate;
+exports.AgEditorTemplate = require('./lib/agTemplate').AgEditorTemplate;
+exports.AgFullWidthRowTemplate = require('./lib/agTemplate').AgFullWidthRowTemplate;
+exports.AgFilterTemplate = require('./lib/agTemplate').AgFilterTemplate;
+exports.AureliaFrameworkFactory = require('./lib/aureliaFrameworkFactory').AureliaFrameworkFactory;
+
+function configure(config) {
+    config.globalResources(
+        PLATFORM.moduleName('./lib/agGridAurelia'),
+        PLATFORM.moduleName('./lib/agGridColumn'),
+        PLATFORM.moduleName('./lib/agTemplate')
+    );
+}
+
+exports.configure = configure;

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "ag-grid-aurelia-plugin",
+  "version": "31.3.4",
+  "description": "ag-Grid Aurelia Component, a fork of Niall Crosby <niall.crosby@gmail.com>",
+  "credits": "Niall Crosby <niall.crosby@gmail.com>",
+  "main": "./main.js",
+  "typings": "./main.d.ts",
+  "scripts": {
+    "clean": "rimraf lib",
+    "build": "npm run clean && npm run compile && npm run add-headers",
+    "compile": "tsc",
+    "add-headers": "node scripts/add-headers.js",
+    "watch": "tsc --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ag-grid/ag-grid.git"
+  },
+  "keywords": [
+    "grid",
+    "data",
+    "table",
+    "aurelia"
+  ],
+  "author": "Vladimir Varbanov <vlado.var@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ag-grid/ag-grid/issues"
+  },
+  "homepage": "http://www.ag-grid.com/",
+  "devDependencies": {
+    "@types/core-js": "^2.5.0",
+    "ag-grid-community": "^31.3.4",
+    "aurelia-framework": "1.x",
+    "reflect-metadata": "^0.1.12",
+    "rimraf": "^6.0.1",
+    "systemjs": "^6.15.1",
+    "typescript": "~5.6.0"
+  },
+  "peerDependencies": {
+    "ag-grid-community": "^31.3.4",
+    "aurelia-framework": "1.x"
+  },
+  "aurelia": {
+    "build": {
+      "resources": [
+        "ag-grid-aurelia/lib/agGridAurelia",
+        "ag-grid-aurelia/lib/agGridColumn",
+        "ag-grid-aurelia/lib/agTemplate"
+      ]
+    }
+  }
+}

package/scripts/add-headers.js

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const pkg = require('../package.json');
+
+const headerTemplate = `// ${pkg.name} v${pkg.version}\n`;
+const libDir = 'lib';
+
+function addHeaderToFiles() {
+  if (!fs.existsSync(libDir)) {
+    console.error(`Directory ${libDir} does not exist`);
+    return;
+  }
+
+  const files = fs.readdirSync(libDir);
+  
+  files.forEach(file => {
+    if (file.endsWith('.js') || file.endsWith('.d.ts')) {
+      const filePath = path.join(libDir, file);
+      const content = fs.readFileSync(filePath, 'utf8');
+      
+      // Only add header if it doesn't already exist
+      if (!content.startsWith('//')) {
+        const newContent = headerTemplate + content;
+        fs.writeFileSync(filePath, newContent, 'utf8');
+        console.log(`Added header to ${file}`);
+      }
+    }
+  });
+}
+
+addHeaderToFiles();

package/src/agGridAurelia.ts

@@ -0,0 +1,163 @@
+import type {
+    GridOptions,
+    GridParams
+} from "ag-grid-community";
+import {
+    ColumnApi,
+    ComponentUtil,
+    Grid,
+    GridApi
+} from "ag-grid-community";
+import {
+    ComponentAttached,
+    ComponentDetached,
+    bindable,
+    child,
+    children,
+    Container,
+    customElement,
+    inlineView,
+    TaskQueue,
+    ViewResources
+} from "aurelia-framework";
+import {AureliaFrameworkFactory} from "./aureliaFrameworkFactory";
+import {AgGridColumn} from "./agGridColumn";
+import {generateBindables} from "./agUtils";
+import {AgDateTemplate, AgFullWidthRowTemplate} from './agTemplate';
+import {AureliaFrameworkComponentWrapper} from "./aureliaFrameworkComponentWrapper";
+
+interface IPropertyChanges {
+    [key: string]: any
+}
+
+@customElement('ag-grid-aurelia')
+@generateBindables(ComponentUtil.ALL_PROPERTIES.filter((property) => property !== 'gridOptions' as any))
+@generateBindables(ComponentUtil.EVENTS)
+// <slot> is required for @children to work.  https://github.com/aurelia/templating/issues/451#issuecomment-254206622
+@inlineView(`<template><slot></slot></template>`)
+export class AgGridAurelia implements ComponentAttached, ComponentDetached {
+    // not intended for user to interact with. so putting _ in so if user gets reference
+    // to this object, they kind'a know it's not part of the agreed interface
+    private _nativeElement: any;
+    private _initialised = false;
+    private _destroyed = false;
+
+    @bindable() public gridOptions: GridOptions;
+    @bindable() public context: any;
+
+    private gridParams: GridParams;
+
+    // making these public, so they are accessible to people using the aurelia component references
+    public api: GridApi;
+    public columnApi: ColumnApi;
+
+    @children('ag-grid-column')
+    public columns: AgGridColumn[] = [];
+
+    @child('ag-full-width-row-template')
+    public fullWidthRowTemplate: AgFullWidthRowTemplate;
+
+    @child('ag-date-template')
+    public dateTemplate: AgDateTemplate;
+
+    constructor(element: Element,
+                private taskQueue: TaskQueue,
+                private auFrameworkFactory: AureliaFrameworkFactory,
+                private container: Container,
+                private viewResources: ViewResources,
+                private aureliaFrameworkComponentWrapper: AureliaFrameworkComponentWrapper) {
+        this._nativeElement = element;
+        // create all the events generically. this is done generically so that
+        // if the list of grid events change, we don't need to change this code.
+        ComponentUtil.EVENTS.forEach((eventName) => {
+            //create an empty event
+            (<any>this)[eventName] = () => {
+            };
+        });
+    }
+
+    attached() {
+        // initialize the grid in the queue
+        // because of bug in @children
+        // https://github.com/aurelia/templating/issues/403
+        this.taskQueue.queueTask(this.initGrid.bind(this));
+    }
+
+    initGrid(): void {
+        this._initialised = false;
+        this._destroyed = false;
+
+        this.auFrameworkFactory.setContainer(this.container);
+        this.auFrameworkFactory.setViewResources(this.viewResources);
+
+        this.aureliaFrameworkComponentWrapper.setContainer(this.container);
+        this.aureliaFrameworkComponentWrapper.setViewResources(this.viewResources);
+
+        this.gridParams = <any>{
+            globalEventListener: this.globalEventListener.bind(this),
+            frameworkFactory: this.auFrameworkFactory,
+            seedBeanInstances: {
+                frameworkComponentWrapper: this.aureliaFrameworkComponentWrapper
+            }
+        };
+
+        if (this.columns && this.columns.length > 0) {
+            this.gridOptions.columnDefs = this.columns
+                .map((column: AgGridColumn) => {
+                    return column.toColDef();
+                });
+        }
+
+        if (this.fullWidthRowTemplate) {
+            this.gridOptions.fullWidthCellRenderer =
+                {template: this.fullWidthRowTemplate.template};
+        }
+
+        if (this.dateTemplate) {
+            (<any>this.gridOptions).dateComponentFramework =
+                {template: this.dateTemplate.template};
+        }
+
+        new Grid(this._nativeElement, this.gridOptions, this.gridParams);
+        this.api = this.gridOptions.api;
+        this.columnApi = this.gridOptions.columnApi;
+
+        this._initialised = true;
+    }
+
+    /**
+     * Called by Aurelia whenever a bound property changes
+     */
+    propertyChanged(propertyName: string, newValue: any, oldValue: any) {
+        // emulate an Angular2 SimpleChanges Object
+        let changes: IPropertyChanges = {};
+        changes[propertyName] = <any>{currentValue: newValue, previousValue: oldValue};
+
+        if (this._initialised) {
+            ComponentUtil.processOnChange(changes, this.api);
+        }
+    }
+
+    public detached(): void {
+        if (this._initialised) {
+            // need to do this before the destroy, so we know not to emit any events
+            // while tearing down the grid.
+            this._destroyed = true;
+            this.api.destroy();
+        }
+    }
+
+    private globalEventListener(eventType: string, event: any): void {
+        // if we are tearing down, don't emit events
+        if (this._destroyed) {
+            return;
+        }
+        // generically look up the eventType
+        let emitter = (<any>this)[eventType];
+        if (emitter) {
+            emitter(event);
+        } else {
+            console.log('ag-Grid-aurelia: could not find EventEmitter: ' + eventType);
+        }
+    }
+}

package/src/agGridColumn.ts

@@ -0,0 +1,146 @@
+import {autoinject, child, children, customElement, inlineView} from "aurelia-framework";
+import {ColDef} from "ag-grid-community";
+import {
+    AgCellTemplate,
+    AgEditorTemplate,
+    AgFilterTemplate,
+    AgHeaderGroupTemplate,
+    AgHeaderTemplate, AgPinnedRowTemplate
+} from "./agTemplate";
+import {generateBindables} from "./agUtils";
+
+@customElement('ag-grid-column')
+@generateBindables(["colId", "sort", "sortedAt", "sortingOrder", "field", "headerValueGetter", "hideCol", "pinned",
+    "tooltipField", "headerTooltip", "valueGetter", "keyCreator", "floatingFilterComponentFramework", "rowDrag", 
+    "width", "minWidth", "maxWidth", "cellClass", "cellStyle", "cellRenderer", "cellRendererFramework",
+    "cellRendererParams", "cellEditor", "cellEditorFramework", "cellEditorParams", "floatingCellRenderer",
+    "floatingCellRendererFramework", "floatingCellRendererParams", "cellFormatter", "floatingCellFormatter",
+    "getQuickFilterText", "aggFunc", "rowGroupIndex", "pivotIndex", "comparator", "checkboxSelection", "suppressMenu",
+    "suppressSorting", "suppressMovable", "suppressFilter", "unSortIcon", "suppressSizeToFit", "suppressResize",
+    "suppressAutoSize", "suppressToolPanel", "suppressKeyboardEvent", "enableRowGroup", "enablePivot", "enableValue",
+    "editable", "suppressNavigable", "newValueHandler", "volatile", "filter", "filterFramework", "filterParams",
+    "cellClassRules", "onCellValueChanged", "onCellClicked", "onCellDoubleClicked", "onCellContextMenu", "icons",
+    "enableCellChangeFlash", "headerName", "columnGroupShow", "headerClass", "toolPanelClass", "children", "groupId", "openByDefault",
+    "marryChildren", "headerCheckboxSelection", "headerCheckboxSelectionFilteredOnly", "type", "valueSetter",
+    "pinnedRowCellRenderer", "pinnedRowCellRendererFramework", "pinnedRowCellRendererParams", "valueFormatter",
+    "pinnedRowValueFormatter", "valueParser", "allowedAggFuncs", "rowGroup", "showRowGroup", "pivot", "equals", "pivotComparator",
+    "menuTabs", "colSpan", "suppressPaste", "template", "templateUrl", "pivotValueColumn", "pivotTotalColumnIds", "headerComponent",
+    "headerComponentFramework", "headerComponentParams", "floatingFilterComponent", "floatingFilterComponentParams",
+    "lockPinned"])
+// <slot> is required for @children to work.  https://github.com/aurelia/templating/issues/451#issuecomment-254206622
+@inlineView(`<template><slot></slot></template>`)
+@autoinject()
+export class AgGridColumn {
+    private mappedColumnProperties: any = {
+        "hideCol": "hide"   // hide exists in aurelia-templating-resources and will conflict
+    };
+
+    @children('ag-grid-column')
+    public childColumns: AgGridColumn[] = [];
+
+    @child('ag-cell-template')
+    public cellTemplate: AgCellTemplate;
+
+    @child('ag-editor-template')
+    public editorTemplate: AgEditorTemplate;
+
+    @child('ag-filter-template')
+    public filterTemplate: AgFilterTemplate;
+
+    @child('ag-header-template')
+    public headerTemplate: AgHeaderTemplate;
+
+    @child('ag-header-group-template')
+    public headerGroupTemplate: AgHeaderGroupTemplate;
+
+    @child('ag-pinned-row-template')
+    public pinnedRowTemplate: AgPinnedRowTemplate;
+
+    constructor() {
+    }
+
+    public hasChildColumns(): boolean {
+        return this.childColumns && this.childColumns.length > 0;
+    }
+
+    public toColDef(): ColDef {
+        let colDef: ColDef = this.createColDefFromGridColumn();
+
+        if (this.hasChildColumns()) {
+            (<any>colDef)["children"] = AgGridColumn.getChildColDefs(this.childColumns);
+        }
+
+        const defaultAction = (templateName:string) => {
+            let self = <any>this;
+
+            if(self[templateName]) {
+                const frameworkName = templates[templateName].frameworkName;
+                (<any>colDef)[frameworkName] = {template: self[templateName].template};
+                delete (<any>colDef)[templateName];
+            }
+        };
+
+        const editorAction = (templateName:string) => {
+            if (colDef.editable === undefined) {
+                colDef.editable = true;
+            }
+
+            defaultAction(templateName);
+        };
+
+        const templates : any = {
+            cellTemplate: {
+                frameworkName: 'cellRendererFramework'
+            },
+            editorTemplate: {
+                frameworkName: 'cellEditorFramework',
+                action: editorAction
+            },
+            filterTemplate: {
+                frameworkName: 'filterFramework'
+            },
+            headerTemplate: {
+                frameworkName: 'headerComponentFramework'
+            },
+            headerGroupTemplate: {
+                frameworkName: 'headerGroupComponentFramework'
+            },
+            pinnedRowTemplate: {
+                frameworkName: 'pinnedRowCellRendererFramework'
+            }
+        };
+
+        const addTemplate = (templateName: string) => {
+            const action = templates[templateName].action ? templates[templateName].action : defaultAction;
+            action(templateName);
+        };
+
+        Object.keys(templates)
+            .forEach(addTemplate);
+
+        return colDef;
+    }
+
+    private static getChildColDefs(childColumns: AgGridColumn[]) {
+        return childColumns
+            .filter(column => !column.hasChildColumns())
+            .map((column: AgGridColumn) => {
+                return column.toColDef();
+            });
+    };
+
+    private createColDefFromGridColumn(): ColDef {
+        let colDef: ColDef = {};
+        for (let prop in this) {
+            // only map this property if it's been actually been set
+            if (this[prop] === undefined) {
+                continue;
+            }
+
+            let colDefProperty = this.mappedColumnProperties[prop] ? this.mappedColumnProperties[prop] : prop;
+            (<any>colDef)[colDefProperty] = (<any>this)[prop];
+        }
+        delete (<any>colDef).childColumns;
+        return colDef;
+    };
+}

package/src/agTemplate.ts

@@ -0,0 +1,118 @@
+import {autoinject, customElement, noView, processContent, TargetInstruction} from "aurelia-framework";
+
+/**
+ * Function will move the elements innerHtml to a template property
+ * and then remove html from the element so that Aurelia will not render
+ * the template elements
+ * @param compiler
+ * @param resources
+ * @param element
+ * @param instruction
+ */
+function parseElement(compiler: any, resources: any, element: any, instruction: any) {
+    let html = element.innerHTML;
+    if (html !== '') {
+        instruction.template = html;
+    }
+    element.innerHTML = '';
+}
+
+function getTemplate(targetInstruction: any) {
+    return `<template>` + <any> targetInstruction.elementInstruction.template + `</template>`
+}
+
+@customElement('ag-cell-template')
+@noView()
+@autoinject()
+@processContent(parseElement)
+export class AgCellTemplate {
+    template: string;
+
+    constructor(targetInstruction: TargetInstruction) {
+        this.template = getTemplate(targetInstruction);
+    }
+}
+
+@customElement('ag-editor-template')
+@noView()
+@autoinject()
+@processContent(parseElement)
+export class AgEditorTemplate {
+    template: string;
+
+    constructor(targetInstruction: TargetInstruction) {
+        this.template = getTemplate(targetInstruction);
+    }
+}
+
+@customElement('ag-filter-template')
+@noView()
+@autoinject()
+@processContent(parseElement)
+export class AgFilterTemplate {
+    template: string;
+
+    constructor(targetInstruction: TargetInstruction) {
+        this.template = getTemplate(targetInstruction);
+    }
+}
+
+@customElement('ag-header-template')
+@noView()
+@autoinject()
+@processContent(parseElement)
+export class AgHeaderTemplate {
+    template: string;
+
+    constructor(targetInstruction: TargetInstruction) {
+        this.template = getTemplate(targetInstruction);
+    }
+}
+
+@customElement('ag-header-group-template')
+@noView()
+@autoinject()
+@processContent(parseElement)
+export class AgHeaderGroupTemplate {
+    template: string;
+
+    constructor(targetInstruction: TargetInstruction) {
+        this.template = getTemplate(targetInstruction);
+    }
+}
+
+@customElement('ag-pinned-row-template')
+@noView()
+@autoinject()
+@processContent(parseElement)
+export class AgPinnedRowTemplate {
+    template: string;
+
+    constructor(targetInstruction: TargetInstruction) {
+        this.template = getTemplate(targetInstruction);
+    }
+}
+
+@customElement('ag-date-template')
+@noView()
+@autoinject()
+@processContent(parseElement)
+export class AgDateTemplate {
+    template: string;
+
+    constructor(targetInstruction: TargetInstruction) {
+        this.template = getTemplate(targetInstruction);
+    }
+}
+
+@customElement('ag-full-width-row-template')
+@noView()
+@autoinject()
+@processContent(parseElement)
+export class AgFullWidthRowTemplate {
+    template: string;
+
+    constructor(targetInstruction: TargetInstruction) {
+        this.template = getTemplate(targetInstruction);
+    }
+}

package/src/agUtils.ts

@@ -0,0 +1,26 @@
+import {BindableProperty, HtmlBehaviorResource, metadata} from "aurelia-framework";
+
+export function generateBindables(names: string[], bindingModeToUse?: any): any {
+    return function (target: any, key: any, descriptor: any) {
+        // get or create the HtmlBehaviorResource
+        // on which we're going to create the BindableProperty's
+        let behaviorResource: HtmlBehaviorResource = <HtmlBehaviorResource>metadata.getOrCreateOwn(metadata.resource, HtmlBehaviorResource, target);
+
+        let nameOrConfigOrTargets: any[] = names.map((name) => {
+            let nameOrConfigOrTarget: any = {
+                name: name
+            };
+
+            if (bindingModeToUse) {
+                nameOrConfigOrTarget["defaultBindingMode"] = bindingModeToUse;
+            }
+
+            return nameOrConfigOrTarget;
+        });
+
+        nameOrConfigOrTargets.forEach((nameOrConfigOrTarget) => {
+            let prop = new BindableProperty(nameOrConfigOrTarget);
+            prop.registerWith(target, behaviorResource, descriptor);
+        });
+    };
+}

package/src/aureliaFrameworkComponentWrapper.ts

@@ -0,0 +1,118 @@
+import { autoinject, Container, TaskQueue, transient, View, ViewCompiler, ViewResources } from "aurelia-framework";
+import { BaseComponentWrapper, Bean, FrameworkComponentWrapper, WrappableInterface } from 'ag-grid-community';
+
+@autoinject()
+@transient()
+@Bean("frameworkComponentWrapper")
+export class AureliaFrameworkComponentWrapper extends BaseComponentWrapper<WrappableInterface> implements FrameworkComponentWrapper {
+    private _container: Container;
+    private _viewResources: ViewResources;
+
+    constructor(private taskQueue: TaskQueue, private _viewCompiler: ViewCompiler) {
+        super();
+    }
+
+    createWrapper(template: any): WrappableInterface {
+        let that = this;
+
+        class DynamicComponent extends BaseGuiComponent implements WrappableInterface {
+            constructor() {
+                super(that.taskQueue, that._viewCompiler);
+            }
+
+            init(params: any): void {
+                super.init(params, template.template, that._viewResources, that._container);
+            }
+
+            hasMethod(name: string): boolean {
+                return wrapper.getFrameworkComponentInstance() && wrapper.getFrameworkComponentInstance()[name] != null;
+            }
+
+            callMethod(name: string, args: IArguments): void {
+                const componentRef = this.getFrameworkComponentInstance();
+                return wrapper.getFrameworkComponentInstance()[name].apply(componentRef, args);
+
+            }
+
+            addMethod(name: string, callback: Function): void {
+                (<any>wrapper)[name] = callback
+            }
+        }
+
+        const wrapper: DynamicComponent = new DynamicComponent();
+        return wrapper;
+    }
+
+    public setContainer(container: Container): void {
+        this._container = container;
+    }
+
+    public setViewResources(viewResources: ViewResources): void {
+        this._viewResources = viewResources;
+    }
+}
+
+abstract class BaseGuiComponent {
+    private _taskQueue: TaskQueue;
+    private _viewCompiler: ViewCompiler;
+
+    protected _params: any;
+    protected _view: View;
+
+    constructor(taskQueue: TaskQueue, viewCompiler: ViewCompiler) {
+        this._taskQueue = taskQueue;
+        this._viewCompiler = viewCompiler;
+    }
+
+    init(params: any, template: any, viewResources: ViewResources, container: Container) {
+        this._params = params;
+
+        let bindingContext = {params: params};
+
+        let viewFactory = this._viewCompiler.compile(template, viewResources);
+        this._view = viewFactory.create(container);
+        let controllers: any[] = (<any>this._view).controllers;
+        //initialize each controller
+        if (controllers && controllers.length) {
+            controllers.forEach((c) => {
+                c.viewModel.params = params;
+            });
+            this._view.bind(bindingContext);
+            //ICellRenderer doesn't have a guiAttached method so
+            //we call attach on the queue;
+            this._taskQueue.queueMicroTask(() => this._view.attached());
+        } else {
+            this._view.bind(bindingContext);
+        }
+    }
+
+    getGui(): HTMLElement {
+        return this._view.fragment as HTMLElement;
+    }
+
+
+    destroy() {
+        this._view.returnToCache();
+    }
+
+    refresh(params: any): boolean {
+        return false;
+    }
+
+    public getFrameworkComponentInstance(): any {
+        let controllers: any[] = (<any>this._view).controllers;
+
+        //only one controller is allowed in editor template
+        if (controllers &&
+            controllers.length == 1 &&
+            controllers[0].viewModel) {
+            let editorVm = controllers[0].viewModel;
+            //this is a 'hack' because we don't have params.bind="" in the template
+            //must reset params or it will be nothing
+            editorVm.params = this._params;
+            return editorVm;
+        }
+        return null;
+    }
+
+}

package/src/aureliaFrameworkFactory.ts

@@ -0,0 +1,45 @@
+import {autoinject, Container, transient, ViewResources} from "aurelia-framework";
+import {VanillaFrameworkOverrides, IFrameworkOverrides, AgPromise, FrameworkOverridesIncomingSource} from "ag-grid-community";
+
+@autoinject()
+@transient()
+export class AureliaFrameworkFactory implements IFrameworkOverrides {
+    setInterval(action: any, interval?: any): AgPromise<number> {
+        throw new Error("Method not implemented.");
+    }
+    addEventListener(element: HTMLElement, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void {
+        throw new Error("Method not implemented.");
+    }
+    wrapIncoming: <T>(callback: () => T, source?: FrameworkOverridesIncomingSource) => T;
+    wrapOutgoing: <T>(callback: () => T) => T;
+    shouldWrapOutgoing?: boolean;
+    frameworkComponent(name: string, components?: any) {
+        throw new Error("Method not implemented.");
+    }
+    isFrameworkComponent(comp: any): boolean {
+        throw new Error("Method not implemented.");
+    }
+    renderingEngine: "vanilla" | "react";
+    getDocLink(path?: string): string {
+        throw new Error("Method not implemented.");
+    }
+    private _container: Container;
+    private _viewResources: ViewResources;
+    private _baseFrameworkFactory: IFrameworkOverrides = new VanillaFrameworkOverrides();    // todo - inject this
+
+    public setContainer(container: Container): void {
+        this._container = container;
+    }
+
+    public setViewResources(viewResources: ViewResources): void {
+        this._viewResources = viewResources;
+    }
+
+    setTimeout(action: any, timeout?: any): void {
+        window.setTimeout(action, timeout);
+    }
+
+    addEventListenerOutsideAngular(element: HTMLElement, type: string, listener: EventListener | EventListenerObject, useCapture?: boolean): void {
+        element.addEventListener(type, listener, useCapture);
+    }
+}

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "noEmitOnError": false,
+    "moduleResolution": "bundler",
+    "module": "es2022",
+    "target": "es2022",
+    "outDir": "lib",
+    "rootDir": "src",
+    "lib": ["dom", "es2023"],
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "exactOptionalPropertyTypes": false,
+    "noUncheckedIndexedAccess": false,
+    "strictPropertyInitialization": false,
+    "types": [
+      "core-js"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}