@mantou/gem 1.3.6 → 1.5.1

package/src/elements/route.ts

@@ -11,13 +11,16 @@ import {
   UpdateHistoryParams,
   titleStore,
   updateStore,
-  addMicrotaskToStack,
+  Store,
+  QueryString,
+  createStore,
 } from '../';
 
 interface NamePostition {
   [index: string]: number;
 }
 
+// TODO: use `URLPattern`
 class ParamsRegExp extends RegExp {
   namePosition: NamePostition;
   constructor(pattern: string) {
@@ -36,15 +39,15 @@ class ParamsRegExp extends RegExp {
   }
 }
 
-function getReg(pattern: string) {
-  return new ParamsRegExp(pattern);
-}
+type Params = Record<string, string>;
 
 // `/a/b/:c/:d` `/a/b/1/2`
-function getParams(pattern: string, path: string) {
-  const reg = getReg(pattern);
-  const matchResult = path.match(reg);
-  const params: Record<string, string> = {};
+// 匹配成功时返回 params
+export function matchPath(pattern: string, path: string) {
+  const reg = new ParamsRegExp(pattern);
+  const matchResult = path.match(reg) || `${path}/`.match(reg);
+  if (!matchResult) return null;
+  const params: Params = {};
   if (matchResult) {
     Object.keys(reg.namePosition).forEach((name) => {
       params[name] = matchResult[reg.namePosition[name] + 1];
@@ -53,10 +56,6 @@ function getParams(pattern: string, path: string) {
   return params;
 }
 
-export function isMatch(pattern: string, path: string) {
-  return !!path.match(getReg(pattern)) || !!`${path}/`.match(getReg(pattern));
-}
-
 export interface RouteItem<T = unknown> {
   // 支持 *
   // 支持 /a/*
@@ -64,17 +63,17 @@ export interface RouteItem<T = unknown> {
   pattern: string;
   redirect?: string;
   content?: TemplateResult;
-  getContent?: (params: Record<string, string>) => TemplateResult;
+  getContent?: (params: Params) => TemplateResult | Promise<TemplateResult>;
   title?: string;
   // 用来传递数据
   data?: T;
 }
 
-export type RoutesObject = Record<string, RouteItem>;
+type RoutesObject = Record<string, RouteItem>;
 
 // params 中的成员不会验证
 export interface RouteOptions extends Omit<UpdateHistoryParams, 'path'> {
-  params?: { [index: string]: string };
+  params?: Params;
 }
 
 // 从路由创建路径
@@ -103,127 +102,148 @@ interface ConstructorOptions {
   routes?: RouteItem[] | RoutesObject;
 }
 
+type State = {
+  content?: TemplateResult;
+};
+
 /**
  * @customElement gem-route
+ * @attr inert 暂停路由更新
  * @fires change
+ * @fires error
+ * @fires loading
  */
 @connectStore(history.store)
 @customElement('gem-route')
-export class GemRouteElement extends GemElement {
+export class GemRouteElement extends GemElement<State> {
   @property routes?: RouteItem[] | RoutesObject;
+  /**
+   * @example
+   * const locationStore = GemRouteElement.createLocationStore()
+   * html`<gem-route .locationStore=${locationStore}>`
+   */
+  @property locationStore?: Store<{ path: string; params: Params; query: QueryString; data?: any }>;
   @property key: any; // 除了 href 提供另外一种方式来更新，比如语言更新也需要刷新 <gem-route>
-  @emitter change: Emitter<RouteItem | null>;
-
-  #href: string; // 用于内部比较
-  #key: any; // 用于内部比较
-  #redirect: boolean;
-  #isLight?: boolean;
+  @emitter change: Emitter<RouteItem | null>; // path 改变或者 key 改变，包含初始渲染
+  @emitter loading: Emitter<RouteItem>;
+  @emitter error: Emitter<any>;
 
   currentRoute: RouteItem | null;
+  // 当前匹配的路由的 params
+  currentParams: Params = {};
 
-  // 获取当前匹配的路由的 params
-  getParams() {
-    return this.currentRoute ? getParams(this.currentRoute.pattern, history.getParams().path) : {};
-  }
+  #lastLoader?: Promise<TemplateResult>;
+
+  static createLocationStore = () => {
+    const { path, query, data } = history.getParams();
+    return createStore({ path, query, data, params: {} as Record<string, string> });
+  };
+
+  static findRoute = (target: RouteItem[] | RoutesObject = [], path: string) => {
+    let defaultRoute: RouteItem | null = null;
+    let routes: RouteItem[];
+    if (target instanceof Array) {
+      routes = target;
+    } else {
+      routes = Object.values(target);
+    }
+    for (const route of routes) {
+      if ('*' === route.pattern) {
+        defaultRoute = route;
+      } else {
+        const params = matchPath(route.pattern, path);
+        if (params) {
+          return { route, params };
+        }
+      }
+    }
+    return { route: defaultRoute };
+  };
 
   constructor({ isLight, routes }: ConstructorOptions = {}) {
     super({ isLight });
-    this.#isLight = isLight;
-
     this.routes = routes;
-
-    const { path, query } = history.getParams();
-    this.#href = path + query;
   }
 
-  #initPage = () => {
-    const title = this.currentRoute?.title;
-    if (title) {
-      updateStore(titleStore, { title });
+  state: State = {
+    content: undefined,
+  };
+
+  #updateLocationStore = () => {
+    if (this.locationStore) {
+      const { path, query, data } = history.getParams();
+      updateStore(this.locationStore, {
+        path,
+        params: this.currentParams,
+        query,
+        data,
+      });
     }
   };
 
-  #callback = () => {
-    this.currentRoute = null;
-    return html``;
+  #setContent = (route: RouteItem | null, params: Params, content?: TemplateResult) => {
+    this.#lastLoader = undefined;
+    this.currentRoute = route;
+    this.currentParams = params;
+    this.setState({ content });
+    this.change(this.currentRoute);
+    const title = route?.title;
+    if (title) updateStore(titleStore, { title });
+    this.#updateLocationStore();
   };
 
+  mounted() {
+    this.effect(
+      ([_, path]) => {
+        const { route, params = {} } = GemRouteElement.findRoute(this.routes, path);
+        const { redirect, content, getContent } = route || {};
+        if (redirect) {
+          history.replace({ path: redirect });
+          return;
+        }
+        const contentOrLoader = content || getContent?.(params);
+        if (contentOrLoader instanceof Promise) {
+          this.loading(route!);
+          this.#lastLoader = contentOrLoader;
+          const isSomeLoader = () => this.#lastLoader === contentOrLoader;
+          contentOrLoader
+            .then((content) => {
+              if (isSomeLoader()) this.#setContent(route, params, content);
+            })
+            .catch((err) => {
+              if (isSomeLoader()) this.error(err);
+            });
+          return;
+        }
+        this.#setContent(route, params, contentOrLoader);
+      },
+      () => {
+        const { path } = history.getParams();
+        return [this.key, path];
+      },
+    );
+    this.effect(this.#updateLocationStore, () => [location.search]);
+  }
+
   shouldUpdate() {
     if (this.inert) return false;
-    const { path, query } = history.getParams();
-    const href = path + query;
-    if (href !== this.#href || this.key !== this.#key) {
-      this.#href = href;
-      this.#key = this.key;
-      return true;
-    }
-    return false;
+    return true;
   }
 
   render() {
-    if (!this.routes) return this.#callback();
-    const { path } = history.getParams();
-    this.currentRoute = null;
-
-    let defaultRoute: RouteItem | null = null;
-    let routes: RouteItem[];
-    if (this.routes instanceof Array) {
-      routes = this.routes;
-    } else {
-      routes = Object.values(this.routes);
-    }
-
-    for (const item of routes) {
-      const { pattern } = item;
-      if ('*' === pattern) {
-        defaultRoute = item;
-      } else if (isMatch(pattern, path)) {
-        this.currentRoute = item;
-        break;
-      }
-    }
+    const { content } = this.state;
+    if (!this.shadowRoot) return html`${content}`;
 
-    if (!this.currentRoute) {
-      this.currentRoute = defaultRoute;
-    }
-
-    if (!this.currentRoute) return this.#callback();
-
-    const { redirect, content, getContent } = this.currentRoute;
-    if (redirect) {
-      this.#redirect = true;
-      history.replace({ path: redirect });
-      // 不要渲染空内容，等待重定向结果
-      return undefined;
-    }
-
-    this.#redirect = false;
     return html`
-      ${this.#isLight
-        ? ''
-        : html`
-            <style>
-              :host,
-              :not(:defined) {
-                display: contents;
-              }
-            </style>
-          `}
-      ${content || getContent?.(this.getParams())}
+      <style>
+        :host,
+        :not(:defined) {
+          display: contents;
+        }
+      </style>
+      ${content}
     `;
   }
-
-  mounted() {
-    this.#key = this.key;
-    addMicrotaskToStack(this.#initPage);
-  }
-
-  updated() {
-    this.#initPage();
-    if (!this.#redirect) {
-      this.change(this.currentRoute);
-    }
-  }
 }
 
 /**

package/src/elements/use.ts

@@ -1,5 +1,6 @@
 import { GemElement, html, attribute, property, customElement } from '../';
 
+const eleCache = new Map<string, HTMLTemplateElement>();
 /**
  * svg 中的 `<use>` 不能穿透 ShadowDOM,
  * 此元素用来模拟 `<use>`,
@@ -18,12 +19,16 @@ export class GemUseElement extends GemElement {
 
   private getContent() {
     const ele = this.element || (this.selector ? (this.root || document).querySelector(this.selector) : null);
-    if (ele instanceof HTMLTemplateElement) {
+    if (typeof ele === 'string') {
+      let temp = eleCache.get(ele);
+      if (!temp) {
+        temp = document.createElement('template');
+        temp.innerHTML = ele;
+        eleCache.set(ele, temp);
+      }
+      return temp.content.cloneNode(true);
+    } else if (ele instanceof HTMLTemplateElement) {
       return ele.content.cloneNode(true);
-    } else if (typeof ele === 'string') {
-      const temp = document.createElement('template');
-      temp.innerHTML = ele;
-      return temp.content;
     } else {
       return ele?.cloneNode(true);
     }
@@ -37,6 +42,7 @@ export class GemUseElement extends GemElement {
         }
         :host(:not([hidden])) {
           display: inline-flex;
+          align-items: center;
         }
         svg {
           width: 100%;

package/src/examples/elements/layout.ts

@@ -18,7 +18,8 @@ export class Layout extends GemElement {
         <style>
           body {
             margin: 0;
-            font-family: sans-serif;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
+              sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
           }
         </style>
       </gem-reflect>

package/src/examples/ref-route/index.ts

@@ -1,52 +1,77 @@
 import { GemElement, html, history, render } from '../../';
-import { customElement, RefObject, refobject } from '../../lib/decorators';
-import { createHistoryParams, GemRouteElement, RoutesObject } from '../../elements/route';
+import { connectStore, customElement, RefObject, refobject } from '../../lib/decorators';
+import { createHistoryParams, GemRouteElement, RouteItem } from '../../elements/route';
 import '../../elements/link';
 
 import '../elements/layout';
 
-const routes: RoutesObject = {
-  home: {
-    pattern: '/',
-    get content() {
-      return html`
-        <style>
-          gem-active-link {
-            display: block;
-          }
-          gem-active-link:where(.--active, :--active) {
-            color: inherit;
-          }
-        </style>
-        current route: home page, click navigation to a page
-        <gem-active-link .route=${routes.a} .options=${{ params: { b: 1 } }}>
-          a page link, params: {a: 1}
-        </gem-active-link>
-      `;
-    },
+const homeRoute: RouteItem = {
+  pattern: '/',
+  getContent(params) {
+    return html`<route-home .params=${params}></route-home>`;
   },
-  a: {
-    pattern: '/a/:b',
-    getContent({ b }) {
-      return html`
-        <style>
-          gem-active-link {
-            display: block;
-          }
-          gem-active-link:where(.--active, :--active) {
-            color: inherit;
-          }
-        </style>
-        current route: /a/${b}, click navigation to home page, cuurent query: ${history.getParams().query.toString()}
-        <gem-active-link .route=${routes.a} .options=${{ params: { b: 1 }, query: '?a=1' }}>
-          a page link, query: ?a=1
-        </gem-active-link>
-      `;
-    },
+};
+
+const aRoute: RouteItem = {
+  pattern: '/a/:b',
+  async getContent() {
+    await new Promise((res) => setTimeout(res, 1000));
+    return html`<route-a></route-a>`;
   },
 };
 
+const routes = {
+  home: homeRoute,
+  a: aRoute,
+};
+
+const locationStore = GemRouteElement.createLocationStore();
+
+@customElement('route-home')
+export class RouteHome extends GemElement {
+  params: Record<string, string>;
+  render = () => {
+    return html`
+      <style>
+        gem-active-link {
+          display: block;
+        }
+        gem-active-link:where(.--active, :--active) {
+          color: inherit;
+        }
+      </style>
+      current route: home page, current params: ${JSON.stringify(this.params)}, click navigation to /a page
+      <gem-active-link .route=${routes.a} .options=${{ params: { b: 1 } }}>
+        a page link, params: {a: 1}
+      </gem-active-link>
+    `;
+  };
+}
+
+@connectStore(locationStore)
+@customElement('route-a')
+export class RouteA extends GemElement {
+  render = () => {
+    return html`
+      <style>
+        gem-active-link {
+          display: block;
+        }
+        gem-active-link:where(.--active, :--active) {
+          color: inherit;
+        }
+      </style>
+      current route: /a/:b, current params: ${JSON.stringify(locationStore.params)}, click navigation to home page,
+      cuurent query: ${history.getParams().query.toString()}
+      <gem-active-link .route=${routes.a} .options=${{ params: { b: 1 }, query: '?a=1' }}>
+        a page link, query: ?a=1
+      </gem-active-link>
+    `;
+  };
+}
+
 @customElement('app-root')
+@connectStore(locationStore)
 export class App extends GemElement {
   @refobject routeRef: RefObject<GemRouteElement>;
   onclick = () => {
@@ -59,7 +84,15 @@ export class App extends GemElement {
   render() {
     return html`
       <main>
-        <gem-route ref=${this.routeRef.ref} .routes=${routes}></gem-route>
+        <pre>${JSON.stringify(locationStore.params)}</pre>
+        <gem-route
+          ref=${this.routeRef.ref}
+          @loading=${console.log}
+          @change=${console.log}
+          @error=${console.error}
+          .routes=${routes}
+          .locationStore=${locationStore}
+        ></gem-route>
       </main>
     `;
   }

package/src/examples/svg-icon/index.ts

@@ -1,4 +1,4 @@
-import { html, render } from '../../';
+import { html, render, raw } from '../../';
 
 import '../../elements/use';
 
@@ -14,6 +14,17 @@ const app = html`
     </template>
     <gem-use .root=${document.body} selector="#icon"></gem-use>
     <gem-use selector="#icon"></gem-use>
+    <gem-use
+      .element=${raw`
+        <svg height="24px" viewBox="0 0 24 24" width="24px">
+          <path d="M0 0h24v24H0z" fill="none"/>
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+        </svg>
+      `}
+      style="fill: red; height: 1.2em; gap: 0.3em"
+    >
+      English
+    </gem-use>
   </div>
 `;
 

package/src/helper/i18n.ts

@@ -35,6 +35,8 @@ interface Options<T> {
    * 为了避免缓存超出 `localStorage` 限制，语言包 URL 应该带版本号查询参数
    */
   cache?: boolean | 'manual';
+  // lib 需要设置，避免被应用中的 i18n 一起清理掉语言缓存
+  // 也用来作为 prerender 的 script type
   cachePrefix?: string;
   // 为 `path` 时页面的路由不能和语言代码相同
   urlParamsType?: 'path' | 'querystring' | 'ccTLD' | 'gTLD';
@@ -47,7 +49,7 @@ export class I18n<T = Record<string, Msg>> {
   fallbackLanguage: string;
   currentLanguage: string;
   cache?: boolean | 'manual';
-  cachePrefix = 'gem@i18n';
+  cachePrefix = 'gem-i18n';
   urlParamsType?: 'path' | 'querystring' | 'ccTLD' | 'gTLD';
   urlParamsName?: string;
   onChange?: (currentLanguage: string) => void;
@@ -94,7 +96,7 @@ export class I18n<T = Record<string, Msg>> {
 
     let currentLanguage = this.urlParamsLang || this.currentLanguage || this.cacheLang;
 
-    const ele = document.querySelector('[type*=gem-i18n]');
+    const ele = document.querySelector(`[type*=${this.cachePrefix}]`);
     if (ele) {
       try {
         const prerenderData = JSON.parse(ele.textContent || '') as I18nJSON<T>;
@@ -152,17 +154,17 @@ export class I18n<T = Record<string, Msg>> {
     }
 
     if (typeof data === 'string') {
-      const { href, origin, pathname } = new URL(data, location.href);
-      const localKey = `${this.cachePrefix}:${href}`;
+      const prefix = `${this.cachePrefix}:`;
+      const localKey = `${prefix}${data}`;
       const localPackString = localStorage.getItem(localKey);
 
       const fetchPack = async () => {
         const pack = await (await fetch(data)).json();
         if (this.cache) {
-          // 移除之前的版本缓存，只有使用 querystring 标记版本才有效
+          // 移除之前的版本缓存
           for (let i = 0; i < localStorage.length; i++) {
             const key = localStorage.key(i) as string;
-            if (key.startsWith(`${this.cachePrefix}:${origin}${pathname}?`)) {
+            if (key.startsWith(prefix)) {
               localStorage.removeItem(key);
             }
           }
@@ -215,7 +217,7 @@ export class I18n<T = Record<string, Msg>> {
    *
    * html`
    *  <gem-reflect>
-   *    <script type="gem-i18n">${JSON.stringify(i18n)}</script>
+   *    <script type="${i18n.cachePrefix}">${JSON.stringify(i18n)}</script>
    *  </gem-reflect>
    * `
    */