Fix Typescript compilation errors etc. (mainmatter#351)

* add mandatory file which fixes a compile error in @css-blocks * throw on TS errors for production - this is what @glimmer/application-pipeline does for the build of the client app as well * fix TS errors * add navigo typings
jayjayjpg · Apr 24, 2019 · 5a65462 · 5a65462
1 parent 0fc1597
commit 5a65462
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 34 deletions.
diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -49,7 +49,7 @@ class SimplabsApp extends GlimmerApp {
           moduleResolution: 'node',
         },
       },
-      throwOnError: false,
+      throwOnError: process.env.NODE_ENV === 'production',
     });
   }
 

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@glimmer/resolver": "^0.4.3",
     "@glimmer/ssr": "^0.13.0",
     "@glimmer/test-helpers": "^0.31.1",
+    "@types/navigo": "^7.0.1",
     "@types/qunit": "^2.0.31",
     "broccoli-asset-rev": "^2.5.0",
     "broccoli-clean-css": "^2.0.1",

diff --git a/src/index.ts b/src/index.ts
@@ -11,14 +11,19 @@ setPropertyDidChange(() => {
   app.scheduleRerender();
 });
 
+function register(registry, key: string, object: any) {
+  let registryEntries = ((registry as any)._resolver as any).registry._entries;
+  if (!registryEntries[key]) {
+    registryEntries[key] = object;
+  }
+}
+
 app.registerInitializer({
   initialize(registry) {
     function registerBundle(module) {
       let content = window[module] || {};
       Object.keys(content).forEach((key) => {
-        if (!registry._resolver.registry._entries[key]) {
-          registry._resolver.registry._entries[key] = content[key];
-        }
+        register(registry, key, content[key]);
       });
     }
 
@@ -32,7 +37,7 @@ app.registerInitializer({
       }
     }
 
-    document.querySelectorAll('[data-shoebox]').forEach((shoebox) => {
+    document.querySelectorAll('[data-shoebox]').forEach((shoebox: HTMLElement) => {
       let module = shoebox.dataset.shoeboxBundle;
       registerBundle(module);
     });
@@ -51,12 +56,8 @@ app.registerInitializer({
 
 app.registerInitializer({
   initialize(registry) {
-    registry._resolver.registry._entries[
-      `helper:/${app.rootName}/components/-css-blocks-classnames`
-    ] = classnames;
-    registry._resolver.registry._entries[
-      `helper:/${app.rootName}/components/-css-blocks-concat`
-    ] = concat;
+    register(registry, `helper:/${app.rootName}/components/-css-blocks-classnames`, classnames);
+    register(registry, `helper:/${app.rootName}/components/-css-blocks-concat`, concat);
   }
 });
 

diff --git a/src/ui/components/ShapeBase/stylesheet.css b/src/ui/components/ShapeBase/stylesheet.css
@@ -0,0 +1,3 @@
+:scope {
+  block-name: ShapeBase;
+}
diff --git a/src/ui/components/Simplabs/component.ts b/src/ui/components/Simplabs/component.ts
@@ -5,9 +5,17 @@ import Navigo from 'navigo';
 interface IRoutesMap {
   [route: string]: {
     component: string;
+    title: string;
+    bundle: string;
+    parentBundle: string;
   };
 }
 
+interface INavigoHooks {
+  before?: (done: () => void) => void;
+  after?: () => void;
+}
+
 declare const __ROUTES_MAP__: IRoutesMap;
 
 export default class Simplabs extends Component {
@@ -19,6 +27,10 @@ export default class Simplabs extends Component {
 
   private lazyRegistration: ILazyRegistration;
 
+  private document: HTMLDocument;
+
+  private loadingProgressInterval: number;
+
   @tracked
   private activeComponent: string = null;
 
@@ -34,7 +46,7 @@ export default class Simplabs extends Component {
     this.appState = this.appState || {
       isSSR: false,
       origin: window.location.origin,
-      route: window.location.pathname
+      route: window.location.pathname,
     };
 
     this._setupRouting();
@@ -45,27 +57,31 @@ export default class Simplabs extends Component {
   private _setupRouting() {
     this.router = new Navigo(this.appState.origin);
 
-    Object.keys(this.routesMap).forEach((path) => {
+    Object.keys(this.routesMap).forEach(path => {
       let { component, title = '', bundle, parentBundle } = this.routesMap[path];
-      let options = {
-        after: () => this._setPageTitle(title)
+      let options: INavigoHooks = {
+        after: () => this._setPageTitle(title),
       };
       if (bundle && !this.appState.isSSR) {
-        options.before = async (done) => {
+        options.before = async done => {
           await this._loadBundle(bundle, parentBundle);
           this._registerBundle(bundle);
           done();
         };
       }
-      this.router.on(path, () => {
-        this.activeComponent = component;
-        if (this.appState.isSSR) {
-          if (bundle) {
-            this._injectBundle(bundle);
+      this.router.on(
+        path,
+        () => {
+          this.activeComponent = component;
+          if (this.appState.isSSR) {
+            if (bundle) {
+              this._injectBundle(bundle);
+            }
+            this._injectActiveComponentState();
           }
-          this._injectActiveComponentState();
-        }
-      }, options);
+        },
+        options,
+      );
     });
     this.router.resolve(this.appState.route);
   }
@@ -86,7 +102,10 @@ export default class Simplabs extends Component {
 
   private async _loadBundle(bundle, parentBundle) {
     await new Promise((resolve, reject) => {
-      if (document.querySelector(`script[src="${bundle.asset}"]`) || (parentBundle && document.querySelector(`script[src="${parentBundle.asset}"]`))) {
+      if (
+        document.querySelector(`script[src="${bundle.asset}"]`) ||
+        (parentBundle && document.querySelector(`script[src="${parentBundle.asset}"]`))
+      ) {
         return resolve();
       }
 
@@ -114,19 +133,22 @@ export default class Simplabs extends Component {
 
   private _startLoader() {
     this.isLoading = true;
-    this._loadingProgressInterval = window.setInterval(() => this.loadingProgress = Math.min(this.loadingProgress + 10, 100), 150);
+    this.loadingProgressInterval = window.setInterval(
+      () => (this.loadingProgress = Math.min(this.loadingProgress + 10, 100)),
+      150,
+    );
   }
 
   private _stopLoader() {
-    window.clearInterval(this._loadingProgressInterval);
+    window.clearInterval(this.loadingProgressInterval);
     this.loadingProgress = 100;
-    window.setTimeout(() => this.isLoading = false, 150);
+    window.setTimeout(() => (this.isLoading = false), 150);
   }
 
   private _injectBundle(bundle) {
     let script = this.document.createElement('script');
     script.setAttribute('src', bundle.asset);
-    script.setAttribute('data-shoebox', true);
+    script.setAttribute('data-shoebox', 'true');
     script.setAttribute('data-shoebox-bundle', bundle.module);
     this.document.body.appendChild(script);
   }
@@ -135,20 +157,20 @@ export default class Simplabs extends Component {
     if (this.appState.isSSR) {
       this.document.title = formatPageTitle(title);
     } else {
-      document.title = formatPageTitle(title)
+      document.title = formatPageTitle(title);
     }
   }
 
   private _injectActiveComponentState() {
     let script = this.document.createElement('script');
-    script.setAttribute('data-shoebox', true);
+    script.setAttribute('data-shoebox', 'true');
     script.setAttribute('data-shoebox-active-component', this.activeComponent);
     this.document.body.appendChild(script);
   }
 
   private _restoreActiveComponentState() {
     if (!this.appState.isSSR) {
-      let script = document.querySelector('[data-shoebox-active-component]');
+      let script = document.querySelector('[data-shoebox-active-component]') as HTMLElement;
       if (script) {
         this.activeComponent = script.dataset.shoeboxActiveComponent;
       }

diff --git a/src/ui/lazy-registration.d.ts b/src/ui/lazy-registration.d.ts
@@ -1,3 +1,3 @@
 interface ILazyRegistration {
-  register(key: string, content: any)
+  registerBundle(module: string)
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -8,7 +8,8 @@
     "experimentalDecorators": true,
     "types": [
       "qunit"
-    ]
+    ],
+    "allowSyntheticDefaultImports": true
   },
   "exclude": [
     "node_modules",

diff --git a/yarn.lock b/yarn.lock
@@ -1430,6 +1430,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
+"@types/navigo@^7.0.1":
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/@types/navigo/-/navigo-7.0.1.tgz#63d1bd0f898f87f645d16f230e9350930ec32160"
+  integrity sha512-auXcoS/pc39onGyf6fr2V3J3BEHUqH0a1Sa1psuGrVkCat+2D592DA7hdXY73lwCUyhGPzkf0lrcE5jH0OFeJg==
+
 "@types/node@^8.0.46":
   version "8.10.39"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.39.tgz#e7e87ad00364dd7bc485c940926345b8ec1a26ca"
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,7 +49,7 @@ class SimplabsApp extends GlimmerApp { @@
               moduleResolution: 'node',
             },
           },
-          throwOnError: false,
+          throwOnError: process.env.NODE_ENV === 'production',
         });
       }
@@ Expand Down @@