Use official heading-linking strategy rather than custom (rehype-{slug,autolink-headings})

packages/repl-sdk/package.json

@@ -41,6 +41,7 @@
   ],
   "license": "MIT",
   "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.28.6",
     "@nullvoxpopuli/eslint-configs": "^5.4.0",
     "@tsconfig/ember": "^3.0.7",
     "@types/common-tags": "^1.8.4",
@@ -53,41 +54,43 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "4.5.4",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.18"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "6.20.0",
-    "@codemirror/commands": "6.10.1",
+    "@codemirror/autocomplete": "^6.20.0",
+    "@codemirror/commands": "^6.10.1",
     "@codemirror/lang-html": "^6.4.11",
-    "@codemirror/lang-javascript": "6.2.4",
-    "@codemirror/lang-markdown": "6.5.0",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-markdown": "^6.5.0",
     "@codemirror/lang-vue": "^0.1.3",
     "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/language": "^6.12.1",
     "@codemirror/language-data": "^6.5.2",
     "@codemirror/lint": "^6.9.2",
-    "@codemirror/search": "6.5.11",
-    "@codemirror/state": "6.5.3",
-    "@codemirror/view": "6.39.9",
+    "@codemirror/search": "^6.6.0",
+    "@codemirror/state": "^6.5.3",
+    "@codemirror/view": "^6.39.9",
     "@lezer/common": "^1.5.0",
     "@lezer/highlight": "^1.2.3",
     "@lezer/html": "^1.3.13",
     "@lezer/markdown": "^1.6.3",
     "@replit/codemirror-lang-svelte": "^6.0.0",
-    "@shikijs/rehype": "^3.7.0",
+    "@shikijs/rehype": "^3.22.0",
     "change-case": "^5.4.4",
     "codemirror": "^6.0.2",
-    "codemirror-lang-glimdown": "workspace:*",
-    "codemirror-lang-glimmer": "workspace:*",
-    "codemirror-lang-glimmer-js": "workspace:*",
+    "codemirror-lang-glimdown": "workspace:^",
+    "codemirror-lang-glimmer": "workspace:^",
+    "codemirror-lang-glimmer-js": "workspace:^",
     "codemirror-lang-mermaid": "^0.5.0",
     "codemirror-languageserver": "^1.12.1",
     "comlink": "^4.4.2",
     "es-module-shims": "^2.8.0",
     "mdast": "^3.0.0",
     "mime": "^4.0.7",
     "package-name-regex": "^5.0.0",
+    "rehype-autolink-headings": "^7.1.0",
     "rehype-raw": "^7.0.0",
+    "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.1",
     "remark-parse": "^11.0.0",

packages/repl-sdk/src/compilers/markdown/build-compiler.js

@@ -1,7 +1,9 @@
 /**
  * @typedef {import('unified').Plugin} UPlugin
  */
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeRaw from 'rehype-raw';
+import rehypeSlug from 'rehype-slug';
 import rehypeStringify from 'rehype-stringify';
 import remarkGfm from 'remark-gfm';
 import remarkParse from 'remark-parse';
@@ -10,7 +12,6 @@ import { unified } from 'unified';
 import { visit } from 'unist-util-visit';
 
 import { GLIMDOWN_PREVIEW, GLIMDOWN_RENDER } from './const.js';
-import { headingId } from './heading-id.js';
 import { liveCodeExtraction } from './live-code-extraction.js';
 import { sanitizeForGlimmer } from './sanitize-for-glimmer.js';
 
@@ -20,7 +21,7 @@ import { sanitizeForGlimmer } from './sanitize-for-glimmer.js';
  * @returns {import('unified').Processor<import('hast').Root>}
  */
 export function buildCompiler(options) {
-  let compiler = unified().use(remarkParse).use(remarkGfm, { singleTilde: true }).use(headingId);
+  let compiler = unified().use(remarkParse).use(remarkGfm, { singleTilde: true });
 
   /**
    * If this were "use"d after `remarkRehype`,
@@ -65,7 +66,10 @@ export function buildCompiler(options) {
   // However, it also changes all the nodes, so we need another pass
   // to make sure our Glimmer-aware nodes are in tact
   // @ts-ignore - unified processor types are complex and change as plugins are added
-  compiler = compiler.use(remarkRehype, { allowDangerousHtml: true });
+  compiler = compiler
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypeSlug)
+    .use(rehypeAutolinkHeadings);
 
   // Convert invocables to raw format, so Glimmer can invoke them
   // @ts-ignore - unified processor types are complex and change as plugins are added

packages/repl-sdk/tests-self/package.json

@@ -11,19 +11,22 @@
   },
   "author": "NullvoxPopuli",
   "devDependencies": {
-    "@babel/plugin-proposal-decorators": "^7.28.0",
+    "@babel/plugin-proposal-decorators": "^7.29.0",
     "@babel/standalone": "file:babel-standalone.tgz",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.12",
     "@nullvoxpopuli/eslint-configs": "^5.4.0",
     "@testing-library/dom": "^10.4.1",
     "@tsconfig/ember": "^3.0.7",
     "@types/common-tags": "^1.8.4",
     "@types/mdast": "^4.0.4",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/ui": "3.2.4",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-webdriverio": "^4.0.18",
+    "@vitest/ui": "4.0.18",
     "@vue/repl": "^4.6.1",
     "mdast": "^3.0.0",
     "mermaid": "^11.8.1",
-    "playwright": "^1.54.0",
+    "playwright": "^1.58.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rehype-raw": "^7.0.0",
@@ -36,7 +39,7 @@
     "unist-util-visit": "^5.0.0",
     "vite": "^7.3.1",
     "vite-plugin-wasm": "^3.5.0",
-    "vitest": "^3.2.4",
+    "vitest": "^4.0.18",
     "vue": "^3.5.17",
     "webdriverio": "^9.17.0"
   },

packages/repl-sdk/tests-self/vitest.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vitest/config';
+import { webdriverio } from '@vitest/browser-webdriverio';
 
 export default defineConfig({
   test: {
@@ -7,7 +8,7 @@ export default defineConfig({
       provider: 'v8',
     },
     browser: {
-      provider: 'webdriverio',
+      provider: webdriverio(),
       // provider: 'playwright',
       enabled: true,
       instances: [