rx-angular · edbzn · Nov 16, 2023 · Nov 9, 2023 · Nov 9, 2023 · Nov 9, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -55,6 +55,8 @@
        "@typescript-eslint/ban-types": "warn",
        "@typescript-eslint/no-empty-interface": "warn",
        "@typescript-eslint/no-empty-function": "warn",
+        "@typescript-eslint/no-unused-vars": "warn",
+        "@typescript-eslint/no-explicit-any": "warn",
        "prefer-rest-params": "warn",
        "no-prototype-builtins": "warn",
        "no-empty": "warn"

diff --git a/apps/demos/project.json b/apps/demos/project.json
@@ -90,32 +90,31 @@
    "serve": {
      "executor": "@angular-devkit/build-angular:dev-server",
      "options": {
-        "browserTarget": "demos:build",
-        "port": 4300
+        "port": 4300,
+        "buildTarget": "demos:build"
      },
      "configurations": {
        "production": {
-          "browserTarget": "demos:build:production"
+          "buildTarget": "demos:build:production"
        },
        "npm": {
-          "browserTarget": "demos:build:npm"
+          "buildTarget": "demos:build:npm"
        },
        "zoneless": {
-          "browserTarget": "demos:build:zoneless"
+          "buildTarget": "demos:build:zoneless"
        }
      }
    },
    "extract-i18n": {
      "executor": "@angular-devkit/build-angular:extract-i18n",
      "options": {
-        "browserTarget": "demos:build"
+        "buildTarget": "demos:build"
      }
    },
    "test": {
      "executor": "@nx/jest:jest",
      "options": {
-        "jestConfig": "apps/demos/jest.config.ts",
-        "passWithNoTests": true
+        "jestConfig": "apps/demos/jest.config.ts"
      },
      "outputs": ["{workspaceRoot}/coverage/apps/demos"]
    }

diff --git a/apps/demos/src/app/features/home/home.component.ts b/apps/demos/src/app/features/home/home.component.ts
@@ -4,29 +4,41 @@ import { Component } from '@angular/core';
  selector: 'rxa-home',
  template: `
    <h1>Welcome to RxAngular Demos!</h1>
-    <h3>Explore various sections that will guide you through features of RxAngular.</h3>
+    <h3>
+      Explore various sections that will guide you through features of
+      RxAngular.
+    </h3>

    <ul>
      <li><h4>🏁 Fundamentals</h4></li>
-      Demos presenting fundamental rules and functionalities existing in Angular that are good to know before you start your journey with RxAngular.
+      Demos presenting fundamental rules and functionalities existing in Angular
+      that are good to know before you start your journey with RxAngular.

      <li><h4>🧰 Template</h4></li>
-      Playground for different functionalities of the <code>@rx-angular/template</code> package.
+      Playground for different functionalities of the
+      <code>&#64;rx-angular/template</code>
+      package.

      <li><h4>📋 Tutorials</h4></li>
-      Tutorials for features existing in the <code>@rx-angular</code> packages.
+      Tutorials for features existing in the
+      <code>&#64;rx-angular</code>
+      packages.

      <li><h4>🧮 Integrations</h4></li>
-      <code>@rx-angular/state</code> integrated with different libraries and patterns.
+      <code>&#64;rx-angular/state</code>
+      integrated with different libraries and patterns.

      <li><h4>🔬 Experiments</h4></li>
-      Experiments with features, that are still under development. ⚠️Warning! ⚠️Unstable or broken features may lay ahead!
+      Experiments with features, that are still under development. ⚠️Warning!
+      ⚠️Unstable or broken features may lay ahead!
    </ul>
  `,
-  styles: [`
-    code {
-      background: black;
-    }
-  `]
+  styles: [
+    `
+      code {
+        background: black;
+      }
+    `,
+  ],
 })
 export class HomeComponent {}
