From 662a3d4b76743a60eb73858896aec910df4cdae8 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Thu, 25 Jul 2024 07:45:41 +0000
Subject: [PATCH] refactor(core): use lit customelement decorator (#7560)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../component/src/lit-react/lit-portal/lite-portal.tsx    | 8 +++++---
 .../frontend/component/src/lit-react/to-react-node.ts     | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/component/src/lit-react/lit-portal/lite-portal.tsx b/packages/frontend/component/src/lit-react/lit-portal/lite-portal.tsx
index 8ac8899b81..9b2e97f979 100644
--- a/packages/frontend/component/src/lit-react/lit-portal/lite-portal.tsx
+++ b/packages/frontend/component/src/lit-react/lit-portal/lite-portal.tsx
@@ -1,4 +1,5 @@
 import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { nanoid } from 'nanoid';
 import { useCallback, useMemo, useState } from 'react';
 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>`;
 }
 
+export const LIT_REACT_PORTAL = 'lit-react-portal';
+
+@customElement(LIT_REACT_PORTAL)
 class LitReactPortal extends LitElement {
   portalId: string = '';
 
@@ -69,11 +73,9 @@ class LitReactPortal extends LitElement {
   }
 }
 
-window.customElements.define('lit-react-portal', LitReactPortal);
-
 declare global {
   interface HTMLElementTagNameMap {
-    'lit-react-portal': LitReactPortal;
+    [LIT_REACT_PORTAL]: LitReactPortal;
   }
 }
 
diff --git a/packages/frontend/component/src/lit-react/to-react-node.ts b/packages/frontend/component/src/lit-react/to-react-node.ts
index 88b7c17b39..10b69be11a 100644
--- a/packages/frontend/component/src/lit-react/to-react-node.ts
+++ b/packages/frontend/component/src/lit-react/to-react-node.ts
@@ -1,8 +1,10 @@
 import { LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import React, { createElement, type ReactNode } from 'react';
 
 import { createComponent } from './create-component';
 
+@customElement('affine-lit-template-wrapper')
 export class LitTemplateWrapper extends LitElement {
   static override get properties() {
     return {
@@ -20,8 +22,6 @@ export class LitTemplateWrapper extends LitElement {
   }
 }
 
-window.customElements.define('affine-lit-template-wrapper', LitTemplateWrapper);
-
 const TemplateWrapper = createComponent({
   elementClass: LitTemplateWrapper,
   react: React,