More interfaces? feedback from aurelia 1 for 2

xenoterracide · February 23, 2020, 7:44pm

I know aurelia is convention oriented, but are there more interfaces hiding somewhere? example, I have this

@connectTo()
@autoinject()
export class App {

  constructor(
    private router: Router,
    private readonly store: Store<State>,
    private readonly stateHolder: StateHolder,
  ) {
  }

  configureRouter(config: RouterConfiguration, router: Router) {
    config.title = 'WarMeister';
    config.map([
      {
        route: ['', 'home'],
        name: 'home',
        viewPorts: {
          main: { moduleId: PLATFORM.moduleName('roster/GameRosterNav') },
        },
      },
      {
        route: 'games',
        name: 'games',
        title: 'Add Game',
        viewPorts: {
          main: { moduleId: PLATFORM.moduleName('game/index') },
        }
      },
//      { route: ':user/rosters/:game', name: 'rosters', moduleId: PLATFORM.moduleName('roster/GameRosterNav'), title: 'Roster' },
    ]);

    this.router = router;
  }
  
  async attached() {
    return this.store.state.subscribe((state) => {
      console.log('state', state);
      this.stateHolder.state = state;
    });
  }

but what I’d really like is

@connectTo()
@autoinject()
export class App implements RouterConfigurer, AttachListener {

  constructor(
    private router: Router,
    private readonly store: Store<State>,
    private readonly stateHolder: StateHolder,
  ) {
  }

  configureRouter(config: RouterConfiguration, router: Router) {
    config.title = 'WarMeister';
    config.addRoutes([ // currently .map is very week, and doesn't really say which keys are available and typos are very easy.
      {
        route: ['', 'home'],
        name: 'home',
        viewPorts: {
          main: { moduleId: PLATFORM.moduleName('roster/GameRosterNav') },
        },
      },
      {
        route: 'games',
        name: 'games',
        title: 'Add Game',
        viewPorts: {
          main: { moduleId: PLATFORM.moduleName('game/index') },
        }
      },
//      { route: ':user/rosters/:game', name: 'rosters', moduleId: PLATFORM.moduleName('roster/GameRosterNav'), title: 'Roster' },
    ]);

    this.router = router;
  }
  
  async attached() {
    return this.store.state.subscribe((state) => {
      console.log('state', state);
      this.stateHolder.state = state;
    });
  }

is this already possible? should I open a bug requesting for v2? would v1 backport patches be welcome?

bigopon · February 24, 2020, 11:45am

Here’re the relevant interfaces for router that you can implement:

github.com

aurelia/router/blob/master/src/interfaces.ts#L160-L227


export interface RoutableComponentCanActivate {
  /**
   * Implement this hook if you want to control whether or not your view-model can be navigated to.
   * Return a boolean value, a promise for a boolean value, or a navigation command.
   */
  canActivate(
    params: any,
    routeConfig: RouteConfig,
    navigationInstruction: NavigationInstruction
  ): boolean | Promise<boolean> | PromiseLike<boolean> | NavigationCommand | Promise<NavigationCommand> | PromiseLike<NavigationCommand>;
}


/**
 * An optional interface describing the activate convention.
 */
export interface RoutableComponentActivate {
  /**
   * Implement this hook if you want to perform custom logic just before your view-model is displayed.
   * You can optionally return a promise to tell the router to wait to bind and attach the view until
   * after you finish your work.

This file has been truncated. show original

Here’re the ones for templating:

github.com

aurelia/templating/blob/master/src/interfaces.js

import {View} from './view';
import {ViewStrategy} from './view-strategy';

/**
* An optional interface describing the created convention.
*/
interface ComponentCreated {
    /**
    * Implement this hook if you want to perform custom logic after the constructor has been called.
    * At this point in time, the view has also been created and both the view-model and the view
    * are connected to their controller. The hook will recieve the instance of the "owningView".
    * This is the view that the component is declared inside of. If the component itself has a view,
    * this will be passed second.
    */
    created(owningView: View, myView: View): void;
}

/**
* An optional interface describing the bind convention.
*/

This file has been truncated. show original

fkleuver · April 14, 2020, 2:24pm

We already have exhaustive interfaces in v2 for this sort of thing as well

xenoterracide · July 28, 2020, 3:16pm

yeah, I think in v1 this was just a doc problem.

mcorven · July 28, 2020, 4:31pm

Until about a year ago when I stumbled onto those source files, I was unaware of these v1 interfaces - I had been creating my own.

bigopon · September 8, 2020, 12:31pm

I had been creating my own.

Topic		Replies	Views
How to implement an interface module in aurelia? Help Requests	9	1103	May 5, 2020
IRouter vs Router Help Requests	2	573	July 20, 2021
Why do you need the @ decorators for certain injectables in V2? vNext	10	639	February 18, 2022
Dependency Injection using aurelia_router.esm.js Help Requests	29	1286	February 15, 2019
Aurelia Syntax inject Styles Best Practices	12	2379	November 7, 2019

More interfaces? feedback from aurelia 1 for 2

Related Topics