diff --git a/apps/ssr/project.json b/apps/ssr/project.json
@@ -56,26 +56,25 @@
    "serve": {
      "executor": "@angular-devkit/build-angular:dev-server",
      "options": {
-        "browserTarget": "ssr:build"
+        "buildTarget": "ssr:build"
      },
      "configurations": {
        "production": {
-          "browserTarget": "ssr:build:production"
+          "buildTarget": "ssr:build:production"
        }
      }
    },
    "extract-i18n": {
      "executor": "@angular-devkit/build-angular:extract-i18n",
      "options": {
-        "browserTarget": "ssr:build"
+        "buildTarget": "ssr:build"
      }
    },
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/apps/ssr"],
      "options": {
-        "jestConfig": "apps/ssr/jest.config.ts",
-        "passWithNoTests": true
+        "jestConfig": "apps/ssr/jest.config.ts"
      }
    },
    "server": {
@@ -102,7 +101,7 @@
      }
    },
    "serve-ssr": {
-      "executor": "@nguniversal/builders:ssr-dev-server",
+      "executor": "@angular-devkit/build-angular:ssr-dev-server",
      "options": {
        "browserTarget": "ssr:build",
        "serverTarget": "ssr:server"

diff --git a/apps/ssr/server.ts b/apps/ssr/server.ts
@@ -1,44 +1,56 @@
 import 'zone.js/node';

-import { ngExpressEngine } from '@nguniversal/express-engine';
-import * as express from 'express';
-import { join } from 'path';
-
-import { AppServerModule } from './src/main.server';
 import { APP_BASE_HREF } from '@angular/common';
-import { existsSync } from 'fs';
+import { CommonEngine } from '@angular/ssr';
+import * as express from 'express';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import bootstrap from './src/main.server';

 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/apps/ssr/browser');
-  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
+    ? join(distFolder, 'index.original.html')
+    : join(distFolder, 'index.html');

-  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
-  server.engine('html', ngExpressEngine({
-    bootstrap: AppServerModule,
-  }));
+  const commonEngine = new CommonEngine();

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser
-  server.get('*.*', express.static(distFolder, {
-    maxAge: '1y'
-  }));
+  server.get(
+    '*.*',
+    express.static(distFolder, {
+      maxAge: '1y',
+    })
+  );
+
+  // All regular routes use the Angular engine
+  server.get('*', (req, res, next) => {
+    const { protocol, originalUrl, baseUrl, headers } = req;

-  // All regular routes use the Universal engine
-  server.get('*', (req, res) => {
-    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+    commonEngine
+      .render({
+        bootstrap,
+        documentFilePath: indexHtml,
+        url: `${protocol}://${headers.host}${originalUrl}`,
+        publicPath: distFolder,
+        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+      })
+      .then((html) => res.send(html))
+      .catch((err) => next(err));
  });

  return server;
 }

 function run(): void {
-  const port = process.env.PORT || 4000;
+  const port = process.env['PORT'] || 4000;

  // Start up the Node server
  const server = app();
@@ -52,9 +64,9 @@ function run(): void {
 // The below code is to ensure that the server is run only when not requiring the bundle.
 declare const __non_webpack_require__: NodeRequire;
 const mainModule = __non_webpack_require__.main;
-const moduleFilename = mainModule && mainModule.filename || '';
+const moduleFilename = (mainModule && mainModule.filename) || '';
 if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
 }

-export * from './src/main.server';
+export default bootstrap;
diff --git a/apps/ssr/src/app/app.component.ts b/apps/ssr/src/app/app.component.ts
@@ -1,16 +1,22 @@
 import { isPlatformServer } from '@angular/common';
 import { Component, Inject, NgZone, OnInit, PLATFORM_ID } from '@angular/core';
 import { rxState } from '@rx-angular/state';
+import { RxFor } from '@rx-angular/template/for';
+import { RxLet } from '@rx-angular/template/let';
+import { RxPush } from '@rx-angular/template/push';
+import { RxUnpatch } from '@rx-angular/template/unpatch';
 import { of } from 'rxjs';

 @Component({
  selector: 'rx-angular-root',
+  standalone: true,
  template: `
    <div id="let" *rxLet="color$; let color">{{ color }}</div>
    <div id="push">{{ color$ | push }}</div>
    <div id="unpatch" [unpatch]="['click']" (click)="onClick()"></div>
    <div class="for" *rxFor="let color of colors$">{{ color }}</div>
  `,
+  imports: [RxPush, RxLet, RxUnpatch, RxFor],
 })
 export class AppComponent implements OnInit {
  private readonly state = rxState<{ color: string; colors: string[] }>(

diff --git a/apps/ssr/src/app/app.config.server.ts b/apps/ssr/src/app/app.config.server.ts
@@ -0,0 +1,9 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [provideServerRendering()],
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);
diff --git a/apps/ssr/src/app/app.config.ts b/apps/ssr/src/app/app.config.ts
@@ -0,0 +1,7 @@
+import { ApplicationConfig } from '@angular/core';
+
+import { provideClientHydration } from '@angular/platform-browser';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideClientHydration()],
+};
diff --git a/apps/ssr/src/app/app.module.ts b/apps/ssr/src/app/app.module.ts
diff --git a/apps/ssr/src/app/app.server.module.ts b/apps/ssr/src/app/app.server.module.ts
diff --git a/apps/ssr/src/main.server.ts b/apps/ssr/src/main.server.ts
@@ -1,9 +1,7 @@
-import { enableProdMode } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';

-import { environment } from './environments/environment';
+const bootstrap = () => bootstrapApplication(AppComponent, config);

-if (environment.production) {
-  enableProdMode();
-}
-
-export { AppServerModule } from './app/app.server.module';
+export default bootstrap;
diff --git a/apps/ssr/src/main.ts b/apps/ssr/src/main.ts
@@ -1,15 +1,7 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';

-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
-});
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err)
+);
diff --git a/libs/cdk/package.json b/libs/cdk/package.json
@@ -42,7 +42,7 @@
    "url": "https://github.com/rx-angular/rx-angular.git"
  },
  "peerDependencies": {
-    "@angular/core": "^16.0.0",
+    "@angular/core": "^17.0.0",
    "rxjs": "^6.5.3 || ^7.4.0"
  },
  "dependencies": {

diff --git a/libs/cdk/project.json b/libs/cdk/project.json
@@ -32,7 +32,6 @@
      "executor": "@nx/jest:jest",
      "options": {
        "jestConfig": "libs/cdk/jest.config.ts",
-        "passWithNoTests": true,
        "codeCoverage": true
      },
      "outputs": ["{workspaceRoot}/coverage/cdk"]

diff --git a/libs/cdk/schematics/src/migrations/update-1.0.0-beta.1/index.spec.ts b/libs/cdk/schematics/src/migrations/update-1.0.0-beta.1/index.spec.ts
@@ -432,8 +432,6 @@ describe('cdk migration 1.0.0-beta.1', () => {

    tree.create(filePath, fileInput);

-    return runner
-      .runSchematicAsync(`update-1.0.0-beta.1`, {}, tree)
-      .toPromise();
+    return runner.runSchematic(`update-1.0.0-beta.1`, {}, tree);
  }
 });
