Skip to content

Instantly share code, notes, and snippets.

@aegenet

aegenet/index.html

Last active December 20, 2023 12:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aegenet/2dd2eeb92319dde10108cc26161b776a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aegenet/2dd2eeb92319dde10108cc26161b776a to your computer and use it in GitHub Desktop.
Download ZIP
au2-router-duplicate-content-issue
Raw
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>
Raw
package.json
{
"dependencies": {
"aurelia": "2.0.0-beta.9",
"@aurelia/router": "2.0.0-beta.9"
}
}
Raw
src\main.ts
import Aurelia from "aurelia";
import { RouterConfiguration } from '@aurelia/router';
import { MyApp } from "./my-app";
Aurelia.register(RouterConfiguration.customize({
useConfiguredRoutes: true,
})).app(MyApp).start();
Raw
src\my-app.html
<import from="./pages/missing-page"></import>
<h1 style="font-size:2em">Demo 1: with <code>@aurelia/router</code> <em>(not lite)</em> and the portal attribute</h1>
<div style="
background: aliceblue;
padding: 8px;
margin-bottom:12px;
">
This demo shows two timing (race condition?) issues with the <b>portal</b> and <b>au-viewport</b> attributes.<br><br>
<div style="margin-bottom:12px;padding:8px;background:white">
<b>Menu:</b>
<!-- <a href="/">Home</a> -->
<a load="/">Home</a>
| <a load="/page/1">Page 1</a> | <a load="/page/2">Page 2</a> | <a load="/page/3">Page 3</a>
</div>
By clicking quickly (in a real application), we may end up with <b>duplicate content</b>, either at the portal target level, or/and the router page content (this may be another issue... and the url has become <code>/undefined</code>).<br><br>
<b>Test a.</b>: click on the "<b>Tiny flood</b>" button.<br>
<button click.trigger="showTheIssue()">Tiny flood</button><br><br>
<b>Test b.</b>: click on the "<b>Tiny flood with delay</b>" button.<br>
<button click.trigger="showTheIssueWithDelay()">Tiny flood with delay</button><br><br>
<b>Portal target content:</b><br><br>
<div style="border:1px solid; background:white;max-height:128px;overflow:auto; padding:8px;">${content}</div>
</div>
<h2 style="margin-bottom:4px;font-size:1em">Target portal</h2>
<div style="margin-bottom:12px"><b>Current page:</b> <span id="portalMe" ref="penumbra"></span></div>
<h2 style="margin-bottom:4px;font-size:1em">Current page content</h2>
<au-viewport name="main" fallback="missing-page"></au-viewport>
<!-- <au-viewport name="main" default="home-page" fallback="missing-page"></au-viewport> -->
Raw
src\my-app.ts
import { IRouteableComponent, IRouter } from "@aurelia/router";
import { inject, NavigationInstruction } from 'aurelia';
@inject(IRouter)
export class MyApp implements IRouteableComponent {
content = '';
static routes: NavigationInstruction[] = [
{
id: "home",
path: ["", "home"],
// path: ["home"],
component: () => import("./pages/home-page"),
title: 'Home',
},
{
id: "page-1",
path: ["page/1"],
component: () => import("./pages/page-1"),
title: 'Page 1',
},
{
id: "page-2",
path: ["page/2"],
component: () => import("./pages/page-2"),
title: 'Page 2',
},
{
id: "page-3",
path: ["page/3"],
component: () => import("./pages/page-3"),
title: 'Page 3',
},
];
constructor(router) {
this._router = router;
}
showTheIssue() {
for (let i = 0; i < 100; i++) {
this._router.load(`/page/${(i % 3) + 1}`);
}
}
async showTheIssueWithDelay() {
for (let i = 0; i < 100; i++) {
this._router.load(`../page/${(i % 3) + 1}`);
await new Promise(resolve => setTimeout(resolve, 5));
}
}
attached() {
this._dirtyRefresh = setInterval(() => {
this.content = this.penumbra?.innerHTML || 'empty';
}, 250);
}
detached() {
clearInterval(this._dirtyRefresh);
this._dirtyRefresh = undefined;
}
}
Raw
src\pages\home-page.ts
import { customElement } from "aurelia";
@customElement({
name: 'home-page',
template: `<div style="border:1px solid grey;padding:8px"><span portal="#portalMe" style="color:grey">The Home</span><b>Home Page</b></div>`
})
export class HomePage {
/** */
}
Raw
src\pages\missing-page.ts
import { customElement } from "aurelia";
@customElement({
name: 'missing-page',
template: "Missing page: ${missingComponent}"
})
export class MissingPage {
public static parameters = ["id"];
public missingComponent: string;
public load(parameters: { id: string }): void {
this.missingComponent = parameters.id;
}
}
Raw
src\pages\page-1.ts
import { customElement } from "aurelia";
@customElement({
name: 'page-1',
template: `<div style="border:1px solid red;padding:8px"><span portal="#portalMe" style="color:red">The chosen!</span>I'm a page. I'm the first one</div>`
})
export class Page1 {
/** */
async loading() {
return await new Promise(resolve => setTimeout(resolve, 20));
}
}
Raw
src\pages\page-2.ts
import { customElement } from "aurelia";
@customElement({
name: 'page-2',
template: `<div style="border:1px solid green;padding:8px"><span portal="#portalMe" style="color:green">Second!</span>I'm a page. I'm the second one <a load="/page/3">click to go 3</a></div>`
})
export class Page2 {
/** */
async loading() {
return await new Promise(resolve => setTimeout(resolve, 20));
}
}
Raw
src\pages\page-3.ts
import { customElement } from "aurelia";
@customElement({
name: 'page-3',
template: "<div style='border:1px solid blue;padding:8px'><span portal='#portalMe' style='color:blue'>Number 3! !I'm not a number!</span>I'm 3</div>"
})
export class Page3 {
/** */
async loading() {
return await new Promise(resolve => setTimeout(resolve, 20));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment