From f79e5367e6b600e51fd46ddbb57702b8ddb866c7 Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling Date: Wed, 6 Mar 2024 21:38:53 +0100 Subject: [PATCH] build: upgrade shiki and use markdownit --- .github/workflows/e2e.yml | 8 +- build/generateContentVitePlugin.js | 7 +- build/lib/angularHighlighter.js | 21 +- build/lib/generateContent.js | 31 +- build/lib/highlighter.js | 33 + build/lib/markdownToHtml.js | 29 - .../3-router-link/svelte4/sveltekit.md | 2 +- .../3-router-link/svelte5/sveltekit.md | 2 +- .../4-routing/svelte4/sveltekit.md | 2 +- .../4-routing/svelte5/sveltekit.md | 2 +- cypress/e2e/{initial.cy.ts => spec.cy.ts} | 9 + package.json | 31 +- pnpm-lock.yaml | 1114 +++++------------ 13 files changed, 368 insertions(+), 923 deletions(-) create mode 100644 build/lib/highlighter.js delete mode 100644 build/lib/markdownToHtml.js rename cypress/e2e/{initial.cy.ts => spec.cy.ts} (78%) diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index dac04f77..6424a202 100644 --- 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 \ No newline at end of file + build: pnpm build + start: pnpm preview --port 5173 + browser: chrome diff --git a/build/generateContentVitePlugin.js b/build/generateContentVitePlugin.js index 0f0b1a12..00ac4015 100644 --- 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 index 462fd154..d638c88c 100644 --- a/build/lib/angularHighlighter.js +++ b/build/lib/angularHighlighter.js @@ -1,25 +1,26 @@ +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( @@ -27,9 +28,7 @@ export function highlightAngularComponent(highlighter, fileContent, fileExt) { "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 index c662a852..02aabdc9 100644 --- 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 new file mode 100644 index 00000000..25a06047 --- /dev/null +++ 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 deleted file mode 100644 index 7f3eb8ea..00000000 --- a/build/lib/markdownToHtml.js +++ /dev/null @@ -1,29 +0,0 @@ -import withShiki from "@stefanprobst/remark-shiki"; -import fromMarkdown from "remark-parse"; -import * as shiki from "shiki"; -import { unified } from "unified"; -import toHast from "remark-rehype"; -import withHtmlInMarkdown from "rehype-raw"; -import toHtml from "rehype-stringify"; -import componentPartyShikiTheme from "./componentPartyShikiTheme.js"; - -export default async function markdownToHtml(code) { - async function createProcessor() { - const highlighter = await shiki.getHighlighter({ - theme: componentPartyShikiTheme, - }); - - const processor = unified() - .use(fromMarkdown) - .use(withShiki, { highlighter }) - .use(toHast, { allowDangerousHtml: true }) - .use(withHtmlInMarkdown) - .use(toHtml); - - return processor; - } - - const processor = await createProcessor(); - const vfile = await processor.process(code); - return String(vfile); -} diff --git a/content/7-webapp-features/3-router-link/svelte4/sveltekit.md b/content/7-webapp-features/3-router-link/svelte4/sveltekit.md index 7f5a0431..fb186562 100644 --- 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 SvelteKit +With [SvelteKit](https://kit.svelte.dev/docs/routing#pages) ```svelte