feat(lib): add scully-plugin-flash-prevention to the repo

cypress/integration/sampleBlog.spec.js

@@ -52,4 +52,14 @@ context('check first integration test', () => {
       .its('scully-transfer-state')
       .should('have', 'posts');
   });
+
+  it('Check that the slow user mock template appears then disappears', () => {
+    cy.visit('/slow').reload();
+
+    cy.get('app-slow>h1').contains('Scully Not Generated');
+    console.log('HERE');
+    cy.wait(4100)
+      .get('app-slow>h1')
+      .contains('Scully Generated');
+  });
 });

docs/scully-cmd-line.md

@@ -18,6 +18,7 @@ Scully CLI has the following options available:
   - [ssl](#ssl)
   - [ssl-cert](#ssl-cert)
   - [ssl-key](#ssl-key)
+  - [tds](#tds)
 
 ## serve
 
@@ -123,3 +124,18 @@ npx scully serve/watch --ssl --ssl-key=./url/to/file
 ```
 
 Add url to ssl key file for SSL server
+
+## tds
+
+```bash
+npx scully --tds
+```
+
+This launches the Test Data Server. This is only helpful for demos. Currently the following APIs are
+supported on the test data server:
+
+- `/users` - returns a list of users
+- `/users/:id` - returns just one user by id
+- `/posts` - returns a list of posts
+- `/posts/:id` - returns a post by id
+- `/slow/:delay` - returns a 200 after the delay has gone by. (eg: `/slow/2000` takes 2 seconds)

package.json

@@ -11,8 +11,8 @@
     "scully:run": "npm run scully:dev:all -- serve",
     "scully:run:test": "npm run test && npm run e2e",
     "scully:r": "node ./dist/scully/scully serve --tds",
-    "scully:precommit": "npm run scully:compile:all && rm -rf ./dist/static && node  ./dist/scully/scully --tds && npm run test",
-    "scully:compile:all": "ng build @scullyio/ng-lib && ng build --prod && npm run scully:dev:compile",
+    "scully:precommit": "npm run scully:compile:all && rm -rf ./dist/static && node  ./dist/scully/scully --tds --nw && npm run test",
+    "scully:compile:all": "ng build @scullyio/ng-lib && ng build --prod && npm run scully:dev:compile && npm run flash:build",
     "generate": "tsc -p  ./scully/tsconfig.scully.json && node ./dist/scully/scully --tds",
     "scully:dev:watch": "tsc -w -p ./scully/tsconfig.scully.json",
     "scully:dev:compile": "tsc -p    ./scully/tsconfig.scully.json",
@@ -25,6 +25,7 @@
     "scully:publish:major": "tsc -p ./tsconfig.scully.json && npm version major",
     "scully:test:ssl:self": "npm run generate -- serve --ssl",
     "scully:test:ssl:file": "npm run generate -- serve --ssl --ssl-cert=./certs/localhost.cert --ssl-key=./certs/localhost.key",
+    "flash:build": "rm -rf ./dist/scully-plugin-flash-prevention && cp -r projects/scully-plugin-flash-prevention dist/scully-plugin-flash-prevention",
     "changelog": "npx conventional-changelog -p scully -i ./CHANGELOG.md -s && git add ./CHANGELOG.md",
     "commit": "git add . && npx git-cz",
     "commit:select": "npx git-cz",
@@ -73,6 +74,7 @@
     "@types/jasmine": "~3.4.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/jest": "25.1.1",
+    "@types/jsdom": "^16.1.0",
     "@types/json5": "^0.0.30",
     "@types/marked": "^0.7.0",
     "@types/node": "^12.11.1",

projects/sampleBlog/src/app/app-routing.module.ts

@@ -21,6 +21,7 @@ const routes: Routes = [
   },
   {path: 'demo', loadChildren: () => import('./demo/demo.module').then(m => m.DemoModule)},
   {path: 'exclude', loadChildren: () => import('./exclude/exclude.module').then(m => m.ExcludeModule)},
+  {path: 'slow', loadChildren: () => import('./slow/slow.module').then(m => m.SlowModule)},
   {
     path: '**',
     loadChildren: () => import('./pagenotfound/pagenotfound.module').then(m => m.PagenotfoundModule),

projects/sampleBlog/src/app/app.module.ts

@@ -11,7 +11,7 @@ import {AppComponent} from './app.component';
     BrowserModule,
     HttpClientModule,
     AppRoutingModule,
-    ScullyLibModule.forRoot({useTranferState: true, alwaysMonitor: false}),
+    ScullyLibModule.forRoot({useTranferState: true, alwaysMonitor: true}),
   ],
   bootstrap: [AppComponent],
 })

projects/sampleBlog/src/app/slow/slow-routing.module.ts

@@ -0,0 +1,12 @@
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+
+import {SlowComponent} from './slow.component';
+
+const routes: Routes = [{path: '', component: SlowComponent}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SlowRoutingModule {}

projects/sampleBlog/src/app/slow/slow.component.spec.ts

@@ -0,0 +1,24 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {SlowComponent} from './slow.component';
+
+describe('SlowComponent', () => {
+  let component: SlowComponent;
+  let fixture: ComponentFixture<SlowComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SlowComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SlowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/sampleBlog/src/app/slow/slow.component.ts

@@ -0,0 +1,23 @@
+import {HttpClient} from '@angular/common/http';
+import {Component} from '@angular/core';
+import {isScullyGenerated} from '@scullyio/ng-lib';
+import {first} from 'rxjs/operators';
+
+@Component({
+  selector: 'app-slow',
+  template: `
+    <p>slow works!</p>
+    <h1 *ngIf="!isGenerated">Scully Not Generated</h1>
+    <h1 *ngIf="isGenerated">Scully Generated</h1>
+  `,
+  styles: [``],
+})
+export class SlowComponent {
+  isGenerated = isScullyGenerated();
+
+  delay$ = this.http.get('http://localhost:8200/slow/4000');
+
+  constructor(private http: HttpClient) {
+    this.delay$.pipe(first()).subscribe();
+  }
+}

projects/sampleBlog/src/app/slow/slow.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {SlowRoutingModule} from './slow-routing.module';
+import {SlowComponent} from './slow.component';
+
+@NgModule({
+  declarations: [SlowComponent],
+  imports: [CommonModule, SlowRoutingModule],
+})
+export class SlowModule {}

projects/sampleBlog/src/index.html

@@ -9,6 +9,6 @@
   </head>
 
   <body>
-    <app-root></app-root>
+    <app-root class="foo"></app-root>
   </body>
 </html>

projects/scully-plugin-flash-prevention/README.md

@@ -0,0 +1,102 @@
+# ScullyPluginFlashPrevention
+
+The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your
+app may be experiencing once you add Scully to your project.
+
+After adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is
+immediately available. After appearing instantly, the JavaScript and CSS files will download and
+then your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may
+disappear for a moment, and then once the app is ready, the view will re-appear. This
+disappearing-then-appearing is very normal for apps that are pre-rendered on a server. This
+project is to prevent that.
+
+This project shows the pre-rendered copy of your app until your app is fully render and the
+flash is over. It then shows your app and deletes the copy.
+
+### How it works
+
+Before this plugin, you app would pre-render and then save to file, like this:
+
+```html
+<app-root _nghost-abc="" ng-version="9.0.1" class="my-class">
+  // The entire content of your app here
+</app-root>
+```
+
+After this plugin, you will see the following in your pre-rendered template:
+
+```html
+<app-root class="my-class"></app-root>
+<app-root-scully _nghost-abc="" ng-version="9.0.1" class="my-class">
+  // The entire content of your app here
+</app-root-scully>
+```
+
+This `app-root-scully` will be the pre-rendered copy of your app. Prior to your app being
+rendered fully, `app-root` will be hidden and `app-root-scully` will be displayed. Once your
+app has fully bootstrapped, `app-root-scully` will be hidden and then 100ms later removed
+from the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added
+during the Scully build that looks like the following:
+
+```css
+body:not(.loaded) app-root {
+  display: none;
+}
+body.loaded app-root-scully {
+  display: inherit;
+}
+```
+
+Once the app has been fully loaded, the `loaded` class is added to the `<body>` tag.
+
+And that's how it all works!!!
+
+## Getting Started
+
+**1 -** Install the package: `npm install -d scully-plugin-flash-prevention`
+
+**2 -** Add the postRenderer to your `scully.config`:
+
+```javascript
+// Add this line to your imports
+const { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');
+
+// Add the following to your `scully.config.postRenderers`
+exports.config = {
+  ...
+  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],
+  ...
+}
+```
+
+You only need to pass the `{appRootSelector: 'custom-app-root'}` if your app has a selector other
+than `app-root`. It is defaulted to `app-root`.
+
+**3 -** Update `app.module` to include `alwaysMonitor` in the `ScullyLibModule.forRoot` call.
+
+```typescript
+ScullyLibModule.forRoot({
+  useTransferState: true,
+  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`
+});
+```
+
+**4 -** Apply any styles from `app-root` to `app-root-scully` as well. Any styles that are in your
+`app.component.(css|scss|less)` need to be applied to the copy of your app that was made. This means
+that you need to possibly move any styles that apply to the `app-root` specifically, and put them
+in a location where you can also make those styles apply to `app-root-scully` as well. See here:
+
+```css
+// BEFORE
+app-root {
+  ... some styles;
+}
+
+// AFTER
+app-root,
+app-root-scully {
+  ... some styles;
+}
+```
+
+That's all it takes to get set up.

projects/scully-plugin-flash-prevention/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "scully-plugin-flash-prevention",
+  "version": "0.0.32",
+  "peerDependencies": {
+    "@angular/common": "^9.0.0-rc.9",
+    "@angular/core": "^9.0.0-rc.9",
+    "@scullyio/scully": "^0.0.78",
+    "tslib": "^1.10.0"
+  },
+  "main": "src/lib/public-apis.js",
+  "contributors": [
+    "Aaron Frost <aaronfrost@gmail.com>"
+  ]
+}