@mantou/gem 1.7.12 → 2.0.0-alpha.1

package/src/lib/history.ts

@@ -183,7 +183,7 @@ class GemHistory extends EventTarget {
 // `<gem-**>` 只读写父应用 `basePath`
 const gemHistory = new GemHistory();
 
-const [gemTitleStore, updateTitleStore] = useStore({ title: '' });
+const [gemTitleStore, updateTitleStore] = useStore({ defaultTitle: document.title, url: '', title: '' });
 
 const _GEMHISTORY = { history: gemHistory, titleStore: gemTitleStore, basePathStore: gemBasePathStore };
 
@@ -213,8 +213,9 @@ if (!window._GEMHISTORY) {
 
   if (!nativeHistory.state) {
     // 初始化 historyState
-    const { pathname, search, hash } = location;
-    gemHistory.replace({ path: pathname, query: search, hash });
+    const { protocol, pathname, search, hash } = location;
+    // 支持在 `data:` `blob:` 中 `import`
+    if (protocol.startsWith('http')) gemHistory.replace({ path: pathname, query: search, hash });
   } else if (nativeHistory.state.$hasCloseHandle) {
     updateHistoryStore(nativeHistory.state);
     const params = normalizeParams({ title: document.title });

package/src/lib/store.ts

@@ -1,4 +1,5 @@
-import { addMicrotask, GemError, NonPrimitive } from './utils';
+import type { NonPrimitive } from './utils';
+import { addMicrotask, GemError } from './utils';
 
 export const StoreListenerMap = new WeakMap<NonPrimitive, Set<() => void>>();
 

package/src/lib/utils.ts

@@ -1,37 +1,18 @@
-const microtaskSet = new Set<() => void>();
+let microtaskSet = new Set<() => void>();
 export function addMicrotask(func: () => void) {
   if (typeof func !== 'function') return;
   if (!microtaskSet.size) {
     // delayed execution callback after updating store
     globalThis.queueMicrotask(() => {
-      microtaskSet.forEach((func) => func());
-      microtaskSet.clear();
+      const set = microtaskSet;
+      microtaskSet = new Set();
+      set.forEach((f) => f());
     });
   }
   microtaskSet.delete(func);
   microtaskSet.add(func);
 }
 
-const microtaskStack: (() => void)[] = [];
-
-function execMicrotaskStack() {
-  for (let i = microtaskStack.length - 1; i >= 0; i--) {
-    microtaskStack[i]();
-  }
-  microtaskStack.length = 0;
-}
-
-/**
- * 添加回调函数到微任务队列栈；
- * 先进后执行，使用这个函数可以改变嵌套的元素 `mounted` 的顺序；
- */
-export function addMicrotaskToStack(func: () => void) {
-  if (!microtaskStack.length) {
-    addMicrotask(execMicrotaskStack);
-  }
-  microtaskStack.push(func);
-}
-
 // 不编码 hash 用于比较
 export function absoluteLocation(currentPath = '', relativePath = '') {
   const { pathname, search, hash } = new URL(relativePath, location.origin + currentPath);
@@ -235,60 +216,12 @@ export function raw(arr: TemplateStringsArray, ...args: any[]) {
 }
 
 // 写 css 文本，在 CSSStyleSheet 中使用
-export function css(arr: TemplateStringsArray, ...args: any[]) {
-  return raw(arr, ...args);
-}
-
-// 跨多个 gem 工作
-export const SheetToken = Symbol.for('gem@sheetToken');
-
-export type Sheet<T> = {
-  [P in keyof T]: P;
-} & { [SheetToken]: CSSStyleSheet };
-
-export type StyledType = 'id' | 'class' | 'keyframes';
-export interface StyledValueObject {
-  styledContent: string;
-  type: StyledType;
-}
-export interface StyledKeyValuePair {
-  [key: string]: StyledValueObject;
-}
-
-/**
- *
- * 创建 style sheet 用于 `adoptedStyleSheets`，不支持样式更新，只支持自定义 CSS 属性
- * @param rules string | Record<string, string>
- * @param media string 媒体查询
- */
-export function createCSSSheet<T extends StyledKeyValuePair>(rules: T | string, media?: string): Sheet<T> {
-  const styleSheet = new CSSStyleSheet({ media });
-  const sheet: any = {};
-  let style = '';
-  if (typeof rules === 'string') {
-    style = rules;
-  } else {
-    Object.keys(rules).forEach((key: keyof T) => {
-      sheet[key] = `${key as string}-${randomStr()}`;
-      switch (rules[key].type) {
-        case 'class':
-          style += `.${sheet[key]} {${rules[key].styledContent}}`;
-          break;
-        case 'id':
-          style += `#${sheet[key]} {${rules[key].styledContent}}`;
-          break;
-        default:
-          style += `@keyframes ${key as string} {${rules[key].styledContent}}`;
-      }
-    });
-  }
-  styleSheet.replaceSync(style);
-  sheet[SheetToken] = styleSheet;
-  return sheet as Sheet<T>;
-}
+export const css = raw;
 
 export function randomStr(len = 5): string {
-  const str = Math.random().toString(36).slice(2).slice(0, len);
+  const str = Math.random()
+    .toString(36)
+    .slice(2, 2 + len);
   if (str.length < len) return str + randomStr(len - str.length);
   return str;
 }
@@ -303,17 +236,7 @@ export function randomStr(len = 5): string {
 //     }
 //   `,
 // });
-export const styled = {
-  class: (arr: TemplateStringsArray, ...args: any[]): StyledValueObject => {
-    return { styledContent: raw(arr, ...args), type: 'class' };
-  },
-  id: (arr: TemplateStringsArray, ...args: any[]): StyledValueObject => {
-    return { styledContent: raw(arr, ...args), type: 'id' };
-  },
-  keyframes: (arr: TemplateStringsArray, ...args: any[]): StyledValueObject => {
-    return { styledContent: raw(arr, ...args), type: 'keyframes' };
-  },
-};
+export const styled = { class: raw };
 
 export function camelToKebabCase(str: string) {
   return str.replace(/[A-Z]/g, ($1: string) => '-' + $1.toLowerCase());
@@ -324,9 +247,8 @@ export function kebabToCamelCase(str: string) {
 }
 
 export function cleanObject<T extends Record<string, unknown>>(o: T) {
-  Object.keys(o).forEach((key: string) => {
-    const k = key as keyof T;
-    delete o[k];
+  Object.keys(o).forEach((key: keyof T) => {
+    delete o[key];
   });
   return o;
 }
@@ -347,17 +269,6 @@ export function isArrayChange(newValues: any[], oldValues: any[]) {
   return false;
 }
 
-export function removeItems(target: any[], items: any[]) {
-  const set = new Set(items);
-  return target.filter((e) => {
-    if (set.has(e)) {
-      set.delete(e);
-      return false;
-    }
-    return true;
-  });
-}
-
 export function objectMapToString<T = any>(
   object: Record<string, T>,
   separate: string,
@@ -377,6 +288,7 @@ type StyleProp =
   | `--${string}`
   | 'scrollbarWidth'
   | 'scrollbarColor'
+  | 'positionAnchor'
   | 'anchorDefault'
   | 'anchorName';
 
@@ -406,94 +318,3 @@ declare global {
   interface PropertyIndexedKeyframes extends StyleObject {}
   interface Keyframe extends StyleObject {}
 }
-
-/**
- * @example
- * ```css
- * animation: 150ms ease 0ms showMask;`
- * @keyframes showMask {
- *   from {
- *     opacity: 0;
- *   }
- * }
- * ```
- */
-// export function createCSSAnimation(
-//   keyframes: PropertyIndexedKeyframes | Keyframe[],
-//   options?: number | (KeyframeEffectOptions & { name: string }),
-// ) {
-//   const frames = new Map<number, StyleObject>();
-//   if (Array.isArray(keyframes)) {
-//     keyframes.forEach((keyframe, index) => {
-//       const offset = keyframes.length === 1 ? 1 : keyframe.offset || index / (keyframes.length - 1);
-//       frames.set(offset, {
-//         ...keyframe,
-//         // https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats#attributes
-//         cssOffset: undefined,
-//         offset: keyframe.cssOffset,
-//         composite: undefined,
-//         animationComposition: keyframe.composite,
-//         easing: undefined,
-//         animationTimingFunction: keyframe.easing,
-//       } as StyleObject);
-//     });
-//   } else {
-//     const offsetList: (number | null)[] = Array.isArray(keyframes.offset)
-//       ? keyframes.offset
-//       : keyframes.offset === undefined
-//         ? []
-//         : [keyframes.offset];
-//     if (offsetList.length && offsetList.at(-1) !== 1) offsetList.push(1);
-
-//     const setStyle = (offset: number, key: string, value: string | number | null | undefined) => {
-//       const style = frames.get(offset) || {};
-//       switch (key) {
-//         case 'offset':
-//           break;
-//         case 'cssOffset':
-//           Reflect.set(style, 'offset', value);
-//           break;
-//         case 'composite':
-//           Reflect.set(style, 'animationComposition', value);
-//           break;
-//         case 'easing':
-//           Reflect.set(style, 'animationTimingFunction', value);
-//           break;
-//         default:
-//           Reflect.set(style, key, value);
-//       }
-//       frames.set(offset, style);
-//     };
-//     for (const key in keyframes) {
-//       const framesValue = keyframes[key];
-//       !Array.isArray(framesValue)
-//         ? setStyle(1, key, framesValue)
-//         : framesValue.length === 1
-//           ? setStyle(1, key, framesValue[0])
-//           : framesValue.forEach((value, index) =>
-//               setStyle(offsetList[index] ?? index / (framesValue.length - 1), key, value),
-//             );
-//     }
-//   }
-
-//   let framesStr = '';
-//   frames.forEach((rules, offset) => {
-//     framesStr += `${(offset * 100).toFixed()}%{${styleMap(rules)}}`;
-//   });
-
-//   if (options) {
-//     const {
-//       // 只能使用 ms 数字
-//       duration = 0,
-//       easing = '',
-//       delay = 0,
-//       iterations = 1,
-//       direction = '',
-//       fill = '',
-//       name = `ani-${randomStr()}`,
-//     } = typeof options === 'number' ? ({ duration: options } as Exclude<typeof options, number>) : options;
-//     return `${duration}ms ${easing} ${delay}ms ${iterations} ${direction} ${fill} ${name};@keyframes ${name}{${framesStr}}`;
-//   }
-
-//   return framesStr;
-// }

package/src/lib/version.ts

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

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

@@ -5,7 +5,7 @@ import type { GemActiveLinkElement } from '../../elements/link';
 
 import '../../elements/link';
 
-describe('GemTitleElement', () => {
+describe('GemLinkElement', () => {
   it('basic', async () => {
     const ele: GemActiveLinkElement = await fixture(
       html`<gem-active-link pattern="/*" href="/#测试">active-link</gem-active-link>`,

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

@@ -8,6 +8,7 @@ import '../../elements/title';
 describe('GemTitleElement', () => {
   it('basic', async () => {
     const ele: GemTitleElement = await fixture(html`<gem-title>title</gem-title>`);
+    await nextFrame();
     expect(document.title).to.equal('title');
     ele.textContent = 'title2';
     await nextFrame();

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

@@ -8,35 +8,45 @@
  */
 import { fixture, expect, nextFrame } from '@open-wc/testing';
 
-import { GemElement, html } from '../../lib/element';
+import type { Metadata } from '../../lib/element';
+import { createCSSSheet, createState, GemElement, html, createRef } from '../../lib/element';
 import { createStore, updateStore } from '../../lib/store';
-import { attribute, property, customElement, emitter, adoptedStyle, refobject, RefObject } from '../../lib/decorators';
-import { createCSSSheet, css } from '../../lib/utils';
+import {
+  attribute,
+  property,
+  customElement,
+  emitter,
+  adoptedStyle,
+  connectStore,
+  async,
+  shadow,
+  mounted,
+} from '../../lib/decorators';
+import { css } from '../../lib/utils';
 
 const store = createStore({
   a: 1,
 });
 
+@connectStore(store)
+@async()
+@shadow()
+@customElement('async-gem-demo')
 class AsyncGemDemo extends GemElement {
-  static observedStores = [store];
-  constructor() {
-    super({ isAsync: true });
-  }
-  state = { a: 0 };
+  #state = createState({ a: 0 });
   renderCount = 0;
   render() {
     this.renderCount++;
     return null;
   }
 }
-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 });
+    el.internals.stateList[0]({ a: ++(el.internals.stateList[0] as any).a });
     await nextFrame();
     expect(el.renderCount).to.equal(2);
     await nextFrame();
@@ -45,7 +55,7 @@ describe('异步 gem element 测试', () => {
 });
 
 const lightStyle = createCSSSheet(css`
-  body {
+  div {
     font-size: 18.1px;
   }
 `);
@@ -53,37 +63,41 @@ const lightStyle = createCSSSheet(css`
 @customElement('light-gem-demo')
 @adoptedStyle(lightStyle)
 class LightGemDemo extends GemElement {
-  constructor() {
-    super({ isLight: true });
-  }
   render() {
     return html`<div>hi</div>`;
   }
 }
 describe('没有 Shadow DOM 的 gem 元素', () => {
   it('渲染没有 Shadow DOM 的 gem 元素', async () => {
+    const el0: LightGemDemo = await fixture(html`<div></div>`);
     const el1: LightGemDemo = await fixture(html`<light-gem-demo></light-gem-demo>`);
     const el2: LightGemDemo = await fixture(html`<light-gem-demo></light-gem-demo>`);
     expect(el1.shadowRoot).to.equal(null);
     expect(el1.innerHTML.includes('hi')).to.equal(true);
-    expect(getComputedStyle(document.body).fontSize).to.equal('18.1px');
+    expect(getComputedStyle(el0).fontSize).not.to.equal('18.1px');
+    expect(getComputedStyle(el2.firstElementChild!).fontSize).to.equal('18.1px');
     el1.remove();
-    expect(getComputedStyle(document.body).fontSize).to.equal('18.1px');
+    await Promise.resolve();
+    expect(getComputedStyle(el2.firstElementChild!).fontSize).to.equal('18.1px');
     el2.remove();
-    expect(getComputedStyle(document.body).fontSize).not.to.equal('18.1px');
+    // 样式在队列末尾执行
+    await Promise.resolve();
+    expect(getComputedStyle(el0).fontSize).not.to.equal('18.1px');
   });
 });
 
 class LifecycleGemElement extends GemElement {
   @attribute appTitle = 'default';
   @attribute appTitle2 = 'default2';
-  @refobject divRef: RefObject<HTMLElement>;
   refInConstructor?: HTMLElement;
 
+  divRef = createRef<HTMLDivElement>();
+
   constructor(appTitle: string, appTitle2: string) {
     super();
-    this.appTitle = appTitle;
-    this.appTitle2 = appTitle2;
+    // 字段优先执行于构造函数
+    this.appTitle = appTitle ?? this.appTitle;
+    this.appTitle2 = appTitle2 ?? this.appTitle2;
     this.effect(
       () => {
         this.refInConstructor = this.divRef.element;
@@ -93,18 +107,14 @@ class LifecycleGemElement extends GemElement {
   }
   renderCount = 0;
   mountedCount = 0;
-  updatedCount = 0;
-
-  updated() {
-    this.updatedCount++;
-  }
 
-  mounted() {
+  @mounted()
+  #init = () => {
     this.mountedCount++;
     return () => {
       this.renderCount = 0;
     };
-  }
+  };
 
   render() {
     this.renderCount++;
@@ -116,6 +126,7 @@ describe('gem element 生命周期', () => {
     const el: LifecycleGemElement = await fixture(html`<lifecycle-gem-demo></lifecycle-gem-demo>`);
     // test #isMounted
     customElements.define('lifecycle-gem-demo', LifecycleGemElement);
+    await Promise.resolve();
     expect(!!el.refInConstructor).to.equal(true);
     expect(el.renderCount).to.equal(1);
     el.remove();
@@ -129,8 +140,6 @@ describe('gem element 生命周期', () => {
     expect(el.appTitle).to.equal('title');
     expect(el.renderCount).to.equal(1);
     const clone = el.cloneNode() as LifecycleGemElement;
-    // v2 BUG
-    clone.connectedCallback();
     expect(clone.appTitle).to.equal('title');
 
     const el2 = new LifecycleGemElement('', '2');
@@ -142,20 +151,20 @@ describe('gem element 生命周期', () => {
 
     // disconnectedCallback, connectedCallback
     container.append(el2);
+    await Promise.resolve();
     expect(el2.mountedCount).to.equal(1);
     expect(el2.renderCount).to.equal(1);
     el2.remove();
     expect(el2.mountedCount).to.equal(1);
     expect(el2.renderCount).to.equal(0);
     container.append(el2);
+    await Promise.resolve();
     expect(el2.mountedCount).to.equal(2);
     expect(el2.renderCount).to.equal(1);
-    expect(el2.updatedCount).to.equal(0);
     el2.update();
     el2.update();
     await Promise.resolve();
     expect(el2.renderCount).to.equal(2);
-    expect(el2.updatedCount).to.equal(1);
 
     const el3 = new LifecycleGemElement('test1', 'test2');
     expect(el3.appTitle).to.equal('test1');
@@ -166,6 +175,7 @@ describe('gem element 生命周期', () => {
   });
 });
 
+@customElement('effect-gem-demo')
 class EffectGemDemo extends GemElement {
   @attribute attr = 'a';
   @property prop = {};
@@ -186,7 +196,8 @@ class EffectGemDemo extends GemElement {
       },
     );
   }
-  mounted() {
+  @mounted()
+  #mounted = () => {
     this.effect(
       (_arr) => {
         this.effectCallCount++;
@@ -197,9 +208,8 @@ class EffectGemDemo extends GemElement {
     this.effect(() => {
       this.effectCallCount++;
     });
-  }
+  };
 }
-customElements.define('effect-gem-demo', EffectGemDemo);
 describe('gem element 副作用', () => {
   it('依赖当前值', async () => {
     const el: EffectGemDemo = await fixture(html`<effect-gem-demo></effect-gem-demo>`);
@@ -230,57 +240,58 @@ describe('gem element 副作用', () => {
     expect(el.effectCallCount).to.equal(0);
     expect(el.hasConstructorEffect).to.equal(false);
     document.body.append(el);
+    await Promise.resolve();
     expect(el.hasConstructorEffect).to.equal(true);
   });
 });
 
+@customElement('memo-gem-demo')
 class MemoGemDemo extends GemElement {
   @attribute attr = 'a';
   @property prop = {};
-  memoCount = 0;
+  memoNum = 0;
   constructor() {
     super();
     this.memo(
-      () => (this.memoCount += 1),
+      () => (this.memoNum += 1),
       () => [this.attr, this.prop],
     );
-  }
-  willMount() {
     this.memo(
       (_arr) => {
-        this.memoCount += 2;
+        this.memoNum += 2;
       },
       () => [],
     );
     this.memo(() => {
-      this.memoCount += 4;
+      this.memoNum += 4;
     });
   }
 }
-customElements.define('memo-gem-demo', MemoGemDemo);
 describe('gem element Memo', () => {
   it('依赖当前值', async () => {
     const el: MemoGemDemo = await fixture(html`<memo-gem-demo></memo-gem-demo>`);
-    expect(el.memoCount).to.equal(7);
+    expect(el.memoNum).to.equal(7);
     el.attr = 'b';
     el.prop = {};
     await nextFrame();
-    expect(el.memoCount).to.equal(12);
+    expect(el.memoNum).to.equal(12);
 
     el.update();
     await Promise.resolve();
-    expect(el.memoCount).to.equal(16);
+    expect(el.memoNum).to.equal(16);
 
     document.body.append(el);
-    expect(el.memoCount).to.equal(16);
+    expect(el.memoNum).to.equal(16);
 
     el.remove();
     await Promise.resolve();
     document.body.append(el);
-    expect(el.memoCount).to.equal(22);
+    expect(el.memoNum).to.equal(23);
   });
 });
 
+@customElement('i-gem')
+@shadow()
 class I extends GemElement {
   @attribute appTitle = 'string';
   @property appData = { a: 1 };
@@ -295,13 +306,24 @@ class InheritGem extends I {
 }
 describe('gem element 继承', () => {
   it('静态字段继承', async () => {
-    expect(I.observedAttributes).to.eql(['app-title']);
-    expect(InheritGem.observedAttributes).to.eql(['app-title', 'app-title', 'app-title2']);
+    new I();
+    new InheritGem(); // 触发装饰器自定义初始化函数
+    const metadata: Metadata = Reflect.get(InheritGem, Symbol.metadata);
+    expect(metadata.observedAttributes).to.eql(['app-title', 'app-title2']);
   });
   it('attr/prop/emitter 继承', async () => {
     const name = window.name;
     const el: InheritGem = await fixture(html`<inherit-gem></inherit-gem>`);
-    expect(el.appTitle).to.equal('1');
+    /**
+     * NOTE: 默认值不能覆盖，可以在 `constructor` 中重新定义默认值
+     *
+     * 原因：
+     *
+     * 1. 执行装饰器时必须保留之前设置的 prop 值，所以 prop 的字段默认值不能覆盖，统一 attr 和 prop 的行为
+     * 2. 很难区分是基类中设置的 attr 还是模版中指定的 attr
+     */
+    expect(el.appTitle).to.equal('string');
+    expect(el.appTitle2).to.equal('2');
     expect(el.appData.a).to.equal(1);
     el.appTitle = 'b';
     el.appData = { a: 2 };
@@ -315,6 +337,7 @@ describe('gem element 继承', () => {
   });
 });
 @customElement('render-empty')
+@shadow()
 class RenderEmpty extends GemElement {
   render() {
     return undefined;