@astrojs/markdoc 0.7.1 → 0.8.0

package/LICENSE

@@ -20,7 +20,6 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
-
 """
 This license applies to parts of the `packages/create-astro` and `packages/astro` subdirectories originating from the https://github.com/sveltejs/kit repository:
 
@@ -33,7 +32,6 @@ The above copyright notice and this permission notice shall be included in all c
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 """
 
-
 """
 This license applies to parts of the `packages/create-astro` and `packages/astro` subdirectories originating from the https://github.com/vitejs/vite repository:
 

package/components/TreeNode.ts

@@ -1,17 +1,17 @@
-import type { AstroInstance } from 'astro';
 import type { RenderableTreeNode } from '@markdoc/markdoc';
 import Markdoc from '@markdoc/markdoc';
+import type { AstroInstance } from 'astro';
+import type { HTMLString } from 'astro/runtime/server/index.js';
 import {
 	createComponent,
-	renderComponent,
+	createHeadAndContent,
+	isHTMLString,
 	render,
+	renderComponent,
 	renderScriptElement,
+	renderTemplate,
 	renderUniqueStylesheet,
-	createHeadAndContent,
 	unescapeHTML,
-	renderTemplate,
-	HTMLString,
-	isHTMLString,
 } from 'astro/runtime/server/index.js';
 
 export type TreeNode =
@@ -89,10 +89,7 @@ export const ComponentNode = createComponent({
 			);
 
 			// Let the runtime know that this component is being used.
-			// `result.propagators` has been moved to `result._metadata.propagators`
-			// TODO: remove this fallback in the next markdoc integration major
-			const propagators = result._metadata.propagators || result.propagators;
-			propagators.add({
+			result._metadata.propagators.add({
 				init() {
 					return headAndContent;
 				},

package/dist/extensions/shiki.d.ts

@@ -1,3 +1,3 @@
 import type { ShikiConfig } from 'astro';
 import type { AstroMarkdocConfig } from '../config.js';
-export default function shiki({ langs, theme, wrap, }?: ShikiConfig): Promise<AstroMarkdocConfig>;
+export default function shiki(config?: ShikiConfig): Promise<AstroMarkdocConfig>;

package/dist/extensions/shiki.js

@@ -1,90 +1,21 @@
+import { createShikiHighlighter } from "@astrojs/markdown-remark";
 import Markdoc from "@markdoc/markdoc";
 import { unescapeHTML } from "astro/runtime/server/index.js";
-import { bundledLanguages, getHighlighter } from "shikiji";
-const ASTRO_COLOR_REPLACEMENTS = {
-  "#000001": "var(--astro-code-color-text)",
-  "#000002": "var(--astro-code-color-background)",
-  "#000004": "var(--astro-code-token-constant)",
-  "#000005": "var(--astro-code-token-string)",
-  "#000006": "var(--astro-code-token-comment)",
-  "#000007": "var(--astro-code-token-keyword)",
-  "#000008": "var(--astro-code-token-parameter)",
-  "#000009": "var(--astro-code-token-function)",
-  "#000010": "var(--astro-code-token-string-expression)",
-  "#000011": "var(--astro-code-token-punctuation)",
-  "#000012": "var(--astro-code-token-link)"
-};
-const COLOR_REPLACEMENT_REGEX = new RegExp(
-  `(${Object.keys(ASTRO_COLOR_REPLACEMENTS).join("|")})`,
-  "g"
-);
-const PRE_SELECTOR = /<pre class="(.*?)shiki(.*?)"/;
-const LINE_SELECTOR = /<span class="line"><span style="(.*?)">([\+|\-])/g;
-const INLINE_STYLE_SELECTOR = /style="(.*?)"/;
-const INLINE_STYLE_SELECTOR_GLOBAL = /style="(.*?)"/g;
-const highlighterCache = /* @__PURE__ */ new Map();
-async function shiki({
-  langs = [],
-  theme = "github-dark",
-  wrap = false
-} = {}) {
-  const cacheId = typeof theme === "string" ? theme : theme.name || "";
-  let highlighter = highlighterCache.get(cacheId);
-  if (!highlighter) {
-    highlighter = await getHighlighter({
-      langs: langs.length ? langs : Object.keys(bundledLanguages),
-      themes: [theme]
-    });
-    highlighterCache.set(cacheId, highlighter);
-  }
+async function shiki(config) {
+  const highlighter = await createShikiHighlighter(config);
   return {
     nodes: {
       fence: {
         attributes: Markdoc.nodes.fence.attributes,
         transform({ attributes }) {
-          let lang;
-          if (typeof attributes.language === "string") {
-            const langExists = highlighter.getLoadedLanguages().includes(attributes.language);
-            if (langExists) {
-              lang = attributes.language;
-            } else {
-              console.warn(
-                `[Shiki highlighter] The language "${attributes.language}" doesn't exist, falling back to plaintext.`
-              );
-              lang = "plaintext";
-            }
-          } else {
-            lang = "plaintext";
-          }
-          let html = highlighter.codeToHtml(attributes.content, { lang, theme });
-          html = html.replace(PRE_SELECTOR, `<pre class="$1astro-code$2"`);
-          if (attributes.language === "diff") {
-            html = html.replace(
-              LINE_SELECTOR,
-              '<span class="line"><span style="$1"><span style="user-select: none;">$2</span>'
-            );
-          }
-          if (wrap === false) {
-            html = html.replace(INLINE_STYLE_SELECTOR, 'style="$1; overflow-x: auto;"');
-          } else if (wrap === true) {
-            html = html.replace(
-              INLINE_STYLE_SELECTOR,
-              'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
-            );
-          }
-          const themeName = typeof theme === "string" ? theme : theme.name;
-          if (themeName === "css-variables") {
-            html = html.replace(INLINE_STYLE_SELECTOR_GLOBAL, (m) => replaceCssVariables(m));
-          }
+          const lang = typeof attributes.language === "string" ? attributes.language : "plaintext";
+          const html = highlighter.highlight(attributes.content, lang);
           return unescapeHTML(html);
         }
       }
     }
   };
 }
-function replaceCssVariables(str) {
-  return str.replace(COLOR_REPLACEMENT_REGEX, (match) => ASTRO_COLOR_REPLACEMENTS[match] || match);
-}
 export {
   shiki as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/markdoc",
   "description": "Add support for Markdoc in your Astro site",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -56,33 +56,32 @@
     "template"
   ],
   "dependencies": {
-    "@markdoc/markdoc": "^0.3.0",
-    "esbuild": "^0.19.2",
+    "@markdoc/markdoc": "^0.3.5",
+    "esbuild": "^0.19.6",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
     "htmlparser2": "^9.0.0",
     "kleur": "^4.1.5",
-    "shikiji": "^0.6.8",
+    "shikiji": "^0.6.13",
     "zod": "^3.22.4",
     "@astrojs/internal-helpers": "0.2.1",
     "@astrojs/prism": "3.0.0"
   },
   "peerDependencies": {
-    "astro": "^3.0.0"
+    "astro": "^3.0.0 || ^4.0.0"
   },
   "devDependencies": {
-    "@types/chai": "^4.3.5",
-    "@types/html-escaper": "^3.0.0",
-    "@types/markdown-it": "^13.0.0",
-    "@types/mocha": "^10.0.1",
+    "@types/chai": "^4.3.10",
+    "@types/html-escaper": "^3.0.2",
+    "@types/markdown-it": "^13.0.6",
+    "@types/mocha": "^10.0.4",
     "chai": "^4.3.7",
     "devalue": "^4.3.2",
-    "linkedom": "^0.15.1",
+    "linkedom": "^0.16.4",
     "mocha": "^10.2.0",
-    "rollup": "^3.28.1",
-    "vite": "^4.4.9",
-    "@astrojs/markdown-remark": "3.3.0",
-    "astro": "3.4.1",
+    "vite": "^5.0.0",
+    "@astrojs/markdown-remark": "4.0.0",
+    "astro": "4.0.0",
     "astro-scripts": "0.0.14"
   },
   "engines": {