fix: add missing deps

close #45
escwxyz · Oct 7, 2024 · 9c8d2b0 · 9c8d2b0
1 parent b0b23a5
commit 9c8d2b0
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 91 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
diff --git a/.github/workflows/unit_test.yaml b/.github/workflows/unit_test.yaml
@@ -19,7 +19,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'pnpm'
+          cache: "pnpm"
 
       - name: Install dependencies
         run: pnpm install

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,38 +1,62 @@
 # Changelog
+
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
 
+### Fixed
+
+- Fixed missing dependency for mdast-util-to-string
+
+### Changed
+
+- Improved performance by memoizing the callouts object checking function.
+- Better handling of unsupported callout types.
+
 ## 1.4.0 - 2024-08-28
+
 ### Changed
+
 - Update dependencies
 
 ### Fixed
+
 - Removed case sensitivity (#25)
 
 ## 1.3.2 - 2024-07-16
+
 ### Changed
+
 - Added License notice for lucide icons
 
 ## 1.1.3 - 2023-04-02
+
 ### Fixed
+
 - Fixed empty div if there's no remaining content (#3).
 
 ## 1.1.2 - 2023-04-02
+
 ### Changed
+
 - Update readme.md
 - Update dependencies
 
 ## 1.1.0-beta.0 - 2023-04-02
+
 ### Fixed
+
 - Improve github actions, to avoid missing built files.
 
 ## 1.0.7 - 2023-04-02
+
 ### Added
+
 - Update github actions for auto release and plublishing.
 
 ### Fixed
+
 - Fixed empty blockquote (#1).
diff --git a/README.md b/README.md
@@ -100,14 +100,14 @@ blockquote[data-callout="error"] {
 ```
 
 ```js
-const callout = document.querySelector('.callout-error');
+const callout = document.querySelector(".callout-error");
 
-callout.addEventListener('click', () => {
-  if(callout.getAttribute('data-expandable') === 'true') {
-    if(callout.getAttribute('data-expanded') === 'false') {
-      callout.setAttribute('data-expanded', 'true');
+callout.addEventListener("click", () => {
+  if (callout.getAttribute("data-expandable") === "true") {
+    if (callout.getAttribute("data-expanded") === "false") {
+      callout.setAttribute("data-expanded", "true");
     } else {
-      callout.setAttribute('data-expanded', 'false');
+      callout.setAttribute("data-expanded", "false");
     }
   }
 });

diff --git a/package.json b/package.json
@@ -39,11 +39,11 @@
     "tarballDir": "dist"
   },
   "dependencies": {
+    "mdast-util-to-string": "^4.0.0",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@types/unist": "^3.0.3",
-    "mdast-util-to-string": "^3.1.1",
     "prettier": "^3.3.3",
     "rehype-raw": "^7.0.0",
     "rehype-stringify": "^10.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.ts b/src/index.ts
@@ -113,11 +113,11 @@ export interface Config {
    * see https://help.obsidian.md/Editing+and+formatting/Callouts#Supported+types,
    *
    * you can customize it by overriding the same callout's icon or passing new callout with customized name and icon
-   * @date 3/23/2023 - 5:16:26 PM
+   * @date 10/07/2024 - 8:16:26 PM
    *
-   * @type {Record<string, unknown>}
+   * @type {Record<string, string>}
    */
-  callouts: Record<string, unknown>;
+  callouts: Record<string, string>;
 }
 
 /**
@@ -177,18 +177,32 @@ const REGEX = /^\[\!(\w+)\]([+-]?)/;
  * @param {string} str
  * @returns {boolean}
  */
-function containsKey(obj: Callout, str: string): boolean {
-  return Object.keys(obj).includes(str.toLowerCase());
-}
+const memoizedContainsKey = memoize((obj: Callout, str: string) =>
+  Object.keys(obj).includes(str.toLowerCase())
+);
 
+function memoize<T extends (...args: any[]) => any>(fn: T): T {
+  const cache = new Map();
+  return ((...args: Parameters<T>): ReturnType<T> => {
+    const key = JSON.stringify(args);
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+    const result = fn(...args);
+    cache.set(key, result);
+    return result;
+  }) as T;
+}
 /**
  * This is a remark plugin that parses Obsidian's callout syntax, and adds custom data attributes and classes to the HTML elements for further customizations.
  * @date 3/23/2023 - 5:16:26 PM
  *
  * @param {?Partial<Config>} [customConfig]
  * @returns {(tree: Node) => void}
  */
-const plugin: Plugin = (customConfig?: Partial<Config>): (tree: Node) => void => {
+const plugin: Plugin = (
+  customConfig?: Partial<Config>
+): ((tree: Node) => void) => {
   const mergedConfig = {
     ...defaultConfig,
     ...customConfig,
@@ -233,23 +247,38 @@ const plugin: Plugin = (customConfig?: Partial<Config>): (tree: Node) => void =>
 
           const expandCollapseSign = array?.at(2);
 
-          if (array && calloutType && containsKey(callouts, calloutType)) {
+          if (array && calloutType) {
+            let icon: string;
+            let validCalloutType: string;
+
+            if (memoizedContainsKey(callouts, calloutType)) {
+              icon = callouts[calloutType.toLowerCase()];
+              validCalloutType = calloutType.toLowerCase();
+            } else {
+              console.warn(
+                `Callout type ${calloutType} is not supported, using default icon for note instead.`
+              );
+              icon = callouts.note;
+              validCalloutType = "note";
+            }
+
             const title = array.input.slice(matched[0].length).trim();
 
             const titleHtmlNode: HtmlNode = {
               type: "html",
               data: {},
               value: `
-              <div class="${titleClass}">
-                <${iconTagName} class="${iconClass}">${callouts[calloutType.toLowerCase()]
-                }</${iconTagName}>
-             ${title &&
-                `<${titleTextTagName} class="${titleTextClass}">${titleTextTransform(
-                  title
-                )}</${titleTextTagName}>`
-                }
-              </div>
-              ${remainingContent && `<div class="${contentClass}">${remainingContent}</div>`}`,
+                <div class="${titleClass}">
+                  <${iconTagName} class="${iconClass}">${icon}</${iconTagName}>
+                  ${
+                    title &&
+                    `<${titleTextTagName} class="${titleTextClass}">${titleTextTransform(
+                      title
+                    )}</${titleTextTagName}>`
+                  }
+                </div>
+                ${remainingContent && `<div class="${contentClass}">${remainingContent}</div>`}
+              `,
             };
 
             (node as Parent).children.splice(0, 1, titleHtmlNode);
@@ -260,8 +289,9 @@ const plugin: Plugin = (customConfig?: Partial<Config>): (tree: Node) => void =>
             node.data = {
               hProperties: {
                 ...((node.data && node.data.hProperties) || {}),
-                className: blockquoteClass || `${dataAttribute}-${calloutType.toLowerCase()}`,
-                [`data-${dataAttribute}`]: calloutType,
+                className:
+                  blockquoteClass || `${dataAttribute}-${validCalloutType}`,
+                [`data-${dataAttribute}`]: validCalloutType,
                 "data-expandable": String(dataExpandable),
                 "data-expanded": String(dataExpanded),
               },