feat: add badge for the current environnement

packages/xlayers/src/app/app.module.ts

@@ -3,12 +3,13 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Route, RouterModule } from '@angular/router';
-import { AppComponent } from './app.component';
-import { HighlightModule } from 'ngx-highlightjs';
+import * as javascript from 'highlight.js/lib/languages/javascript';
+import * as scss from 'highlight.js/lib/languages/scss';
 import * as typescript from 'highlight.js/lib/languages/typescript';
 import * as xml from 'highlight.js/lib/languages/xml';
-import * as scss from 'highlight.js/lib/languages/scss';
-import * as javascript from 'highlight.js/lib/languages/javascript';
+import { HighlightModule } from 'ngx-highlightjs';
+import { AppComponent } from './app.component';
+import { WINDOW_PROVIDERS } from './core/window.service';
 
 export const routes: Route[] = [{
   path: '', redirectTo: '/home', pathMatch: 'full'
@@ -39,9 +40,11 @@ export function hljsLanguages() {
     HighlightModule.forRoot({
       languages: hljsLanguages
     }),
+    // CoreModule
     // TODO(manekinekko): enable SW support when it's stable
     // ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
   ],
+  providers: [WINDOW_PROVIDERS],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

packages/xlayers/src/app/core/core.module.ts

@@ -1,6 +1,7 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { CommonModule } from '@angular/common';
-import { NgModule, ErrorHandler } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -19,8 +20,8 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
-import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ColorSketchModule } from 'ngx-color/sketch';
+import { WINDOW_PROVIDERS } from './window.service';
 
 const MatModules = [
   MatSliderModule,
@@ -48,5 +49,6 @@ const ExtraModules = [FormsModule, ColorSketchModule];
 @NgModule({
   imports: [...MatModules, ...ExtraModules],
   exports: [CommonModule, ...MatModules, ...ExtraModules],
+  providers: [...WINDOW_PROVIDERS]
 })
-export class CoreModule { }
+export class CoreModule {}

packages/xlayers/src/app/core/window.service.ts

@@ -0,0 +1,10 @@
+import { FactoryProvider, InjectionToken } from '@angular/core';
+
+export const WINDOW = new InjectionToken<Window>('window');
+
+const windowProvider: FactoryProvider = {
+  provide: WINDOW,
+  useFactory: () => window
+};
+
+export const WINDOW_PROVIDERS = [windowProvider];

packages/xlayers/src/app/editor/editor.component.html

@@ -1,7 +1,7 @@
 <mat-toolbar>
   <mat-toolbar-row class="row-header">
     <div class="header-title">
-      <a routerLink="/"> Cross Layers<span>ALPHA</span> </a>
+      <a routerLink="/"> Cross Layers<span>{{badge}}</span> </a>
     </div>
     <div class="header-spacer">
       <div

packages/xlayers/src/app/editor/editor.component.spec.ts

@@ -1,18 +1,18 @@
-import { TestBed, async } from '@angular/core/testing';
-import { EditorComponent } from './editor.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, TestBed } from '@angular/core/testing';
 import { MatMenuModule } from '@angular/material/menu';
-import { NgxsModule } from '@ngxs/store';
 import { XStore } from '@app/core/state/state.mock';
+import { WINDOW_PROVIDERS } from '@app/core/window.service';
+import { NgxsModule } from '@ngxs/store';
+import { EditorComponent } from './editor.component';
 
 describe('EditorComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       schemas: [NO_ERRORS_SCHEMA],
       imports: [MatMenuModule, NgxsModule.forRoot([XStore])],
-      declarations: [
-        EditorComponent
-      ],
+      declarations: [EditorComponent],
+      providers: [WINDOW_PROVIDERS]
     }).compileComponents();
   }));
   it('should create the app', async(() => {

packages/xlayers/src/app/editor/editor.component.ts

@@ -19,6 +19,7 @@ import { environment } from '@env/environment';
 import { CodeGenState, CodeGenSettings } from '@app/core/state/page.state';
 import { ExportStackblitzService } from './exports/stackblitz/stackblitz.service';
 import { SketchContainerComponent } from './viewer/lib/sketch-container.component';
+import { PreviewBadgeService } from './preview-badge.service';
 
 @Component({
   selector: 'sketch-editor',
@@ -47,6 +48,7 @@ export class EditorComponent implements OnInit {
   codegen: CodeGenSettings;
 
   version = environment.version;
+  badge = '';
 
   shouldEnableCanvasSettings = false;
 
@@ -58,10 +60,14 @@ export class EditorComponent implements OnInit {
 
   constructor(
     private readonly store: Store,
-    private readonly exporter: ExportStackblitzService
+    private readonly exporter: ExportStackblitzService,
+    private readonly badgeService: PreviewBadgeService
   ) {}
 
   ngOnInit() {
+
+    this.badge = this.badgeService.computeBadge();
+
     this.colors = {
       background: 'transparent'
     };

packages/xlayers/src/app/editor/editor.module.ts

@@ -1,18 +1,18 @@
 import { ErrorHandler, NgModule } from '@angular/core';
 import { Route, RouterModule } from '@angular/router';
+import { CoreModule } from '@app/core/core.module';
+import { CodeGenState } from '@app/core/state/page.state';
+import { UiState } from '@app/core/state/ui.state';
+import { environment } from '@env/environment';
 import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
 import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
 import { NgxsModule } from '@ngxs/store';
-import { UiState } from '@app/core/state/ui.state';
 import { CodeEditorModule } from './code-editor/code-editor.module';
-import { CodeGenState } from '@app/core/state/page.state';
-import { CoreModule } from '@app/core/core.module';
 import { EditorComponent } from './editor.component';
 import { ErrorReportService } from './error-report.service';
 import { LayerSettingsModule } from './layer-settings/layer-settings.module';
 import { TreeViewComponent } from './tree-view/tree-view.component';
 import { AngularSketchModule } from './viewer/lib/sketch.module';
-import { environment } from '@env/environment';
 
 export const routes: Route[] = [
   {

packages/xlayers/src/app/editor/preview-badge.service.ts

@@ -0,0 +1,32 @@
+import { Inject, Injectable } from '@angular/core';
+import { WINDOW } from '@app/core/window.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PreviewBadgeService {
+  badge = 'BETA';
+
+  constructor(@Inject(WINDOW) private readonly window: Window) {}
+
+  computeBadge() {
+    try {
+      const hostname = this.window.location.hostname;
+      if (
+        hostname === 'localhost' ||
+        hostname === '127.0.0.1' ||
+        hostname === '0.0.0.0'
+      ) {
+        return 'LOCAL PREVIEW';
+      } else if (hostname.startsWith('next.')) {
+        return 'MASTER PREVIEW';
+      } else if (hostname.includes('netlify')) {
+        return 'PR PREVIEW';
+      }
+
+      return this.badge;
+    } catch (errror) {
+      return this.badge;
+    }
+  }
+}