build: upgrade shiki and use markdownit

matschik · Mar 6, 2024 · f79e536 · f79e536
1 parent f4fa6ed
commit f79e536
Show file tree

Hide file tree

Showing 13 changed files with 368 additions and 923 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -6,13 +6,11 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      # Install npm dependencies, cache them correctly
-      # and run all Cypress tests
       - name: Setup PNPM
         uses: pnpm/action-setup@v2.2.1
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:
-            build: pnpm build
-            start: pnpm preview --port 5173
-            browser: chrome
+          build: pnpm build
+          start: pnpm preview --port 5173
+          browser: chrome
diff --git a/build/generateContentVitePlugin.js b/build/generateContentVitePlugin.js
@@ -44,7 +44,12 @@ export default function pluginGenerateFrameworkContent() {
   return {
     name,
     async buildStart() {
-      await build();
+      try {
+        await build();
+      } catch (error) {
+        console.error(error);
+        throw error;
+      }
     },
     async buildEnd() {
       fsContentWatcher && (await fsContentWatcher.close());

diff --git a/build/lib/angularHighlighter.js b/build/lib/angularHighlighter.js
@@ -1,35 +1,34 @@
+import { codeToHighlightCodeHtml } from "./highlighter.js";
+
 export function mustUseAngularHighlighter(fileContent) {
   return (
     fileContent.includes("@angular/core") && fileContent.includes("template")
   );
 }
 
-export function highlightAngularComponent(highlighter, fileContent, fileExt) {
+export async function highlightAngularComponent(fileContent, fileExt) {
   const templateCode = getAngularTemplateCode(fileContent);
 
   let codeHighlighted = "";
   if (templateCode) {
     const componentWithEmptyTemplate =
       removeAngularTemplateContent(fileContent);
-    const templateCodeHighlighted = highlighter(templateCode, {
-      lang: "html",
-    });
+    const templateCodeHighlighted = await codeToHighlightCodeHtml(
+      templateCode,
+      "html"
+    );
 
-    const componentWithoutTemplateHighlighted = highlighter(
+    const componentWithoutTemplateHighlighted = await codeToHighlightCodeHtml(
       componentWithEmptyTemplate,
-      {
-        lang: fileExt,
-      }
+      fileExt
     );
 
     codeHighlighted = componentWithoutTemplateHighlighted.replace(
       "template",
       "template: `" + removeCodeWrapper(templateCodeHighlighted) + "`,"
     );
   } else {
-    codeHighlighted = highlighter(fileContent, {
-      lang: fileExt,
-    });
+    codeHighlighted = codeToHighlightCodeHtml(fileContent, fileExt);
   }
 
   return codeHighlighted;

diff --git a/build/lib/generateContent.js b/build/lib/generateContent.js
@@ -2,16 +2,17 @@ import fs from "node:fs/promises";
 import { packageDirectory } from "pkg-dir";
 import path from "node:path";
 import kebabCase from "lodash.kebabcase";
-import { getHighlighter } from "shiki";
 import FRAMEWORKS from "../../frameworks.mjs";
 import frameworkPlayground from "./playground/index.js";
-import componentPartyShikiTheme from "./componentPartyShikiTheme.js";
 import prettier from "prettier";
-import markdownToHtml from "./markdownToHtml.js";
 import {
   highlightAngularComponent,
   mustUseAngularHighlighter,
 } from "./angularHighlighter.js";
+import {
+  codeToHighlightCodeHtml,
+  markdownToHighlightedHtml,
+} from "./highlighter.js";
 
 async function pathExists(path) {
   try {
@@ -23,20 +24,6 @@ async function pathExists(path) {
 }
 
 export default async function generateContent() {
-  const highlighter = await getHighlighter({
-    theme: componentPartyShikiTheme,
-    langs: [
-      "javascript",
-      "svelte",
-      "html",
-      "hbs",
-      "tsx",
-      "jsx",
-      "vue",
-      "marko",
-    ],
-  });
-
   const rootDir = await packageDirectory();
   const contentPath = path.join(rootDir, "content");
   const sectionDirNames = await fs.readdir(contentPath);
@@ -107,16 +94,12 @@ export default async function generateContent() {
             };
 
             if (ext === "md") {
-              file.contentHtml = await markdownToHtml(content);
+              file.contentHtml = await markdownToHighlightedHtml(content);
               frameworkSnippet.markdownFiles.push(file);
             } else {
               file.contentHtml = mustUseAngularHighlighter(content)
-                ? highlightAngularComponent(
-                    highlighter.codeToHtml,
-                    content,
-                    ext
-                  )
-                : highlighter.codeToHtml(content, { lang: ext });
+                ? await highlightAngularComponent(content, ext)
+                : await codeToHighlightCodeHtml(content, ext);
 
               frameworkSnippet.files.push(file);
             }

diff --git a/build/lib/highlighter.js b/build/lib/highlighter.js
@@ -0,0 +1,33 @@
+import { getHighlighter } from "shiki";
+import MarkdownIt from "markdown-it";
+import Shiki from "@shikijs/markdown-it";
+import componentPartyShikiTheme from "./componentPartyShikiTheme.js";
+
+const highlighter = await getHighlighter({
+  theme: componentPartyShikiTheme,
+  langs: ["javascript", "svelte", "html", "hbs", "tsx", "jsx", "vue", "marko"],
+});
+
+const md = MarkdownIt({
+  html: true,
+});
+
+md.use(
+  await Shiki({
+    theme: componentPartyShikiTheme,
+  })
+);
+
+export async function codeToHighlightCodeHtml(code, lang) {
+  const html = await highlighter.codeToHtml(code, {
+    lang,
+    theme: componentPartyShikiTheme,
+  });
+
+  return html;
+}
+
+export async function markdownToHighlightedHtml(markdownText) {
+  const html = md.render(markdownText);
+  return html;
+}
diff --git a/build/lib/markdownToHtml.js b/build/lib/markdownToHtml.js
diff --git a/content/7-webapp-features/3-router-link/svelte4/sveltekit.md b/content/7-webapp-features/3-router-link/svelte4/sveltekit.md
@@ -1,4 +1,4 @@
-With <a href="https://kit.svelte.dev/docs/routing#pages">SvelteKit</a>
+With [SvelteKit](https://kit.svelte.dev/docs/routing#pages)
 
 ```svelte
 <ul>

diff --git a/content/7-webapp-features/3-router-link/svelte5/sveltekit.md b/content/7-webapp-features/3-router-link/svelte5/sveltekit.md
@@ -1,4 +1,4 @@
-With <a href="https://kit.svelte.dev/docs/routing#pages">SvelteKit</a>
+With [SvelteKit](https://kit.svelte.dev/docs/routing#pages)
 
 ```svelte
 <ul>

diff --git a/content/7-webapp-features/4-routing/svelte4/sveltekit.md b/content/7-webapp-features/4-routing/svelte4/sveltekit.md
@@ -1,4 +1,4 @@
-With <a href="https://kit.svelte.dev/docs/routing#pages">SvelteKit</a>
+With [SvelteKit](https://kit.svelte.dev/docs/routing#pages)
 
 ```
 |-- routes/

diff --git a/content/7-webapp-features/4-routing/svelte5/sveltekit.md b/content/7-webapp-features/4-routing/svelte5/sveltekit.md
@@ -1,4 +1,4 @@
-With <a href="https://kit.svelte.dev/docs/routing#pages">SvelteKit</a>
+With [SvelteKit](https://kit.svelte.dev/docs/routing#pages)
 
 ```
 |-- routes/

diff --git a/cypress/e2e/initial.cy.ts → cypress/e2e/spec.cy.ts b/cypress/e2e/initial.cy.ts → cypress/e2e/spec.cy.ts
@@ -21,6 +21,15 @@ describe("Initial frameworks", () => {
       "vue3,svelte4"
     );
   });
+
+  it("initial frameworks from query param 'f'", () => {
+    cy.visit("/?f=react,vue3");
+    cy.get("[data-framework-id-selected-list]").should(
+      "have.attr",
+      "data-framework-id-selected-list",
+      "react,vue3"
+    );
+  });
 });
 
 describe("pages", () => {

diff --git a/package.json b/package.json
@@ -31,19 +31,19 @@
     "@angular-eslint/eslint-plugin": "^17.2.1",
     "@angular-eslint/eslint-plugin-template": "^17.2.1",
     "@angular-eslint/template-parser": "^17.2.1",
-    "@angular/core": "^17.2.3",
+    "@angular/core": "^17.2.4",
     "@aurelia/router": "2.0.0-beta.12",
     "@babel/core": "^7.24.0",
     "@babel/eslint-parser": "^7.23.10",
     "@babel/plugin-proposal-decorators": "^7.24.0",
-    "@builder.io/qwik": "^1.4.5",
+    "@builder.io/qwik": "^1.5.1",
     "@lit/context": "^1.1.0",
     "@matschik/lz-string": "^0.0.2",
-    "@stefanprobst/remark-shiki": "^2.2.1",
+    "@shikijs/markdown-it": "^1.1.7",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@tailwindcss/typography": "^0.5.10",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "aurelia": "2.0.0-beta.12",
     "aurelia-framework": "^1.4.1",
     "autoprefixer": "^10.4.18",
@@ -54,8 +54,8 @@
     "eslint-plugin-ember": "^12.0.2",
     "eslint-plugin-lit": "^1.11.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-qwik": "^1.4.5",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-qwik": "^1.5.1",
+    "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-solid": "^0.13.1",
     "eslint-plugin-svelte": "^2.35.1",
     "eslint-plugin-vue": "^9.22.0",
@@ -67,35 +67,26 @@
     "lint-staged": "^15.2.2",
     "lit": "^3.1.2",
     "lodash.kebabcase": "^4.1.1",
+    "markdown-it": "^14.0.0",
     "micache": "^2.4.1",
     "pkg-dir": "^8.0.0",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rehype-raw": "^7.0.0",
-    "rehype-stringify": "^10.0.0",
-    "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.0",
-    "shiki": "^0.14.7",
+    "shiki": "^1.1.7",
     "solid-js": "^1.8.15",
     "start-server-and-test": "^2.0.3",
     "svelte": "^4.2.12",
     "svelte-preprocess": "^5.1.3",
     "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "unified": "^11.0.4",
-    "vite": "^5.1.4",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.5",
     "vite-plugin-html": "^3.2.2",
     "vue": "^3.4.21"
   },
-  "overrides": {
-    "@stefanprobst/remark-shiki": {
-      "shiki": "0.12.1"
-    }
-  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,vue}": "eslint --cache --fix",
     "**/svelte4/*.svelte": "eslint --cache --fix",