fix(stack-blitz): add more configuration files to the template

allow the exported/downloaded project from StackBlitz to be functional
- move files into /src and /src/app to match a normal configuration
rename Stackblitz to StackBlitz
use StackBlitz logo to launch examples
use a relative URL for downloading `versions.json`
update Ivy fix for VersionPicker
log errors during app bootstrap in StackBlitz
switch StackBlitz examples to SCSS
fix lint warnings in deploy script
add ignores for Firebase

Fixes #623. Fixes #629. Relates to #642.

Author: Splaktar

.gitignore

@@ -40,6 +40,8 @@ speed-measure-plugin*.json
 npm-debug.log
 yarn-error.log
 testem.log
+firebase-debug.log
+.firebase/
 /typings
 
 #System Files

src/app/app-module.ts

@@ -20,7 +20,7 @@ import {ComponentHeaderModule} from './pages/component-page-header/component-pag
 import {StyleManager} from './shared/style-manager';
 import {SvgViewerModule} from './shared/svg-viewer/svg-viewer';
 import {ThemePickerModule} from './shared/theme-picker';
-import {StackblitzButtonModule} from './shared/stackblitz';
+import {StackBlitzButtonModule} from './shared/stack-blitz';
 import {NavBarModule} from './shared/navbar';
 import {ThemeStorage} from './shared/theme-picker/theme-storage/theme-storage';
 import {GuideItems} from './shared/guide-items/guide-items';
@@ -58,7 +58,7 @@ import {GaService} from './shared/ga/ga';
     GuideViewerModule,
     HomepageModule,
     NavBarModule,
-    StackblitzButtonModule,
+    StackBlitzButtonModule,
     SvgViewerModule,
     ThemePickerModule,
   ],

src/app/shared/doc-viewer/doc-viewer-module.ts

@@ -1,6 +1,6 @@
 import {DocViewer} from './doc-viewer';
 import {ExampleViewer} from '../example-viewer/example-viewer';
-import {StackblitzButtonModule} from '../stackblitz/stackblitz-button';
+import {StackBlitzButtonModule} from '../stack-blitz/stack-blitz-button';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
@@ -23,7 +23,7 @@ import {CopierService} from '../copier/copier.service';
     MatTabsModule,
     CommonModule,
     PortalModule,
-    StackblitzButtonModule
+    StackBlitzButtonModule
   ],
   providers: [CopierService],
   declarations: [DocViewer, ExampleViewer, HeaderLink],

src/app/shared/example-viewer/example-viewer.html

@@ -12,7 +12,7 @@
       </mat-icon>
     </button>
 
-  <stackblitz-button [example]="example"></stackblitz-button>
+  <stack-blitz-button [example]="example"></stack-blitz-button>
 </div>
 
   <div class="docs-example-viewer-source" *ngIf="showSource">

src/app/shared/stack-blitz/index.ts

@@ -0,0 +1 @@
+export * from './stack-blitz-button';

src/app/shared/stack-blitz/stack-blitz-button.html

@@ -0,0 +1,20 @@
+<div [matTooltip]="isDisabled ? 'Building StackBlitz example...' : 'Edit in StackBlitz'">
+  <button mat-icon-button type="button"
+          (click)="openStackBlitz()"
+          [disabled]="isDisabled">
+    <mat-icon>
+      <svg width='24px' height='24px' viewBox='0 -3 23 40' version='1.1'
+           xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
+        <title>StackBlitz Logo</title>
+        <desc>Created with Sketch.</desc>
+        <g id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
+          <g fill='#1389FD' fill-rule='nonzero'>
+            <polygon id='Path'
+                     points='0 19.9187087 9.87007874 19.9187087 4.12007874 34 23 13.9612393 13.0846457 13.9612393 18.7893701 0'>
+            </polygon>
+          </g>
+        </g>
+      </svg>
+    </mat-icon>
+  </button>
+</div>

src/app/shared/stackblitz/stackblitz-button.ts renamed to src/app/shared/stack-blitz/stack-blitz-button.ts

@@ -1,59 +1,60 @@
 import {Component, Input, NgModule} from '@angular/core';
-import {StackblitzWriter} from './stackblitz-writer';
 import {ExampleData} from '@angular/material-examples';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {StackBlitzWriter} from './stack-blitz-writer';
 
 @Component({
-  selector: 'stackblitz-button',
-  templateUrl: './stackblitz-button.html',
-  providers: [StackblitzWriter],
+  selector: 'stack-blitz-button',
+  templateUrl: './stack-blitz-button.html',
+  providers: [StackBlitzWriter],
   host: {
-    '(mouseover)': 'isDisabled = !stackblitzForm'
+    '(mouseover)': 'isDisabled = !stackBlitzForm'
   }
 })
