miniben-90 · September 8, 2022 14:15
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <base href="/">
 </head>
 <!--
 Dumber Gist uses dumber bundler, the default bundle file
 is /dist/entry-bundle.js.
 The starting module is pointed to "main" (data-main attribute on script)
 which is your src/main.ts.
 -->
 <body>
  <my-app></my-app>
  <script src="/dist/entry-bundle.js" data-main="main"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
 {
  "dependencies": {
    "aurelia": "latest"
  }
 }
diff --git a/src\main.ts b/src\main.ts
 import Aurelia from "aurelia";
 import { RouterConfiguration } from '@aurelia/router';
 import { MyApp } from "./my-app";

 Aurelia.register(RouterConfiguration.customize({ resolutionMode: 'static' })).app(MyApp).start();
diff --git a/src\missing-page.html b/src\missing-page.html
 Missing page :(
diff --git a/src\missing-page.ts b/src\missing-page.ts
 export class MissingPage {
  public static parameters = ["id"];

  public missingComponent: string;

  public load(parameters: { id: string }): void {
    this.missingComponent = parameters.id;
  }
 }
diff --git a/src\my-app.css b/src\my-app.css
 .message {
  background-color: lightblue;
 }
diff --git a/src\my-app.html b/src\my-app.html
 <div>
    <ul>
      <li>
        <a load="/">Page 1</a>
      </li>
      <li>
        <a load="/page-2">Page 2</a>
      </li>
      <li>
        <a load="/page-3">Page 3</a>
      </li>
      </ul>
 </div>
 <import from="./missing-page"></import>

 <au-viewport name="main" fallback="missing-page"></au-viewport>
diff --git a/src\my-app.ts b/src\my-app.ts
 import { lifecycleHooks } from 'aurelia';
 import { type IRoutableComponent, type IRoute } from "@aurelia/router";
 @lifecycleHooks()
 export class MyApp implements IRoutableComponent {
  static routes: IRoute[] = [
    {
      id: "page-1",
      path: ["", "page-1"],
      component: () => import("./pages/page-1"),
      viewport: 'main'
    },
    {
      id: "page-2",
      path: ["page-2"],
      component: () => import("./pages/page-2"),
      viewport: 'main'
    },
    {
      id: "page-3",
      path: ["page-3"],
      component: () => import("./pages/page-3"),
      viewport: 'main'
    },
  ];
  
  load() {
    console.log('test', arguments);
  }
 }
diff --git a/src\pages\page-1.html b/src\pages\page-1.html
 I'm a page. I'm the first one <a load="route:page-2">click to go 2</a>
diff --git a/src\pages\page-1.ts b/src\pages\page-1.ts
 export class Page1 {
  /** */
 }
diff --git a/src\pages\page-2.html b/src\pages\page-2.html
 I'm a page. I'm the second one <a load="/page-3">click to go 3</a>
diff --git a/src\pages\page-2.ts b/src\pages\page-2.ts
 export class Page2 {
  /** */
 }
diff --git a/src\pages\page-3.html b/src\pages\page-3.html
 I'm 3
diff --git a/src\pages\page-3.ts b/src\pages\page-3.ts
 export class Page3 {
  /** */
 }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dumber Gist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<base href="/">
	</head>
	<!--
	Dumber Gist uses dumber bundler, the default bundle file
	is /dist/entry-bundle.js.
	The starting module is pointed to "main" (data-main attribute on script)
	which is your src/main.ts.
	-->
	<body>
	<my-app></my-app>
	<script src="/dist/entry-bundle.js" data-main="main"></script>
	</body>
	</html>
	import Aurelia from "aurelia";
	import { RouterConfiguration } from '@aurelia/router';
	import { MyApp } from "./my-app";

	Aurelia.register(RouterConfiguration.customize({ resolutionMode: 'static' })).app(MyApp).start();
	export class MissingPage {
	public static parameters = ["id"];

	public missingComponent: string;

	public load(parameters: { id: string }): void {
	this.missingComponent = parameters.id;
	}
	}
	<div>
	<ul>
	<li>
	<a load="/">Page 1</a>
	</li>
	<li>
	<a load="/page-2">Page 2</a>
	</li>
	<li>
	<a load="/page-3">Page 3</a>
	</li>
	</ul>
	</div>
	<import from="./missing-page"></import>

	<au-viewport name="main" fallback="missing-page"></au-viewport>
	import { lifecycleHooks } from 'aurelia';
	import { type IRoutableComponent, type IRoute } from "@aurelia/router";
	@lifecycleHooks()
	export class MyApp implements IRoutableComponent {
	static routes: IRoute[] = [
	{
	id: "page-1",
	path: ["", "page-1"],
	component: () => import("./pages/page-1"),
	viewport: 'main'
	},
	{
	id: "page-2",
	path: ["page-2"],
	component: () => import("./pages/page-2"),
	viewport: 'main'
	},
	{
	id: "page-3",
	path: ["page-3"],
	component: () => import("./pages/page-3"),
	viewport: 'main'
	},
	];

	load() {
	console.log('test', arguments);
	}
	}