Merge branch 'master' of github.com:krausest/js-framework-benchmark

Author: krausest

frameworks/keyed/angular-cf-nozone/package-lock.json

@@ -17,18 +17,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "17.0.2",
-    "@angular/compiler": "17.0.2",
-    "@angular/core": "17.0.2",
-    "@angular/platform-browser": "17.0.2",
-    "@angular/ssr": "17.0.0",
+    "@angular/common": "^17.1.0-next.0",
+    "@angular/compiler": "^17.1.0-next.0",
+    "@angular/core": "^17.1.0-next.0",
+    "@angular/platform-browser": "^17.1.0-next.0",
     "rxjs": "7.8.1",
-    "tslib": "^2.6.2"
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.0.0",
-    "@angular/cli": "17.0.0",
-    "@angular/compiler-cli": "17.0.2",
+    "@angular-devkit/build-angular": "^17.1.0-rc.1",
+    "@angular/cli": "^17.1.0-rc.1",
+    "@angular/compiler-cli": "^17.1.0-next.0",
     "@types/node": "^18.18.9",
     "typescript": "5.2.2"
   }

frameworks/keyed/angular-cf-nozone/package.json

@@ -28,16 +28,19 @@ <h1>Angular {{version}} (no Zone.js)</h1>
     </div>
     <table class="table table-hover table-striped test-data">
         <tbody>
-            @for (item of data; track item.id) 
-            {
-            <tr [class.danger]="item.id === selected">
-                <td class="col-md-1">{{item.id}}</td>
-                <td class="col-md-4">
-                    <a href="#" (click)="select(item, $event)">{{item.label}}</a>
-                </td>
-                <td class="col-md-1"><a href="#" (click)="delete(item, $event)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
-                <td class="col-md-6"></td>
-            </tr>
+            @for (item of data(); track item.id) {
+                <tr [class.danger]="item.id === selected()">
+                    <td class="col-md-1">{{item.id}}</td>
+                    <td class="col-md-4">
+                        <a href="#" (click)="select(item, $event)">{{item.label}}</a>
+                    </td>
+                    <td class="col-md-1">
+                        <a href="#" (click)="delete(item, $event)">
+                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+                        </a>
+                    </td>
+                    <td class="col-md-6"></td>
+                </tr>
             }
         </tbody>
     </table>

frameworks/keyed/angular-cf-nozone/src/app/app.component.html

@@ -1,5 +1,4 @@
-import { NgFor } from '@angular/common';
-import { ChangeDetectorRef, Component, VERSION, inject } from '@angular/core';
+import { Component, VERSION, signal } from '@angular/core';
 
 interface Data {
     id: number;
@@ -13,15 +12,12 @@ const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie"
 @Component({
     selector: 'app-root',
     standalone: true,
-    imports: [NgFor],
     templateUrl: './app.component.html',
 })
 export class AppComponent {
-    private cdr = inject(ChangeDetectorRef);
-
-    data: Array<Data> = [];
-    selected?: number = undefined;
-    id: number = 1;
+    data = signal<Data[]>([]);
+    selected = signal<number | undefined>(undefined);
+    id = 1;
     backup?: Array<Data> = undefined;
     version = VERSION.full;
 
@@ -34,63 +30,58 @@ export class AppComponent {
         return data;
     }
 
-    _random(max: number) {
-        return Math.round(Math.random() * 1000) % max;
-    }
-
-    itemById(index: number, item: Data) {
-        return item.id;
-    }
 
     select(item: Data, event: Event) {
         event.preventDefault();
-        this.selected = item.id;
-        this.cdr.detectChanges();
+        this.selected.set(item.id);
     }
 
     delete(item: Data, event: Event) {
         event.preventDefault();
-        for (let i = 0, l = this.data.length; i < l; i++) {
-            if (this.data[i].id === item.id) {
-                this.data.splice(i, 1);
+        let data = this.data();
+        for (let i = 0, l = data.length; i < l; i++) {
+            if (data[i].id === item.id) {
+                data.splice(i, 1);
                 break;
             }
         }
-        this.cdr.detectChanges();
+        this.data.set(data);
     }
 
     run() {
-        this.data = this.buildData();
-        this.cdr.detectChanges();
+        this.data.set(this.buildData());
     }
 
     add() {
-        this.data = this.data.concat(this.buildData(1000));
-        this.cdr.detectChanges();
+        this.data.set(this.data().concat(this.buildData(1000)));
     }
 
     update() {
-        for (let i = 0; i < this.data.length; i += 10) {
-            this.data[i].label += ' !!!';
+        let data = this.data();
+        for (let i = 0; i < data.length; i += 10) {
+            data[i].label += ' !!!';
         }
-        this.cdr.detectChanges();
+        this.data.set(data);
     }
     runLots() {
-        this.data = this.buildData(10000);
-        this.selected = undefined;
-        this.cdr.detectChanges();
+        this.data.set(this.buildData(10000));
+        this.selected.set(undefined);
     }
     clear() {
-        this.data = [];
-        this.selected = undefined;
-        this.cdr.detectChanges();
+        this.data.set([]);
+        this.selected.set(undefined);
     }
     swapRows() {
-        if (this.data.length > 998) {
-            var a = this.data[1];
-            this.data[1] = this.data[998];
-            this.data[998] = a;
+        let data = this.data();
+        if (data.length > 998) {
+            var a = data[1];
+            data[1] = data[998];
+            data[998] = a;
         }
-        this.cdr.detectChanges();
+        this.data.set(data);
+    }
+
+    _random(max: number) {
+        return Math.round(Math.random() * 1000) % max;
     }
 }

frameworks/keyed/angular-cf-nozone/src/app/app.component.ts

@@ -1,10 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
-import { NgZone, ɵNoopNgZone } from '@angular/core';
+import { ɵprovideZonelessChangeDetection} from '@angular/core';
 
 bootstrapApplication(AppComponent, {
-  providers: [
-    // https://github.com/angular/angular/issues/47538
-    { provide: NgZone, useClass: ɵNoopNgZone }
-  ]
+  providers: [ɵprovideZonelessChangeDetection()]
 });

frameworks/keyed/angular-cf-nozone/src/main.ts

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <title>React Hooks</title>
+  <title>Frei Hooks</title>
   <link href="/css/currentStyle.css" rel="stylesheet"/>
 </head>
 <body>

frameworks/keyed/frei-hooks/index.html

@@ -34,6 +34,6 @@
     "webpack-cli": "5.0.1"
   },
   "dependencies": {
-    "@aimwhy/frei": "^1.0.40"
+    "@aimwhy/frei": "^1.0.43"
   }
 }

frameworks/keyed/frei-hooks/package-lock.json

@@ -22,7 +22,7 @@
     "@glint/environment-ember-template-imports": "^1.2.2",
     "@glint/environment-glimmerx": "^1.2.2",
     "@glint/template": "^1.2.2",
-    "@lifeart/gxt": "0.0.16",
+    "@lifeart/gxt": "0.0.21",
     "prettier": "^3.1.1",
     "prettier-plugin-ember-template-tag": "^2.0.0",
     "terser": "^5.26.0"