-export class StackblitzButton {
+export class StackBlitzButton {
   /**
-   * The button becomes disabled if the user hovers over the button before the stackblitz form
+   * The button becomes disabled if the user hovers over the button before the StackBlitz form
    * is created. After the form is created, the button becomes enabled again.
    * The form creation usually happens extremely quickly, but we handle the case of the
-   * stackblitz not yet being ready for people with poor network connections or slow devices.
+   * StackBlitz not yet being ready for people with poor network connections or slow devices.
    */
   isDisabled = false;
-  stackblitzForm: HTMLFormElement;
+  stackBlitzForm: HTMLFormElement;
 
   @Input()
   set example(example: string) {
     const exampleData = new ExampleData(example);
 
     if (example) {
-      this.stackblitzWriter.constructStackblitzForm(exampleData).then(stackblitzForm => {
-        this.stackblitzForm = stackblitzForm;
+      this.stackBlitzWriter.constructStackBlitzForm(exampleData)
+      .then((stackBlitzForm: HTMLFormElement) => {
+        this.stackBlitzForm = stackBlitzForm;
         this.isDisabled = false;
       });
     } else {
       this.isDisabled = true;
     }
   }
 
-  constructor(private stackblitzWriter: StackblitzWriter) {}
+  constructor(private stackBlitzWriter: StackBlitzWriter) {}
 
-  openStackblitz(): void {
+  openStackBlitz(): void {
     // When the form is submitted, it must be in the document body. The standard of forms is not
     // to submit if it is detached from the document. See the following chromium commit for
     // more details:
     // https://chromium.googlesource.com/chromium/src/+/962c2a22ddc474255c776aefc7abeba00edc7470%5E!
-    document.body.appendChild(this.stackblitzForm);
-    this.stackblitzForm.submit();
-    document.body.removeChild(this.stackblitzForm);
+    document.body.appendChild(this.stackBlitzForm);
+    this.stackBlitzForm.submit();
+    document.body.removeChild(this.stackBlitzForm);
   }
 }
 
 @NgModule({
   imports: [MatTooltipModule, MatButtonModule, MatIconModule],
-  exports: [StackblitzButton],
-  declarations: [StackblitzButton],
-  providers: [StackblitzWriter],
+  exports: [StackBlitzButton],
+  declarations: [StackBlitzButton],
+  providers: [StackBlitzWriter],
 })
-export class StackblitzButtonModule {}
+export class StackBlitzButtonModule {}

src/app/shared/stackblitz/stackblitz-writer.spec.ts renamed to src/app/shared/stack-blitz/stack-blitz-writer.spec.ts

@@ -1,11 +1,11 @@
 import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
 import {async, fakeAsync, flushMicrotasks, inject, TestBed} from '@angular/core/testing';
 import {ExampleData} from '@angular/material-examples';
-import {StackblitzWriter} from './stackblitz-writer';
+import {StackBlitzWriter} from './stack-blitz-writer';
 
 
-describe('StackblitzWriter', () => {
-  let stackblitzWriter: StackblitzWriter;
+describe('StackBlitzWriter', () => {
+  let stackBlitzWriter: StackBlitzWriter;
   let data: ExampleData;
   let http: HttpTestingController;
 
@@ -14,7 +14,7 @@ describe('StackblitzWriter', () => {
       imports: [HttpClientTestingModule],
       declarations: [],
       providers: [
-        StackblitzWriter,
+        StackBlitzWriter,
       ]
     }).compileComponents();
   }));
@@ -24,19 +24,19 @@ describe('StackblitzWriter', () => {
   }));
 
   beforeEach(() => {
-    stackblitzWriter = TestBed.get(StackblitzWriter);
+    stackBlitzWriter = TestBed.get(StackBlitzWriter);
     data = new ExampleData('');
     data.exampleFiles = ['test.ts', 'test.html', 'src/detail.ts'];
   });
 
   it('should append correct copyright', () => {
-    expect(stackblitzWriter._appendCopyright('test.ts', 'NoContent')).toBe(`NoContent
+    expect(stackBlitzWriter._appendCopyright('test.ts', 'NoContent')).toBe(`NoContent
 
 /**  Copyright 2019 Google LLC. All Rights Reserved.
     Use of this source code is governed by an MIT-style license that
     can be found in the LICENSE file at http://angular.io/license */`);
 
-    expect(stackblitzWriter._appendCopyright('test.html', 'NoContent')).toBe(`NoContent
+    expect(stackBlitzWriter._appendCopyright('test.html', 'NoContent')).toBe(`NoContent
 
 <!-- Copyright 2019 Google LLC. All Rights Reserved.
     Use of this source code is governed by an MIT-style license that
@@ -45,27 +45,27 @@ describe('StackblitzWriter', () => {
   });
 
   it('should create form element', () => {
-    expect(stackblitzWriter._createFormElement('index.ts').outerHTML).toBe(
+    expect(stackBlitzWriter._createFormElement('index.ts').outerHTML).toBe(
       `<form action="https://run.stackblitz.com/api/angular/v1?file=index.ts" ` +
       `method="post" target="_blank"></form>`);
   });
 
   it('should add files to form input', () => {
-    let form = stackblitzWriter._createFormElement('index.ts');
+    let form = stackBlitzWriter._createFormElement('index.ts');
 
-    stackblitzWriter._addFileToForm(form, data, 'NoContent', 'test.ts', 'path/to/file');
-    stackblitzWriter._addFileToForm(form, data, 'Test', 'test.html', 'path/to/file');
-    stackblitzWriter._addFileToForm(form, data, 'Detail', 'src/detail.ts', 'path/to/file');
+    stackBlitzWriter._addFileToForm(form, data, 'NoContent', 'test.ts', 'path/to/file');
+    stackBlitzWriter._addFileToForm(form, data, 'Test', 'test.html', 'path/to/file');
+    stackBlitzWriter._addFileToForm(form, data, 'Detail', 'src/detail.ts', 'path/to/file');
 
     expect(form.elements.length).toBe(3);
-    expect(form.elements[0].getAttribute('name')).toBe('files[app/test.ts]');
-    expect(form.elements[1].getAttribute('name')).toBe('files[app/test.html]');
-    expect(form.elements[2].getAttribute('name')).toBe('files[app/src/detail.ts]');
+    expect(form.elements[0].getAttribute('name')).toBe('files[src/app/test.ts]');
+    expect(form.elements[1].getAttribute('name')).toBe('files[src/app/test.html]');
+    expect(form.elements[2].getAttribute('name')).toBe('files[src/app/src/detail.ts]');
   });
 
   it('should open a new window with stackblitz url', fakeAsync(() => {
     let form: HTMLFormElement;
-    stackblitzWriter.constructStackblitzForm(data).then((result: HTMLFormElement) => {
+    stackBlitzWriter.constructStackBlitzForm(data).then((result: HTMLFormElement) => {
       form = result;
       flushMicrotasks();
 
@@ -91,14 +91,14 @@ describe('StackblitzWriter', () => {
       expect(form.elements[5].getAttribute('name')).toBe('dependencies');
 
       // Should have files needed for example.
-      expect(form.elements[6].getAttribute('name')).toBe('files[index.html]');
-      expect(form.elements[7].getAttribute('name')).toBe('files[styles.css]');
-      expect(form.elements[8].getAttribute('name')).toBe('files[polyfills.ts]');
-      expect(form.elements[9].getAttribute('name')).toBe('files[main.ts]');
-      expect(form.elements[10].getAttribute('name')).toBe('files[material-module.ts]');
-      expect(form.elements[11].getAttribute('name')).toBe('files[app/test.ts]');
-      expect(form.elements[12].getAttribute('name')).toBe('files[app/test.html]');
-      expect(form.elements[13].getAttribute('name')).toBe('files[app/src/detail.ts]');
+      expect(form.elements[6].getAttribute('name')).toBe('files[src/index.html]');
+      expect(form.elements[7].getAttribute('name')).toBe('files[src/styles.scss]');
+      expect(form.elements[8].getAttribute('name')).toBe('files[src/polyfills.ts]');
+      expect(form.elements[9].getAttribute('name')).toBe('files[src/main.ts]');
+      expect(form.elements[10].getAttribute('name')).toBe('files[src/app/material-module.ts]');
+      expect(form.elements[11].getAttribute('name')).toBe('files[src/app/test.ts]');
+      expect(form.elements[12].getAttribute('name')).toBe('files[src/app/test.html]');
+      expect(form.elements[13].getAttribute('name')).toBe('files[src/app/src/detail.ts]');
     });
   }));
 });
@@ -110,11 +110,11 @@ const FAKE_DOCS: {[key: string]: string} = {
 };
 
 const TEST_URLS = [
-  '/assets/stackblitz/index.html',
-  '/assets/stackblitz/styles.css',
-  '/assets/stackblitz/polyfills.ts',
-  '/assets/stackblitz/main.ts',
-  '/assets/stackblitz/material-module.ts',
+  '/assets/stack-blitz/src/index.html',
+  '/assets/stack-blitz/src/styles.scss',
+  '/assets/stack-blitz/src/polyfills.ts',
+  '/assets/stack-blitz/src/main.ts',
+  '/assets/stack-blitz/src/app/material-module.ts',
   '/docs-content/examples-source/test.ts',
   '/docs-content/examples-source/test.html',
   '/docs-content/examples-source/src/detail.ts',