@mantou/gem 1.6.5 → 1.6.11

package/src/elements/link.ts

@@ -1,181 +1,6 @@
-import { GemElement, html, ifDefined } from '../lib/element';
-import { attribute, property, customElement, state, part, connectStore } from '../lib/decorators';
-import { history, basePathStore } from '../lib/history';
-import { absoluteLocation } from '../lib/utils';
-import { matchPath, RouteItem, RouteOptions, createHistoryParams, createPath } from './route';
+import { GemLinkElement, GemActiveLinkElement } from './base/link';
 
-/**
- * @customElement gem-link
- * @attr href
- * @attr target
- * @attr doc-title
- * @attr path
- * @attr query
- * @attr hash
- * @attr pattern
- * @attr hint
- * @part link
- *
- * print bug: https://github.com/mantou132/gem/issues/36
- */
-@customElement('gem-link')
-@connectStore(basePathStore)
-export class GemLinkElement extends GemElement {
-  @attribute href: string;
-  @attribute target: string;
-  @attribute path: string;
-  @attribute query: string;
-  @attribute hash: string;
-  @attribute docTitle: string;
-  @attribute hint: 'on' | 'off';
+export * from './base/link';
 
-  // 动态路由，根据 route.pattern 和 options.params 计算出 path
-  @property route: RouteItem | undefined;
-  @property options: RouteOptions | undefined;
-  @property prepare: (() => void | Promise<void>) | undefined;
-
-  @part link: string;
-
-  constructor() {
-    super();
-    this.addEventListener('click', this.clickHandle);
-  }
-
-  // 不包含 basePath
-  getPathInfo() {
-    if (this.route) {
-      const queryProp = this.options?.query || '';
-      const hashProp = this.options?.hash || '';
-      return createPath(this.route, this.options) + queryProp + hashProp;
-    } else {
-      const url = this.href || this.path + this.query + this.hash;
-      const { path, query } = history.getParams();
-      if (url.startsWith('#')) {
-        return `${path}${query}${url}`;
-      } else if (url.startsWith('?')) {
-        return `${path}${url}`;
-      } else if (url.startsWith('.')) {
-        return absoluteLocation(path, url);
-      } else {
-        return url;
-      }
-    }
-  }
-
-  isExternal(pathInfo: string) {
-    return !pathInfo.startsWith('/');
-  }
-
-  clickHandle = async (e: MouseEvent) => {
-    const pathInfo = this.getPathInfo();
-
-    if (!pathInfo) return;
-
-    // 外部链接使用 `window.open`
-    if (this.isExternal(pathInfo)) {
-      switch (this.target) {
-        case '_self':
-          window.location.href = pathInfo;
-          return;
-        case '_parent':
-          window.parent.location.href = pathInfo;
-          return;
-        case '_top':
-          window.top!.location.href = pathInfo;
-          return;
-        default:
-          window.open(pathInfo);
-          return;
-      }
-    }
-
-    const { path, query, hash } = history.getParams();
-    if (path + query + hash === pathInfo) {
-      // 点击当前路由链接时，什么也没做
-      return;
-    }
-
-    e.stopPropagation();
-
-    await this.prepare?.();
-
-    if (this.route) {
-      history.pushIgnoreCloseHandle({
-        ...createHistoryParams(this.route, this.options),
-        title: this.route.title || this.docTitle,
-      });
-    } else if (this.href) {
-      const { pathname, search, hash } = new URL(pathInfo, location.origin);
-      history.pushIgnoreCloseHandle({
-        path: pathname,
-        query: search,
-        // 解码，方便 `<gem-active-link>` CJK hash 比较
-        hash: decodeURIComponent(hash),
-        title: this.docTitle,
-      });
-    } else {
-      history.pushIgnoreCloseHandle({ path: this.path, query: this.query, hash: this.hash, title: this.docTitle });
-    }
-  };
-
-  preventDefault = (e: MouseEvent) => {
-    e.preventDefault();
-  };
-
-  render(pathInfo = this.getPathInfo()) {
-    return html`
-      <style>
-        :host {
-          /* link default style */
-          cursor: pointer;
-          color: blue;
-          text-decoration: underline;
-        }
-        a {
-          all: unset;
-          display: contents;
-        }
-        a:visited {
-          color: unset;
-        }
-      </style>
-      <a
-        part=${this.link}
-        @click=${this.preventDefault}
-        href=${ifDefined(
-          this.hint === 'off'
-            ? undefined
-            : this.isExternal(pathInfo)
-            ? pathInfo
-            : new URL(history.basePath + pathInfo, location.origin).toString(),
-        )}
-      >
-        <slot></slot>
-      </a>
-    `;
-  }
-}
-
-/**
- * @customElement gem-active-link
- * @attr pattern
- * @state active
- */
-@customElement('gem-active-link')
-@connectStore(history.store)
-export class GemActiveLinkElement extends GemLinkElement {
-  @attribute pattern: string; // 使用匹配模式设定 active
-  @state active: boolean;
-
-  render() {
-    const { path, query, hash } = history.getParams();
-    const isMatchPattern = this.pattern && matchPath(this.pattern, path);
-    const pathInfo = this.getPathInfo();
-    if (isMatchPattern || path + query + hash === pathInfo) {
-      this.active = true;
-    } else {
-      this.active = false;
-    }
-    return super.render(pathInfo);
-  }
-}
+customElements.define('gem-link', GemLinkElement);
+customElements.define('gem-active-link', GemActiveLinkElement);

