configure biome for remark drawio and autofix

biome.json

@@ -28,8 +28,7 @@
       "./packages/presentation/**",
       "./packages/preset-templates/**",
       "./packages/preset-themes/**",
-      "./packages/remark-attachment-refs/**",
-      "./packages/remark-drawio/**"
+      "./packages/remark-attachment-refs/**"
     ]
   },
   "formatter": {

packages/remark-drawio/.eslintignore

@@ -1,2 +1 @@
-/dist/**
-/types/**
+*

packages/remark-drawio/.eslintrc.cjs

@@ -1,5 +0,0 @@
-module.exports = {
-  extends: [
-    'weseek/react',
-  ],
-};

packages/remark-drawio/package.json

@@ -25,7 +25,7 @@
     "clean": "shx rm -rf dist",
     "dev": "vite build --mode dev",
     "watch": "pnpm run dev -w --emptyOutDir=false",
-    "lint:js": "eslint **/*.{js,jsx,ts,tsx}",
+    "lint:js": "biome check",
     "lint:styles": "stylelint --allow-empty-input \"src/**/*.scss\" \"src/**/*.css\"",
     "lint:typecheck": "vue-tsc --noEmit",
     "lint": "run-p lint:*"

packages/remark-drawio/src/components/DrawioViewer.tsx

@@ -1,6 +1,12 @@
 import {
-  type ReactNode, type JSX,
-  memo, useCallback, useEffect, useMemo, useRef, useState,
+  type JSX,
+  type ReactNode,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
 } from 'react';
 
 import { debounce } from 'throttle-debounce';
@@ -9,35 +15,36 @@ import type { IGraphViewerGlobal } from '..';
 import { generateMxgraphData } from '../utils/embed';
 import { isGraphViewerGlobal } from '../utils/global';
 
-
 import styles from './DrawioViewer.module.scss';
 
-
 declare global {
   // eslint-disable-next-line vars-on-top, no-var
   var GraphViewer: IGraphViewerGlobal;
 }
 
-
 export type DrawioViewerProps = {
-  diagramIndex: number,
-  bol: number,
-  eol: number,
-  children?: ReactNode,
-  onRenderingStart?: () => void,
-  onRenderingUpdated?: (mxfile: string | null) => void,
-}
+  diagramIndex: number;
+  bol: number;
+  eol: number;
+  children?: ReactNode;
+  onRenderingStart?: () => void;
+  onRenderingUpdated?: (mxfile: string | null) => void;
+};
 
 export type DrawioEditByViewerProps = {
-  bol: number,
-  eol: number,
-  drawioMxFile: string,
-}
+  bol: number;
+  eol: number;
+  drawioMxFile: string;
+};
 
 export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
   const {
-    diagramIndex, bol, eol, children,
-    onRenderingStart, onRenderingUpdated,
+    diagramIndex,
+    bol,
+    eol,
+    children,
+    onRenderingStart,
+    onRenderingUpdated,
   } = props;
 
   const drawioContainerRef = useRef<HTMLDivElement>(null);
@@ -56,7 +63,9 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
       return;
     }
 
-    const mxgraphs = drawioContainerRef.current.getElementsByClassName('mxgraph') as HTMLCollectionOf<HTMLElement>;
+    const mxgraphs = drawioContainerRef.current.getElementsByClassName(
+      'mxgraph',
+    ) as HTMLCollectionOf<HTMLElement>;
     if (mxgraphs.length > 0) {
       // This component should have only one '.mxgraph' element
       const div = mxgraphs[0];
@@ -73,15 +82,17 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
           GraphViewer.prototype.lightboxZIndex = 1055; // set $zindex-modal
           GraphViewer.prototype.toolbarZIndex = 1055; // set $zindex-modal
           GraphViewer.createViewerForElement(div);
-        }
-        catch (err) {
+        } catch (err) {
           setError(err);
         }
       }
     }
   }, []);
 
