@mantou/gem 2.2.2 → 2.2.3

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "0.0.0";
+export declare const version = "2.2.3";
 //# sourceMappingURL=version.d.ts.map

package/lib/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,OAAO,UAAU,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAU,CAAC"}

package/lib/version.js

@@ -1,3 +1,2 @@
-// Do not modify manually
-export const version = '0.0.0';
+export const version = '2.2.3';
 //# sourceMappingURL=version.js.map

package/lib/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantou/gem",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "💎 使用自定义元素的轻量级 WebApp 开发框架",
   "keywords": [
     "frontend",
@@ -41,7 +41,7 @@
     "test": "cross-env wtr"
   },
   "devDependencies": {
-    "@gemjs/config": "^2.1.2",
+    "@gemjs/config": "^2.1.3",
     "@types/chai": "^5.0.0",
     "@types/mocha": "^10.0.7",
     "@types/trusted-types": "^2.0.7",

package/src/elements/base/gesture.ts

@@ -11,6 +11,7 @@ export type PanEventDetail = {
   timeStamp: number;
   isPrimary: boolean;
   pointerId: number;
+  pressed: boolean;
 };
 export interface SwipeEventDetail {
   direction: 'top' | 'right' | 'bottom' | 'left';
@@ -143,7 +144,7 @@ export class GemGestureElement extends GemElement {
 
   #onMove = (evt: PointerEvent) => {
     const { pointerId, clientX, clientY, isPrimary, pointerType, timeStamp } = evt;
-    if (!this.#pressed && this.hasPointerCapture(pointerId)) {
+    if (this.hasPointerCapture(pointerId)) {
       const moves = this.#getMoves(pointerId);
       const startEvent = this.#getStartEvent(pointerId);
       const lastMove = moves[moves.length - 1] || startEvent;
@@ -161,6 +162,7 @@ export class GemGestureElement extends GemElement {
         timeStamp,
         isPrimary,
         pointerId,
+        pressed: this.#pressed,
       };
       moves.push(move);
       this.pan(move);

package/src/helper/request.ts

@@ -8,9 +8,9 @@ type Options = {
   origin?: string;
   base?: string;
   // only for get/del/put/post
-  appendHeaders?: (input?: any) => HeadersInit;
-  transformInput?: (input?: any) => any;
-  transformOutput?: (output: any, req: Request) => any;
+  appendHeaders?: (input?: any) => HeadersInit | Promise<HeadersInit>;
+  transformInput?: (input?: any) => any | Promise<any>;
+  transformOutput?: (output: any, req: Request) => any | Promise<any>;
 } & RequestInit;
 
 function initRequest(options: Options = {}) {
@@ -83,7 +83,7 @@ function initRequest(options: Options = {}) {
         data = await res.text();
       }
       if (isClientError) throw new (Error as any)(res.statusText, { cause: data });
-      return transformOutput(data, req);
+      return await transformOutput(data, req);
     } catch {
       throw new Error('Parse error');
     }
@@ -91,33 +91,33 @@ function initRequest(options: Options = {}) {
 
   return {
     request,
-    get<T>(path: string, params?: ReqParams) {
-      const i = transformInput(params);
+    async get<T>(path: string, params?: ReqParams) {
+      const i = await transformInput(params);
       return request<T>(serializationUrl(path, i), {
         method: 'GET',
-        headers: appendHeaders(i),
+        headers: await appendHeaders(i),
       });
     },
-    del<T>(path: string, params?: ReqParams) {
-      const i = transformInput(params);
+    async del<T>(path: string, params?: ReqParams) {
+      const i = await transformInput(params);
       return request<T>(serializationUrl(path, i), {
         method: 'DELETE',
-        headers: appendHeaders(i),
+        headers: await appendHeaders(i),
       });
     },
-    put<T>(path: string, body?: ReqBody) {
-      const i = transformInput(body);
+    async put<T>(path: string, body?: ReqBody) {
+      const i = await transformInput(body);
       return request<T>(serializationUrl(path), {
         method: 'PUT',
-        headers: appendHeaders(i),
+        headers: await appendHeaders(i),
         body: serializationBody(i),
       });
     },
-    post<T>(path: string, body?: ReqBody) {
-      const i = transformInput(body);
+    async post<T>(path: string, body?: ReqBody) {
+      const i = await transformInput(body);
       return request<T>(serializationUrl(path), {
         method: 'POST',
-        headers: appendHeaders(i),
+        headers: await appendHeaders(i),
         body: serializationBody(i),
       });
     },
@@ -126,4 +126,4 @@ function initRequest(options: Options = {}) {
 
 const { request, del, get, post, put } = initRequest();
 
-export { initRequest, request, del, get, post, put };
+export { del, get, initRequest, post, put, request };

package/src/lib/decorators.ts

@@ -482,15 +482,10 @@ export function connectStore(store: Store<any>) {
   };
 }
 
-export function shadow({
-  mode = 'open',
-  serializable = true,
-  delegatesFocus,
-  slotAssignment,
-}: Partial<ShadowRootInit> = {}) {
+export function shadow({ mode = 'open', serializable = true, ...rest }: Partial<ShadowRootInit> = {}) {
   return (_: any, context: ClassDecoratorContext) => {
     const metadata = context.metadata as Metadata;
-    assign(metadata, { mode, serializable, delegatesFocus, slotAssignment });
+    assign(metadata, { mode, serializable, ...rest });
   };
 }
 

package/src/lib/lit-html.ts

@@ -374,6 +374,7 @@ const getTemplateHtml = (strings: TemplateStringsArray, type: ResultType): [Trus
 
 /** @internal */
 export type { Template };
+
 class Template {
   /** @internal */
   el!: HTMLTemplateElement;
@@ -547,15 +548,13 @@ function resolveDirective(
   return value;
 }
 
-export type { TemplateInstance };
 /**
  * An updateable instance of a Template. Holds references to the Parts used to
  * update the template instance.
  */
-class TemplateInstance implements Disconnectable {
+export class TemplateInstance implements Disconnectable {
   _$template: Template;
   _$parts: Array<Part | undefined> = [];
-  /** @internal */
   _$conditions: ConditionChain[] = [];
 
   /** @internal */
@@ -656,12 +655,13 @@ class TemplateInstance implements Disconnectable {
   }
 }
 
-class ConditionChain {
+export class ConditionChain {
   readonly mark: Comment;
   readonly list: { ele: Element; idx?: number }[];
 
   constructor(ele: Element, idx: number) {
     const mark = createMarker();
+    (mark as any)._$chain = this;
     ele.before(mark);
     this.mark = mark;
     this.list = [{ ele, idx }];
@@ -1012,6 +1012,7 @@ export interface RootPart extends ChildPart {
 }
 
 export type { AttributePart };
+
 class AttributePart implements Disconnectable {
   readonly type: typeof ATTRIBUTE_PART | typeof PROPERTY_PART | typeof BOOLEAN_ATTRIBUTE_PART | typeof EVENT_PART =
     ATTRIBUTE_PART;
@@ -1135,6 +1136,7 @@ class AttributePart implements Disconnectable {
 }
 
 export type { PropertyPart };
+
 class PropertyPart extends AttributePart {
   override readonly type = PROPERTY_PART;
 
@@ -1145,6 +1147,7 @@ class PropertyPart extends AttributePart {
 }
 
 export type { BooleanAttributePart };
+
 class BooleanAttributePart extends AttributePart {
   override readonly type = BOOLEAN_ATTRIBUTE_PART;
 
@@ -1157,6 +1160,7 @@ class BooleanAttributePart extends AttributePart {
 type EventListenerWithOptions = EventListenerOrEventListenerObject & Partial<AddEventListenerOptions>;
 
 export type { EventPart };
+
 class EventPart extends AttributePart {
   override readonly type = EVENT_PART;
 
@@ -1192,8 +1196,7 @@ class EventPart extends AttributePart {
   }
 }
 
-export type { ElementPart };
-class ElementPart implements Disconnectable {
+export class ElementPart implements Disconnectable {
   readonly type = ELEMENT_PART;
 
   /** @internal */
@@ -1247,6 +1250,7 @@ class ElementPart implements Disconnectable {
 export const createRef = <T = Element>() => new Ref<T>();
 
 export type { Ref };
+
 class Ref<T = Element> {
   value?: T;
 }

package/src/lib/reactive.ts

@@ -25,6 +25,14 @@ export function setEngine(h: typeof Lit.html, r: typeof Lit.render) {
   render = r;
 }
 
+let hydrationEngine = (_value: unknown, _container: HTMLElement | DocumentFragment): Lit.RootPart | undefined => {
+  return;
+};
+
+export function setHydrationEngine(engine: typeof hydrationEngine) {
+  hydrationEngine = engine;
+}
+
 const { assign, defineProperty } = Object;
 
 // https://github.com/tc39/proposal-decorator-metadata
@@ -41,6 +49,7 @@ export type SheetTokenType = typeof SheetToken;
 export const UpdateToken = Symbol.for('gem@update');
 
 const BoundaryCSSState = 'gem-style-boundary';
+const ElementCSSState = 'gem-element';
 
 /**@internal */
 export const _RenderErrorEvent = 'gem@render-error';
@@ -188,7 +197,7 @@ const appleCSSStyleSheet = (ele: HTMLElement, sheets: CSSStyleSheet[]) => {
     rootStyleSheetInfo.set(root, map);
     rootUpdateFnMap.set(map, () => {
       // 先找到外部样式表
-      const newSheets = root.adoptedStyleSheets.filter((e) => !map.has(e));
+      const newSheets = (root.adoptedStyleSheets || []).filter((e) => !map.has(e));
       map.forEach((count, sheet) => count && newSheets.push(sheet));
       // 外层元素的样式要放到最后，以提升优先级，但是只考虑第一次出现样式表的位置
       root.adoptedStyleSheets = newSheets.reverse();
@@ -247,6 +256,10 @@ export let _createTemplate: (ele: GemElement, item: RenderItem) => void;
 export type Metadata = Partial<ShadowRootInit> & {
   /** 内容可被外部样式化 */
   penetrable?: boolean;
+  /**
+   * 这个属性用来解决同步渲染长列表，且渲染过程有大量计算阻塞主线程
+   * 否则应该考虑 `content-visibility: auto` 和虚拟列表
+   */
   noBlocking?: boolean;
   aria?: Partial<
     ARIAMixin & {
@@ -271,7 +284,7 @@ export type Metadata = Partial<ShadowRootInit> & {
 // global render task pool
 const noBlockingTaskList = new LinkedList<() => void>();
 const tick = (timeStamp = performance.now()) => {
-  if (performance.now() > timeStamp + 16) return requestAnimationFrame(tick);
+  if (performance.now() > timeStamp + 50) return requestAnimationFrame(tick);
   const task = noBlockingTaskList.get();
   if (task) {
     task();
@@ -347,10 +360,11 @@ export abstract class GemElement extends HTMLElement {
 
     currentConstructGemElement = this;
 
-    const { mode, serializable, delegatesFocus, slotAssignment, aria } = this.#metadata;
+    const { aria, mode, delegatesFocus, ...rest } = this.#metadata;
     const { focusable, ...internalsAria } = aria || {};
 
-    this.#renderRoot = !mode ? this : this.attachShadow({ mode, serializable, delegatesFocus, slotAssignment });
+    // 这里认为 rest 不会有自定义字段和 ShadowRootInit 参数冲突
+    this.#renderRoot = !mode ? this : this.shadowRoot || this.attachShadow({ mode, delegatesFocus, ...rest });
     this.#internals = this.attachInternals() as GemElement['internals'];
     this.#internals.stateList = [];
     this.#internals.sheets = [];
@@ -415,10 +429,8 @@ export abstract class GemElement extends HTMLElement {
       const isLight = this.#renderRoot === this;
       const temp = item ? item.render() : isLight ? undefined : html`<slot></slot>`;
       if (temp === undefined) return;
-      render(
-        temp !== null ? temp : html`<style>${isLight ? '@scope' : ':host'}{&{display:none!important;}}</style>`,
-        this.#renderRoot,
-      );
+      const r = temp !== null ? temp : html`<style>${isLight ? '@scope' : ':host'}{&{display:none!important;}}</style>`;
+      hydrationEngine(r, this.#renderRoot) || render(r, this.#renderRoot);
     } catch (err) {
       this.dispatchEvent(new CustomEvent(_RenderErrorEvent, { bubbles: true, composed: true, detail: err }));
       throw err;
@@ -507,6 +519,8 @@ export abstract class GemElement extends HTMLElement {
 
     const { observedStores, mode, penetrable } = this.#metadata;
 
+    // https://github.com/w3c/csswg-drafts/issues/10407#issuecomment-4418616596
+    this.#internals.states.add(ElementCSSState);
     // 有渲染函数的 light dom 应该添加边界，防止内容被外部样式化
     // 如果渲染内容需要应用外部样式，需要手动 `delete` 边界
     if (!mode && this.#renderList.length && !penetrable) this.#internals.states.add(BoundaryCSSState);

package/src/lib/version.ts

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