@mantou/gem 2.1.1 → 2.2.0

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

@@ -1,16 +1,25 @@
-import { fixture, expect, nextFrame } from '@open-wc/testing';
-
-import { html } from '../../lib/element';
+import { fixture, expect, nextFrame } from '../utils';
+import { css, GemElement, html } from '../../lib/element';
+import { adoptedStyle, customElement } from '../../lib/decorators';
 import type { GemReflectElement } from '../../elements/reflect';
 
 import '../../elements/reflect';
 
+@adoptedStyle(css`
+  :scope {
+    color: rgb(255, 0, 0);
+  }
+`)
+@customElement('light-dom')
+export class Children extends GemElement {}
+
 describe('GemReflectElement', () => {
   it('basic', async () => {
     const reflect: GemReflectElement = await fixture(html`
       <gem-reflect>
         <div id="one"></div>
         <div id="two"></div>
+        <light-dom></light-dom>
       </gem-reflect>
     `);
     const div = document.head.querySelector('#one');
@@ -20,6 +29,7 @@ describe('GemReflectElement', () => {
     reflect.target = document.body;
     await nextFrame();
     expect(document.body.querySelector('#one')).to.equal(div);
+    expect(getComputedStyle(document.body.querySelector('light-dom')!).color).to.equal('rgb(255, 0, 0)');
     expect(div?.nextSibling).to.equal(comment);
     reflect.remove();
     expect(!!document.querySelector('#one')).to.equal(false);

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

@@ -1,5 +1,4 @@
-import { fixture, expect, nextFrame } from '@open-wc/testing';
-
+import { fixture, expect, nextFrame } from '../utils';
 import { html } from '../../lib/element';
 import type { GemTitleElement } from '../../elements/title';
 

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

@@ -6,10 +6,9 @@
  * - 派生元素（类扩展）
  * - 无渲染内容 Gem 元素
  */
-import { fixture, expect, nextFrame } from '@open-wc/testing';
-
+import { fixture, expect, nextFrame } from '../utils';
 import type { Metadata } from '../../lib/element';
-import { createCSSSheet, createState, GemElement, html, createRef } from '../../lib/element';
+import { css, createState, GemElement, html, createRef } from '../../lib/element';
 import { createStore } from '../../lib/store';
 import {
   attribute,
@@ -22,7 +21,6 @@ import {
   shadow,
   mounted,
 } from '../../lib/decorators';
-import { css } from '../../lib/utils';
 
 const store = createStore({
   a: 1,
@@ -54,11 +52,11 @@ describe('异步 gem element 测试', () => {
   });
 });
 
-const lightStyle = createCSSSheet(css`
+const lightStyle = css`
   div {
     font-size: 18.1px;
   }
-`);
+`;
 
 @customElement('light-gem-demo')
 @adoptedStyle(lightStyle)
@@ -100,7 +98,7 @@ class LifecycleGemElement extends GemElement {
     this.appTitle2 = appTitle2 ?? this.appTitle2;
     this.effect(
       () => {
-        this.refInConstructor = this.divRef.element;
+        this.refInConstructor = this.divRef.value;
       },
       () => [],
     );
@@ -118,7 +116,7 @@ class LifecycleGemElement extends GemElement {
 
   render() {
     this.renderCount++;
-    return html`<div ref=${this.divRef.ref}></div>`;
+    return html`<div ${this.divRef}></div>`;
   }
 }
 describe('gem element 生命周期', () => {
@@ -304,12 +302,20 @@ class InheritGem extends I {
   @attribute appTitle = '1';
   @attribute appTitle2 = '2';
 }
+
+@customElement('inherit-gem1')
+class InheritGem1 extends I {}
+
 describe('gem element 继承', () => {
   it('静态字段继承', async () => {
     new I();
     new InheritGem(); // 触发装饰器自定义初始化函数
     const metadata: Metadata = Reflect.get(InheritGem, Symbol.metadata);
     expect(metadata.observedAttributes).to.eql(['app-title', 'app-title2']);
+
+    new InheritGem1(); // 触发装饰器自定义初始化函数
+    const metadata1: Metadata = Reflect.get(InheritGem1, Symbol.metadata);
+    expect(metadata1.observedAttributes).to.eql(['app-title']);
   });
   it('attr/prop/emitter 继承', async () => {
     const name = window.name;
@@ -333,6 +339,7 @@ describe('gem element 继承', () => {
       window.name += '2';
     });
     el.sayHi();
+    await Promise.resolve();
     expect(window.name).to.equal(name + '21');
   });
 });

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

@@ -1,14 +1,13 @@
-import { fixture, expect, nextFrame } from '@open-wc/testing';
-
-import { createCSSSheet, createState, GemElement, html } from '../../lib/element';
+import { fixture, expect, nextFrame } from '../utils';
+import { css, createState, GemElement, html } from '../../lib/element';
 import { createStore } from '../../lib/store';
-import { css } from '../../lib/utils';
 import {
   adoptedStyle,
   attribute,
   boolattribute,
   connectStore,
   customElement,
+  fallback,
   numattribute,
   property,
   shadow,
@@ -18,11 +17,11 @@ const store = createStore({
   a: 1,
 });
 
-const styles = createCSSSheet(css`
+const styles = css`
   :host {
     background: rgb(255, 0, 0);
   }
-`);
+`;
 
 @connectStore(store)
 @adoptedStyle(styles)
@@ -40,11 +39,15 @@ class GemDemo extends GemElement {
   renderCount = 0;
 
   render() {
+    if (this.attr === 'error') throw new Error();
     const { attr, disabled, count, prop } = this;
     const { value } = this.#state;
     this.renderCount++;
     return html`attr: ${attr}, disabled: ${disabled}, count: ${count}, prop: ${prop.value}, state: ${value}`;
   }
+
+  @fallback()
+  #error = () => html`Error`;
 }
 
 describe('基本 gem element 测试', () => {
@@ -68,12 +71,14 @@ describe('基本 gem element 测试', () => {
   });
   it('渲染 gem element', async () => {
     const el: GemDemo = await fixture(html`<gem-demo attr="attr" .prop=${{ value: 'prop' }}></gem-demo>`);
-    expect(el).shadowDom.to.equal('attr: attr, disabled: false, count: 0, prop: prop, state: ');
+    expect(el.shadowRoot?.textContent).to.equal('attr: attr, disabled: false, count: 0, prop: prop, state: ');
     await Promise.resolve();
     expect(el.renderCount).to.equal(1);
     el.update();
     await Promise.resolve();
     expect(el.renderCount).to.equal(2);
+    const errEl: GemDemo = await fixture(html`<gem-demo attr="error"></gem-demo>`);
+    expect(errEl.shadowRoot?.textContent).to.equal('Error');
   });
   it('读取 attr', async () => {
     const el: GemDemo = await fixture(html`
@@ -102,7 +107,7 @@ describe('基本 gem element 测试', () => {
     expect(el.attr).to.equal('value');
     expect(el.disabled).to.equal(true);
     expect(el.count).to.equal(2);
-    expect(el).shadowDom.to.equal('attr: value, disabled: true, count: 2, prop: , state: ');
+    expect(el.shadowRoot?.textContent).to.equal('attr: value, disabled: true, count: 2, prop: , state: ');
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     el.attr = null;
@@ -124,7 +129,14 @@ describe('基本 gem element 测试', () => {
     await Promise.resolve();
     expect(el.renderCount).to.equal(2);
     expect(el.prop).to.deep.equal({ value: 'value' });
-    expect(el).shadowDom.to.equal('attr: , disabled: false, count: 0, prop: value, state: ');
+    expect(el.shadowRoot?.textContent).to.equal('attr: , disabled: false, count: 0, prop: value, state: ');
+  });
+
+  it('只能在 initEffect 前修改 state', async () => {
+    const syncUpdateEle = new GemDemo();
+    expect(() => syncUpdateEle.internals.stateList[0]()).to.not.throw();
+    document.body.append(syncUpdateEle);
+    expect(() => syncUpdateEle.internals.stateList[0]()).to.throw();
   });
 
   it('修改 state', async () => {
@@ -136,7 +148,7 @@ describe('基本 gem element 测试', () => {
     await Promise.resolve();
     expect(el.renderCount).to.equal(2);
     expect({ ...el.internals.stateList[0] }).to.deep.equal({ value: 'state' });
-    expect(el).shadowDom.to.equal('attr: , disabled: false, count: 0, prop: , state: state');
+    expect(el.shadowRoot?.textContent).to.equal('attr: , disabled: false, count: 0, prop: , state: state');
   });
 
   it('更新 store', async () => {

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

@@ -1,9 +1,7 @@
-import { fixture, expect } from '@open-wc/testing';
-
+import { fixture, expect } from '../utils';
 import type { Metadata } from '../../lib/element';
-import { createCSSSheet, GemElement, html, createRef } from '../../lib/element';
+import { css, GemElement, html } from '../../lib/element';
 import { createStore } from '../../lib/store';
-import { css } from '../../lib/utils';
 import type { Emitter } from '../../lib/decorators';
 import {
   attribute,
@@ -24,11 +22,11 @@ const store = createStore({
   a: 1,
 });
 
-const styles = createCSSSheet(css`
+const styles = css`
   :host {
     background: rgb(255, 0, 0);
   }
-`);
+`;
 
 @connectStore(store)
 @adoptedStyle(styles)
@@ -47,7 +45,6 @@ class DecoratorGemElement extends GemElement {
   @state openState: boolean;
   @part headerPart: string;
   @slot bodySlot: string;
-  inputRef = createRef<HTMLElement>();
   renderCount = 0;
   render() {
     this.renderCount++;
@@ -99,13 +96,13 @@ describe('装饰器', () => {
     expect(el.propData).to.eql({ value: 'prop' });
     expect(el.openState).to.equal(false);
     expect(el.headerPart).to.equal('header-part');
-    expect(el.inputRef.ref.startsWith('ref-')).to.equal(true);
     expect(el.bodySlot).to.equal('body-slot');
-    expect(el).shadowDom.to.equal('attr: attr, disabled: true, count: 2, prop: prop');
+    expect(el.shadowRoot?.textContent).to.equal('attr: attr, disabled: true, count: 2, prop: prop');
     store({ a: 3 });
     await Promise.resolve();
     expect(el.renderCount).to.equal(3);
     el.sayHi(2);
+    await Promise.resolve();
     expect(el.renderCount).to.equal(3);
     expect(a).to.equal(2);
   });

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

@@ -1,16 +1,20 @@
-import { expect, fixture } from '@open-wc/testing';
-
-import { attribute, customElement, property } from '../../lib/decorators';
-import { GemElement, html, createRef } from '../../lib/element';
+import { expect, fixture } from '../utils';
+import { attribute, customElement, emitter, mounted, property, type Emitter } from '../../lib/decorators';
+import { GemElement, html, createRef, createState } from '../../lib/element';
 
 @customElement('app-children')
 export class Children extends GemElement {
   @property value?: { value: number };
   @attribute attr: string;
+  @emitter sayHi: Emitter<null>;
+
   inputRef = createRef<HTMLInputElement>();
 
+  @mounted()
+  #init = () => this.sayHi();
+
   render() {
-    return html`<input ref=${this.inputRef.ref} />`;
+    return html`<input ${this.inputRef} />`;
   }
 }
 
@@ -18,20 +22,25 @@ export class Children extends GemElement {
 export class App extends GemElement {
   childrenRef1 = createRef<Children>();
   childrenRef2 = createRef<Children>();
+
+  // 还未 mounted, 不应该发生错误
+  #state = createState({});
+  #onSayHi = () => this.#state();
+
   render() {
     return html`
-      <app-children ref=${this.childrenRef1.ref} .value=${{ value: 1 }} attr="1"></app-children>
-      <app-children ref=${this.childrenRef2.ref} .value=${{ value: 2 }} attr="2"></app-children>
+      <app-children ${this.childrenRef1} .value=${{ value: 1 }} attr="1" @say-hi=${this.#onSayHi}></app-children>
+      <app-children ${this.childrenRef2} .value=${{ value: 2 }} attr="2"></app-children>
     `;
   }
 }
 describe('多个 gem element 一起工作', () => {
   it('ref & prop & attr', async () => {
     const el: App = await fixture(html`<app-root></app-root>`);
-    const children1 = el.childrenRef1.element!;
-    const children2 = el.childrenRef2.element!;
-    const input1 = children1.inputRef.element!;
-    const input2 = children2.inputRef.element!;
+    const children1 = el.childrenRef1.value!;
+    const children2 = el.childrenRef2.value!;
+    const input1 = children1.inputRef.value!;
+    const input2 = children2.inputRef.value!;
     expect(input1 !== input2).to.equal(true);
     expect(children1.value).to.eql({ value: 1 });
     expect(children2.value).to.eql({ value: 2 });

package/src/test/history.test.ts

@@ -1,7 +1,7 @@
-import { expect, aTimeout } from '@open-wc/testing';
-
 import { history } from '../lib/history';
 
+import { expect, aTimeout } from './utils';
+
 describe('history 测试', () => {
   it('hash', async () => {
     const historyLength = window.history.length;

package/src/test/store.test.ts

@@ -1,13 +1,13 @@
-import { expect, aTimeout } from '@open-wc/testing';
+import { _StoreListenerMap, createStore, connect } from '../lib/store';
 
-import { StoreListenerMap, createStore, connect } from '../lib/store';
+import { expect, aTimeout } from './utils';
 
 describe('store 测试', () => {
   it('create store', () => {
     const origin = { a: 1 };
     const store = createStore(origin);
     expect({ ...store }).to.deep.equal(origin);
-    expect(!!StoreListenerMap.get(store)).to.equal(true);
+    expect(!!_StoreListenerMap.get(store)).to.equal(true);
   });
   it('update store', async () => {
     const store = createStore({ a: 1 });

package/src/test/utils.test.ts

@@ -1,10 +1,7 @@
-import { expect } from '@open-wc/testing';
-
-import { createCSSSheet, SheetToken } from '../lib/element';
+import { css, SheetToken } from '../lib/element';
 import {
   LinkedList,
   QueryString,
-  css,
   raw,
   styled,
   styleMap,
@@ -13,6 +10,8 @@ import {
   absoluteLocation,
 } from '../lib/utils';
 
+import { expect } from './utils';
+
 declare global {
   interface CSSRuleList {
     // only test style rule
@@ -81,12 +80,12 @@ describe('utils 测试', () => {
     expect(new QueryString({ a: 1 }).toString()).to.equal('?a=1');
     expect(new QueryString(query).toString()).to.equal(query.toString());
   });
-  it('createCSSSheet', () => {
-    const cssSheet = createCSSSheet(css`
+  it('css', () => {
+    const cssSheet = css`
       div {
         background: red;
       }
-    `);
+    `;
     const rules = cssSheet[SheetToken].getStyle().cssRules;
     expect(rules.item(0).selectorText).to.equal('div');
     expect(rules.item(0).style.background).to.equal('red');
@@ -101,9 +100,9 @@ describe('utils 测试', () => {
     expect(raw`<div>${'str'}</div>`).to.equal('<div>str</div>');
   });
   it('styled', () => {
-    const cssSheet = createCSSSheet({
-      $: styled.class``,
-      scroll: styled.class`
+    const cssSheet = css({
+      $: styled``,
+      scroll: styled`
         background: red;
         &:hover * {
           background: blue;

package/src/test/utils.ts

@@ -0,0 +1,22 @@
+import { expect, should, assert } from 'chai';
+
+import { render } from '../lib/element';
+import type { TemplateResult } from '../lib/element';
+
+export { expect, should, assert };
+
+export function nextFrame() {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
+}
+
+export function aTimeout(ms = 0) {
+  return new Promise((resolve) => setTimeout(() => resolve(null), ms));
+}
+
+export async function fixture(template: TemplateResult) {
+  const wrapper = document.createElement('div');
+  document.body.appendChild(wrapper);
+  render(template, wrapper);
+  await nextFrame();
+  return wrapper.firstElementChild as any;
+}

package/src/lib/directives.ts

@@ -1,6 +0,0 @@
-export { repeat } from 'lit-html/directives/repeat';
-
-// https://github.com/Polymer/lit-html/issues/1048
-export { guard } from 'lit-html/directives/guard';
-
-export { ifDefined } from 'lit-html/directives/if-defined';