@mantou/gem 1.5.5 → 1.6.0

package/src/helper/mediaquery.ts

@@ -1,70 +1,77 @@
 // https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
 // https://mediag.com/news/popular-screen-resolutions-designing-for-all/
 
+const matche = (query: string) => window.matchMedia(query).matches;
+
 export const mediaQuery = {
   PRINT: 'print',
   get isPrint() {
-    return window.matchMedia(this.PRINT).matches;
+    return matche(this.PRINT);
   },
   HOVER: '(hover: hover)',
   get isHover() {
-    return window.matchMedia(this.HOVER).matches;
+    return matche(this.HOVER);
   },
 
   PHONE: '(min-width: 319px) and (max-width: 480px)',
   get isPhone() {
-    return window.matchMedia(this.PHONE).matches;
+    return matche(this.PHONE);
   },
 
   LAPTOP: '(min-width: 1023px) and (max-width: 1280px) and (orientation: landscape)',
   get isLaptop() {
-    return window.matchMedia(this.LAPTOP).matches;
+    return matche(this.LAPTOP);
   },
 
   DESKTOP: '(min-width: 1279px) and (orientation: landscape)',
   get isDesktop() {
-    return window.matchMedia(this.DESKTOP).matches;
+    return matche(this.DESKTOP);
+  },
+
+  WIDTHSCREEN: '(min-width: 1919px) and (orientation: landscape)',
+  get isWidthScreen() {
+    return matche(this.WIDTHSCREEN);
   },
 
   PHONE_LANDSCAPE: '(min-width: 479px) and (max-width: 767px) and (orientation: landscape)',
   // PHONE_LANDSCAPE: '(min-width: 481px) and (max-width: 767px)',
   get isPhoneLandscape() {
-    return window.matchMedia(this.PHONE_LANDSCAPE).matches;
+    return matche(this.PHONE_LANDSCAPE);
   },
 
   TABLET: '(min-width: 768px) and (max-width: 1024px)',
   get isTablet() {
-    return window.matchMedia(this.TABLET).matches;
+    return matche(this.TABLET);
   },
 
   SMALL_PHONE: '(min-width: 319px) and (max-width: 480px) and (max-height: 640px)',
   get isSmallPhone() {
-    return window.matchMedia(this.SMALL_PHONE).matches;
+    return matche(this.SMALL_PHONE);
   },
 
   WATCH: '(max-width: 319px)',
   get isWatch() {
-    return window.matchMedia(this.WATCH).matches;
+    return matche(this.WATCH);
   },
 
   SHORT: '(min-width: 479px) and (max-height: 320px)',
   get isShort() {
-    return window.matchMedia(this.SHORT).matches;
+    return matche(this.SHORT);
   },
 
   PWA: '(display-mode: standalone)',
   // PWA: '(display-mode: browser)', // debugging
   get isPWA() {
-    return window.matchMedia(this.PWA).matches;
+    return matche(this.PWA);
   },
 
   MOTION_REDUCE: '(prefers-reduced-motion: reduce)',
   get isMotionReduce() {
-    return window.matchMedia(this.MOTION_REDUCE).matches;
+    return matche(this.MOTION_REDUCE);
   },
 
   DATA_REDUCE: '(prefers-reduced-data: reduce)',
   get isDataReduce() {
-    return window.matchMedia(this.DATA_REDUCE).matches;
+    return matche(this.DATA_REDUCE);
   },
 };

package/src/lib/decorators.ts

