Skip to content

Commit 04b3b46

Browse files
BioPhotonBioPhoton
committed
wip
1 parent 54d97bb commit 04b3b46

File tree

17 files changed

+190
-282
lines changed

17 files changed

+190
-282
lines changed

‎docs/index.html

+1-1
Large diffs are not rendered by default.

‎docs/main.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/angular-native/src/app/app.component.ts

+18-66
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Component, VERSION, AfterViewChecked} from '@angular/core';
1+
import { Component, VERSION} from '@angular/core';
2+
import {getData} from "@data";
23

34
interface Data {
45
id: number;
@@ -53,84 +54,35 @@ interface Data {
5354
`
5455
})
5556
export class AppComponent {
56-
data: Array<Data> = [];
57+
model = getData();
58+
get data(): Array<Data>{
59+
return this.model.data();
60+
}
61+
5762
selected: number = undefined;
5863
id: number = 1;
5964
backup: Array<Data> = undefined;
6065
version: string;
61-
66+
6267
_renderCount = 0;
63-
68+
6469
constructor() {
6570
this.version = VERSION.full;
6671
}
67-
68-
rendered() {
69-
return ++this._renderCount;
70-
}
7172

72-
buildData(count: number = 1000): Array<Data> {
73-
var adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
74-
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
75-
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
76-
var data: Array<Data> = [];
77-
for (var i = 0; i < count; i++) {
78-
data.push({ id: this.id, label: adjectives[this._random(adjectives.length)] + " " + colours[this._random(colours.length)] + " " + nouns[this._random(nouns.length)] });
79-
this.id++;
80-
}
81-
return data;
82-
}
83-
84-
_random(max: number) {
85-
return Math.round(Math.random() * 1000) % max;
86-
}
87-
88-
itemById(index: number, item: Data) {
89-
return item.id;
90-
}
73+
delete = this.model.deleteItem;
74+
run = this.model.run;
75+
add = this.model.add;
76+
update = this.model.update;
77+
runLots = this.model.runLots;
78+
clear = this.model.clear;
79+
swapRows = this.model.swapRows;
80+
itemById = this.model.itemById;
81+
distinctById = this.model.distinctById;
9182

9283
select(item: Data, event: Event) {
9384
event.preventDefault();
9485
this.selected = item.id;
95-
// TODO: does not work
9686
}
9787

98-
delete(item: Data, event: Event) {
99-
event.preventDefault();
100-
for (let i = 0, l = this.data.length; i < l; i++) {
101-
if (this.data[i].id === item.id) {
102-
this.data.splice(i, 1);
103-
break;
104-
}
105-
}
106-
}
107-
108-
run() {
109-
this.data = this.buildData();
110-
}
111-
112-
add() {
113-
this.data = this.data.concat(this.buildData(1000));
114-
}
115-
116-
update() {
117-
for (let i = 0; i < this.data.length; i += 10) {
118-
this.data[i].label += ' !!!';
119-
}
120-
}
121-
runLots() {
122-
this.data = this.buildData(10000);
123-
this.selected = undefined;
124-
}
125-
clear() {
126-
this.data = [];
127-
this.selected = undefined;
128-
}
129-
swapRows() {
130-
if (this.data.length > 998) {
131-
var a = this.data[1];
132-
this.data[1] = this.data[998];
133-
this.data[998] = a;
134-
}
135-
}
13688
}

‎frameworks/keyed/angular-native/tsconfig.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@
1717
"lib": [
1818
"es2018",
1919
"dom"
20-
]
20+
],
21+
"paths": {
22+
"@data": ["../../shared/data/index.ts"]
23+
}
2124
},
2225
"angularCompilerOptions": {
2326
"fullTemplateTypeCheck": true,

‎frameworks/keyed/angular-noopzone/src/app/app.component.ts

+37-50
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import {Component, VERSION} from '@angular/core';
2-
// import { AfterViewChecked} from '@angular/core';
3-
import { ɵmarkDirty } from '@angular/core';
4-
// import { ɵdetectChanges } from '@angular/core';
1+
import {Component, VERSION, ɵmarkDirty} from '@angular/core';
2+
import {getData} from "@data";
3+
54

65
interface Data {
76
id: number;
@@ -19,22 +18,33 @@ interface Data {
1918
</div>
2019
<div class="col-md-6">
2120
<div class="col-sm-6 smallpad">
22-
<button type="button" class="btn btn-primary btn-block" id="run" (click)="run()" ref="text">Create 1,000 rows</button>
21+
<button type="button" class="btn btn-primary btn-block" id="run" (click)="run()" ref="text">
22+
Create 1,000 rows
23+
</button>
2324
</div>
2425
<div class="col-sm-6 smallpad">
25-
<button type="button" class="btn btn-primary btn-block" id="runlots" (click)="runLots()">Create 10,000 rows</button>
26+
<button type="button" class="btn btn-primary btn-block" id="runlots" (click)="runLots()">
27+
Create 10,000 rows
28+
</button>
2629
</div>
2730
<div class="col-sm-6 smallpad">
28-
<button type="button" class="btn btn-primary btn-block" id="add" (click)="add()" ref="text">Append 1,000 rows</button>
31+
<button type="button" class="btn btn-primary btn-block" id="add" (click)="add()" ref="text">
32+
Append 1,000 rows
33+
</button>
2934
</div>
3035
<div class="col-sm-6 smallpad">
31-
<button type="button" class="btn btn-primary btn-block" id="update" (click)="update()">Update every 10th row</button>
36+
<button type="button" class="btn btn-primary btn-block" id="update" (click)="update()">
37+
Update every 10th row
38+
</button>
3239
</div>
3340
<div class="col-sm-6 smallpad">
34-
<button type="button" class="btn btn-primary btn-block" id="clear" (click)="clear()">Clear</button>
41+
<button type="button" class="btn btn-primary btn-block" id="clear" (click)="clear()">Clear
42+
</button>
3543
</div>
3644
<div class="col-sm-6 smallpad">
37-
<button type="button" class="btn btn-primary btn-block" id="swaprows" (click)="swapRows()">Swap Rows</button>
45+
<button type="button" class="btn btn-primary btn-block" id="swaprows" (click)="swapRows()">
46+
Swap Rows
47+
</button>
3848
</div>
3949
</div>
4050
</div>
@@ -46,7 +56,8 @@ interface Data {
4656
<td class="col-md-4">
4757
<a href="#" (click)="select(item, $event)">{{item.label}}</a>
4858
</td>
49-
<td class="col-md-1"><a href="#" (click)="delete(item, $event)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
59+
<td class="col-md-1"><a href="#" (click)="delete(item, $event)"><span
60+
class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
5061
<td class="col-md-6"></td>
5162
</tr>
5263
</tbody>
@@ -57,7 +68,12 @@ interface Data {
5768
styles: []
5869
})
5970
export class AppComponent {
60-
data: Array<Data> = [];
71+
model = getData();
72+
73+
get data(): Array<Data>{
74+
return this.model.data();
75+
}
76+
6177
selected: number = undefined;
6278
id: number = 1;
6379
backup: Array<Data> = undefined;
@@ -67,25 +83,7 @@ export class AppComponent {
6783
this.version = VERSION.full;
6884
}
6985

70-
buildData(count: number = 1000): Array<Data> {
71-
var adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
72-
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
73-
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
74-
var data: Array<Data> = [];
75-
for (var i = 0; i < count; i++) {
76-
data.push({ id: this.id, label: adjectives[this._random(adjectives.length)] + " " + colours[this._random(colours.length)] + " " + nouns[this._random(nouns.length)] });
77-
this.id++;
78-
}
79-
return data;
80-
}
81-
82-
_random(max: number) {
83-
return Math.round(Math.random() * 1000) % max;
84-
}
85-
86-
itemById(index: number, item: Data) {
87-
return item.id;
88-
}
86+
itemById = this.model.itemById;
8987

9088
select(item: Data, event: Event) {
9189
event.preventDefault();
@@ -94,51 +92,40 @@ export class AppComponent {
9492
}
9593

9694
delete(item: Data, event: Event) {
97-
event.preventDefault();
98-
for (let i = 0, l = this.data.length; i < l; i++) {
99-
if (this.data[i].id === item.id) {
100-
this.data.splice(i, 1);
101-
break;
102-
}
103-
}
95+
this.model.deleteItem(item, event);
10496
ɵmarkDirty(this);
10597
}
10698

10799
run() {
108-
this.data = this.buildData();
100+
this.model.run();
101+
console.log(this.model.data.length, this.data.length);
109102
ɵmarkDirty(this);
110103
}
111104

112105
add() {
113-
this.data = this.data.concat(this.buildData(1000));
106+
this.model.add();
114107
ɵmarkDirty(this);
115108
}
116109

117110
update() {
118-
for (let i = 0; i < this.data.length; i += 10) {
119-
this.data[i].label += ' !!!';
120-
}
111+
this.model.update();
121112
ɵmarkDirty(this);
122113
}
123114

124115
runLots() {
125-
this.data = this.buildData(10000);
116+
this.model.runLots();
126117
this.selected = undefined;
127118
ɵmarkDirty(this);
128119
}
129120

130121
clear() {
131-
this.data = [];
122+
this.model.clear();
132123
this.selected = undefined;
133124
ɵmarkDirty(this);
134125
}
135126

136127
swapRows() {
137-
if (this.data.length > 998) {
138-
var a = this.data[1];
139-
this.data[1] = this.data[998];
140-
this.data[998] = a;
141-
}
128+
this.model.swapRows();
142129
ɵmarkDirty(this);
143130
}
144131

‎frameworks/keyed/angular-noopzone/tsconfig.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@
1717
"lib": [
1818
"es2018",
1919
"dom"
20-
]
20+
],
21+
"paths": {
22+
"@data": ["../../shared/data/index.ts"]
23+
}
2124
},
2225
"angularCompilerOptions": {
2326
"fullTemplateTypeCheck": true,

‎frameworks/keyed/angular-rxa-distinct-by/src/app/app.component.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -54,14 +54,14 @@ interface Data {
5454
</div>
5555
</div>
5656
</div>
57-
{{ rendered() }}
57+
5858
<table class="table table-hover table-striped test-data">
5959
<tbody>
6060
<tr [class.danger]="item.id === selected"
6161
*rxFor="let item of data$;
62-
trackBy: itemById;
6362
parent: true;
64-
distinctBy: distinctById">
63+
trackBy: itemById;
64+
">
6565
<td class="col-md-1">{{item.id}}</td>
6666
<td class="col-md-4">
6767
<a href="#"

‎frameworks/keyed/angular-rxa-global/src/app/app.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@ export class AppComponent {
7676
backup: Array<Data> = undefined;
7777
version: string;
7878

79-
buildData = this.model.buildData;
8079
delete = this.model.deleteItem;
8180
run = this.model.run;
8281
add = this.model.add;

‎frameworks/keyed/angular-rxa-local/src/main.ts

+3-4
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ import { enableProdMode } from '@angular/core';
22
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
33

44
import { AppModule } from './app/app.module';
5-
import { environment } from './environments/environment';
65

7-
// if (environment.production) {
8-
enableProdMode();
9-
// }
6+
7+
enableProdMode();
8+
109

1110
platformBrowserDynamic().bootstrapModule(AppModule)
1211
.catch(err => console.error(err));

‎frameworks/keyed/angular-rxa-max-outcome/src/app/app.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {Component, VERSION} from '@angular/core';
2-
import {BehaviorSubject} from "rxjs";
32
import {getData$} from "@data";
43

54
interface Data {

‎frameworks/keyed/angular-rxa-no-priority/src/app/app.module.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {RxForModule, UnpatchEventsModule, RX_PRIMARY_STRATEGY} from "@rx-angular
1818
providers: [
1919
{
2020
provide: RX_PRIMARY_STRATEGY,
21-
useValue: 'no-priority'
21+
useValue: 'noPriority'
2222
}
2323
],
2424
bootstrap: [AppComponent]

‎frameworks/keyed/angular-rxa-user-blocking/src/app/app.module.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {RxForModule, UnpatchEventsModule, RX_PRIMARY_STRATEGY} from "@rx-angular
1717
providers: [
1818
{
1919
provide: RX_PRIMARY_STRATEGY,
20-
useValue: 'user-blocking'
20+
useValue: 'userBlocking'
2121
}
2222
],
2323
bootstrap: [AppComponent]

0 commit comments

Comments
 (0)