How to use the @aurelia/router.ViewportInstruction function in @aurelia/router

//     
    //   
    // 
    // 
    //
    // /(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);

assert.strictEqual(instructionsString, 'foo(123)+bar@right+baz', `instructionsString`);
    newInstructions = router.instructionResolver.parseViewportInstructions(instructionsString);
    assert.deepStrictEqual(newInstructions, instructions, `newInstructions`);

    await tearDown();
  });

  interface InstructionTest {
    instruction: string;
    viewportInstruction: ViewportInstruction;
  }

  const instructions: InstructionTest[] = [
    { instruction: 'foo', viewportInstruction: new ViewportInstruction('foo') },
    { instruction: 'foo@left', viewportInstruction: new ViewportInstruction('foo', 'left') },
    { instruction: 'foo(123)@left', viewportInstruction: new ViewportInstruction('foo', 'left', '123') },
    { instruction: 'foo(123)', viewportInstruction: new ViewportInstruction('foo', undefined, '123') },
    { instruction: 'foo/bar', viewportInstruction: new ViewportInstruction('foo', undefined, undefined, true, [new ViewportInstruction('bar')]) },
    { instruction: 'foo(123)/bar@left/baz', viewportInstruction: new ViewportInstruction('foo', undefined, '123', true, [new ViewportInstruction('bar', 'left', undefined, true, [new ViewportInstruction('baz')])]) },
    { instruction: 'foo(123)/(bar@left+baz(456))', viewportInstruction: new ViewportInstruction('foo', undefined, '123', true, [new ViewportInstruction('bar', 'left'), new ViewportInstruction('baz', undefined, '456')]) },
  ];

  for (const instructionTest of instructions) {
    const { instruction, viewportInstruction } = instructionTest;

    it(`parses viewport instruction: ${instruction}`, async function () {
      const { host, router, tearDown } = await createFixture();

      const parsed = router.instructionResolver.parseViewportInstruction(instruction);
      assert.deepStrictEqual(parsed, viewportInstruction, `parsed`);
      const newInstruction = router.instructionResolver.stringifyViewportInstruction(parsed);
      assert.strictEqual(newInstruction, instruction, `newInstruction`);

await tearDown();
  });

  interface InstructionTest {
    instruction: string;
    viewportInstruction: ViewportInstruction;
  }

  const instructions: InstructionTest[] = [
    { instruction: 'foo', viewportInstruction: new ViewportInstruction('foo') },
    { instruction: 'foo@left', viewportInstruction: new ViewportInstruction('foo', 'left') },
    { instruction: 'foo(123)@left', viewportInstruction: new ViewportInstruction('foo', 'left', '123') },
    { instruction: 'foo(123)', viewportInstruction: new ViewportInstruction('foo', undefined, '123') },
    { instruction: 'foo/bar', viewportInstruction: new ViewportInstruction('foo', undefined, undefined, true, [new ViewportInstruction('bar')]) },
    { instruction: 'foo(123)/bar@left/baz', viewportInstruction: new ViewportInstruction('foo', undefined, '123', true, [new ViewportInstruction('bar', 'left', undefined, true, [new ViewportInstruction('baz')])]) },
    { instruction: 'foo(123)/(bar@left+baz(456))', viewportInstruction: new ViewportInstruction('foo', undefined, '123', true, [new ViewportInstruction('bar', 'left'), new ViewportInstruction('baz', undefined, '456')]) },
  ];

  for (const instructionTest of instructions) {
    const { instruction, viewportInstruction } = instructionTest;

    it(`parses viewport instruction: ${instruction}`, async function () {
      const { host, router, tearDown } = await createFixture();

      const parsed = router.instructionResolver.parseViewportInstruction(instruction);
      assert.deepStrictEqual(parsed, viewportInstruction, `parsed`);
      const newInstruction = router.instructionResolver.stringifyViewportInstruction(parsed);
      assert.strictEqual(newInstruction, instruction, `newInstruction`);

      await tearDown();
    });

it('handles state strings', async function () {
    const { host, router, tearDown } = await createFixture();

    let instructions: ViewportInstruction[] = [
      new ViewportInstruction('foo', 'left', '123'),
      new ViewportInstruction('bar', 'right', '456'),
    ];
    let instructionsString = router.instructionResolver.stringifyViewportInstructions(instructions);
    assert.strictEqual(instructionsString, 'foo(123)@left+bar(456)@right', `instructionsString`);
    let newInstructions = router.instructionResolver.parseViewportInstructions(instructionsString);
    assert.deepStrictEqual(newInstructions, instructions, `newInstructions`);

    instructions = [
      new ViewportInstruction('foo', undefined, '123'),
      new ViewportInstruction('bar', 'right'),
      new ViewportInstruction('baz'),
    ];
    instructionsString = router.instructionResolver.stringifyViewportInstructions(instructions);
    assert.strictEqual(instructionsString, 'foo(123)+bar@right+baz', `instructionsString`);
    newInstructions = router.instructionResolver.parseViewportInstructions(instructionsString);
    assert.deepStrictEqual(newInstructions, instructions, `newInstructions`);

await tearDown();
  });

  interface InstructionTest {
    instruction: string;
    viewportInstruction: ViewportInstruction;
  }

  const instructions: InstructionTest[] = [
    { instruction: 'foo', viewportInstruction: new ViewportInstruction('foo') },
    { instruction: 'foo@left', viewportInstruction: new ViewportInstruction('foo', 'left') },
    { instruction: 'foo(123)@left', viewportInstruction: new ViewportInstruction('foo', 'left', '123') },
    { instruction: 'foo(123)', viewportInstruction: new ViewportInstruction('foo', undefined, '123') },
    { instruction: 'foo/bar', viewportInstruction: new ViewportInstruction('foo', undefined, undefined, true, [new ViewportInstruction('bar')]) },
    { instruction: 'foo(123)/bar@left/baz', viewportInstruction: new ViewportInstruction('foo', undefined, '123', true, [new ViewportInstruction('bar', 'left', undefined, true, [new ViewportInstruction('baz')])]) },
    { instruction: 'foo(123)/(bar@left+baz(456))', viewportInstruction: new ViewportInstruction('foo', undefined, '123', true, [new ViewportInstruction('bar', 'left'), new ViewportInstruction('baz', undefined, '456')]) },
  ];

  for (const instructionTest of instructions) {
    const { instruction, viewportInstruction } = instructionTest;

    it(`parses viewport instruction: ${instruction}`, async function () {
      const { host, router, tearDown } = await createFixture();

      const parsed = router.instructionResolver.parseViewportInstruction(instruction);
      assert.deepStrictEqual(parsed, viewportInstruction, `parsed`);
      const newInstruction = router.instructionResolver.stringifyViewportInstruction(parsed);
      assert.strictEqual(newInstruction, instruction, `newInstruction`);

      await tearDown();
    });
  }

public canEnter() {
    return [new ViewportInstruction('about', 'content'), new ViewportInstruction('authors', 'lists')];
  }
}