Skip to content

Commit 4b560e3

Browse files
ghiscodingghiscoding
authored
fix(aurelia): upgrade to Aurelia 2 Beta 24 (#1985)
* fix(aurelia): upgrade to Aurelia 2 Beta 24
1 parent a0425f7 commit 4b560e3

13 files changed

Lines changed: 282 additions & 232 deletions

File tree

‎demos/aurelia/package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,14 @@
3333
"type-check": "tsc --noEmit"
3434
},
3535
"dependencies": {
36-
"@aurelia/fetch-client": "^2.0.0-beta.23",
37-
"@aurelia/i18n": "^2.0.0-beta.23",
38-
"@aurelia/kernel": "^2.0.0-beta.23",
39-
"@aurelia/metadata": "^2.0.0-beta.23",
40-
"@aurelia/router": "^2.0.0-beta.23",
41-
"@aurelia/router-lite": "^2.0.0-beta.23",
42-
"@aurelia/runtime": "^2.0.0-beta.23",
43-
"@aurelia/runtime-html": "^2.0.0-beta.23",
36+
"@aurelia/fetch-client": "^2.0.0-beta.24",
37+
"@aurelia/i18n": "^2.0.0-beta.24",
38+
"@aurelia/kernel": "^2.0.0-beta.24",
39+
"@aurelia/metadata": "^2.0.0-beta.24",
40+
"@aurelia/router": "^2.0.0-beta.24",
41+
"@aurelia/router-lite": "^2.0.0-beta.24",
42+
"@aurelia/runtime": "^2.0.0-beta.24",
43+
"@aurelia/runtime-html": "^2.0.0-beta.24",
4444
"@faker-js/faker": "catalog:",
4545
"@fnando/sparkline": "catalog:",
4646
"@formkit/tempo": "catalog:",
@@ -54,14 +54,14 @@
5454
"@slickgrid-universal/row-detail-view-plugin": "workspace:*",
5555
"@slickgrid-universal/rxjs-observable": "workspace:*",
5656
"@slickgrid-universal/text-export": "workspace:*",
57-
"aurelia": "^2.0.0-beta.23",
57+
"aurelia": "^2.0.0-beta.24",
5858
"aurelia-slickgrid": "workspace:*",
5959
"bootstrap": "catalog:",
6060
"i18next": "catalog:",
6161
"rxjs": "catalog:"
6262
},
6363
"devDependencies": {
64-
"@aurelia/vite-plugin": "2.0.0-beta.23",
64+
"@aurelia/vite-plugin": "^2.0.0-beta.24",
6565
"@types/fnando__sparkline": "catalog:",
6666
"@types/node": "catalog:",
6767
"@types/sortablejs": "catalog:",

‎demos/aurelia/src/examples/slickgrid/example26.html‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h2>
2-
${title}
2+
Example 26: Use of Aurelia Custom Elements
33
<span class="float-end">
44
<a
55
style="font-size: 18px"
@@ -14,7 +14,27 @@ <h2>
1414
</button>
1515
</h2>
1616

17-
<div class="subtitle" innerhtml.bind="subTitle"></div>
17+
<div class="subtitle">
18+
<h5>Filters, Editors, AsyncPostRender with Aurelia Custom Elements</h5>
19+
Grid with usage of Aurelia Custom Elements as Editor &amp; AsyncPostRender (similar to Formatter).
20+
<ul>
21+
<li>Support of Aurelia Custom Element as Custom Editor (click on any "Assignee" name cell)</li>
22+
<ul>
23+
<li>That column uses a simple select drodown wrapped in an Aurelia Custom Element</li>
24+
<li>Increased Grid Options "rowHeight" &amp; "headerRowHeight" to 45 so that the Custom Element fits in the cell.</li>
25+
</ul>
26+
<li>Support of Aurelia Custom Element as Custom Filter ("Assignee" columns), which also uses Custom Element</li>
27+
<li>The 2nd "Assignee" column (showing in bold text) uses "asyncPostRender" with an Aurelia Custom Element</li>
28+
<ul>
29+
<li>Why can't we use Aurelia Custom Element as Customer Formatter and why do I see a slight delay in loading the data?</li>
30+
<li>
31+
It's totally normal since SlickGrid Formatters only accept strings (synchronously), so we cannot use that (Aurelia requires at least
32+
1 full cycle to render the element), so we are left with SlickGrid "asyncPostRender" and it works but as the name suggest it's async
33+
users might see noticeable delay in loading the data
34+
</li>
35+
</ul>
36+
</ul>
37+
</div>
1838