-  const renderDrawioWithDebounce = useMemo(() => debounce(200, renderDrawio), [renderDrawio]);
+  const renderDrawioWithDebounce = useMemo(
+    () => debounce(200, renderDrawio),
+    [renderDrawio],
+  );
 
   const mxgraphHtml = useMemo(() => {
     setError(undefined);
@@ -90,17 +101,17 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
       return '';
     }
 
-    const code = children instanceof Array
-      ? children
-        .filter(elem => (typeof elem === 'string')) // omit non-string elements (e.g. br element generated by line-breaks option)
-        .join('')
-      : children.toString();
+    const code =
+      children instanceof Array
+        ? children
+            .filter((elem) => typeof elem === 'string') // omit non-string elements (e.g. br element generated by line-breaks option)
+            .join('')
+        : children.toString();
 
     let mxgraphData;
     try {
       mxgraphData = generateMxgraphData(code);
-    }
-    catch (err) {
+    } catch (err) {
       setError(err);
     }
 
@@ -125,8 +136,8 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
     const container = drawioContainerRef.current;
     if (container == null) return;
 
-    const observerCallback = (mutationRecords:MutationRecord[]) => {
-      mutationRecords.forEach((record:MutationRecord) => {
+    const observerCallback = (mutationRecords: MutationRecord[]) => {
+      mutationRecords.forEach((record: MutationRecord) => {
         const target = record.target as HTMLElement;
 
         const mxgraphData = target.dataset.mxgraph;
@@ -174,18 +185,18 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
       data-end-line-number-of-markdown={eol}
     >
       {/* show error */}
-      { error != null && (
+      {error != null && (
         <span className="text-muted">
           <span className="material-symbols-outlined me-1">error</span>
           {error.name && <strong>{error.name}: </strong>}
           {error.message}
         </span>
-      ) }
+      )}
 
-      { error == null && (
+      {error == null && (
         // eslint-disable-next-line react/no-danger
         <div dangerouslySetInnerHTML={{ __html: mxgraphHtml }} />
-      ) }
+      )}
     </div>
   );
 });

packages/remark-drawio/src/interfaces/graph-viewer.ts

@@ -1,15 +1,18 @@
 export interface IGraphViewer {
-  checkVisibleState: boolean,
-  responsive: boolean,
-  lightboxZIndex: number,
-  toolbarZIndex: number,
-  xml: string,
+  checkVisibleState: boolean;
+  responsive: boolean;
+  lightboxZIndex: number;
+  toolbarZIndex: number;
+  xml: string;
 }
 
 export interface IGraphViewerGlobal {
-  processElements: () => void,
-  createViewerForElement: (element: Element, callback?: (viewer: IGraphViewer) => void) => void,
+  processElements: () => void;
+  createViewerForElement: (
+    element: Element,
+    callback?: (viewer: IGraphViewer) => void,
+  ) => void;
 
-  useResizeSensor: boolean,
-  prototype: IGraphViewer,
+  useResizeSensor: boolean;
+  prototype: IGraphViewer;
 }

packages/remark-drawio/src/services/renderer/remark-drawio.ts

@@ -1,16 +1,14 @@
 import type { Properties } from 'hast';
 import type { Schema as SanitizeOption } from 'hast-util-sanitize';
-import type {
-  Code, Node, Paragraph,
-} from 'mdast';
+import type { Code, Node, Paragraph } from 'mdast';
 import type { Plugin } from 'unified';
 import { visit } from 'unist-util-visit';
 
 const SUPPORTED_ATTRIBUTES = ['diagramIndex', 'bol', 'eol'];
 
 interface Data {
-  hName?: string,
-  hProperties?: Properties,
+  hName?: string;
+  hProperties?: Properties;
 }
 
 type Lang = 'drawio';
@@ -20,9 +18,10 @@ function isDrawioBlock(lang?: string | null): lang is Lang {
 }
 
 function rewriteNode(node: Node, index: number) {
-
   node.type = 'paragraph';
-  (node as Paragraph).children = [{ type: 'text', value: (node as Code).value }];
+  (node as Paragraph).children = [
+    { type: 'text', value: (node as Code).value },
+  ];
 
   const data: Data = node.data ?? (node.data = {});
   data.hName = 'drawio';
@@ -34,14 +33,12 @@ function rewriteNode(node: Node, index: number) {
   };
 }
 
-export const remarkPlugin: Plugin = function() {
-  return (tree) => {
-    visit(tree, 'code', (node: Code, index) => {
-      if (isDrawioBlock(node.lang)) {
-        rewriteNode(node, index ?? 0);
-      }
-    });
-  };
+export const remarkPlugin: Plugin = () => (tree) => {
+  visit(tree, 'code', (node: Code, index) => {
+    if (isDrawioBlock(node.lang)) {
+      rewriteNode(node, index ?? 0);
+    }
+  });
 };
 
 export const sanitizeOption: SanitizeOption = {

packages/remark-drawio/src/utils/embed.ts

@@ -1,7 +1,7 @@
 // transplanted from https://github.com/jgraph/drawio-tools/blob/d46977060ffad70cae5a9059a2cbfcd8bcf420de/tools/convert.html
 import pako from 'pako';
 
-const unconpressedDataRegexp = new RegExp('<mxGraphModel');
+const unconpressedDataRegexp = /<mxGraphModel/;
 const validateUncompressedData = (input: string): boolean => {
   return unconpressedDataRegexp.test(input);
 };
@@ -11,24 +11,24 @@ const validateCompressedData = (input: string): boolean => {
 
   try {
     data = Buffer.from(data, 'base64').toString('binary');
-  }
-  catch (e) {
+  } catch (e) {
     throw new Error(`Base64 to binary failed: ${e}`);
   }
 
   if (data.length > 0) {
     try {
-      data = pako.inflateRaw(Uint8Array.from(data, c => c.charCodeAt(0)), { to: 'string' });
-    }
-    catch (e) {
+      data = pako.inflateRaw(
+        Uint8Array.from(data, (c) => c.charCodeAt(0)),
+        { to: 'string' },
+      );
+    } catch (e) {
       throw new Error(`inflateRaw failed: ${e}`);
     }
   }
 
   try {
     data = decodeURIComponent(data);
-  }
-  catch (e) {
+  } catch (e) {
     throw new Error(`decodeURIComponent failed: ${e}`);
   }
 
@@ -40,14 +40,16 @@ const escapeHTML = (string): string => {
     return string;
   }
   return string.replace(/[&'`"<>]/g, (match): string => {
-    return {
-      '&': '&amp;',
-      "'": '&#x27;',
-      '`': '&#x60;',
-      '"': '&quot;',
-      '<': '&lt;',
-      '>': '&gt;',
-    }[match] ?? match;
+    return (
+      {
+        '&': '&amp;',
+        "'": '&#x27;',
+        '`': '&#x60;',
+        '"': '&quot;',
+        '<': '&lt;',
+        '>': '&gt;',
+      }[match] ?? match
+    );
   });
 };
 

packages/remark-drawio/src/utils/global.ts

@@ -1,5 +1,11 @@
 import type { IGraphViewerGlobal } from '../interfaces/graph-viewer';
 
-export const isGraphViewerGlobal = (val: unknown): val is IGraphViewerGlobal => {
-  return (typeof val === 'function' && 'createViewerForElement' in val && 'processElements' in val);
+export const isGraphViewerGlobal = (
+  val: unknown,
+): val is IGraphViewerGlobal => {
+  return (
+    typeof val === 'function' &&
+    'createViewerForElement' in val &&
+    'processElements' in val
+  );
 };

packages/remark-drawio/tsconfig.json

@@ -11,7 +11,5 @@
     "noImplicitAny": false,
     "noImplicitOverride": true
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }