How to use @aurelia/router - 10 common examples

//     
    //   
    // 
    // 
    //
    // /(a/(b/(c+d)+e/(f/(g)))+h)

    const [a, b, c, d, e, f, g, h] = [
      new ViewportInstruction('a'),
      new ViewportInstruction('b'),
      new ViewportInstruction('c'),
      new ViewportInstruction('d'),
      new ViewportInstruction('e'),
      new ViewportInstruction('f'),
      new ViewportInstruction('g'),
      new ViewportInstruction('h'),
    ];
    a.nextScopeInstructions = [b, e];
    b.nextScopeInstructions = [c, d];
    e.nextScopeInstructions = [f];
    f.nextScopeInstructions = [g];

    const instructions: ViewportInstruction[] = [a, h];

    const instructionsString = router.instructionResolver.stringifyViewportInstructions(instructions);
    console.log('Instructions', instructionsString);
    const parsedInstructions = router.instructionResolver.parseViewportInstructions(instructionsString);
    console.log('Parsed', parsedInstructions);
    const stringified = router.instructionResolver.stringifyViewportInstructions(parsedInstructions);
    console.log('Stringified', stringified);
    assert.strictEqual(stringified, instructionsString, `stringified`);

//       
    //     
    //   
    // 
    // 
    //
    // /(a/(b/(c+d)+e/(f/(g)))+h)

    const [a, b, c, d, e, f, g, h] = [
      new ViewportInstruction('a'),
      new ViewportInstruction('b'),
      new ViewportInstruction('c'),
      new ViewportInstruction('d'),
      new ViewportInstruction('e'),
      new ViewportInstruction('f'),
      new ViewportInstruction('g'),
      new ViewportInstruction('h'),
    ];
    a.nextScopeInstructions = [b, e];
    b.nextScopeInstructions = [c, d];
    e.nextScopeInstructions = [f];
    f.nextScopeInstructions = [g];

    const instructions: ViewportInstruction[] = [a, h];

    const instructionsString = router.instructionResolver.stringifyViewportInstructions(instructions);
    console.log('Instructions', instructionsString);
    const parsedInstructions = router.instructionResolver.parseViewportInstructions(instructionsString);
    console.log('Parsed', parsedInstructions);
    const stringified = router.instructionResolver.stringifyViewportInstructions(parsedInstructions);
    console.log('Stringified', stringified);
    assert.strictEqual(stringified, instructionsString, `stringified`);

//     
    //     
    //   
    //   
    //     
    //       
    //     
    //   
    // 
    // 
    //
    // /(a/(b/(c+d)+e/(f/(g)))+h)

    const [a, b, c, d, e, f, g, h] = [
      new ViewportInstruction('a'),
      new ViewportInstruction('b'),
      new ViewportInstruction('c'),
      new ViewportInstruction('d'),
      new ViewportInstruction('e'),
      new ViewportInstruction('f'),
      new ViewportInstruction('g'),
      new ViewportInstruction('h'),
    ];
    a.nextScopeInstructions = [b, e];
    b.nextScopeInstructions = [c, d];
    e.nextScopeInstructions = [f];
    f.nextScopeInstructions = [g];

    const instructions: ViewportInstruction[] = [a, h];

    const instructionsString = router.instructionResolver.stringifyViewportInstructions(instructions);
    console.log('Instructions', instructionsString);

it('resolves component instance from type', async function () {
      const Local = define({ name: 'local', template: 'local' }, null);
      const Global = define({ name: 'global', template: 'global' }, null);
      const { container, router } = await $setup([Local]);

      container.register(Global);
      // Registration.alias(CustomElement.keyFrom('global'), Global).register(container);

      const viewport = new ViewportContent(Global, null, null, router.container as unknown as IRenderContext);
      const component = viewport.toComponentInstance(router.container as unknown as IRenderContext);
      assert.strictEqual(component.constructor, Global, `component.constructor`);
    });
  });

import { inject } from '@aurelia/kernel';
import { IRouter, lifecycleLogger, ReentryBehavior } from '@aurelia/router';
import { Profile as ProfileModel } from 'shared/models/profile';
import { ProfileService } from 'shared/services/profile-service';
import { SharedState } from 'shared/state/shared-state';

@inject(SharedState, ProfileService, IRouter)
// @lifecycleLogger('profile')
export class Profile {
  public static parameters: string[] = ['name'];
  public reentryBehavior: string = ReentryBehavior.refresh;

  private username?: string;
  private profile?: ProfileModel;

  public constructor(
    private readonly sharedState: SharedState,
    private readonly profileService: ProfileService,
    private readonly router: IRouter) {
  }