1939
<div class="row">
2040
<div class="col-sm-6">

‎demos/aurelia/src/examples/slickgrid/example26.ts‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -23,27 +23,6 @@ import { FilterSelect } from './filter-select.js';
2323
const NB_ITEMS = 100;
2424

2525
export class Example26 {
26-
title = 'Example 26: Use of Aurelia Custom Elements';
27-
subTitle = `
28-
<h5>Filters, Editors, AsyncPostRender with Aurelia Custom Elements</h5>
29-
Grid with usage of Aurelia Custom Elements as Editor &amp; AsyncPostRender (similar to Formatter).
30-
<ul>
31-
<li>Support of Aurelia Custom Element as Custom Editor (click on any "Assignee" name cell)</li>
32-
<ul>
33-
<li>That column uses a simple select drodown wrapped in an Aurelia Custom Element</li>
34-
<li>Increased Grid Options "rowHeight" &amp; "headerRowHeight" to 45 so that the Custom Element fits in the cell.</li>
35-
</ul>
36-
<li>Support of Aurelia Custom Element as Custom Filter ("Assignee" columns), which also uses Custom Element</li>
37-
<li>The 2nd "Assignee" column (showing in bold text) uses "asyncPostRender" with an Aurelia Custom Element</li>
38-
<ul>
39-
<li>Why can't we use Aurelia Custom Element as Customer Formatter and why do I see a slight delay in loading the data?</li>
40-
<li>It's totally normal since SlickGrid Formatters only accept strings (synchronously),
41-
so we cannot use that (Aurelia requires at least 1 full cycle to render the element), so we are left with SlickGrid "asyncPostRender" and
42-
it works but as the name suggest it's async users might see noticeable delay in loading the data
43-
</li>
44-
</ul>
45-
</ul>
46-
`;
4726
private _commandQueue: EditCommand[] = [];
4827
aureliaGrid!: AureliaGridInstance;
4928
gridOptions!: GridOption;

‎frameworks/aurelia-slickgrid/package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,12 @@
4848
"pack": "npm pack"
4949
},
5050
"peerDependencies": {
51-
"aurelia": "^2.0.0-beta.23"
51+
"aurelia": "^2.0.0-beta.24"
5252
},
5353
"dependencies": {
54-
"@aurelia/i18n": "^2.0.0-beta.23",
55-
"@aurelia/runtime": "^2.0.0-beta.23",
56-
"@aurelia/runtime-html": "^2.0.0-beta.23",
54+
"@aurelia/i18n": "^2.0.0-beta.24",
55+
"@aurelia/runtime": "^2.0.0-beta.24",
56+
"@aurelia/runtime-html": "^2.0.0-beta.24",
5757
"@formkit/tempo": "catalog:",
5858
"@slickgrid-universal/common": "workspace:*",
5959
"@slickgrid-universal/custom-footer-component": "workspace:*",
@@ -66,6 +66,7 @@
6666
"sortablejs": "catalog:"
6767
},
6868
"devDependencies": {
69+
"@aurelia/kernel": "^2.0.0-beta.24",
6970
"dompurify": "catalog:",
7071
"native-copyfiles": "catalog:",
7172
"rimraf": "catalog:",

‎frameworks/aurelia-slickgrid/src/custom-elements/aurelia-slickgrid.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ export class AureliaSlickgridCustomElement {
125125
extensionUtility: ExtensionUtility;
126126
filterFactory!: FilterFactory;
127127
filterService: FilterService;
128+
gridContainer!: HTMLDivElement;
128129
gridEventService: GridEventService;
129130
gridService: GridService;
130131
gridStateService: GridStateService;
@@ -135,7 +136,6 @@ export class AureliaSlickgridCustomElement {
135136
sharedService: SharedService;
136137
sortService: SortService;
137138
treeDataService: TreeDataService;
138-
gridContainer!: HTMLDivElement;
139139

140140
@bindable({ mode: BindingMode.twoWay }) columns: Column[] = [];
141141
@bindable({ mode: BindingMode.twoWay }) element!: Element;

‎frameworks/aurelia-slickgrid/src/extensions/slickRowDetailView.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,12 @@ import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-un
1414
import type { ICustomElementController } from '@aurelia/runtime-html';
1515
import { type Constructable, resolve, transient } from 'aurelia';
1616

17-
import type { AureliaViewOutput, GridOption, RowDetailView, ViewModelBindableInputData } from '../models/index.js';
17+
import type { CreatedView, GridOption, RowDetailView, ViewModelBindableInputData } from '../models/index.js';
1818
import { AureliaUtilService } from '../services/aureliaUtil.service.js';
1919

2020
const ROW_DETAIL_CONTAINER_PREFIX = 'container_';
2121
const PRELOAD_CONTAINER_PREFIX = 'container_loading';
2222

23-
export interface CreatedView extends AureliaViewOutput {
24-
id: string | number;
25-
dataContext: any;
26-
}
27-
2823
@transient()
2924
export class SlickRowDetailView extends UniversalSlickRowDetailView {
3025
protected _preloadViewModel?: Constructable;

‎frameworks/aurelia-slickgrid/src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export { AureliaSlickgridCustomElement } from './custom-elements/aurelia-slickgr
2323
import type {
2424
AureliaGridInstance,
2525
AureliaViewOutput,
26+
CreatedView,
2627
GridOption,
2728
RowDetailView,
2829
ViewModelBindableData,
@@ -33,6 +34,7 @@ import type {
3334
export {
3435
type AureliaGridInstance,
3536
type AureliaViewOutput,
37+
type CreatedView,
3638
type GridOption,
3739
type RowDetailView,
3840
type ViewModelBindableData,

‎frameworks/aurelia-slickgrid/src/models/aureliaViewOutput.interface.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import type { ICustomElementController } from '@aurelia/runtime-html';
1+
import type { IAppRoot, ICustomElementController } from '@aurelia/runtime-html';
22

33
export interface AureliaViewOutput {
44
controller?: ICustomElementController<any>;
5+
root?: IAppRoot<object>;
56
}

‎frameworks/aurelia-slickgrid/src/models/rowDetailView.interface.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import type { RowDetailView as UniversalRowDetailView } from '@slickgrid-universal/common';
22
import type { Constructable } from 'aurelia';
33

4+
import type { AureliaViewOutput } from './aureliaViewOutput.interface.js';
5+
46
export interface RowDetailView extends UniversalRowDetailView {
57
/**
68
* Optionally pass your Parent Component reference to your Child Component (row detail component).
@@ -14,3 +16,8 @@ export interface RowDetailView extends UniversalRowDetailView {
1416
/** View Model template that will be loaded once the async function finishes */
1517
viewModel?: Constructable;
1618
}
19+
20+
export interface CreatedView extends AureliaViewOutput {
21+
id: string | number;
22+
dataContext: any;
23+
}

‎frameworks/aurelia-slickgrid/src/services/aureliaUtil.service.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { AppTask, type Constructable, CustomElement, IAurelia, resolve, singleton } from 'aurelia';
1+
import { AppTask, type Constructable, CustomElement, type IAppRoot, IAurelia, type INode, resolve, singleton } from 'aurelia';
2+
import { type Writable } from '@aurelia/kernel';
23

3-
import type { AureliaViewOutput, ViewModelBindableInputData } from '../models/index.js';
4+
import type { ViewModelBindableInputData } from '../models/index.js';
45

56
@singleton()
67
export class AureliaUtilService {
@@ -10,7 +11,7 @@ export class AureliaUtilService {
1011
viewModel: Constructable,
1112
bindableData?: ViewModelBindableInputData,
1213
targetElement?: HTMLElement
13-
): Promise<AureliaViewOutput | null> {
14+
): Promise<IAppRoot | null> {
1415
if (targetElement) {
1516
const def = CustomElement.getDefinition(viewModel);
1617
const addonBindable = bindableData?.addon ? 'addon.bind="bindableData.addon"' : '';
@@ -21,6 +22,9 @@ export class AureliaUtilService {
2122
targetElement.innerHTML =
2223
`<${def.name} model.bind="bindableData.model" ${addonBindable} ${gridBindable} ${dataViewBindable} ${parentBindable}></${def.name}>`.trim();
2324

25+
// patch for this error "Node already associated with a controlle"
26+
delete (targetElement as Writable<INode>)['$au']?.['au:resource:custom-element'];
27+
2428
return await this.au.enhance({
2529
host: targetElement,
2630
component: { bindableData },

0 commit comments

Comments
 (0)