marked-abc 0.0.0

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "marked-abc",
+  "version": "0.0.0",
+  "description": "marked extension template",
+  "main": "./lib/index.esm.js",
+  "module": "./lib/index.esm.js",
+  "browser": "./lib/index.umd.js",
+  "type": "module",
+  "keywords": [
+    "marked",
+    "extension"
+  ],
+  "files": [
+    "lib/",
+    "src/"
+  ],
+  "exports": {
+    ".": {
+      "typescript": "./src/index.ts",
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.esm.js"
+    }
+  },
+  "scripts": {
+    "build": "npm run build:esbuild && npm run build:types",
+    "build:esbuild": "node esbuild.config.js",
+    "build:types": "tsc && dts-bundle-generator --export-referenced-types --project tsconfig.json -o lib/index.d.ts src/index.ts",
+    "format": "eslint --fix",
+    "lint": "eslint",
+    "test": "npm run build:esbuild && node --experimental-transform-types ./spec/test.config.js",
+    "test:cover": "npm run build:esbuild && node --experimental-transform-types --experimental-test-coverage ./spec/test.config.js -- --cover",
+    "test:only": "npm run build:esbuild && node --experimental-transform-types ./spec/test.config.js -- --only",
+    "test:types": "npm run build:types && tsc --project tsconfig-test-types.json && attw -P --entrypoints . --profile esm-only",
+    "test:update": "npm run build:esbuild && node --experimental-transform-types --test-update-snapshots ./spec/test.config.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MaddyGuthridge/marked-abc.git"
+  },
+  "author": "Maddy Guthridge <hello@maddyguthridge.com> (https://maddyguthridge.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/MaddyGuthridge/marked-abc/issues"
+  },
+  "homepage": "https://github.com/MaddyGuthridge/marked-abc#readme",
+  "peerDependencies": {
+    "marked": ">=17 <18"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.2",
+    "@markedjs/eslint-config": "^1.0.14",
+    "@types/dedent": "^0.7.2",
+    "dts-bundle-generator": "^9.5.1",
+    "esbuild": "^0.27.3",
+    "esbuild-plugin-umd-wrapper": "^3.0.0",
+    "eslint": "^10.0.2",
+    "marked": "^17.0.3",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "abcjs": "^6.6.2",
+    "dedent": "^1.7.1"
+  }
+}

package/src/index.ts

@@ -0,0 +1,120 @@
+import { type MarkedExtension } from 'marked';
+import * as abcjs from 'abcjs';
+import dedent from 'dedent';
+
+let scoreCounter = 0;
+
+// Source - https://stackoverflow.com/a/31638198/6335363
+// Posted by Dave Brown
+// Retrieved 2026-02-27, License - CC BY-SA 3.0
+/** Escape string for embedding in HTML */
+function escape(r: string) {
+  return r.replace(/[\x26\x0A\<>'"]/g, r => '&#' + r.charCodeAt(0) + ';');
+}
+
+// Requires browser to test
+/* node:coverage disable */
+// Source - https://stackoverflow.com/a/61511955/6335363
+// Posted by Yong Wang, modified by community. See post 'Timeline' for change history
+// Retrieved 2026-02-27, License - CC BY-SA 4.0
+/**
+ * Wait for the given element selector to match, then return a reference to it.
+ *
+ * Requires `document` to exist, so will not work outside of a browser context.
+ */
+function waitForElement(selector: string): Promise<Element> {
+  return new Promise(resolve => {
+    const match = document.querySelector(selector);
+    if (match) {
+      return resolve(match);
+    }
+
+    const observer = new MutationObserver(mutations => {
+      const match = document.querySelector(selector);
+      if (match) {
+        observer.disconnect();
+        resolve(match);
+      }
+    });
+
+    // If you get "parameter 1 is not of type 'Node'" error, see
+    // https://stackoverflow.com/a/77855838/492336
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+  });
+}
+/* node:coverage enable */
+
+/** Indent the given string with the given string for each line */
+function indent(s: string, indent: string) {
+  return s.split('\n').map(line => indent + line).join('\n');
+}
+
+/** Match `<score lang="ABC">` */
+const SCORE_OPEN = /<score\s+lang="(ABC|abc)"\s*>/;
+
+/** Match `<score lang="ABC">`, only at beginning of string */
+const SCORE_OPEN_BEGIN = new RegExp('^' + SCORE_OPEN.source);
+
+/** Match `</score>` */
+const SCORE_CLOSE = /<\/score>/;
+
+export type MarkedAbcOptions = {
+  /** Options to pass to ABCjs */
+  abcOptions?: abcjs.AbcVisualParams,
+  /** Sanitizer function */
+  sanitizer?: (text: string) => string,
+};
+
+export default function(options: MarkedAbcOptions = {}): MarkedExtension {
+  return {
+    extensions: [{
+      name: 'abcScore',
+      level: 'block',
+      // Marked never calls this and I do not know why
+      /* node:coverage disable */
+      start(src) { return SCORE_OPEN.exec(src)?.index; },
+      /* node:coverage enable */
+      tokenizer(src) {
+        if (!SCORE_OPEN_BEGIN.exec(src)) {
+          return undefined;
+        }
+        const endMatch = SCORE_CLOSE.exec(src);
+        if (endMatch === null) {
+          throw Error('Unterminated <score lang="ABC"> block');
+        }
+        const end = endMatch.index + endMatch[0].length;
+        const raw = src.slice(0, end);
+        const abc = raw.replace(SCORE_OPEN_BEGIN, '').replace(SCORE_CLOSE, '');
+        return {
+          type: 'abcScore',
+          raw,
+          abc,
+        };
+      },
+      renderer(token) {
+        // Increment score counter for each score rendered to ensure ID uniqueness
+        const eleId = `abc-score-${++scoreCounter}`;
+        const sanitize = options.sanitizer ?? escape;
+
+        // Unreachable during tests due to missing DOM
+        // JS moment: the coverage ignore comment is not included in its own ignore meaning I need
+        // to place it before this if statement, meaning the coverage of the if statement itself is
+        // not measured.
+        /* node:coverage ignore next 6 */
+        if ('document' in globalThis) {
+          waitForElement(`#${eleId}`).then((ele: Element) => {
+            abcjs.renderAbc(ele, token.abc, options.abcOptions);
+          });
+        }
+
+        return dedent`<div class="abc-score" id="${eleId}">
+        ${indent(sanitize(token.abc), '  ')}
+        </div>
+        `;
+      },
+    }],
+  };
+}