setup Scully to add platform-server renderer. Update to RX7 (scullyio…

…#1446)

* chore(monorepo): update to rx7 and fix merge conflicts

apps/sample-blog/src/app/about/about.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ScullyRoutesService } from '@scullyio/ng-lib';
-import { take } from 'rxjs/operators';
+import { firstValueFrom } from 'rxjs';
 
 @Component({
   selector: 'app-about',
@@ -11,10 +11,7 @@ export class AboutComponent implements OnInit {
   constructor(private srs: ScullyRoutesService) {}
 
   async ngOnInit() {
-    const cur = await this.srs
-      .getCurrent()
-      .pipe(take(1))
-      .toPromise();
+    const cur = await firstValueFrom(this.srs.getCurrent())
     console.log(cur);
   }
 }

apps/sample-blog/src/app/app.module.ts

@@ -11,8 +11,10 @@ import { AppComponent } from './app.component';
     BrowserModule,
     HttpClientModule,
     AppRoutingModule,
-    ScullyLibModule.forRoot({ useTransferState: true, alwaysMonitor: true })
+    ScullyLibModule
+      .forRoot({ useTransferState: true, alwaysMonitor: true })
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }
+

apps/sample-blog/src/app/app.universal.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
+
+
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppUniversalModule {}

apps/sample-blog/src/app/blog/blog-holder.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { ScullyRoute, ScullyRoutesService, TransferStateService } from '@scullyio/ng-lib';
-import { map } from 'rxjs/operators';
+import { map } from 'rxjs';
 
 @Component({
   selector: 'app-blog-holder',

apps/sample-blog/src/app/blog/blog-list/blog-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';
-import { map } from 'rxjs/operators';
+import { map } from 'rxjs';
 
 @Component({
   selector: 'app-blog-list',

apps/sample-blog/src/app/demo/demo.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
-import { pluck, tap } from 'rxjs/operators';
+import { pluck, tap } from 'rxjs';
 
 @Component({
   selector: 'app-demo',

apps/sample-blog/src/app/noscript/noscript.module.ts

@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { Component, NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { ScullyLibModule, TransferStateService } from '@scullyio/ng-lib';
-import { map } from 'rxjs/operators';
+import { map } from 'rxjs';
 import { User } from '../user/user.component';
 
 @Component({

apps/sample-blog/src/app/slow/slow.component.ts

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { isScullyGenerated } from '@scullyio/ng-lib';
-import { first } from 'rxjs/operators';
+import { first } from 'rxjs';
 
 @Component({
   selector: 'app-slow',

apps/sample-blog/src/app/static/static.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { ScullyRoutesService } from '@scullyio/ng-lib';
-import { map, tap } from 'rxjs/operators';
+import { map, tap } from 'rxjs';
 
 @Component({
   selector: 'app-static',

apps/sample-blog/src/app/user/post/post.component.ts

@@ -8,7 +8,7 @@ import {
   tap,
   filter,
   map,
-} from 'rxjs/operators';
+} from 'rxjs';
 import { Post } from '../posts/posts.component';
 import { isScullyGenerated, TransferStateService } from '@scullyio/ng-lib';
 import { ActivatedRoute } from '@angular/router';

apps/sample-blog/src/app/user/posts/posts.component.ts

@@ -11,7 +11,7 @@ import {
   shareReplay,
   switchMap,
   tap,
-} from 'rxjs/operators';
+} from 'rxjs';
 
 export interface Post {
   userId: number;
@@ -37,18 +37,18 @@ export class PostsComponent implements OnInit {
     switchMap((id) =>
       this.http.get<Post[]>(`/api/posts?userId=${id}`).pipe(
         catchError(() =>
-          of({
+          of([{
             id,
             title: 'not found',
-          } as Post)
+          }] as Post[])
         )
       )
     ),
     shareReplay(1)
   );
 
   // This is an example of using TransferState
-  posts$ = isScullyGenerated()
+  posts$:Observable<Post[]> = isScullyGenerated()
     ? this.transferState.getState('posts')
     : this.apiPosts$.pipe(
         tap((posts) => this.transferState.setState('posts', posts))

apps/sample-blog/src/app/user/user.component.ts

@@ -11,7 +11,7 @@ import {
   map,
   shareReplay,
   tap,
-} from 'rxjs/operators';
+} from 'rxjs';
 
 @Component({
   selector: 'app-user',

apps/sample-blog/src/app/user/users/users.component.html

@@ -10,7 +10,7 @@ <h1>Users</h1>
       <tr *ngFor="let user of users">
         <td>{{ user.id }}</td>
         <td>
-          <a [routerLink]="user.id" [queryParams]="{ id: user.id }">
+          <a [routerLink]="''+user.id" [queryParams]="{ id: user.id }">
             {{ user.name }}</a
           >
         </td>

apps/sample-blog/src/app/user/users/users.component.ts

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { isScullyGenerated, TransferStateService } from '@scullyio/ng-lib';
 import { of } from 'rxjs';
-import { catchError, map, shareReplay, tap } from 'rxjs/operators';
+import { catchError, map, shareReplay, tap } from 'rxjs';
 import { User } from '../user.component';
 
 @Component({

apps/sample-blog/src/main.universal.ts

@@ -0,0 +1,10 @@
+import { enableProdMode } from '@angular/core';
+import { environment } from './environments/environment';
+
+
+if (environment.production) {
+  enableProdMode();
+}
+export { renderModule, renderModuleFactory } from '@angular/platform-server';
+export { AppUniversalModule } from './app/app.universal.module';
+

apps/scully-docs/src/app/components/lang-select/component/lang-select/lang-select.component.ts

@@ -1,7 +1,7 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import { NavListService } from '../../../nav-list/nav-list.service';
 import { ScullyRoutesService } from '@scullyio/ng-lib';
-import { pluck, take } from 'rxjs/operators';
+import { pluck, take } from 'rxjs';
 
 const langs = {
   es: {

apps/scully-docs/src/app/components/nav-list/nav-list.service.ts

@@ -1,7 +1,7 @@
 import { DoCheck, Injectable } from '@angular/core';
 import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';
 import { combineLatest, EMPTY, forkJoin, Observable, throwError } from 'rxjs';
-import { catchError, map, take, tap } from 'rxjs/operators';
+import { catchError, map, take, tap } from 'rxjs';
 
 export interface DocTree {
   _route: ScullyRoute;

apps/scully-docs/src/app/pages/docs/page/docs.page.component.ts

@@ -1,7 +1,7 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { EMPTY } from 'rxjs';
-import { catchError, map, tap } from 'rxjs/operators';
+import { catchError, map, tap } from 'rxjs';
 import { NavListService } from '../../../components/nav-list/nav-list.service';
 
 @Component({

apps/universal-sample-e2e/.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "parserOptions": {
+        "project": "apps/universal-sample-e2e/tsconfig.*?.json"
+      },
+      "rules": {}
+    },
+    {
+      "files": ["src/plugins/index.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off",
+        "no-undef": "off"
+      }
+    }
+  ]
+}

apps/universal-sample-e2e/cypress.json

@@ -0,0 +1,12 @@
+{
+  "fileServerFolder": ".",
+  "fixturesFolder": "./src/fixtures",
+  "integrationFolder": "./src/integration",
+  "modifyObstructiveCode": false,
+  "pluginsFile": "./src/plugins/index",
+  "supportFile": "./src/support/index.ts",
+  "video": true,
+  "videosFolder": "../../dist/cypress/apps/universal-sample-e2e/videos",
+  "screenshotsFolder": "../../dist/cypress/apps/universal-sample-e2e/screenshots",
+  "chromeWebSecurity": false
+}

apps/universal-sample-e2e/src/fixtures/example.json

@@ -0,0 +1,4 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]"
+}

apps/universal-sample-e2e/src/integration/app.spec.ts

@@ -0,0 +1,13 @@
+import { getGreeting } from '../support/app.po';
+
+describe('universal-sample', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('should display welcome message', () => {
+    // Custom command example, see `../support/commands.ts` file
+    cy.login('[email protected]', 'myPassword');
+
+    // Function helper example, see `../support/app.po.ts` file
+    getGreeting().contains('Welcome to universal-sample!');
+  });
+});

apps/universal-sample-e2e/src/plugins/index.js

@@ -0,0 +1,22 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+
+  // Preprocess Typescript file using Nx helper
+  on('file:preprocessor', preprocessTypescript(config));
+};

apps/universal-sample-e2e/src/support/app.po.ts

@@ -0,0 +1 @@
+export const getGreeting = () => cy.get('h1');

apps/universal-sample-e2e/src/support/commands.ts

@@ -0,0 +1,33 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

apps/universal-sample-e2e/src/support/index.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';

apps/universal-sample-e2e/tsconfig.e2e.json

@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "../../dist/out-tsc",
+    "allowJs": true,
+    "types": ["cypress", "node"],
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.js"],
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictTemplates": true
+  }
+}

apps/universal-sample-e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.e2e.json"
+    }
+  ]
+}

apps/universal-sample/.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.