mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-25 18:26:05 +08:00
refactor(core): use lit customelement decorator (#7560)
Close: [BS-585](https://linear.app/affine-design/issue/BS-585/更新affine侧lit自定义yuan素的写法) ### What changes: - using `@customElement(xxx)` instead of `window.customElements.define(xxx)` - remove `registerOutlinePanelComponents` and `registerFramePanelComponents`, Related PR https://github.com/toeverything/blocksuite/pull/7700
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
import { html, LitElement } from 'lit';
|
import { html, LitElement } from 'lit';
|
||||||
|
import { customElement } from 'lit/decorators.js';
|
||||||
import { nanoid } from 'nanoid';
|
import { nanoid } from 'nanoid';
|
||||||
import { useCallback, useMemo, useState } from 'react';
|
import { useCallback, useMemo, useState } from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
@@ -24,6 +25,9 @@ export function createLitPortalAnchor(callback: (event: PortalEvent) => void) {
|
|||||||
return html`<lit-react-portal portalId=${id}></lit-react-portal>`;
|
return html`<lit-react-portal portalId=${id}></lit-react-portal>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const LIT_REACT_PORTAL = 'lit-react-portal';
|
||||||
|
|
||||||
|
@customElement(LIT_REACT_PORTAL)
|
||||||
class LitReactPortal extends LitElement {
|
class LitReactPortal extends LitElement {
|
||||||
portalId: string = '';
|
portalId: string = '';
|
||||||
|
|
||||||
@@ -69,11 +73,9 @@ class LitReactPortal extends LitElement {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.customElements.define('lit-react-portal', LitReactPortal);
|
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
'lit-react-portal': LitReactPortal;
|
[LIT_REACT_PORTAL]: LitReactPortal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
import { LitElement, type TemplateResult } from 'lit';
|
import { LitElement, type TemplateResult } from 'lit';
|
||||||
|
import { customElement } from 'lit/decorators.js';
|
||||||
import React, { createElement, type ReactNode } from 'react';
|
import React, { createElement, type ReactNode } from 'react';
|
||||||
|
|
||||||
import { createComponent } from './create-component';
|
import { createComponent } from './create-component';
|
||||||
|
|
||||||
|
@customElement('affine-lit-template-wrapper')
|
||||||
export class LitTemplateWrapper extends LitElement {
|
export class LitTemplateWrapper extends LitElement {
|
||||||
static override get properties() {
|
static override get properties() {
|
||||||
return {
|
return {
|
||||||
@@ -20,8 +22,6 @@ export class LitTemplateWrapper extends LitElement {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.customElements.define('affine-lit-template-wrapper', LitTemplateWrapper);
|
|
||||||
|
|
||||||
const TemplateWrapper = createComponent({
|
const TemplateWrapper = createComponent({
|
||||||
elementClass: LitTemplateWrapper,
|
elementClass: LitTemplateWrapper,
|
||||||
react: React,
|
react: React,
|
||||||
|
|||||||
Reference in New Issue
Block a user