@mantou/gem 2.3.0 → 2.3.2

package/src/lib/reactive.ts

@@ -50,9 +50,6 @@ const ElementCSSState = 'gem-element';
 /** 渲染出错时在元素上派发，`@fallback` 处理时取消，SSR 时 `@server` 方法出错也会派发 */
 export const _RenderErrorEvent = 'gem@render-error';
 
-// fix modal-factory type error
-const updateTokenAlias = UpdateToken;
-
 // 渲染根中 light DOM 元素使用的样式表和使用次数，以及更新渲染根样式表的函数
 type RootSheets = { counts: Map<CSSStyleSheet, number>; update: () => void };
 const rootSheetsMap = new WeakMap<Document | ShadowRoot, RootSheets>();
@@ -268,8 +265,6 @@ export type Metadata = Partial<ShadowRootInit> & {
   definedCSSStates?: string[];
   definedParts?: string[];
   definedSlots?: string[];
-  /**@deprecated GemDevtools 在使用*/
-  definedRefs?: string[];
 };
 
 // global render task pool
@@ -323,7 +318,7 @@ export abstract class GemElement extends HTMLElement {
   #rendering?: boolean;
   #clearStyle?: (() => void) | undefined;
 
-  [updateTokenAlias]() {
+  [UpdateToken]() {
     this.#scheduleUpdate();
   }
 

package/src/lib/version.ts

@@ -1 +1 @@
-export const version = '2.3.0';
+export const version = '2.3.2';

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

@@ -1,6 +1,7 @@
-import type { GemActiveLinkElement } from '../../elements/link';
+import type { GemActiveLinkElement, GemLinkElement } from '../../elements/link';
 import { html } from '../../lib/element';
-import { expect, fixture } from '../utils';
+import { history } from '../../lib/history';
+import { expect, fixture, nextFrame } from '../utils';
 
 import '../../elements/link';
 
@@ -11,4 +12,13 @@ describe('GemLinkElement', () => {
     );
     expect(ele.active).to.equal(true);
   });
+  it('basePath', async () => {
+    const ele: GemLinkElement = await fixture(html`<gem-link href="/a">a</gem-link>`);
+    const getHref = () => new URL(ele.shadowRoot!.querySelector('a')!.href).pathname;
+    expect(getHref()).to.equal('/a');
+    history.basePath = '/base';
+    await nextFrame();
+    expect(getHref()).to.equal('/base/a');
+    history.basePath = '';
+  });
 });

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

@@ -1,4 +1,4 @@
-import type { GemReflectElement } from '../../elements/reflect';
+import { type GemReflectElement, getLogicalParent } from '../../elements/reflect';
 import { adoptedStyle, customElement } from '../../lib/decorators';
 import { css, GemElement, html } from '../../lib/element';
 import { expect, fixture, nextFrame } from '../utils';
@@ -34,4 +34,23 @@ describe('GemReflectElement', () => {
     reflect.remove();
     expect(!!document.querySelector('#one')).to.equal(false);
   });
+
+  it('logical parent', async () => {
+    const reflect: GemReflectElement = await fixture(html`
+      <gem-reflect .target=${document.body}><div id="three"><span></span></div></gem-reflect>
+    `);
+    const div = document.body.querySelector('#three')!;
+    expect(getLogicalParent(div)).to.equal(reflect);
+    expect(getLogicalParent(div.firstElementChild!)).to.equal(div);
+    // 移动后插入片段的节点
+    const added = document.createElement('p');
+    div.after(added);
+    expect(getLogicalParent(added)).to.equal(reflect);
+    // 片段外的节点
+    expect(getLogicalParent(reflect.parentElement!)).to.equal(document.body);
+    const host = document.createElement('div');
+    const child = host.attachShadow({ mode: 'open' }).appendChild(document.createElement('p'));
+    expect(getLogicalParent(child)).to.equal(host);
+    reflect.remove();
+  });
 });

package/src/test/elements/unsafe.test.ts

@@ -0,0 +1,22 @@
+import type { GemUnsafeElement } from '../../elements/unsafe';
+import { css, html } from '../../lib/element';
+import { expect, fixture, nextFrame } from '../utils';
+
+import '../../elements/unsafe';
+
+describe('GemUnsafeElement', () => {
+  it('渲染 HTML 字符串，应用样式', async () => {
+    const ele: GemUnsafeElement = await fixture(
+      html`<gem-unsafe html="<p>a</p>" .styles=${css`p { color: rgb(255, 0, 0); }`}></gem-unsafe>`,
+    );
+    const color = () => getComputedStyle(ele.shadowRoot!.querySelector('p')!).color;
+    expect(ele.shadowRoot!.querySelector('p')!.textContent).to.equal('a');
+    expect(color()).to.equal('rgb(255, 0, 0)');
+    ele.styles = 'p { color: rgb(0, 0, 255); }';
+    await nextFrame();
+    expect(color()).to.equal('rgb(0, 0, 255)');
+    ele.html = '<b>b</b>';
+    await nextFrame();
+    expect(ele.shadowRoot!.innerHTML).to.equal('<b>b</b>');
+  });
+});

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

@@ -13,6 +13,7 @@ import {
   attribute,
   connectStore,
   customElement,
+  effect,
   emitter,
   mounted,
   property,
@@ -85,6 +86,92 @@ describe('没有 Shadow DOM 的 gem 元素', () => {
   });
 });
 
+const scopeStyle = css`
+  p {
+    text-decoration: underline;
+  }
+`;
+
+@customElement('scope-child-demo')
+class _ScopeChildDemo extends GemElement {
+  render() {
+    return html`<p>child</p>`;
+  }
+}
+
+@customElement('scope-gem-demo')
+@adoptedStyle(scopeStyle)
+class ScopeGemDemo extends GemElement {
+  render() {
+    return html`<p>own</p><article><p>nested</p></article><scope-child-demo></scope-child-demo>`;
+  }
+}
+
+@customElement('closed-gem-demo')
+@adoptedStyle(css`
+  div {
+    color: rgb(255, 0, 0);
+  }
+`)
+@shadow({ mode: 'closed' })
+class ClosedGemDemo extends GemElement {
+  render() {
+    return html`<div>closed</div>`;
+  }
+}
+
+describe('元素样式的作用域', () => {
+  it('Light DOM 的样式不影响有模版的子元素', async () => {
+    const el: ScopeGemDemo = await fixture(html`<scope-gem-demo></scope-gem-demo>`);
+    const decoration = (selector: string) => getComputedStyle(el.querySelector(selector)!).textDecorationLine;
+    expect(decoration(':scope > p')).to.equal('underline');
+    expect(decoration('article > p')).to.equal('underline');
+    expect(decoration('scope-child-demo > p')).to.equal('none');
+  });
+  it('closed Shadow DOM', async () => {
+    const el: ClosedGemDemo = await fixture(html`<closed-gem-demo></closed-gem-demo>`);
+    expect(el.shadowRoot).to.equal(null);
+    const div = el.internals.shadowRoot!.querySelector('div')!;
+    expect(getComputedStyle(div).color).to.equal('rgb(255, 0, 0)');
+  });
+});
+
+@customElement('effect-ref-demo')
+class EffectRefDemo extends GemElement {
+  #state = createState({ hidden: false });
+  ref = createRef<HTMLTextAreaElement>();
+  values: (HTMLTextAreaElement | undefined)[] = [];
+
+  @effect((i) => [i.ref.value])
+  #observe = ([ele]: [HTMLTextAreaElement | undefined]) => {
+    this.values.push(ele);
+  };
+
+  toggle = () => this.#state({ hidden: !this.#state.hidden });
+
+  render() {
+    return this.#state.hidden ? null : html`<textarea ${this.ref}></textarea>`;
+  }
+}
+
+describe('effect 依赖 ref', () => {
+  it('元素重新创建时执行', async () => {
+    const el: EffectRefDemo = await fixture(html`<effect-ref-demo></effect-ref-demo>`);
+    const [first] = el.values;
+    expect(first).to.be.instanceOf(HTMLTextAreaElement);
+    // 元素移除时 ref 不会清空，保留最后的元素
+    el.toggle();
+    await nextFrame();
+    expect(el.ref.value).to.equal(first);
+    expect(el.values).to.eql([first]);
+    el.toggle();
+    await nextFrame();
+    expect(el.values.length).to.equal(2);
+    expect(el.values[1]).to.be.instanceOf(HTMLTextAreaElement);
+    expect(el.values[1]).not.to.equal(first);
+  });
+});
+
 class LifecycleGemElement extends GemElement {
   @attribute appTitle = 'default';
   @attribute appTitle2 = 'default2';

package/src/test/utils.test.ts

@@ -145,6 +145,10 @@ describe('utils 测试', () => {
     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');
+    // 有 `-` 的 key 保留原样，可以用来扩展其他样式表的类名
+    const extended = css({ [cssSheet.scroll]: styled`font-weight: bold;` });
+    expect(extended[cssSheet.scroll]).to.equal(cssSheet.scroll);
+    expect(extended[SheetToken].getStyle().cssRules.item(0).selectorText).to.equal(`.${cssSheet.scroll}`);
   });
   it('styleMap/classMap/exportPartsMap', () => {
     expect(styleMap({ '--x': '1px', fontSize: '14px', content: `'*'` })).to.equal(