fix: add prefer-dom-node-append rule (#5108)

.eslintrc.js

@@ -208,6 +208,7 @@ const config = {
     'unicorn/no-unnecessary-await': 'error',
     'unicorn/no-useless-fallback-in-spread': 'error',
     'unicorn/prefer-dom-node-dataset': 'error',
+    'unicorn/prefer-dom-node-append': 'error',
     'sonarjs/no-all-duplicated-branches': 'error',
     'sonarjs/no-element-overwrite': 'error',
     'sonarjs/no-empty-collection': 'error',

packages/frontend/component/src/components/block-hub/index.tsx

@@ -12,7 +12,7 @@ export const RootBlockHub = () => {
         if (div.hasChildNodes()) {
           div.removeChild(div.firstChild as ChildNode);
         }
-        div.appendChild(blockHub);
+        div.append(blockHub);
       }
     }
   }, [blockHub]);

packages/frontend/component/src/components/block-suite-editor/index.tsx

@@ -134,7 +134,7 @@ const BlockSuiteEditorImpl = ({
     if (!container) {
       return;
     }
-    container.appendChild(editor);
+    container.append(editor);
     return () => {
       container.removeChild(editor);
     };

packages/frontend/component/src/ui/checkbox/checkbox.tsx

@@ -84,7 +84,7 @@ export const playCheckAnimation = async (refElement: Element) => {
     border-radius: 50%;
     font-size: inherit;
   `;
-  refElement.appendChild(sparkingEl);
+  refElement.append(sparkingEl);
 
   await sparkingEl.animate(
     [

packages/frontend/component/src/ui/toast/toast.ts

@@ -46,7 +46,7 @@ const createToastContainer = (portal?: HTMLElement) => {
     data-testid="affine-toast-container"
   ></div>`;
   const element = htmlToElement<HTMLDivElement>(template);
-  portal.appendChild(element);
+  portal.append(element);
   return element;
 };
 
@@ -98,7 +98,7 @@ const createAndShowNewToast = (
   const toastElement = htmlToElement<HTMLDivElement>(toastTemplate);
   // message is not trusted
   toastElement.textContent = message;
-  ToastContainer.appendChild(toastElement);
+  ToastContainer.append(toastElement);
   logger.debug(`toast with message: "${message}"`);
   window.dispatchEvent(
     new CustomEvent('affine-toast:emit', { detail: message })

packages/frontend/core/src/bootstrap/register-plugins.ts

@@ -106,7 +106,7 @@ export async function bootstrapPluginSystem(
                         const style = document.createElement('style');
                         style.setAttribute('plugin-id', pluginName);
                         style.textContent = text;
-                        document.head.appendChild(style);
+                        document.head.append(style);
                       });
                     }
                     return null;

packages/frontend/core/src/components/page-detail-editor.tsx

@@ -174,7 +174,7 @@ const EditorWrapper = memo(function EditorWrapper({
           div.setAttribute('plugin-id', id);
           const cleanup = editorItem(div, editor);
           assertExists(parent);
-          document.body.appendChild(div);
+          document.body.append(div);
           return () => {
             cleanup();
             document.body.removeChild(div);
@@ -235,7 +235,7 @@ const PluginContentAdapter = memo<PluginContentAdapterProps>(
           }
           const div = document.createElement('div');
           const cleanup = windowItem(div);
-          root.appendChild(div);
+          root.append(div);
           if (abortController.signal.aborted) {
             cleanup();
             root.removeChild(div);

packages/frontend/core/src/components/pure/plugin-header/index.tsx

@@ -25,7 +25,7 @@ export const PluginHeader = () => {
               div.setAttribute('plugin-id', pluginName);
               startTransition(() => {
                 const cleanup = create(div);
-                root.appendChild(div);
+                root.append(div);
                 addCleanup(pluginName, () => {
                   pluginsRef.current = pluginsRef.current.filter(
                     name => name !== pluginName

packages/plugins/image-preview/src/component/index.tsx

@@ -231,7 +231,7 @@ const ImagePreviewModalImpl = (
         const a = document.createElement('a');
         a.href = downloadUrl;
         a.download = block.id ?? 'image';
-        document.body.appendChild(a);
+        document.body.append(a);
         a.click();
         document.body.removeChild(a);
       }

packages/plugins/outline/src/app.tsx

@@ -40,7 +40,7 @@ const Outline = () => {
       ref={useCallback((container: HTMLDivElement | null) => {
         if (container) {
           assertExists(tocPanelRef.current);
-          container.appendChild(tocPanelRef.current);
+          container.append(tocPanelRef.current);
         }
       }, [])}
     />