@mantou/gem 1.7.7 → 1.7.9

package/src/lib/element.ts

@@ -2,7 +2,7 @@ import { html, render, TemplateResult } from 'lit-html';
 
 import type { GemReflectElement } from '../elements/reflect';
 
-import { connect, disconnect, Store } from './store';
+import { connect, Store } from './store';
 import {
   LinkedList,
   addMicrotask,
@@ -13,6 +13,7 @@ import {
   kebabToCamelCase,
   PropProxyMap,
   removeItems,
+  addListener,
 } from './utils';
 import * as GemExports from './element';
 import * as VersionExports from './version';
@@ -75,12 +76,10 @@ const constructorSymbol = Symbol('constructor');
 const initSymbol = Symbol('init');
 const updateSymbol = Symbol('update');
 
-export interface GemElementOptions {
+export interface GemElementOptions extends Partial<ShadowRootInit> {
   isLight?: boolean;
   isAsync?: boolean;
-  // https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options
-  delegatesFocus?: boolean;
-  slotAssignment?: 'named' | 'manual';
+  focusable?: boolean;
 }
 
 export abstract class GemElement<T = Record<string, unknown>> extends HTMLElement {
@@ -117,7 +116,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
   #memoList?: EffectItem<any>[];
   #unmountCallback?: any;
 
-  constructor({ isAsync, isLight, delegatesFocus, slotAssignment }: GemElementOptions = {}) {
+  constructor(options: GemElementOptions = {}) {
     super();
 
     // 外部不可见，但允许类外面使用
@@ -130,8 +129,37 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
       }
     });
 
-    this.#isAsync = isAsync;
-    this.#renderRoot = isLight ? this : this.attachShadow({ mode: 'open', delegatesFocus, slotAssignment });
+    this.#isAsync = options.isAsync;
+    this.#renderRoot = options.isLight
+      ? this
+      : this.attachShadow({
+          mode: options.mode || 'open',
+          delegatesFocus: options.delegatesFocus,
+          slotAssignment: options.slotAssignment,
+        });
+
+    // https://stackoverflow.com/questions/43836886/failed-to-construct-customelement-error-when-javascript-file-is-placed-in-head
+    // focusable 元素一般同时具备 disabled 属性
+    // 和原生元素行为保持一致，disabled 时不触发 click 事件
+    let hasInitTabIndex: boolean | undefined;
+    this.effect(
+      ([disabled = false]) => {
+        if (hasInitTabIndex === undefined) hasInitTabIndex = this.hasAttribute('tabindex');
+
+        this.internals.ariaDisabled = String(disabled);
+
+        if (options.focusable && !hasInitTabIndex) {
+          this.tabIndex = -Number(disabled);
+        }
+
+        if ((options.focusable || options.delegatesFocus) && disabled) {
+          return addListener(this, 'click', (e: Event) => e.isTrusted && e.stopImmediatePropagation(), {
+            capture: true,
+          });
+        }
+      },
+      () => [Reflect.get(this, 'disabled')],
+    );
 
     const { adoptedStyleSheets } = new.target;
     if (adoptedStyleSheets) {
@@ -248,7 +276,8 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
   /**
    * @helper
-   * 在 `render` 前执行回调，和 `effect` 一样接受依赖数组参数，在 `constructor`/`willMount` 中使用;
+   * 在 `render` 前执行回调，不要在里面使用 `setState`
+   * 和 `effect` 一样接受依赖数组参数，在 `constructor`/`willMount` 中使用;
    * 第一次执行时 `oldDeps` 为空
    *
    * ```js
@@ -289,15 +318,19 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
   /**
    * @lifecycle
-   * 返回 null 时渲染 lit-html 定义的空内容
-   * 返回 undefined 时不会调用 `render()`
+   *
+   * - 不提供 `render` 时显示子内容
+   * - 返回 `null` 时渲染空内容
+   * - 返回 `undefined` 时不会调用 `render()`, 也就是不会更新以前的内容
    * */
   render?(): TemplateResult | null | undefined;
 
   #render = () => {
     this.#execMemo();
-    if (this.render) return this.render();
-    return this.#renderRoot === this ? undefined : html`<slot></slot>`;
+    const isLight = this.#renderRoot === this;
+    const temp = this.render ? this.render() : isLight ? undefined : html`<slot></slot>`;
+    if (temp === undefined) return;
+    render(temp, this.#renderRoot);
   };
 
   /**@lifecycle */
@@ -311,8 +344,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
   #updateCallback = () => {
     if (this.#isMounted && this.#shouldUpdate()) {
-      const temp = this.#render();
-      temp !== undefined && render(temp, this.#renderRoot);
+      this.#render();
       addMicrotask(this.#updated);
       addMicrotask(this.#execEffect);
     }
@@ -372,8 +404,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     this.willMount?.();
     const { observedStores, rootElement } = this.constructor as typeof GemElement;
     this.#disconnectStore = observedStores?.map((store) => connect(store, this.#update));
-    const temp = this.#render();
-    temp !== undefined && render(temp, this.#renderRoot);
+    this.#render();
     this.#isMounted = true;
     this.#unmountCallback = this.mounted?.();
     this.#initEffect();
@@ -442,15 +473,17 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     this.#disconnectStore?.forEach((disconnect) => disconnect());
     execCallback(this.#unmountCallback);
     this.unmounted?.();
-    this.#effectList?.forEach(({ preCallback }) => execCallback(preCallback));
-    this.#effectList = this.#effectList?.filter(this.#filterEffect);
-    this.#memoList = this.#memoList?.filter(this.#filterEffect);
+    this.#effectList = this.#clearEffect(this.#effectList);
+    this.#memoList = this.#clearEffect(this.#memoList);
     return GemElement.#final;
   }
 
-  #filterEffect = (e: EffectItem<any>) => {
-    e.initialized = false;
-    return e.inConstructor;
+  #clearEffect = (list?: EffectItem<any>[]) => {
+    return list?.filter((e) => {
+      execCallback(e.preCallback);
+      e.initialized = false;
+      return e.inConstructor;
+    });
   };
 }
 
@@ -553,9 +586,7 @@ export function defineRef(target: GemElement, prop: string, ref: string) {
             return ref;
           },
           get element() {
-            const gemReflects = ([...ele.querySelectorAll('[data-gem-reflect]')] as GemReflectElement[]).map(
-              (e) => e.target,
-            );
+            const gemReflects = [...ele.querySelectorAll<GemReflectElement>('[data-gem-reflect]')].map((e) => e.target);
             for (const e of [ele, ...gemReflects]) {
               const result = e.querySelector(`[ref=${ref}]`);
               if (result) return result;

package/src/lib/history.ts

@@ -29,7 +29,7 @@ export interface UpdateHistoryParams {
   title?: string;
   path?: string; // 不包括 basePath，只有根目录储存末尾斜杠
   query?: string | QueryString; // 包含 `?`
-  hash?: string; // 包含 `#`
+  hash?: string; // 包含 `#`，不进行编码，方便比较
   // 以下为看不见的状态
   open?: () => void; // 按下前进键时执行
   close?: () => void; // 按下返回键时执行
@@ -38,7 +38,12 @@ export interface UpdateHistoryParams {
 }
 
 // 实际应用值
-type HistoryParams = UpdateHistoryParams & { title: string; path: string; query: QueryString; hash: string };
+type HistoryParams = Omit<UpdateHistoryParams, 'query'> & {
+  title: string;
+  path: string;
+  query: QueryString;
+  hash: string;
+};
 
 const paramsMap = new Map<string, HistoryParams>();
 
@@ -60,19 +65,26 @@ function getInternalPath(urlBarPath: string) {
   return urlBarPath.replace(new RegExp(`^${gemHistory.basePath}/`), '/');
 }
 
+function dispatchBeforeChangeEvent() {
+  gemHistory.dispatchEvent(new CustomEvent('beforechange'));
+}
+
 function normalizeParams(params: UpdateHistoryParams): HistoryParams {
-  const current = paramsMap.get(store.$key) || ({} as HistoryParams);
+  const current =
+    paramsMap.get(store.$key) ||
+    ({ path: getInternalPath(location.pathname), query: new QueryString() } as HistoryParams);
   // 没提供 path 使用当前 path
   const path = params.path ? absoluteLocation(current.path, params.path) : getInternalPath(location.pathname);
   // 没提供 query 又没有提供 path 时使用当前 search
-  const query = new QueryString(params.query || (params.path ? '' : location.search));
-  const pathChanged =
-    (params.path && params.path !== current.path) || (params.query && String(params.query) !== String(current.query));
+  const newQueryObject = new QueryString(params.query ?? (params.path ? '' : location.search));
+  const queryChanged = String(newQueryObject) !== String(current.query);
+  const query = queryChanged ? newQueryObject : current.query;
+  const urlChanged = path !== current.path || queryChanged;
   // 没提供 title 又没有改变 URL 时使用当前 document.title
-  const title = params.title || (pathChanged ? '' : document.title);
+  const title = params.title || (urlChanged ? '' : document.title);
   const statusChanged = params.close || params.data || params.open || params.shouldClose;
-  // 没提供 hash 又没有改变 URL 又不是状态更新时使用当前 hash
-  const hash = params.hash || (!pathChanged && statusChanged ? decodeURIComponent(location.hash) : '');
+  // 没提供 hash 又没有改变 URL 仅仅是状态更新时使用当前 hash
+  const hash = decodeURIComponent(params.hash ?? (!urlChanged && statusChanged ? location.hash : ''));
   return { ...params, title, path, query, hash };
 }
 
@@ -89,6 +101,7 @@ function updateHistory(p: UpdateHistoryParams, native: typeof nativeHistory.push
     ...data,
   };
   paramsMap.set(state.$key, params);
+  dispatchBeforeChangeEvent();
   cleanObject(store);
   updateHistoryStore(state);
   const url = getUrlBarPath(path) + new QueryString(query) + hash;
@@ -108,6 +121,7 @@ function updateHistoryByNative(data: any, title: string, originUrl: string, nati
   const { pathname, search, hash } = new URL(originUrl, location.origin + location.pathname);
   const params = normalizeParams({ path: pathname, query: new QueryString(search), hash, title, data });
   paramsMap.set(state.$key, params);
+  dispatchBeforeChangeEvent();
   cleanObject(store);
   updateHistoryStore(state);
   const url = getUrlBarPath(pathname) + params.query + hash;
@@ -121,10 +135,13 @@ const [gemBasePathStore, updateBasePathStore] = useStore({
   basePath: '',
 });
 
-class GemHistory {
+class GemHistory extends EventTarget {
   get store() {
     return store;
   }
+  get currentKey() {
+    return store.$key;
+  }
   get basePath() {
     return gemBasePathStore.basePath;
   }
@@ -190,7 +207,7 @@ if (!window._GEMHISTORY) {
   // 点击 `<a>`
   window.addEventListener('hashchange', ({ isTrusted }) => {
     if (isTrusted) {
-      gemHistory.replace({ hash: decodeURIComponent(location.hash) });
+      gemHistory.replace({ hash: location.hash });
     }
   });
 
@@ -254,7 +271,7 @@ if (!window._GEMHISTORY) {
       paramsMap.set(newState.$key, {
         path: pathname,
         query: new QueryString(search),
-        hash,
+        hash: decodeURIComponent(hash),
         title: newState.$title, // document.title 是导航前的
         data: newState,
       });
@@ -292,6 +309,7 @@ if (!window._GEMHISTORY) {
       }
     }
 
+    dispatchBeforeChangeEvent();
     cleanObject(store);
     updateHistoryStore(newState);
   });

package/src/lib/utils.ts

@@ -32,14 +32,24 @@ export function addMicrotaskToStack(func: () => void) {
   microtaskStack.push(func);
 }
 
+// 不编码 hash 用于比较
 export function absoluteLocation(currentPath = '', relativePath = '') {
   const { pathname, search, hash } = new URL(relativePath, location.origin + currentPath);
-  return pathname + search + hash;
+  return pathname + search + decodeURIComponent(hash);
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 export type NonPrimitive = object;
 
+export function addListener<T extends EventTarget, A extends Parameters<T['addEventListener']>>(
+  target: T,
+  type: A[0],
+  listener: A[1],
+  options?: A[2],
+) {
+  target.addEventListener(type, listener, options);
+  return () => target.removeEventListener(type, listener, options);
+}
+
 interface LinkedListEventMap {
   start: Event;
   end: Event;
@@ -49,7 +59,7 @@ export interface LinkedListItem<T> {
   prev?: LinkedListItem<T>;
   next?: LinkedListItem<T>;
 }
-// work on nodejs
+
 export class LinkedList<T = any> extends EventTarget {
   declare addEventListener: <K extends keyof LinkedListEventMap>(
     type: K,
@@ -269,12 +279,9 @@ export function createCSSSheet<T extends StyledKeyValuePair>(rules: T | string,
   return sheet as Sheet<T>;
 }
 
-export function randomStr(number = 5, origin = '0123456789abcdefghijklmnopqrstuvwxyz') {
-  const len = origin.length;
-  let str = '';
-  for (let i = 0; i < number; i++) {
-    str += origin[Math.floor(Math.random() * len)];
-  }
+export function randomStr(len = 5): string {
+  const str = Math.random().toString(36).slice(2).slice(0, len);
+  if (str.length < len) return str + randomStr(len - str.length);
   return str;
 }
 

package/src/lib/version.ts

@@ -1 +1 @@
-export const version = '1.7.7';
+export const version = '1.7.9';

package/src/test/elements/link.test.ts

@@ -0,0 +1,15 @@
+import { fixture, expect } from '@open-wc/testing';
+
+import { html } from '../../lib/element';
+import type { GemActiveLinkElement } from '../../elements/link';
+
+import '../../elements/link';
+
+describe('GemTitleElement', () => {
+  it('basic', async () => {
+    const ele: GemActiveLinkElement = await fixture(
+      html`<gem-active-link pattern="/*" href="/#测试">active-link</gem-active-link>`,
+    );
+    expect(ele.active).to.equal(true);
+  });
+});

package/src/test/elements/reflect.test.ts

@@ -0,0 +1,27 @@
+import { fixture, expect, nextFrame } from '@open-wc/testing';
+
+import { html } from '../../lib/element';
+import type { GemReflectElement } from '../../elements/reflect';
+
+import '../../elements/reflect';
+
+describe('GemReflectElement', () => {
+  it('basic', async () => {
+    const reflect: GemReflectElement = await fixture(html`
+      <gem-reflect>
+        <div id="one"></div>
+        <div id="two"></div>
+      </gem-reflect>
+    `);
+    const div = document.head.querySelector('#one');
+    expect(!!div).to.equal(true);
+    const comment = new Comment();
+    div?.after(comment);
+    reflect.target = document.body;
+    await nextFrame();
+    expect(document.body.querySelector('#one')).to.equal(div);
+    expect(div?.nextSibling).to.equal(comment);
+    reflect.remove();
+    expect(!!document.querySelector('#one')).to.equal(false);
+  });
+});

package/src/test/elements/title.test.ts

@@ -0,0 +1,25 @@
+import { fixture, expect, nextFrame } from '@open-wc/testing';
+
+import { html } from '../../lib/element';
+import type { GemTitleElement } from '../../elements/title';
+
+import '../../elements/title';
+
+describe('GemTitleElement', () => {
+  it('basic', async () => {
+    const ele: GemTitleElement = await fixture(html`<gem-title>title</gem-title>`);
+    expect(document.title).to.equal('title');
+    ele.textContent = 'title2';
+    await nextFrame();
+    expect(document.title).to.equal('title2');
+
+    ele.prefix = 'prefix-';
+    await nextFrame();
+    expect(document.title).to.equal('prefix-title2');
+
+    history.pushState(null, 'Page', '/');
+    await nextFrame();
+    expect(document.title).to.equal('prefix-Page');
+    expect(ele.shadowRoot!.textContent).to.equal('Page');
+  });
+});

package/src/test/gem-element/advance.test.ts

@@ -129,7 +129,7 @@ describe('gem element 生命周期', () => {
     expect(el.appTitle).to.equal('title');
     expect(el.renderCount).to.equal(1);
     const clone = el.cloneNode() as LifecycleGemElement;
-    // BUG
+    // v2 BUG
     clone.connectedCallback();
     expect(clone.appTitle).to.equal('title');
 

package/src/test/gem-element/decorators.test.ts

@@ -56,8 +56,8 @@ describe('装饰器', () => {
     const el = new DecoratorGemElement();
     expect(el.propData).to.eql({ value: '' });
     expect(el.getAttribute('rank-attr')).to.equal(null);
-    // BUG
-    expect(el.rankAttr).to.equal(undefined);
+    // v2 BUG
+    expect(el.rankAttr).to.equal('');
     el.connectedCallback();
     expect(el.getAttribute('rank-attr')).to.equal(null);
     expect(el.rankAttr).to.equal('');

package/src/test/utils.test.ts

@@ -25,6 +25,8 @@ describe('utils 测试', () => {
     expect(absoluteLocation('/a', '/a/b')).to.equal('/a/b');
     expect(absoluteLocation('/a/c', './b')).to.equal('/a/b');
     expect(absoluteLocation('/a/c/d', '../b')).to.equal('/a/b');
+    expect(absoluteLocation('/a/c/d', '../b?a=a#a')).to.equal('/a/b?a=a#a');
+    expect(absoluteLocation('/a/c/d', '../b?a=测试#测试#')).to.equal('/a/b?a=%E6%B5%8B%E8%AF%95#测试#');
   });
   it('LinkedList', () => {
     const linkedList = new LinkedList<() => void>();
@@ -36,6 +38,18 @@ describe('utils 测试', () => {
     const fun2 = () => 2;
     linkedList.add(fun1);
     linkedList.add(fun2);
+    expect(linkedList.first?.value).to.equal(fun1);
+    expect(linkedList.last?.value).to.equal(fun2);
+    expect(linkedList.find(fun1)).to.equal(linkedList.first);
+    expect(linkedList.find(fun2)).to.equal(linkedList.last);
+    expect(linkedList.find(fun1)?.next).to.equal(linkedList.last);
+    const subLinked = new LinkedList();
+    subLinked.add(fun1);
+    subLinked.add(fun2);
+    expect(linkedList.isSuperLinkOf(subLinked)).to.equal(true);
+    expect(new LinkedList().isSuperLinkOf(subLinked)).to.equal(false);
+    expect(subLinked.isSuperLinkOf(new LinkedList())).to.equal(true);
+
     linkedList.delete(fun2);
     expect(linkedList.size).to.equal(1);
     linkedList.add(fun2);