  public canEnter() { console.log(`profile canEnter`); return true; }
  public created() { console.log(`profile created`); }
  public binding() { console.log(`profile binding`); }
  public bound() { console.log(`profile bound`); }
  public attaching() { console.log(`profile attaching`); }
  public attached() { console.log(`profile attached`); }

function createFixture() {
    const ctx = TestContext.createHTMLTestContext();
    const { lifecycle, scheduler, dom } = ctx;
    // const originalWnd = ctx.wnd;

    // const mockWnd = new MockWindow(originalWnd, originalWnd.history, originalWnd.location);
    // const addEventListener = createSpy(mockWnd, 'addEventListener');
    // const removeEventListener = createSpy(mockWnd, 'removeEventListener');

    // (DOM as Writable).window = mockWnd;

    const sut = new BrowserNavigator(scheduler, dom);
    const mockBrowserHistoryLocation = new MockBrowserHistoryLocation();
    mockBrowserHistoryLocation.changeCallback = sut.handlePopstate;
    sut.history = mockBrowserHistoryLocation as any;
    sut.location = mockBrowserHistoryLocation as any;

    function tearDown() {
      // (DOM as Writable).window = originalWnd;
    }

    callbackCount = 0;
    const callback = ((info) => {
      callbackCount++;
    });

    return { sut, tearDown, callback, lifecycle };
  }

exports.isNumeric = kernel_1.isNumeric;
    exports.camelCase = kernel_1.camelCase;
    exports.kebabCase = kernel_1.kebabCase;
    exports.pascalCase = kernel_1.pascalCase;
    exports.toArray = kernel_1.toArray;
    // nextId,
    // resetId,
    // compareNumber,
    // mergeDistinct,
    // isNumberOrBigInt,
    // isStringOrDate,
    exports.bound = kernel_1.bound;
    var router_1 = require("@aurelia/router");
    // Nav,
    exports.NavRoute = router_1.NavRoute;
    exports.IRouter = router_1.IRouter;
    exports.Router = router_1.Router;
    // IViewportOptions,
    // Viewport,
    // ContentStatus,
    // ViewportContent,
    exports.ViewportInstruction = router_1.ViewportInstruction;
    exports.RouterConfiguration = router_1.RouterConfiguration;
    exports.RouterRegistration = router_1.RouterRegistration;
    var runtime_1 = require("@aurelia/runtime");
    // CallFunctionExpression,
    // connects,
    // observes,
    // callsFunction,
    // hasAncestor,
    // isAssignable,
    // isLeftHandSide,

exports.IEventAggregator = kernel_1.IEventAggregator;
    exports.isNumeric = kernel_1.isNumeric;
    exports.camelCase = kernel_1.camelCase;
    exports.kebabCase = kernel_1.kebabCase;
    exports.pascalCase = kernel_1.pascalCase;
    exports.toArray = kernel_1.toArray;
    // nextId,
    // resetId,
    // compareNumber,
    // mergeDistinct,
    // isNumberOrBigInt,
    // isStringOrDate,
    exports.bound = kernel_1.bound;
    var router_1 = require("@aurelia/router");
    // Nav,
    exports.NavRoute = router_1.NavRoute;
    exports.IRouter = router_1.IRouter;
    exports.Router = router_1.Router;
    // IViewportOptions,
    // Viewport,
    // ContentStatus,
    // ViewportContent,
    exports.ViewportInstruction = router_1.ViewportInstruction;
    exports.RouterConfiguration = router_1.RouterConfiguration;
    exports.RouterRegistration = router_1.RouterRegistration;
    var runtime_1 = require("@aurelia/runtime");
    // CallFunctionExpression,
    // connects,
    // observes,
    // callsFunction,
    // hasAncestor,
    // isAssignable,

exports.camelCase = kernel_1.camelCase;
    exports.kebabCase = kernel_1.kebabCase;
    exports.pascalCase = kernel_1.pascalCase;
    exports.toArray = kernel_1.toArray;
    // nextId,
    // resetId,
    // compareNumber,
    // mergeDistinct,
    // isNumberOrBigInt,
    // isStringOrDate,
    exports.bound = kernel_1.bound;
    var router_1 = require("@aurelia/router");
    // Nav,
    exports.NavRoute = router_1.NavRoute;
    exports.IRouter = router_1.IRouter;
    exports.Router = router_1.Router;
    // IViewportOptions,
    // Viewport,
    // ContentStatus,
    // ViewportContent,
    exports.ViewportInstruction = router_1.ViewportInstruction;
    exports.RouterConfiguration = router_1.RouterConfiguration;
    exports.RouterRegistration = router_1.RouterRegistration;
    var runtime_1 = require("@aurelia/runtime");
    // CallFunctionExpression,
    // connects,
    // observes,
    // callsFunction,
    // hasAncestor,
    // isAssignable,
    // isLeftHandSide,
    // isPrimary,

// compareNumber,
    // mergeDistinct,
    // isNumberOrBigInt,
    // isStringOrDate,
    exports.bound = kernel_1.bound;
    var router_1 = require("@aurelia/router");
    // Nav,
    exports.NavRoute = router_1.NavRoute;
    exports.IRouter = router_1.IRouter;
    exports.Router = router_1.Router;
    // IViewportOptions,
    // Viewport,
    // ContentStatus,
    // ViewportContent,
    exports.ViewportInstruction = router_1.ViewportInstruction;
    exports.RouterConfiguration = router_1.RouterConfiguration;
    exports.RouterRegistration = router_1.RouterRegistration;
    var runtime_1 = require("@aurelia/runtime");
    // CallFunctionExpression,
    // connects,
    // observes,
    // callsFunction,
    // hasAncestor,
    // isAssignable,
    // isLeftHandSide,
    // isPrimary,
    // isResource,
    // hasBind,
    // hasUnbind,
    // isLiteral,
    // arePureLiterals,
    // isPureLiteral,