package/src/elements/reflect.ts

@@ -1,33 +1,5 @@
-import { GemElement } from '../lib/element';
-import { property, customElement } from '../lib/decorators';
+import { GemReflectElement } from './base/reflect';
 
-// support prerender
-document.querySelectorAll('[data-reflect]').forEach((e) => e.remove());
+export * from './base/reflect';
 
-/**
- * @customElement gem-reflect
- */
-@customElement('gem-reflect')
-export class GemReflectElement extends GemElement {
-  @property target: HTMLElement = document.head;
-
-  constructor() {
-    super({ isLight: true });
-    this.hidden = true;
-    this.effect(
-      () => {
-        const childNodes = [...this.childNodes];
-        childNodes.forEach((node) => {
-          if (node instanceof HTMLElement) {
-            node.dataset.reflect = '';
-          }
-          this.target.append(node);
-        });
-        return () => {
-          childNodes.forEach((node) => node.remove());
-        };
-      },
-      () => [this.target],
-    );
-  }
-}
+customElements.define('gem-reflect', GemReflectElement);

package/src/elements/route.ts

@@ -1,250 +1,6 @@
-import { GemElement, html, TemplateResult } from '../lib/element';
-import { property, customElement, connectStore, emitter, Emitter } from '../lib/decorators';
-import { createStore, updateStore, Store } from '../lib/store';
-import { titleStore, history, UpdateHistoryParams } from '../lib/history';
-import { QueryString } from '../lib/utils';
+import { GemRouteElement, GemLightRouteElement } from './base/route';
 
-interface NamePostition {
-  [index: string]: number;
-}
+export * from './base/route';
 
-// TODO: use `URLPattern`
-class ParamsRegExp extends RegExp {
-  namePosition: NamePostition;
-  constructor(pattern: string) {
-    const namePosition: NamePostition = {};
-    let i = 0;
-    super(
-      `^${pattern
-        .replace(/:([^/$]+)/g, (_m, name: string) => {
-          namePosition[name] = i++;
-          return `([^/]+)`;
-        })
-        .replace('*', '.*')}$`,
-      'i',
-    );
-    this.namePosition = namePosition;
-  }
-}
-
-type Params = Record<string, string>;
-
-// `/a/b/:c/:d` `/a/b/1/2`
-// 匹配成功时返回 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];
-    });
-  }
-  return params;
-}
-
-export interface RouteItem<T = unknown> {
-  // 支持 *
-  // 支持 /a/*
-  // 不支持相对路径
-  // 不能匹配查询字符串
-  pattern: string;
-  redirect?: string;
-  content?: TemplateResult;
-  getContent?: (params: Params) => TemplateResult | Promise<TemplateResult>;
-  title?: string;
-  // 用来传递数据
-  data?: T;
-}
-
-type RoutesObject = Record<string, RouteItem>;
-
-// params 中的成员不会验证
-export interface RouteOptions extends Omit<UpdateHistoryParams, 'path'> {
-  params?: Params;
-}
-
-// 从路由创建路径
-// 不包含 basePath
-export function createPath(route: RouteItem, options?: RouteOptions) {
-  let path = route.pattern;
-  const params = options?.params;
-  if (params) {
-    Object.keys(params).forEach((key) => {
-      path = path.replace(new RegExp(`:${key}`, 'g'), params[key]);
-    });
-  }
-  return path;
-}
-
-export function createHistoryParams(route: RouteItem, options?: RouteOptions): UpdateHistoryParams {
-  const path = createPath(route, options);
-  return {
-    path,
-    ...options,
-  };
-}
-
-interface ConstructorOptions {
-  isLight?: boolean;
-  routes?: RouteItem[] | RoutesObject;
-}
-
-type State = {
-  content?: TemplateResult;
-};
-
-/**
- * @customElement gem-route
- * @attr inert 暂停路由更新
- * @fires routechange
- * @fires error
- * @fires loading
- */
-@connectStore(history.store)
-@customElement('gem-route')
-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 routechange: Emitter<RouteItem | null>; // path 改变或者 key 改变，包含初始渲染
-  @emitter loading: Emitter<RouteItem>;
-  @emitter error: Emitter<any>;
-
-  currentRoute: RouteItem | null;
-  // 当前匹配的路由的 params
-  currentParams: Params = {};
-
-  #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.routes = routes;
-  }
-
-  state: State = {
-    content: undefined,
-  };
-
-  #updateLocationStore = () => {
-    if (this.locationStore) {
-      const { path, query, data } = history.getParams();
-      updateStore(this.locationStore, {
-        path,
-        params: this.currentParams,
-        query,
-        data,
-      });
-    }
-  };
-
-  #setContent = (route: RouteItem | null, params: Params, content?: TemplateResult) => {
-    this.#lastLoader = undefined;
-    this.currentRoute = route;
-    this.currentParams = params;
-    this.setState({ content });
-    this.routechange(this.currentRoute);
-    const title = route?.title;
-    if (title) updateStore(titleStore, { title });
-    this.#updateLocationStore();
-  };
-
-  mounted() {
-    this.effect(
-      ([key, path], old) => {
-        // 只有查询参数改变
-        if (old && key === old[0] && path === old[1]) {
-          this.#updateLocationStore();
-          return;
-        }
-        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, location.search];
-      },
-    );
-  }
-
-  shouldUpdate() {
-    if (this.inert) return false;
-    return true;
-  }
-
-  render() {
-    const { content } = this.state;
-    if (!this.shadowRoot) return html`${content}`;
-
-    return html`
-      <style>
-        :host,
-        :not(:defined) {
-          display: contents;
-        }
-      </style>
-      ${content ?? html`<slot></slot>`}
-    `;
-  }
-}
-
-/**
- * @customElement gem-light-route
- */
-@customElement('gem-light-route')
-export class GemLightRouteElement extends GemRouteElement {
-  constructor(options: ConstructorOptions = {}) {
-    super({ ...options, isLight: true });
-  }
-}
+customElements.define('gem-route', GemRouteElement);
+customElements.define('gem-light-route', GemLightRouteElement);

package/src/elements/title.ts

@@ -1,70 +1,5 @@
-/**
- * 标题显示在：
- *
- * - 桌面端 Tab 的 title
- * - 移动端 Appbar 的 title
- *
- * 修改标题：
- *
- * - `<gem-route>` 匹配路由时自动设置 `route.title`
- * - `<gem-link>` 的 `doc-title` 属性和 `route.title`
- * - 修改路径时，`history` 默认设置 `title` 为空
- * - 数据获取后，手动调用 `Title.setTitle`
- * - `<gem-title>` 作为默认值设置
- */
+import { GemTitleElement } from './base/title';
 
-import { GemElement, html } from '../lib/element';
-import { attribute, customElement, connectStore } from '../lib/decorators';
-import { updateStore, connect } from '../lib/store';
-import { titleStore } from '../lib/history';
+export * from './base/title';
 
-/**
- * 允许声明式设置 `document.title`
- * @customElement gem-title
- * @attr suffix
- */
-@connectStore(titleStore)
-@customElement('gem-title')
-export class GemTitleElement extends GemElement {
-  // 没有后缀的标题
-  static title = document.title;
-  static defaultTitle = document.title;
-  static defaultSuffix = ` - ${document.title}`;
-
-  static setTitle(title: string) {
-    updateStore(titleStore, { title });
-  }
-
-  static updateTitle(str = '', suffix = '') {
-    const { title } = titleStore;
-    if (title && title !== GemTitleElement.defaultTitle) {
-      GemTitleElement.title = title;
-      document.title = GemTitleElement.title + suffix;
-    } else if (str) {
-      GemTitleElement.title = str;
-      document.title = GemTitleElement.title + suffix;
-    } else {
-      GemTitleElement.title = GemTitleElement.defaultTitle;
-      document.title = GemTitleElement.title;
-    }
-  }
-
-  @attribute suffix: string;
-
-  constructor() {
-    super();
-    new MutationObserver(() => this.update()).observe(this, { childList: true, characterData: true, subtree: true });
-  }
-
-  render() {
-    // 多个 <gem-title> 时，最终 document.title 按执行顺序决定
-    GemTitleElement.updateTitle(this.textContent || '', this.suffix);
-
-    if (this.hidden) {
-      return html``;
-    }
-    return html`${GemTitleElement.title}`;
-  }
-}
-
-connect(titleStore, GemTitleElement.updateTitle);
+customElements.define('gem-title', GemTitleElement);

package/src/elements/unsafe.ts

@@ -1,39 +1,5 @@
-import { GemElement } from '../lib/element';
-import { attribute, customElement } from '../lib/decorators';
+import { GemUnsafeElement } from './base/unsafe';
 
-/**
- * 直接写会被解释成固定属性，需要使用变量赋值
- *
- * @customElement gem-unsafe
- * @attr content
- * @attr contentcss
- */
-@customElement('gem-unsafe')
-export class GemUnsafeElement extends GemElement {
-  @attribute content: string;
-  @attribute contentcss: string;
+export * from './base/unsafe';
 
-  constructor() {
-    super();
-    this.effect(
-      () => {
-        if (this.shadowRoot) {
-          this.shadowRoot.innerHTML = `
-            <style>
-              :host {
-                display: contents;
-              }
-              ${this.contentcss}
-            </style>
-            ${this.content}
-          `;
-        }
-      },
-      () => [this.content, this.contentcss],
-    );
-  }
-
-  render() {
-    return undefined;
-  }
-}
+customElements.define('gem-unsafe', GemUnsafeElement);

package/src/elements/use.ts

@@ -1,59 +1,5 @@
-import { GemElement, html } from '../lib/element';
-import { attribute, property, customElement, state } from '../lib/decorators';
+import { GemUseElement } from './base/use';
 
-const eleCache = new Map<string, HTMLTemplateElement>();
-/**
- * svg 中的 `<use>` 不能穿透 ShadowDOM,
- * 此元素用来模拟 `<use>`,
- * 由于是复制元素，所以不能像 `<use>` 一样自动更新
- *
- * slot 支持为 icon 添加效果，如涟漪，徽章
- *
- * @customElement gem-use
- * @attr selector
- */
-@customElement('gem-use')
-export class GemUseElement extends GemElement {
-  @attribute selector: string; // CSS 选择器
-  @property root?: HTMLElement | Document | ShadowRoot;
-  @property element?: string | DocumentFragment | Element;
+export * from './base/use';
 
-  @state active: boolean;
-
-  private getContent() {
-    const ele = this.element || (this.selector ? (this.root || document).querySelector(this.selector) : null);
-    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 {
-      return ele?.cloneNode(true);
-    }
-  }
-
-  render() {
-    return html`
-      <style>
-        :host {
-          position: relative;
-        }
-        :host(:not([hidden])) {
-          display: inline-flex;
-          align-items: center;
-        }
-        svg {
-          width: 100%;
-          height: 100%;
-        }
-      </style>
-      ${this.getContent()}
-      <slot></slot>
-    `;
-  }
-}
+customElements.define('gem-use', GemUseElement);

package/src/index.ts

@@ -1,10 +1,9 @@
-import { updateStore } from './lib/store';
+/**
+ * 不支持多个 gem
+ */
 import * as Gem from './';
 
-export interface DevToolsHook {
-  updateStore: typeof updateStore;
-}
-
+export type DevToolsHook = typeof Gem;
 declare global {
   interface Window {
     __GEM_DEVTOOLS__HOOK__?: DevToolsHook;
@@ -12,7 +11,6 @@ declare global {
 }
 
 if (window.__GEM_DEVTOOLS__HOOK__) {
-  // 不支持多个 gem
   Object.assign(window.__GEM_DEVTOOLS__HOOK__, { ...Gem });
 }
 

package/src/lib/element.ts

@@ -1,6 +1,7 @@
+import { html, render, TemplateResult } from 'lit-html';
+
 import type { GemReflectElement } from '../elements/reflect';
 
-import { html, render, TemplateResult } from 'lit-html';
 import { connect, disconnect, Store } from './store';
 import {
   LinkedList,
@@ -573,7 +574,9 @@ export function defineRef(target: GemElement, prop: string, ref: string) {
             return ref;
           },
           get element() {
-            const gemReflects = ([...ele.querySelectorAll('gem-reflect')] as GemReflectElement[]).map((e) => e.target);
+            const gemReflects = ([...ele.querySelectorAll('[data-gemreflect]')] as GemReflectElement[]).map(
+              (e) => e.target,
+            );
             for (const e of [ele, ...gemReflects]) {
               const result = e.querySelector(`[ref=${ref}]`);
               if (result) return result;