@@ -2,7 +2,7 @@ import { defineAttribute, defineCSSState, defineProperty, defineRef, GemElement,
 import { Store } from './store';
 import { Sheet, camelToKebabCase, randomStr } from './utils';
 
-type GemElementPrototype = GemElement;
+type GemElementPrototype = GemElement<any>;
 type GemElementConstructor = typeof GemElement;
 type StaticField = Exclude<keyof GemElementConstructor, 'prototype' | 'rootElement'>;
 type StaticFieldMember = string | Store<unknown> | Sheet<unknown>;

package/src/lib/element.ts

@@ -12,6 +12,7 @@ import {
   kebabToCamelCase,
   PropProxyMap,
   removeItems,
+  useNativeCSSStyleSheet,
 } from './utils';
 
 export { html, svg, render, directive, TemplateResult, SVGTemplateResult } from 'lit-html';
@@ -52,20 +53,15 @@ function execCallback(fun: any) {
 
 // global render task pool
 const asyncRenderTaskList = new LinkedList<() => void>();
-const tick = () => {
-  window.requestAnimationFrame(function callback(timestamp) {
-    if (performance.now() > timestamp + 16) {
-      tick();
-      return;
-    }
-    const task = asyncRenderTaskList.get();
-    if (task) {
-      task();
-      callback(timestamp);
-    }
-  });
+const tick = (timeStamp = performance.now()) => {
+  if (performance.now() > timeStamp + 16) return requestAnimationFrame(tick);
+  const task = asyncRenderTaskList.get();
+  if (task) {
+    task();
+    tick(timeStamp);
+  }
 };
-asyncRenderTaskList.addEventListener('start', tick);
+asyncRenderTaskList.addEventListener('start', () => addMicrotask(tick));
 
 type GetDepFun<T> = () => T;
 type EffectCallback<T> = (depValues: T, oldDepValues?: T) => any;
@@ -80,7 +76,7 @@ type EffectItem<T> = {
 const initSymbol = Symbol('init');
 const updateSymbol = Symbol('update');
 
-interface GemElementOptions {
+export interface GemElementOptions {
   isLight?: boolean;
   isAsync?: boolean;
   delegatesFocus?: boolean;
@@ -153,11 +149,13 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     if (!this.#internals) {
       const getCustomStateSet = () => {
         // https://wicg.github.io/custom-state-pseudo-class/
-        const { classList } = this;
+        const getV = (v: string) => v.replace('--', '');
         return {
-          has: (v) => classList.contains(v),
-          add: (v) => classList.add(v),
-          delete: (v) => classList.remove(v),
+          has: (v) => getV(v) in this.dataset,
+          add: (v) => {
+            this.dataset[getV(v)] = '';
+          },
+          delete: (v) => delete this.dataset[getV(v)],
         } as CustomStateSet;
       };
       if (!this.attachInternals) {
@@ -197,7 +195,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     list?.forEach((effectItem) => {
       const { callback, getDep, values, preCallback } = effectItem;
       const newValues = getDep?.();
-      if (!getDep || isArrayChange(values, newValues)) {
+      if (!getDep || !values || isArrayChange(values, newValues)) {
         execCallback(preCallback);
         effectItem.preCallback = callback(newValues, values);
         effectItem.values = newValues;
@@ -234,15 +232,17 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     getDep?: T extends any[] ? () => [...T] : undefined,
   ) => {
     if (!this.#effectList) this.#effectList = [];
-    const values = getDep?.() as T;
     const effectItem: EffectItem<T> = {
       callback,
       getDep,
-      values,
+      values: undefined,
       initialized: !!this.isConnected,
     };
     // 以挂载时立即执行副作用，未挂载时等挂载后执行
-    if (this.isConnected) effectItem.preCallback = callback(values);
+    if (this.isConnected) {
+      effectItem.values = getDep?.() as T;
+      effectItem.preCallback = callback(effectItem.values);
+    }
     this.#effectList.push(effectItem);
   };
 
@@ -278,7 +278,8 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     this.#effectList?.forEach((effectItem) => {
       const { callback, getDep, initialized } = effectItem;
       if (!initialized) {
-        effectItem.preCallback = callback(getDep?.());
+        effectItem.values = getDep?.();
+        effectItem.preCallback = callback(effectItem.values);
         effectItem.initialized = true;
       }
     });
@@ -296,8 +297,18 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
   #render = () => {
     this.#execMemo();
-    if (this.render) return this.render();
-    return this.#renderRoot === this ? undefined : html`<slot></slot>`;
+    const styles = useNativeCSSStyleSheet
+      ? ''
+      : html`${this.shadowRoot?.adoptedStyleSheets?.map(
+          (e: any) =>
+            html`
+              <style media=${e.media.mediaText}>
+                ${e.style}
+              </style>
+            `,
+        )}`;
+    if (this.render) return html`${this.render()}${styles}`;
+    return this.#renderRoot === this ? undefined : html`<slot></slot>${styles}`;
   };
 
   /**@lifecycle */
@@ -377,14 +388,16 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     }
   };
 
-  closestElement(clsOrName: CustomElementConstructor | string) {
-    const isConstructor = typeof clsOrName === 'function';
-    const tagName = typeof clsOrName === 'string' && clsOrName.toUpperCase();
+  closestElement<K extends keyof HTMLElementTagNameMap>(tag: K): HTMLElementTagNameMap[K] | null;
+  closestElement<K extends abstract new (...args: any) => any>(constructor: K): InstanceType<K> | null;
+  closestElement<K extends abstract new (...args: any) => any>(constructorOrTag: K | string): Element | null {
+    const isConstructor = typeof constructorOrTag === 'function';
+    const tagName = typeof constructorOrTag === 'string' && constructorOrTag.toUpperCase();
     const getRootElement = (ele: Element): Element | null => {
       const rootEle = ele.parentElement || (ele.getRootNode() as ShadowRoot).host;
       if (!rootEle) return null;
       if (isConstructor) {
-        if (rootEle.constructor === clsOrName) {
+        if (rootEle.constructor === constructorOrTag) {
           return rootEle;
         }
       } else if (rootEle.tagName === tagName) {

package/src/lib/utils.ts

@@ -84,6 +84,7 @@ export class LinkedList<T = any> extends (globalThis.EventTarget || Object) {
   }
 
   // 添加到尾部，已存在时会删除老的项目
+  // 如果是添加第一个，start 事件会在添加前触发，避免处理事件重复的逻辑
   add(value: T) {
     if (!this.#lastItem) {
       this.dispatchEvent(new CustomEvent('start'));
@@ -101,6 +102,7 @@ export class LinkedList<T = any> extends (globalThis.EventTarget || Object) {
     this.#map.set(value, item);
   }
 
+  // 删除这个元素后没有其他元素时立即出发 end 事件
   delete(value: T) {
     const deleteItem = this.#delete(value);
     if (!this.#firstItem) {
@@ -238,9 +240,22 @@ export interface StyledKeyValuePair {
   [key: string]: StyledValueObject;
 }
 
+// !!! 目前只有 Chrome/FirefoxNightly 支持
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1520690
+// https://bugs.webkit.org/show_bug.cgi?id=228684
+export let useNativeCSSStyleSheet = true;
+try {
+  new (CSSStyleSheet as any)();
+} catch {
+  useNativeCSSStyleSheet = false;
+  window.CSSStyleSheet = class {
+    media = { mediaText: '' };
+    style = '';
+    replaceSync = (style: string) => (this.style = style);
+  } as any;
+}
+
 /**
- * !!! 目前只有 Chrome/FirefoxNightly 支持
- * https://bugzilla.mozilla.org/show_bug.cgi?id=1520690
  *
  * 创建 style sheet 用于 `adoptedStyleSheets`，不支持样式更新
  * @param rules string | Record<string, string> 不能动态更新的 css

package/src/lib/version.ts

@@ -1,2 +1,2 @@
 // Do not modify manually
-export const version = '1.5.5';
+export const version = '1.6.0';

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

@@ -25,10 +25,11 @@ customElements.define('async-gem-demo', AsyncGemDemo);
 describe('异步 gem element 测试', () => {
   it('异步 gem element 更新', async () => {
     const el: AsyncGemDemo = await fixture(html`<async-gem-demo></async-gem-demo>`);
+    expect(el.renderCount).to.equal(1);
     updateStore(store, { a: ++store.a });
     el.setState({ a: ++el.state.a });
     await nextFrame();
-    expect(el.renderCount).to.equal(1);
+    expect(el.renderCount).to.equal(2);
     await nextFrame();
     expect(el.renderCount).to.equal(2);
   });
@@ -146,11 +147,15 @@ class EffectGemDemo extends GemElement {
   @attribute attr = 'a';
   @property prop = {};
   effectCount = 0;
+  compareCount = 0;
   constructor() {
     super();
     this.effect(
       () => this.effectCount++,
-      () => [this.attr, this.prop],
+      () => {
+        this.compareCount++;
+        return [this.attr, this.prop];
+      },
     );
   }
   mounted() {
@@ -170,6 +175,7 @@ customElements.define('effect-gem-demo', EffectGemDemo);
 describe('gem element 副作用', () => {
   it('依赖当前值', async () => {
     const el: EffectGemDemo = await fixture(html`<effect-gem-demo></effect-gem-demo>`);
+    expect(el.compareCount).to.equal(1);
     expect(el.effectCount).to.equal(3);
     el.attr = 'b';
     el.prop = {};