refactor: restructure the app folders/files (#261)

* refactor: restructure the app folders/files

Fixes: #267

* fix: small fixes after restructure

* fix: small fixes after restructure

* fix: preload all lazymodules and use the store inside SketchService

* fix: guard will redirect when no page selected

angular.json

@@ -7,7 +7,7 @@
       "root": "packages/xlayers/",
       "sourceRoot": "packages/xlayers/src",
       "projectType": "application",
-      "prefix": "sketch",
+      "prefix": "xly",
       "schematics": {},
       "architect": {
         "build": {
@@ -106,7 +106,7 @@
       "root": "packages/sketchapp-parser",
       "sourceRoot": "packages/sketchapp-parser/src",
       "projectType": "library",
-      "prefix": "lib",
+      "prefix": "xly",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",

package.json

@@ -67,13 +67,15 @@
     "@angular/pwa": "0.14.0-beta.0",
     "@angular/router": "^8.0.0-beta.4",
     "@angular/service-worker": "^8.0.0-beta.4",
+    "@ngxs/router-plugin": "^3.4.2",
     "@ngxs/store": "^3.4.1",
     "@stackblitz/sdk": "^1.3.0",
     "@types/file-saver": "^2.0.0",
     "big-integer": "^1.6.41",
     "buffer": "^5.2.1",
     "core-js": "^2.6.4",
     "file-saver": "^2.0.0",
+    "hammerjs": "^2.0.8",
     "highlight.js": "^9.14.2",
     "jszip": "^3.1.5",
     "lint-staged": "^8.1.5",

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

@@ -7,7 +7,7 @@ import { filter } from 'rxjs/operators';
 declare var gtag;
 
 @Component({
-  selector: 'sketch-root',
+  selector: 'xly-root',
   template: `
     <router-outlet></router-outlet>
   `,

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

@@ -2,48 +2,93 @@ import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { Route, RouterModule } from '@angular/router';
+import { PreloadAllModules, Route, RouterModule } from '@angular/router';
+import { WINDOW_PROVIDERS } from '@app/core/window.service';
+import { environment } from '@env/environment';
+import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
+import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
+import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
+import { NgxsModule } from '@ngxs/store';
 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 { HighlightModule } from 'ngx-highlightjs';
 import { AppComponent } from './app.component';
-import { WINDOW_PROVIDERS } from './core/window.service';
+import { CoreModule } from './core/core.module';
+import { UiState } from './core/state';
+import { CodeGenState } from './core/state/page.state';
+import { EditorGuardService } from './editor-guard.service';
 
-export const routes: Route[] = [{
-  path: '', redirectTo: '/home', pathMatch: 'full'
-}, {
-  path: 'home', loadChildren: './home/home.module#HomeModule'
-}, {
-  path: 'editor', loadChildren: './editor/editor.module#EditorModule'
-}, {
-  path: '**', redirectTo: '/home'
-}];
+export const routes: Route[] = [
+  {
+    path: '',
+    redirectTo: '/home',
+    pathMatch: 'full'
+  },
+  {
+    path: 'home',
+    loadChildren: './home/home.module#HomeModule'
+  },
+  {
+    path: 'editor',
+    canActivate: [EditorGuardService],
+    canActivateChild: [EditorGuardService],
+    loadChildren: './editor/editor.module#EditorModule'
+  },
+  {
+    path: 'upload',
+    loadChildren: './upload/upload.module#UploadModule'
+  },
+  {
+    path: '**',
+    redirectTo: '/home'
+  }
+];
 
 export function hljsLanguages() {
   return [
-    {name: 'typescript', func: typescript},
-    {name: 'javascript', func: javascript},
-    {name: 'scss', func: scss},
-    {name: 'vue', func: xml},
+    { name: 'typescript', func: typescript },
+    { name: 'javascript', func: javascript },
+    { name: 'scss', func: scss },
+    { name: 'vue', func: xml }
   ];
 }
 
+const StoreDebugModule = [
+  NgxsModule.forRoot([UiState, CodeGenState], {
+    /**
+     * WARNING: dont enbale the `developmentmode` config until it's been fixed!
+     * ENABLING THIS, WILL THROW: TypeError: Cannot assign to read only property 'microTask' of object '[object Object]'
+     * See similar issue in NgRx: https://github.com/brandonroberts/ngrx-store-freeze/issues/17
+     */
+    // developmentMode: !environment.production
+  }),
+  NgxsLoggerPluginModule.forRoot({ disabled: environment.production }),
+  NgxsReduxDevtoolsPluginModule.forRoot({ disabled: environment.production }),
+  NgxsRouterPluginModule.forRoot()
+];
+
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
     HttpClientModule,
     BrowserAnimationsModule,
-    RouterModule.forRoot(routes, { useHash: true }),
+    StoreDebugModule,
+    CoreModule,
+    RouterModule.forRoot(routes, {
+      useHash: true,
+      enableTracing: !environment.production,
+      preloadingStrategy: PreloadAllModules
+    }),
     HighlightModule.forRoot({
       languages: hljsLanguages
-    }),
+    })
     // 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 { }
+export class AppModule {}

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

@@ -21,9 +21,10 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
 import { ColorSketchModule } from 'ngx-color/sketch';
+import { SketchService } from './sketch.service';
 import { WINDOW_PROVIDERS } from './window.service';
 
-const MatModules = [
+const MATERIAL = [
   MatSliderModule,
   MatTreeModule,
   MatSnackBarModule,
@@ -45,10 +46,13 @@ const MatModules = [
   DragDropModule
 ];
 
+const PROVIDERS = [...WINDOW_PROVIDERS, SketchService];
+
 const ExtraModules = [FormsModule, ColorSketchModule];
+
 @NgModule({
-  imports: [...MatModules, ...ExtraModules],
-  exports: [CommonModule, ...MatModules, ...ExtraModules],
-  providers: [...WINDOW_PROVIDERS]
+  imports: [...MATERIAL, ...ExtraModules],
+  exports: [CommonModule, ...MATERIAL, ...ExtraModules],
+  providers: [...PROVIDERS]
 })
 export class CoreModule {}

packages/xlayers/src/app/editor/viewer/lib/sketch.service.mock.ts → packages/xlayers/src/app/core/sketch.service.mock.ts

@@ -1,5 +1,5 @@
-import { getFlatLayerMock } from './sketch-layer.component.mock';
 import { SketchData } from './sketch.service';
+import { getFlatLayerMock } from '@app/editor/preview/viewer/sketch-layer/sketch-layer.component.mock';
 
 export function getSketchDataMock() {
   return {

packages/xlayers/src/app/editor/viewer/lib/sketch.service.ts → packages/xlayers/src/app/core/sketch.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { InformUser } from '@app/core/state';
+import { InformUser, UiState, CurrentFile } from '@app/core/state';
 import { environment } from '@env/environment';
 import { Store } from '@ngxs/store';
 import {
@@ -28,8 +28,8 @@ export interface SketchData {
   };
   meta: SketchMSMetadata;
   resources: {
-    images:  {
-      [id: string]: ResourceImageData
+    images: {
+      [id: string]: ResourceImageData;
     };
   };
 }
@@ -50,26 +50,22 @@ export class SketchService {
     private http: HttpClient,
     private store: Store
   ) {
-    this._data = {
-      pages: [],
-      previews: [],
-      document: {} as any,
-      user: {},
-      meta: {} as any,
-      resources: [] as any
-    };
+    this.store.select(UiState.currentFile).subscribe(currentFile => {
+      this._data = currentFile;
+    });
   }
 
   async process(file: File) {
-    this._data = await this.sketch2Json(file);
-    if (this.sketchStyleParser.visit(this._data) === SupportScore.LEGACY) {
+    const data = await this.sketch2Json(file);
+
+    if (this.sketchStyleParser.visit(data) === SupportScore.LEGACY) {
       this.store.dispatch(
         new InformUser(
           'The design was created using a legacy version of SketchApp, so the result may not be accurate.'
         )
       );
     }
-    return this._data;
+    return data;
   }
 
   async readZipEntries(file: Blob) {

packages/xlayers/src/app/core/state/page.state.ts

@@ -1,5 +1,5 @@
 import { State, Action, StateContext, Selector } from '@ngxs/store';
-import { CodeGenKind, XlayersExporterNavBar, XlayersNgxEditorModel } from '@app/editor/code-editor/editor-container/codegen/codegen.service';
+import { CodeGenKind, XlayersExporterNavBar, XlayersNgxEditorModel } from '@app/editor/code/editor-container/codegen/codegen.service';
 
 export interface CodeGenSettings {
   content: XlayersNgxEditorModel[];

packages/xlayers/src/app/core/state/ui.state.ts

@@ -1,7 +1,7 @@
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { SketchData } from '@app/core/sketch.service';
 import { Action, Selector, State, StateContext } from '@ngxs/store';
-import { patch, iif } from '@ngxs/store/operators';
-import { SketchData } from '@app/editor/viewer/lib/sketch.service';
+import { iif, patch } from '@ngxs/store/operators';
 
 export interface LayerCSS {
   transform: string;
@@ -27,6 +27,11 @@ export interface UiSettings {
   isCodeEditor: boolean;
 }
 
+export enum ErrorType {
+  Runtime = 'Runtime Error',
+  None = ''
+}
+
 export class CurrentFile {
   static readonly type = '[UiSettings] Current File';
   constructor(public data: SketchData) {}
@@ -56,9 +61,11 @@ export class SettingsEnabled {
 }
 export class LayerPosition {
   static readonly type = '[UiSettings] Set Layer Position';
-  public left:  number;
-  public top:  number;
-  constructor({ left, top }: {left: number; top: number} = { left: 0, top: 0 }) {
+  public left: number;
+  public top: number;
+  constructor(
+    { left, top }: { left: number; top: number } = { left: 0, top: 0 }
+  ) {
     this.left = left;
     this.top = top;
   }
@@ -90,7 +97,10 @@ export class ResetUiSettings {
 
 export class InformUser {
   static readonly type = '[UiSettings] Inform user';
-  constructor(public message: string) {}
+  constructor(
+    public message: string,
+    public errorType: ErrorType = ErrorType.None
+  ) {}
 }
 
 const DEFAULT_UI_STATE = {
@@ -229,10 +239,7 @@ export class UiState {
   }
 
   @Action(LayerPosition)
-  layerPosition(
-    { setState }: StateContext<UiSettings>,
-    action: LayerPosition
-  ) {
+  layerPosition({ setState }: StateContext<UiSettings>, action: LayerPosition) {
     // reset the top/left position of the current page
     // and the root layer
     setState(
@@ -256,7 +263,9 @@ export class UiState {
 
   @Action(ZoomIn)
   zoomIn({ getState, setState }: StateContext<UiSettings>, action: ZoomIn) {
-    const zoomLevel = parseFloat((getState().zoomLevel + action.value).toFixed(2));
+    const zoomLevel = parseFloat(
+      (getState().zoomLevel + action.value).toFixed(2)
+    );
 
     setState(
       patch({
@@ -267,7 +276,9 @@ export class UiState {
 
   @Action(ZoomOut)
   zoomOut({ getState, setState }: StateContext<UiSettings>, action: ZoomOut) {
-    const zoomLevel = parseFloat((getState().zoomLevel - action.value).toFixed(2));
+    const zoomLevel = parseFloat(
+      (getState().zoomLevel - action.value).toFixed(2)
+    );
 
     setState(
       patch({
@@ -308,8 +319,25 @@ export class UiState {
 
   @Action(InformUser)
   informUser({}, action: InformUser) {
-    this.snackBar.open(action.message, 'CLOSE', {
-      duration: 5000
-    });
+    this.snackBar
+      .open(
+        action.message,
+        action.errorType === ErrorType.None ? 'CLOSE' : 'REPORT',
+        {
+          duration: action.errorType === ErrorType.None ? 5000 : 0
+        }
+      )
+      .onAction()
+      .subscribe(() => {
+        if (action.errorType !== ErrorType.None) {
+          const githubIssueUrl = `template=bug_report.md&title=${
+            action.message
+          }`;
+          window.open(
+            `https://github.com/xlayers/xlayers/issues/new?${githubIssueUrl}`,
+            '__blank'
+          );
+        }
+      });
   }
 }