@constela/runtime 0.3.5 → 0.4.0

package/dist/index.js

@@ -381,6 +381,51 @@ async function executeFetchStep(step, ctx) {
   }
 }
 
+// src/renderer/markdown.ts
+import { marked } from "marked";
+import DOMPurify from "dompurify";
+marked.setOptions({
+  gfm: true,
+  breaks: false
+});
+function parseMarkdown(content) {
+  const rawHtml = marked.parse(content, { async: false });
+  return DOMPurify.sanitize(rawHtml, {
+    USE_PROFILES: { html: true },
+    FORBID_TAGS: ["script", "style", "iframe"],
+    FORBID_ATTR: ["onerror", "onload", "onclick"]
+  });
+}
+
+// src/renderer/code.ts
+import { createHighlighter } from "shiki";
+var highlighterPromise = null;
+var DEFAULT_LANGUAGES = ["javascript", "typescript", "json", "html", "css"];
+async function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: ["github-dark", "github-light"],
+      langs: DEFAULT_LANGUAGES
+    });
+  }
+  return highlighterPromise;
+}
+async function highlightCode(code, language) {
+  const highlighter = await getHighlighter();
+  const loadedLangs = highlighter.getLoadedLanguages();
+  if (!loadedLangs.includes(language)) {
+    try {
+      await highlighter.loadLanguage(language);
+    } catch {
+      language = "plaintext";
+    }
+  }
+  return highlighter.codeToHtml(code, {
+    lang: language,
+    theme: "github-dark"
+  });
+}
+
 // src/renderer/index.ts
 function isEventHandler(value) {
   return typeof value === "object" && value !== null && "event" in value && "action" in value;
@@ -395,6 +440,10 @@ function render(node, ctx) {
       return renderIf(node, ctx);
     case "each":
       return renderEach(node, ctx);
+    case "markdown":
+      return renderMarkdown(node, ctx);
+    case "code":
+      return renderCode(node, ctx);
     default:
       throw new Error("Unknown node kind");
   }
@@ -602,6 +651,44 @@ function renderEach(node, ctx) {
   }
   return fragment;
 }
+function renderMarkdown(node, ctx) {
+  const container = document.createElement("div");
+  container.className = "constela-markdown";
+  const cleanup = createEffect(() => {
+    const content = evaluate(node.content, { state: ctx.state, locals: ctx.locals });
+    const html = parseMarkdown(String(content ?? ""));
+    container.innerHTML = html;
+  });
+  ctx.cleanups?.push(cleanup);
+  return container;
+}
+function renderCode(node, ctx) {
+  const container = document.createElement("div");
+  container.className = "constela-code";
+  const pre = document.createElement("pre");
+  const codeEl = document.createElement("code");
+  container.appendChild(pre);
+  pre.appendChild(codeEl);
+  const cleanup = createEffect(() => {
+    const language = String(evaluate(node.language, { state: ctx.state, locals: ctx.locals }) ?? "plaintext");
+    const content = String(evaluate(node.content, { state: ctx.state, locals: ctx.locals }) ?? "");
+    codeEl.className = `language-${language || "plaintext"}`;
+    codeEl.dataset["language"] = language || "plaintext";
+    container.dataset["language"] = language || "plaintext";
+    codeEl.textContent = content;
+    highlightCode(content, language || "plaintext").then((html) => {
+      container.innerHTML = html;
+      const newCode = container.querySelector("code");
+      if (newCode) {
+        newCode.classList.add(`language-${language || "plaintext"}`);
+        newCode.dataset["language"] = language || "plaintext";
+      }
+      container.dataset["language"] = language || "plaintext";
+    });
+  });
+  ctx.cleanups?.push(cleanup);
+  return container;
+}
 
 // src/app.ts
 function createApp(program, mount) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/runtime",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "Runtime DOM renderer for Constela UI framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,13 +15,17 @@
     "dist"
   ],
   "dependencies": {
-    "@constela/core": "0.3.3",
-    "@constela/compiler": "0.3.3"
+    "dompurify": "^3.3.1",
+    "marked": "^17.0.1",
+    "shiki": "^3.20.0",
+    "@constela/compiler": "0.4.0",
+    "@constela/core": "0.4.0"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.2.0",
+    "@types/jsdom": "^21.1.0",
     "@types/node": "^20.10.0",
     "jsdom": "^24.0.0",
-    "@types/jsdom": "^21.1.0",
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",
     "vitest": "^2.0.0"