[examples] Sort nav item

.eslintrc.js

@@ -24,6 +24,7 @@ module.exports = {
     },
   },
   rules: {
+    'no-fallthrough': 2,
     'no-console': 1,
     'sort-imports': 0,
     'import/no-extraneous-dependencies': 2,

packages/duoyun-ui/src/lib/time.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-fallthrough */
+
 import { locale } from './locale';
 
 const intlDigitFormatter = Intl.DateTimeFormat(undefined, {

packages/gem-examples/src/async/index.ts

@@ -0,0 +1,72 @@
+import { GemElement, adoptedStyle, createCSSSheet, customElement, html, numattribute, render } from '@mantou/gem';
+
+import '../elements/layout';
+
+@adoptedStyle(createCSSSheet(`:host {display: block}`))
+@customElement('app-post')
+export class Post extends GemElement {
+  @numattribute index: number;
+
+  constructor() {
+    super({ isAsync: true });
+  }
+
+  // TODO: 如何取消？
+  render() {
+    console.log(`render ${this.index}`);
+
+    const startTime = performance.now();
+    while (performance.now() - startTime < 1) {
+      // Do nothing for 1 ms per item to emulate extremely slow code
+    }
+    return html`Post #${this.index + 1}`;
+  }
+}
+
+@customElement('app-posts-page')
+export class Posts extends GemElement {
+  render() {
+    return html`${Array.from({ length: 500 }, (_, i) => i).map((e) => html`<app-post .index=${e}></app-post>`)}`;
+  }
+}
+
+@customElement('app-root')
+export class App extends GemElement {
+  state = {
+    tab: 'home',
+  };
+
+  #renderContent() {
+    switch (this.state.tab) {
+      case 'posts':
+        return html`<app-posts-page></app-posts-page>`;
+      case 'about':
+        return html`This is about tab`;
+      default:
+        return html`Welcome to my profile!`;
+    }
+  }
+
+  render() {
+    return html`
+      <div>
+        ${['home', 'posts', 'about'].map((tab) => {
+          return html`<button ?disabled=${tab === this.state.tab} @click=${() => this.setState({ tab })}>
+            ${tab}
+          </button> `;
+        })}
+      </div>
+      <hr />
+      ${this.#renderContent()}
+    `;
+  }
+}
+
+render(
+  html`
+    <gem-examples-layout>
+      <app-root></app-root>
+    </gem-examples-layout>
+  `,
+  document.body,
+);

packages/gem-examples/src/async/manifest.json

@@ -0,0 +1,3 @@
+{
+  "order": 20
+}

packages/gem-examples/src/base-path/manifest.json

@@ -0,0 +1,3 @@
+{
+  "group": "History"
+}

packages/gem-examples/src/benchmark/demuxer_mp4.js

@@ -2,17 +2,17 @@
 
 /* eslint-disable import/no-unresolved */
 // vite 在生产模式下将 url import 编译成 IIFE，所以使用这个已知的变量名
-import dump from 'https://esm.sh/mp4box';
+import atob from 'https://esm.sh/mp4box';
 
 try {
   importScripts('https://w3c.github.io/webcodecs/samples/third_party/mp4boxjs/mp4box.all.min.js');
-  dump.createFile = globalThis.MP4Box.createFile;
-  dump.DataStream = globalThis.DataStream;
+  atob.createFile = globalThis.MP4Box.createFile;
+  atob.DataStream = globalThis.DataStream;
 } catch {
   //
 }
 
-const { createFile, DataStream } = dump;
+const { createFile, DataStream } = atob;
 
 // Wraps an MP4Box File as a WritableStream underlying sink.
 class MP4FileSink {

packages/gem-examples/src/dialog/manifest.json

@@ -0,0 +1,3 @@
+{
+  "group": "Built In"
+}

packages/gem-examples/src/elements/nav.ts

@@ -65,29 +65,35 @@ export class Nav extends GemElement {
         <div class="version">version: ${VERSION}</div>
       </a>
       <ol>
-        ${Object.entries(
+        ${Object.entries<typeof EXAMPLES>(
           (Object as any).groupBy(
             EXAMPLES.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
             (e: any) => e.group || '',
           ),
-        ).map(
-          ([group, examples]) => html`
-            <li>
-              <div class="group-title"><span>${group}</span></div>
-              <ol>
-                ${(examples as typeof EXAMPLES).map(
-                  ({ path = '', name = '' }) => html`
-                    <li>
-                      <a class=${location.pathname.includes(path) ? 'active' : ''} href=${`../${path}/`}>
-                        <div>${name.replace('-', ' ')}</div>
-                      </a>
-                    </li>
-                  `,
-                )}
-              </ol>
-            </li>
-          `,
-        )}
+        )
+          .map(
+            ([group, examples]) =>
+              [group, examples, group === '' ? -100 : Math.max(...examples.map((e) => e.order || 0))] as const,
+          )
+          .sort((a, b) => a[2] - b[2])
+          .map(
+            ([group, examples]) => html`
+              <li>
+                <div class="group-title"><span>${group}</span></div>
+                <ol>
+                  ${examples.map(
+                    ({ path = '', name = '' }) => html`
+                      <li>
+                        <a class=${location.pathname.includes(path) ? 'active' : ''} href=${`../${path}/`}>
+                          <div>${name.replace('-', ' ')}</div>
+                        </a>
+                      </li>
+                    `,
+                  )}
+                </ol>
+              </li>
+            `,
+          )}
       </ol>
     `;
   }

packages/gem-examples/src/gesture/manifest.json

@@ -0,0 +1,3 @@
+{
+  "group": "Built In"
+}

packages/gem-examples/src/hash/index.ts

@@ -1,9 +1,10 @@
-import { GemElement, render, html } from '@mantou/gem';
+import { GemElement, render, html, customElement } from '@mantou/gem';
 import '@mantou/gem/elements/link';
 
 import '../elements/layout';
 
-class Article extends GemElement {
+@customElement('app-article')
+class _Article extends GemElement {
   constructor() {
     super();
     window.addEventListener('hashchange', this.checkHash);
@@ -29,9 +30,9 @@ class Article extends GemElement {
     return html`<div style="height: 1000px"><slot></slot></div>`;
   }
 }
-customElements.define('app-article', Article);
 
-class App extends GemElement {
+@customElement('app-root')
+class _App extends GemElement {
   render() {
     return html`
       <a href="#article-1">${'<a href="#article-1">'}</a>
@@ -43,7 +44,6 @@ class App extends GemElement {
     `;
   }
 }
-customElements.define('app-root', App);
 
 render(
   html`

packages/gem-examples/src/hash/manifest.json

@@ -0,0 +1,3 @@
+{
+  "group": "History"
+}

packages/gem-examples/src/light-dom/index.ts

@@ -1,7 +1,8 @@
-import { GemElement, html, render } from '@mantou/gem';
+import { GemElement, customElement, html, render } from '@mantou/gem';
 
 import '../elements/layout';
 
+@customElement('app-root')
 export class App extends GemElement {
   state = { now: 0 };
   constructor() {
@@ -19,8 +20,6 @@ export class App extends GemElement {
   }
 }
 
-customElements.define('app-root', App);
-
 render(
   html`
     <gem-examples-layout>

packages/gem-examples/src/multi-page/index.ts

@@ -1,4 +1,4 @@
-import { GemElement, html, render } from '@mantou/gem';
+import { GemElement, customElement, html, render } from '@mantou/gem';
 import '@mantou/gem/elements/title';
 import '@mantou/gem/elements/route';
 import '@mantou/gem/elements/link';
@@ -37,7 +37,8 @@ const routes = [
   },
 ];
 
-class App extends GemElement {
+@customElement('app-root')
+class _App extends GemElement {
   render() {
     return html`
       <style>
@@ -66,8 +67,6 @@ class App extends GemElement {
   }
 }
 
-customElements.define('app-root', App);
-
 render(
   html`
     <gem-examples-layout>

packages/gem-examples/src/multi-page/manifest.json

@@ -0,0 +1,3 @@
+{
+  "group": "Built In"
+}

packages/gem-examples/src/multi-page/page-c.ts

@@ -1,4 +1,4 @@
-import { GemElement, html } from '@mantou/gem';
+import { GemElement, customElement, html } from '@mantou/gem';
 import '@mantou/gem/elements/route';
 import '@mantou/gem/elements/link';
 
@@ -19,22 +19,20 @@ const routes = [
   },
 ];
 
-customElements.define(
-  'app-page-c',
-  class extends GemElement {
-    render() {
-      return html`
-        <style>
-          gem-link + gem-link {
-            margin-left: 0.5em;
-          }
-        </style>
-        <gem-link path="./d">Page c/d</gem-link>
-        <gem-link path="./e">Page c/e</gem-link>
-        <gem-route .routes=${routes}></gem-route>
-        inert route:
-        <gem-route ?inert=${true} .routes=${routes}></gem-route>
-      `;
-    }
-  },
-);
+@customElement('app-page-c')
+class _AppPageC extends GemElement {
+  render() {
+    return html`
+      <style>
+        gem-link + gem-link {
+          margin-left: 0.5em;
+        }
+      </style>
+      <gem-link path="./d">Page c/d</gem-link>
+      <gem-link path="./e">Page c/e</gem-link>
+      <gem-route .routes=${routes}></gem-route>
+      inert route:
+      <gem-route ?inert=${true} .routes=${routes}></gem-route>
+    `;
+  }
+}

packages/gem-examples/src/perf-demo/manifest.json

@@ -1,3 +1,4 @@
 {
+  "order": "9",
   "group": "Performance"
 }

packages/gem-examples/src/ref-route/manifest.json

@@ -0,0 +1,3 @@
+{
+  "group": "Built In"
+}

packages/gem-examples/src/reflect/manifest.json

@@ -0,0 +1,3 @@
+{
+  "group": "Built In"
+}

packages/gem-examples/src/scope/manifest.json

@@ -0,0 +1,3 @@
+{
+  "group": "Style"
+}

packages/gem-examples/src/styled/manifest.json

@@ -0,0 +1,3 @@
+{
+  "group": "Style"
+}

packages/gem-examples/src/svg-icon/manifest.json

@@ -0,0 +1,3 @@
+{
+  "group": "Built In"
+}

packages/gem-examples/src/theme/manifest.json

@@ -0,0 +1,3 @@
+{
+  "group": "Style"
+}

packages/gem-examples/src/tree/manifest.json

@@ -1,3 +1,4 @@
 {
+  "order": "10",
   "group": "Duoyun UI"
 }

packages/gem-examples/src/unsafe/manifest.json

@@ -0,0 +1,3 @@
+{
+  "group": "Built In"
+}

packages/gem/src/elements/base/link.ts

@@ -142,6 +142,7 @@ export class GemLinkElement extends GemElement {
         part=${this.link}
         @click=${this.#preventDefault}
         href=${ifDefined(this.#hint === 'off' ? undefined : this.#getHint())}
+        tabindex="-1"
       >
         <slot></slot>
       </a>