fix builds and docs for alpha release

Author: izelnakri

README.md

@@ -15,6 +15,19 @@ When stable, check examples folder for the documentation.
 npm install && parcel examples/blog/index.html
 ```
 
+
+### Current Status
+
+- @emberx/component - Test coverage: ✔️
+- @emberx/string - Test coverage: ✔️
+- @emberx/helper - Test coverage: ✔️
+- @emberx/test-helpers - Test coverage: ✔️
+- @emberx/router - Test coverage: ~70%. Missing: query param handling, loading states, error states, this.paramsFor()
+- @emberx/ssr - Test coverage: 0%. Waiting to finish @emberx.router.
+
+Although the project is not production-ready one can still experiment with it using the blog example as a guide.
+`@emberx` packages are distributed on npm
+
 ### API Design
 
 What if `@ember/routing/router` & `@ember/routing/route` were a tiny and explicitly resolvable router you could import from npm.

packages/@emberx/router/src/link-to.ts

@@ -6,7 +6,7 @@ interface FreeObject {
   [propName: string]: any;
 }
 
-function isMissing<T>(value: Maybe<T>): value is null | undefined {
+function isMissing<T>(value: T): boolean {
   return value === null || value === undefined;
 }
 
@@ -16,10 +16,11 @@ export default class extends Component<{
   tagName?: string;
   query?: FreeObject;
   preventDefault?: boolean;
+  disabled?: boolean;
   replace?: boolean;
   route: string;
 }> {
-  @service router;
+  @service router: any;
 
   get tagName() {
     return this.args.tagName || 'a';
@@ -29,7 +30,7 @@ export default class extends Component<{
     return 'preventDefault' in this.args ? this.args.preventDefault : false;
   }
 
-  constructor(owner, args) {
+  constructor(owner: any, args: any) {
     super(owner, args);
 
     if (!args.route) {
@@ -50,7 +51,8 @@ export default class extends Component<{
 
     let linkWithParams = new URLSearchParams('');
 
-    Object.keys(this.args.query).forEach((key) => {
+    Object.keys(this.args.query as object).forEach((key) => {
+      // @ts-ignore
       linkWithParams.set(key, this.args.query[key]);
     });
 
@@ -85,29 +87,32 @@ export default class extends Component<{
 
   get models() {
     // NOTE: maybe optimize rendering if there is no dynamic segments?
-    let dynamicSegments = this.router.recognizer.names[this.args.route].handlers.reduce(
-      (result, handlerFunc) => {
-        if (handlerFunc.shouldDecodes.length > 0) {
-          result.push(handlerFunc.names);
-        }
-
-        return result;
-      },
-      []
-    );
+    // @ts-ignore
+    let dynamicSegments = this.router.recognizer.names[this.args.route].handlers.reduce((result, handlerFunc) => {
+      if (handlerFunc.shouldDecodes.length > 0) {
+        result.push(handlerFunc.names);
+      }
+
+      return result;
+    }, []);
 
     if (this.args.models) {
+      // @ts-ignore
       return dynamicSegments.reduce((model, segment, index) => {
+        // @ts-ignore
         return Object.assign(model, { [segment]: this.args.models[index] });
       }, {});
     } else if (isObject(this.args.model)) {
+      // @ts-ignore
       return dynamicSegments.reduce((model, segment) => {
         let actualSegmentInModel = [segment[0], underscore(segment[0]), camelize(segment[0]), 'id'].find(
           (potentialKey) => {
+            // @ts-ignore
             return potentialKey in this.args.model;
           }
         );
 
+        // @ts-ignore
         return Object.assign(model, { [segment]: this.args.model[actualSegmentInModel] });
       }, {});
     } else if (this.args.model) {
@@ -125,7 +130,8 @@ export default class extends Component<{
     </a>
   `;
 
-  @action transition(event) {
+  @action transition(event: any) {
+    // @ts-ignore
     let element = event.target;
     if (element.target === '' || element.target === '_self') {
       event.preventDefault();
@@ -159,6 +165,6 @@ export default class extends Component<{
   }
 }
 
-function isObject(value) {
+function isObject(value: any) {
   return ['function', 'object'].includes(typeof value) && value !== null && !Array.isArray(value);
 }

packages/@emberx/router/src/route-map-context.ts

@@ -15,12 +15,12 @@ export default class RouteMapContext {
     return Object.keys(routerJSRouteArray).map((registryRoute) => {
       let route = routerJSRouteArray[registryRoute];
       if (route.nestedRoutes.length > 0) {
-        return match(route.options.path).to(route.routeName, function (match: any) {
+        return match(route.options.path).to(route.name, function (match: any) {
           map(map, match, route.nestedRoutes);
         });
       }
 
-      match(route.options.path).to(route.routeName);
+      match(route.options.path).to(route.name);
     });
   }
 
@@ -39,14 +39,14 @@ export default class RouteMapContext {
       const existingIndexRoute = this.ROUTE_REGISTRY[`${this._parentRoute}.index`];
 
       this.ROUTE_REGISTRY[`${this._parentRoute}.index`] = existingIndexRoute || {
-        routeName: `${this._parentRoute}.index`,
+        name: `${this._parentRoute}.index`,
         options: { path: '/' },
         route: undefined,
       };
     }
 
     this.ROUTE_REGISTRY[this._parentRoute] = {
-      routeName: this._parentRoute,
+      name: this._parentRoute,
       options: targetOptions,
       route: undefined,
     };

packages/@emberx/router/src/route.ts

@@ -18,15 +18,16 @@ export default class Route<Args extends FreeObject = {}> extends EmberXComponent
     </div>
   `;
 
-  static async setup(model: object, transition: FreeObject): any {
+  static async setup(model: object, transition: FreeObject): Promise<any> {
     if (Router.LOG_MODELS) {
       console.log(`'${transition.targetName}' Route[model] is`, model);
       console.log(`'${transition.targetName}' Route[transition] is`, transition);
     }
 
     // TODO: add a throw here if containerElement doesnt exist
 
-    const containerElement = globalThis.QUnit
+    // @ts-ignore
+    const containerElement: HTMLElement = globalThis.QUnit
       ? document.getElementById('ember-testing')
       : document.getElementById('app');
 

packages/@emberx/router/src/router-service.ts

@@ -48,6 +48,10 @@ export default class RouterJSRouter extends Router<Route> {
     return;
   }
 
+  replaceURL(): void {
+    return;
+  }
+
   transitionDidError(error: any, transition: any) {
     if (error.wasAborted || transition.isAborted) {
       // return logAbort(transition);
@@ -58,12 +62,12 @@ export default class RouterJSRouter extends Router<Route> {
     }
   }
 
-  routeWillChange(abc): void {
+  routeWillChange(): void {
     // console.log('routeWillChange call for', abc);
     return;
   }
 
-  routeDidChange(abc): void {
+  routeDidChange(): void {
     // console.log('routeDidChange call for', abc);
     return;
   }
@@ -72,15 +76,15 @@ export default class RouterJSRouter extends Router<Route> {
     return;
   }
 
-  willTransition(oldRouteInfos: any, newRouteInfos: any, transition) {
+  willTransition(_oldRouteInfos: any, _newRouteInfos: any, transition: any) {
     let targetRouteInfo = transition.routeInfos[transition.resolveIndex];
 
     this.currentRoute = targetRouteInfo._route;
     this.currentRouteName = targetRouteInfo.name;
     this.currentURL = targetRouteInfo.router.path;
   }
 
-  didTransition(routeInfos) {
+  didTransition(routeInfos: any) {
     let targetRouteInfo = routeInfos[routeInfos.length - 1];
 
     this.currentRoute = targetRouteInfo._route;
@@ -120,6 +124,7 @@ export default class RouterJSRouter extends Router<Route> {
 
         // @ts-ignore
         console.log('targetParams', targetParams);
+        // @ts-ignore
         await this.transitionTo(...targetParams);
       } else {
         console.log('targetHandler', targetHandler);

packages/@emberx/router/src/router.ts

@@ -10,7 +10,7 @@ export interface FreeObject {
 export interface RouteDefinition {
   path?: string;
   route: Route | undefined;
-  routeName: string;
+  name: string;
   options?: FreeObject;
   indexRoute?: Route;
 }
@@ -23,7 +23,7 @@ export interface routerJSRouteDefinition {
   path?: string;
   route: Route | undefined;
   options?: FreeObject;
-  routeName: string;
+  name: string;
   nestedRoutes?: [routerJSRouteDefinition?];
 }
 
@@ -35,13 +35,14 @@ export default class Router {
   static LOG_MODELS = true;
   static SERVICES: FreeObject = {};
   static ROUTE_REGISTRY: RouteRegistry = {};
-  static ROUTER_SERVICE: RouterService | null = null;
+  static ROUTER_SERVICE: RouterService;
 
   // static IS_TESTING() {
   //   return !!globalThis.QUnit;
   // }
 
   static visit() {
+    // @ts-ignore
     return this.ROUTER_SERVICE.visit(...arguments);
   }
 
@@ -67,7 +68,9 @@ export default class Router {
     });
   }
 
-  static definitionsToRegistry(arrayOfRouteDefinitions: Array<RouteDefinition> = []): RouteRegistry {
+  static definitionsToRegistry(
+    arrayOfRouteDefinitions: Array<RouteDefinition> = []
+  ): RouteRegistry {
     arrayOfRouteDefinitions.forEach((routeDefinition: RouteDefinition) => {
       if (!routeDefinition.path) {
         throw new Error('One of the RouteDefinition on Router.start(RouteDefinition[]) misses "path" key');
@@ -88,14 +91,14 @@ export default class Router {
         const targetIndex = index >= routePathSegments.length ? routePathSegments.length - 1 : index;
 
         checkInRouteRegistryOrCreateRoute(this.ROUTE_REGISTRY, {
-          routeName: targetSegmentName,
+          name: targetSegmentName,
           options: { path: `/${routePathSegments[targetIndex]}` },
           route: index === routeNameSegments.length - 1 ? routeDefinition.route : undefined,
         } as routerJSRouteDefinition);
 
         if (currentSegment && !this.ROUTE_REGISTRY[`${currentSegment}.index`]) {
           this.ROUTE_REGISTRY[`${currentSegment}.index`] = {
-            routeName: `${currentSegment}.index`,
+            name: `${currentSegment}.index`,
             options: { path: '/' },
             route: undefined, // TODO: add index route from parent by default
           };
@@ -106,17 +109,19 @@ export default class Router {
 
       if (routeDefinition.indexRoute && routeName !== 'index') {
         this.ROUTE_REGISTRY[`${routeName}.index`] = {
-          routeName: `${routeName}.index`,
+          name: `${routeName}.index`,
           options: { path: '/' },
           route: routeDefinition.indexRoute,
         };
       }
     });
 
+    // @ts-ignore
     if (!arrayOfRouteDefinitions.find((routeDefinition) => routeDefinition.path.startsWith('/*'))) {
       this.ROUTE_REGISTRY['not-found'] = {
-        routeName: 'not-found',
+        name: 'not-found',
         options: { path: '/*slug' },
+        // @ts-ignore
         route: class NotFoundRoute extends Route {},
       };
     }
@@ -166,10 +171,11 @@ export default class Router {
 
 export function createRouteNameFromRouteClass(routeClass: Route | void): string | void {
   if (routeClass) {
+    // @ts-ignore
     return routeClass.name
       .replace(/Route$/g, '')
       .split('')
-      .reduce((result, character, index) => {
+      .reduce((result: string[], character: string, index: number) => {
         if (index === 0) {
           return character.toLowerCase();
         } else if (character.toUpperCase() === character) {
@@ -188,8 +194,8 @@ export function createRouteNameFromPath(routePath: string): string {
 }
 
 function checkInRouteRegistryOrCreateRoute(registry: RouteRegistry, targetRoute: routerJSRouteDefinition) {
-  const routeName = targetRoute.routeName;
-  const foundRoute = registry[targetRoute.routeName];
+  const routeName = targetRoute.name;
+  const foundRoute = registry[targetRoute.name];
 
   if (!foundRoute) {
     registry[routeName] = targetRoute;
@@ -198,9 +204,9 @@ function checkInRouteRegistryOrCreateRoute(registry: RouteRegistry, targetRoute:
   }
 
   if (targetRoute.route) {
-    if (foundRoute.route && foundRoute.routeName !== targetRoute.routeName) {
+    if (foundRoute.route && foundRoute.name !== targetRoute.name) {
       console.log(
-        `[WARNING]: ${routeName}.route already has ${foundRoute.routeName}. You tried to overwrite ${routeName}.route with ${targetRoute.routeName}`
+        `[WARNING]: ${routeName}.route already has ${foundRoute.name}. You tried to overwrite ${routeName}.route with ${targetRoute.name}`
       );
     }
 
@@ -215,8 +221,8 @@ function findNestedRoute(routerJSRouteArray: Array<routerJSRouteDefinition>, rou
     const target = result.nestedRoutes || routerJSRouteArray;
     const targetRouteName = index === 0 ? routeNameSegment : routeNameSegments.slice(0, index + 1).join('.');
 
-    return target.find((routeObject: routerJSRouteDefinition) => routeObject.routeName === targetRouteName);
+    return target.find((routeObject: routerJSRouteDefinition) => routeObject.name === targetRouteName);
   }, {} as FreeObject);
 }
 
-window.Router = Router;
+// window.Router = Router;