diff --git a/libs/eslint-plugin/package.json b/libs/eslint-plugin/package.json
@@ -3,6 +3,10 @@
  "version": "1.0.0",
  "peerDependencies": {
    "eslint": ">=8.0.0",
-    "typescript": ">=4.3.5"
+    "typescript": ">=4.3.5",
+    "@typescript-eslint/parser": "^6.10.0"
+  },
+  "dependencies": {
+    "@typescript-eslint/utils": "^6.10.0"
  }
 }
diff --git a/libs/eslint-plugin/project.json b/libs/eslint-plugin/project.json
@@ -15,8 +15,7 @@
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/eslint-plugin"],
      "options": {
-        "jestConfig": "libs/eslint-plugin/jest.config.ts",
-        "passWithNoTests": true
+        "jestConfig": "libs/eslint-plugin/jest.config.ts"
      }
    },
    "build": {
-Original file line number
+Diff line change
@@ -42,7 +42,7 @@
         "url": "https://github.com/rx-angular/rx-angular.git"
       },
       "peerDependencies": {
-        "@angular/core": "^16.0.0",
+        "@angular/core": "^17.0.0",
                   edbzn marked this conversation as resolved.
              

          
            Show resolved
            Hide resolved
         "rxjs": "^6.5.3 || ^7.4.0"
                   edbzn marked this conversation as resolved.
              

          
            Show resolved
            Hide resolved
       },
       "dependencies": {
-          Expand Down