Normalize editor demo component name

Author: NothingEverHappens

apps/codelab/src/app/admin/content/presentation-editor/preview/slide-preview/dynamic-renderer/dynamic-renderer.component.ts

@@ -8,7 +8,7 @@ import {
 import { ContentSlide, CustomBlock, SlideViewType } from '../../../types';
 import { CodelabTitleSlideEditorComponent } from '../../../wrappers/custom-component-editors/codelab-title-slide-editor/codelab-title-slide-editor.component';
 import { CodelabCodeDemoFilePathEditorComponent } from '../../../wrappers/custom-component-editors/codelab-code-demo-file-path-editor/codelab-code-demo-file-path-editor.component';
-import { CodelabCodeDemoConsoleComponent } from '../../../wrappers/custom-component-editors/codelab-code-demo-console/codelab-code-demo-console.component';
+import { CodelabCodeDemoConsoleEditorComponent } from '../../../wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component';
 import { CodeDemoEditorEditorComponent } from '../../../wrappers/custom-component-editors/codelab-code-demo-editor-editor/code-demo-editor.component';
 import { CodelabImageEditorComponent } from '../../../wrappers/custom-component-editors/codelab-image-editor/codelab-image-editor.component';
 import { BlankComponent } from '../blank/blank.component';
@@ -24,7 +24,7 @@ export class PreviewDynamicComponentResolver extends NgxdResolver<string, any> {
     super([
       { type: 'codelab-title-slide', component: TitleSlideComponent },
       {
-        type: 'codelab-code-demo-console',
+        type: 'codelab-code-demo-console-editor',
         component: CodelabCodeDemoPreviewComponent
       },
       {
@@ -65,8 +65,8 @@ export class EditDynamicComponentResolver extends NgxdResolver<string, any> {
         component: CodelabTitleSlideEditorComponent
       },
       {
-        type: 'codelab-code-demo-console',
-        component: CodelabCodeDemoConsoleComponent
+        type: 'codelab-code-demo-console-editor',
+        component: CodelabCodeDemoConsoleEditorComponent
       },
       {
         type: 'codelab-exercise-preview',
@@ -132,7 +132,7 @@ export class DynamicRendererComponent implements OnChanges {
     //   const componentMap = {
     //     preview: {
     //       'codelab-title-slide': TitleSlideComponent,
-    //       'codelab-code-demo-console': CodelabCodeDemoPreviewComponent,
+    //       'codelab-code-demo-console-editor': CodelabCodeDemoPreviewComponent,
     //       'codelab-exercise-preview': CodelabCodeDemoPreviewComponent,
     //       'codelab-exercise': CodelabCodeDemoPreviewComponent,
     //       'codelab-closing-slide': CodelabTitleSlideEditorComponent,
@@ -145,7 +145,7 @@ export class DynamicRendererComponent implements OnChanges {
     //     },
     //     edit: {
     //       'codelab-title-slide': CodelabTitleSlideEditorComponent,
-    //       'codelab-code-demo-console': CodelabCodeDemoConsoleComponent,
+    //       'codelab-code-demo-console-editor': CodelabCodeDemoConsoleEditorComponent,
     //       'codelab-exercise-preview': CodelabExerciseComponent,
     //       'codelab-exercise': CodelabExerciseComponent,
     //       'codelab-closing-slide': CodelabTitleSlideEditorComponent,

apps/codelab/src/app/admin/content/presentation-editor/slide-editor/action-bar/action-bar.component.html

@@ -12,7 +12,7 @@
   </button>
   <button
     mat-icon-button
-    (click)="addCustom('codelab-code-demo-console', templates.simpleApp)"
+    (click)="addCustom('codelab-code-demo-console-editor', templates.simpleApp)"
   >
     <mat-icon>web</mat-icon>
   </button>
@@ -23,13 +23,17 @@
   <mat-menu #templatesMenu="matMenu">
     <button
       mat-menu-item
-      (click)="addCustom('codelab-code-demo-console', templates.simpleApp)"
+      (click)="
+        addCustom('codelab-code-demo-console-editor', templates.simpleApp)
+      "
     >
       Simple / One File
     </button>
     <button
       mat-menu-item
-      (click)="addCustom('codelab-code-demo-console', templates.angularApp)"
+      (click)="
+        addCustom('codelab-code-demo-console-editor', templates.angularApp)
+      "
     >
       Angular App
     </button>

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console/codelab-code-demo-console.component.css renamed to apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component.css

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CodelabCodeDemoConsoleComponent } from './codelab-code-demo-console.component';
+import { CodelabCodeDemoConsoleEditorComponent } from './codelab-code-demo-console-editor.component';
 
 describe('CodelabCodeDemoConsoleComponent', () => {
-  let component: CodelabCodeDemoConsoleComponent;
-  let fixture: ComponentFixture<CodelabCodeDemoConsoleComponent>;
+  let component: CodelabCodeDemoConsoleEditorComponent;
+  let fixture: ComponentFixture<CodelabCodeDemoConsoleEditorComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [CodelabCodeDemoConsoleComponent]
+      declarations: [CodelabCodeDemoConsoleEditorComponent]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CodelabCodeDemoConsoleComponent);
+    fixture = TestBed.createComponent(CodelabCodeDemoConsoleEditorComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console/codelab-code-demo-console.component.html renamed to apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component.html

@@ -9,10 +9,10 @@ interface SelectableFiles {
 
 @Component({
   selector: 'codelab-code-demo-console-editor',
-  templateUrl: './codelab-code-demo-console.component.html',
-  styleUrls: ['./codelab-code-demo-console.component.css']
+  templateUrl: './codelab-code-demo-console-editor.component.html',
+  styleUrls: ['./codelab-code-demo-console-editor.component.css']
 })
-export class CodelabCodeDemoConsoleComponent {
+export class CodelabCodeDemoConsoleEditorComponent {
   files = ['app.ts'];
   @Input() code = {};
   @Input() ui = 'browser';

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console/codelab-code-demo-console.component.spec.ts renamed to apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component.spec.ts

@@ -9,7 +9,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { CodelabTitleSlideEditorComponent } from './codelab-title-slide-editor/codelab-title-slide-editor.component';
 import { CodelabCodeDemoFilePathEditorComponent } from './codelab-code-demo-file-path-editor/codelab-code-demo-file-path-editor.component';
 import { CodelabPresetComponent } from './codelab-preset/codelab-preset.component';
-import { CodelabCodeDemoConsoleComponent } from './codelab-code-demo-console/codelab-code-demo-console.component';
+import { CodelabCodeDemoConsoleEditorComponent } from './codelab-code-demo-console-editor/codelab-code-demo-console-editor.component';
 import { CodelabImageEditorComponent } from './codelab-image-editor/codelab-image-editor.component';
 import { NgxFileDropModule } from 'ngx-file-drop';
 import { AngularFireStorageModule } from '@angular/fire/storage';
@@ -25,7 +25,7 @@ import { MatButtonModule } from '@angular/material/button';
     CodelabTitleSlideEditorComponent,
     CodelabCodeDemoFilePathEditorComponent,
     CodelabPresetComponent,
-    CodelabCodeDemoConsoleComponent,
+    CodelabCodeDemoConsoleEditorComponent,
     CodelabImageEditorComponent,
     CodelabExerciseEditorComponent
   ],

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console/codelab-code-demo-console.component.ts renamed to apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component.ts

@@ -5,7 +5,8 @@ import {
   map,
   publishReplay,
   refCount,
-  startWith
+  startWith,
+  takeWhile
 } from 'rxjs/operators';
 import {
   BehaviorSubject,
@@ -16,13 +17,16 @@ import {
 import { compileTsFilesWatch } from '../runner/compile-ts-files';
 import { Code } from '../shared/types';
 
-function filterByFileType(type: string, files: Record<string, string>) {
-  return Object.entries(files).reduce((changedFiles, [path, code]) => {
-    if (path.match(new RegExp(`\\\.${type}$`))) {
+function filterByFileType(
+  type: string,
+  files: Record<string, string>
+): Record<string, string> {
+  return Object.entries(files)
+    .filter(([path, code]) => path.endsWith(type))
+    .reduce((changedFiles, [path, code]) => {
       changedFiles[path] = code;
-    }
-    return changedFiles;
-  }, {});
+      return changedFiles;
+    }, {});
 }
 
 export function getChanges(current, previous) {
@@ -62,6 +66,7 @@ export class CodeDemoComponent implements ControlValueAccessor, OnDestroy {
   @Input() allowSwitchingFiles = true;
   @Input() enableAutoFolding = true;
   @Input() fontSize = '18';
+  @Input() showPreview = true;
 
   openFileIndex = 0;
   code: Code = {};
@@ -94,6 +99,7 @@ export class CodeDemoComponent implements ControlValueAccessor, OnDestroy {
     );
 
     this.files$ = combineLatest([ts, staticFiles]).pipe(
+      takeWhile(() => this.showPreview),
       map(([js, staticFiles]) => ({ ...staticFiles, ...js })),
       map(files => ({ ...this.code, ...files })),
       filter(value => Object.keys(value).length > 0),
@@ -126,19 +132,31 @@ export class CodeDemoComponent implements ControlValueAccessor, OnDestroy {
   }
 
   update(code: Record<string, string>) {
+    if (this.showPreview === false) {
+      return;
+    }
+
     if (this.onChange) {
       this.onChange(code);
     }
     const changesTs = getChanges(
       filterByFileType('ts', code),
       filterByFileType('ts', this.codeCache)
     );
+
     const changesStatic = getChanges(
-      filterByFileType('html|css', code),
-      filterByFileType('html|css', this.codeCache)
+      {
+        ...filterByFileType('html', code),
+        ...filterByFileType('css', code)
+      },
+      {
+        ...filterByFileType('html', this.codeCache),
+        ...filterByFileType('css', this.codeCache)
+      }
     );
 
     this.codeCache = { ...code };
+
     this.changedTsFilesSubject.next(changesTs);
     this.changedStaticFilesSubject.next(changesStatic);
   }