@mantou/gem 1.7.12 → 2.0.0-alpha.0

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

@@ -1,8 +1,18 @@
 import { fixture, expect, nextFrame } from '@open-wc/testing';
 
-import { GemElement, html } from '../../lib/element';
+import { createCSSSheet, createState, GemElement, html } from '../../lib/element';
 import { createStore, updateStore } from '../../lib/store';
-import { createCSSSheet, css } from '../../lib/utils';
+import { css } from '../../lib/utils';
+import {
+  adoptedStyle,
+  attribute,
+  boolattribute,
+  connectStore,
+  customElement,
+  numattribute,
+  property,
+  shadow,
+} from '../../lib/decorators';
 
 const store = createStore({
   a: 1,
@@ -14,47 +24,40 @@ const styles = createCSSSheet(css`
   }
 `);
 
+@connectStore(store)
+@adoptedStyle(styles)
+@customElement('gem-demo')
+@shadow()
 class GemDemo extends GemElement {
-  /** @attr */ attr: string | null;
-  /** @attr */ disabled: boolean;
-  /** @attr */ count: number;
-  /** @attr long-attr*/ longAttr: string;
-  static observedAttributes = ['attr', 'long-attr', 'disabled', 'count'];
-  static booleanAttributes = new Set(['disabled']);
-  static numberAttributes = new Set(['count']);
+  @attribute longAttr: string;
+  @attribute attr: string;
+  @boolattribute disabled: boolean;
+  @numattribute count: number;
+  @property prop = { value: '' };
 
-  static observedStores = [store];
-
-  prop = { value: '' };
-  static observedProperties = ['prop'];
-
-  static adoptedStyleSheets = [styles];
-  state = { value: '' };
+  #state = createState({ value: '' });
 
   renderCount = 0;
 
   render() {
-    const { attr, disabled, count, prop, state } = this;
+    const { attr, disabled, count, prop } = this;
+    const { value } = this.#state;
     this.renderCount++;
-    return html`attr: ${attr}, disabled: ${disabled}, count: ${count}, prop: ${prop.value}, state: ${state.value}`;
+    return html`attr: ${attr}, disabled: ${disabled}, count: ${count}, prop: ${prop.value}, state: ${value}`;
   }
 }
 
-customElements.define('gem-demo', GemDemo);
-
-class DeferGemElement extends GemElement {
-  /** @attr */ attr: string | null;
-  static observedAttributes = ['attr'];
-  prop: { value: string };
-}
-
 describe('基本 gem element 测试', () => {
   it('后定义元素', async () => {
     const el: DeferGemElement = await fixture(html`
       <defer-gem-demo attr="attr" .prop=${{ value: 'prop' }}></defer-gem-demo>
     `);
     expect(el.prop.value).to.equal('prop');
-    customElements.define('defer-gem-demo', DeferGemElement);
+    @customElement('defer-gem-demo')
+    class DeferGemElement extends GemElement {
+      @attribute attr: string;
+      @property prop: { value: string };
+    }
     await nextFrame();
     expect(el.prop.value).to.equal('prop');
     expect(el.attr).to.equal('attr');
@@ -63,11 +66,6 @@ describe('基本 gem element 测试', () => {
     const el = await fixture(html`<gem-demo attr="attr" .prop=${{ value: 'prop' }}></gem-demo>`);
     expect(window.getComputedStyle(el).backgroundColor).to.equal('rgb(255, 0, 0)');
   });
-  it('closestElement 方法', async () => {
-    const el: GemDemo = await fixture(html`<gem-demo attr="attr" .prop=${{ value: 'prop' }}></gem-demo>`);
-    expect(el.closestElement('body')).to.equal(document.body);
-    expect(el.closestElement(HTMLBodyElement)).to.equal(document.body);
-  });
   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: ');
@@ -78,13 +76,6 @@ describe('基本 gem element 测试', () => {
     expect(el.renderCount).to.equal(2);
   });
   it('读取 attr', async () => {
-    class G extends GemElement {
-      static observedAttributes = ['attr'];
-      attr!: string;
-      test = expect(this.attr).to.equal('attr');
-    }
-    customElements.define('temp-field-read-attr', G);
-    await fixture(html`<temp-field-read-attr attr="attr"></temp-field-read-attr>`);
     const el: GemDemo = await fixture(html`
       <gem-demo attr="attr" ?disabled=${true} count=${1} long-attr="hi"></gem-demo>
     `);
@@ -102,6 +93,7 @@ describe('基本 gem element 测试', () => {
     el.disabled = true;
     el.count = 2;
     await Promise.resolve();
+    // 相同值不触发更新
     el.attr = 'value';
     el.disabled = true;
     el.count = 2;
@@ -111,19 +103,14 @@ describe('基本 gem element 测试', () => {
     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: ');
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     el.attr = null;
     await Promise.resolve();
     expect(el.hasAttribute('attr')).to.equal(false);
   });
 
   it('读取 prop', async () => {
-    class G extends GemElement {
-      static observedPropertys = ['prop'];
-      prop!: any;
-      test = expect(this.prop).to.equal(undefined);
-    }
-    customElements.define('temp-field-read-prop', G);
-    await fixture(html`<temp-field-read-prop .prop=${{ value: 'prop' }}></temp-field-read-prop>`);
     const el: GemDemo = await fixture(html`<gem-demo .prop=${{ value: 'prop' }}></gem-demo>`);
     expect(el.prop).to.deep.equal({ value: 'prop' });
   });
@@ -143,12 +130,12 @@ describe('基本 gem element 测试', () => {
   it('修改 state', async () => {
     const el: GemDemo = await fixture(html`<gem-demo></gem-demo>`);
     expect(el.renderCount).to.equal(1);
-    el.setState({ value: 'asfasdf' });
-    el.setState({ value: 'state' });
-    el.setState({ value: 'state' });
+    el.internals.stateList[0]({ value: 'asfasdf' });
+    el.internals.stateList[0]({ value: 'state' });
+    el.internals.stateList[0]({ value: 'state' });
     await Promise.resolve();
     expect(el.renderCount).to.equal(2);
-    expect(el.state).to.deep.equal({ value: 'state' });
+    expect({ ...el.internals.stateList[0] }).to.deep.equal({ value: 'state' });
     expect(el).shadowDom.to.equal('attr: , disabled: false, count: 0, prop: , state: state');
   });
 

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

@@ -1,8 +1,10 @@
 import { fixture, expect } from '@open-wc/testing';
 
-import { GemElement, html } from '../../lib/element';
+import type { Metadata } from '../../lib/element';
+import { createCSSSheet, GemElement, html, createRef } from '../../lib/element';
 import { createStore, updateStore } from '../../lib/store';
-import { createCSSSheet, css } from '../../lib/utils';
+import { css } from '../../lib/utils';
+import type { Emitter } from '../../lib/decorators';
 import {
   attribute,
   property,
@@ -12,12 +14,10 @@ import {
   emitter,
   boolattribute,
   numattribute,
-  Emitter,
   part,
-  RefObject,
-  refobject,
   slot,
   state,
+  shadow,
 } from '../../lib/decorators';
 
 const store = createStore({
@@ -33,7 +33,12 @@ const styles = createCSSSheet(css`
 @connectStore(store)
 @adoptedStyle(styles)
 @customElement('decorator-gem-demo')
+@shadow()
 class DecoratorGemElement extends GemElement {
+  // 测试同名
+  @part static sayHi: string;
+  @slot static rankAttr: string;
+
   @emitter sayHi: Emitter;
   @attribute rankAttr: string;
   @boolattribute rankDisabled: boolean;
@@ -41,8 +46,8 @@ class DecoratorGemElement extends GemElement {
   @property propData = { value: '' };
   @state openState: boolean;
   @part headerPart: string;
-  @refobject inputRef: RefObject<HTMLElement>;
   @slot bodySlot: string;
+  inputRef = createRef<HTMLElement>();
   renderCount = 0;
   render() {
     this.renderCount++;
@@ -56,10 +61,6 @@ describe('装饰器', () => {
     const el = new DecoratorGemElement();
     expect(el.propData).to.eql({ value: '' });
     expect(el.getAttribute('rank-attr')).to.equal(null);
-    // v2 BUG
-    expect(el.rankAttr).to.equal('');
-    el.connectedCallback();
-    expect(el.getAttribute('rank-attr')).to.equal(null);
     expect(el.rankAttr).to.equal('');
 
     el.rankAttr = 'attr';
@@ -82,23 +83,23 @@ describe('装饰器', () => {
     `);
     updateStore(store, { a: 1 });
     await Promise.resolve();
-    expect(DecoratorGemElement.observedStores).to.eql([{ a: 1 }]);
-    expect(DecoratorGemElement.observedAttributes).to.eql(['rank-attr', 'rank-disabled', 'rank-count']);
-    expect(DecoratorGemElement.booleanAttributes).to.eql(new Set(['rank-disabled']));
-    expect(DecoratorGemElement.numberAttributes).to.eql(new Set(['rank-count']));
-    expect(DecoratorGemElement.defineEvents).to.eql(['say-hi']);
-    expect(DecoratorGemElement.defineCSSStates).to.eql(['open-state']);
-    expect(DecoratorGemElement.defineParts).to.eql(['header-part']);
-    expect(DecoratorGemElement.defineSlots).to.eql(['body-slot']);
-    expect(DecoratorGemElement.defineRefs?.[0].startsWith('input-ref-')).to.equal(true);
-    expect(DecoratorGemElement.observedProperties).to.eql(['propData']);
+    const metadata: Metadata = Reflect.get(DecoratorGemElement, Symbol.metadata);
+    expect(metadata.observedStores).to.eql([{ a: 1 }]);
+    expect(metadata.observedAttributes).to.eql(['rank-attr', 'rank-disabled', 'rank-count']);
+    expect(metadata.definedEvents).to.eql(['say-hi']);
+    expect(metadata.definedCSSStates).to.eql(['open-state']);
+    expect(metadata.definedParts).to.eql(['say-hi', 'header-part']);
+    expect(metadata.definedSlots).to.eql(['rank-attr', 'body-slot']);
+    expect(metadata.observedProperties).to.eql(['propData']);
+    expect(DecoratorGemElement.sayHi).to.equal('say-hi');
+    expect(DecoratorGemElement.rankAttr).to.equal('rank-attr');
     expect(el.rankAttr).to.equal('attr');
     expect(el.rankDisabled).to.equal(true);
     expect(el.rankCount).to.equal(2);
     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('input-ref-')).to.equal(true);
+    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');
     updateStore(store, { a: 3 });

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

@@ -1,13 +1,13 @@
 import { expect, fixture } from '@open-wc/testing';
 
-import { attribute, customElement, property, RefObject, refobject } from '../../lib/decorators';
-import { GemElement, html } from '../../lib/element';
+import { attribute, customElement, property } from '../../lib/decorators';
+import { GemElement, html, createRef } from '../../lib/element';
 
 @customElement('app-children')
 export class Children extends GemElement {
-  @refobject inputRef: RefObject<HTMLInputElement>;
   @property value?: { value: number };
   @attribute attr: string;
+  inputRef = createRef<HTMLInputElement>();
 
   render() {
     return html`<input ref=${this.inputRef.ref} />`;
@@ -16,8 +16,8 @@ export class Children extends GemElement {
 
 @customElement('app-root')
 export class App extends GemElement {
-  @refobject childrenRef1: RefObject<Children>;
-  @refobject childrenRef2: RefObject<Children>;
+  childrenRef1 = createRef<Children>();
+  childrenRef2 = createRef<Children>();
   render() {
     return html`
       <app-children ref=${this.childrenRef1.ref} .value=${{ value: 1 }} attr="1"></app-children>

package/src/test/utils.test.ts

@@ -1,13 +1,12 @@
 import { expect } from '@open-wc/testing';
 
+import { createCSSSheet, SheetToken } from '../lib/element';
 import {
   LinkedList,
   QueryString,
   css,
   raw,
-  createCSSSheet,
   styled,
-  SheetToken,
   styleMap,
   classMap,
   exportPartsMap,
@@ -84,13 +83,17 @@ describe('utils 测试', () => {
   });
   it('createCSSSheet', () => {
     const cssSheet = createCSSSheet(css`
-      body {
+      div {
         background: red;
       }
     `);
-    const rules = cssSheet[SheetToken].cssRules;
-    expect(rules.item(0).selectorText).to.equal('body');
+    const rules = cssSheet[SheetToken].getStyle().cssRules;
+    expect(rules.item(0).selectorText).to.equal('div');
     expect(rules.item(0).style.background).to.equal('red');
+    const bodyStyleSheet = cssSheet[SheetToken].getStyle(document.body);
+    expect(bodyStyleSheet.cssRules.item(0).cssText.startsWith('@scope (body)')).to.true;
+    expect(bodyStyleSheet).to.equal(bodyStyleSheet);
+    expect(bodyStyleSheet).not.to.equal(cssSheet[SheetToken].getStyle(document.documentElement));
   });
   it('raw/css', () => {
     const title: any = undefined;
@@ -99,30 +102,21 @@ describe('utils 测试', () => {
   });
   it('styled', () => {
     const cssSheet = createCSSSheet({
+      $: styled.class``,
       scroll: styled.class`
         background: red;
         &:hover * {
           background: blue;
         }
       `,
-      wrap: styled.id`
-        position: fixed;
-        animation: 3s infinite alternate slideIn;
-      `,
-      slideIn: styled.keyframes`
-        from {
-          transform: translateX(0%);
-        }
-      `,
     });
     expect(cssSheet.scroll.startsWith('scroll')).to.true;
-    const rules = cssSheet[SheetToken].cssRules;
-    expect(rules.item(0).selectorText.startsWith('.scroll')).to.true;
-    expect(rules.item(0).style.background).to.equal('red');
-    expect(rules.item(0).cssRules.item(0).selectorText).to.equal('&:hover *');
-    expect(rules.item(0).cssRules.item(0).style.background).to.equal('blue');
-    expect(rules.item(1).selectorText.startsWith('#wrap')).to.true;
-    expect((rules.item(2) as any).name).to.equal('slideIn');
+    const rules = cssSheet[SheetToken].getStyle().cssRules;
+    expect(rules.item(0).selectorText).to.equal(':scope, :host');
+    expect(rules.item(1).selectorText.startsWith('.scroll')).to.true;
+    expect(rules.item(1).style.background).to.equal('red');
+    expect(rules.item(1).cssRules.item(0).selectorText).to.equal('&:hover *');
+    expect(rules.item(1).cssRules.item(0).style.background).to.equal('blue');
   });
   it('styleMap/classMap/exportPartsMap', () => {
     expect(styleMap({ '--x': '1px', fontSize: '14px', content: `'*'` })).to.equal(
@@ -132,28 +126,4 @@ describe('utils 测试', () => {
     expect(exportPartsMap({ foo: 'bar', content: 'content', false: false })).to.equal(`,foo:bar,content,`);
     expect(exportPartsMap({ foo: 'bar', content: true })).to.equal(`,foo:bar,content,`);
   });
-  // it('createCSSAnimation', () => {
-  //   expect(createCSSAnimation([{ opacity: 0 }])).to.equal('100%{;opacity:0;}');
-  //   expect(createCSSAnimation([{ opacity: 1 }, { opacity: 0 }])).to.equal('0%{;opacity:1;}100%{;opacity:0;}');
-  //   expect(createCSSAnimation([{ opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 }])).to.equal(
-  //     '0%{;opacity:1;}70%{;opacity:0.1;}100%{;opacity:0;}',
-  //   );
-  //   expect(createCSSAnimation({ opacity: [0] })).to.equal('100%{;opacity:0;}');
-  //   expect(createCSSAnimation({ opacity: [1, 0] })).to.equal('0%{;opacity:1;}100%{;opacity:0;}');
-  //   expect(createCSSAnimation({ opacity: [1, 0], offset: [0, 0.7] })).to.equal(
-  //     '0%{;opacity:1;}70%{;opacity:0;}100%{;}',
-  //   );
-  //   expect(createCSSAnimation({ opacity: [1, 0], backgroundColor: ['red', 'yellow', 'green'] })).to.equal(
-  //     '0%{;opacity:1;background-color:red;}100%{;opacity:0;background-color:green;}50%{;background-color:yellow;}',
-  //   );
-  //   expect(
-  //     createCSSAnimation({
-  //       opacity: [1, 0],
-  //       backgroundColor: ['red', 'yellow', 'green'],
-  //       offset: [0, 0.7],
-  //     }),
-  //   ).to.equal(
-  //     '0%{;opacity:1;background-color:red;}70%{;opacity:0;background-color:yellow;}100%{;background-color:green;}',
-  //   );
-  // });
 });