@stacksjs/stx 0.2.148 → 0.2.150

package/dist/dev-server/serve-multi.js

@@ -8,6 +8,7 @@ import { partialsCache } from "../includes.js";
 import { stateDir } from "../state-dir.js";
 import { plugin as stxPlugin } from "../plugin.js";
 import { clearComponentCache } from "../utils.js";
+import { bracketPathToRegex } from "stx-router";
 import {
   colors,
   findAvailablePort,
@@ -275,9 +276,9 @@ export async function serveMultipleStxFiles(filePaths, options = {}) {
           if (routePath.endsWith("/index"))
             routePath = routePath.slice(0, -6) || "/";
           if (routePath.includes("[")) {
-            const paramNames = [...routePath.matchAll(/\[([^\]]+)\]/g)].map((m) => m[1]), regexStr = routePath.replace(/\[([^\]]+)\]/g, "([^/]+)");
+            const { regex, params: paramNames } = bracketPathToRegex(routePath);
             dynamicRoutes.push({
-              pattern: new RegExp(`^${regexStr}$`),
+              pattern: regex,
               paramNames,
               filePath: absolutePath,
               routeTemplate: routePath,

package/dist/index.d.ts

@@ -228,5 +228,6 @@ export {
   validated,
   withDefaults,
 } from './props';
+export { isMarkdownPath, type MarkdownRenderer, type MarkdownView, protectCodeBlocks, renderMarkdownView } from './markdown-view';
 // Default export for the stx module
 export default {};

package/dist/index.js

@@ -144,3 +144,4 @@ export {
   withDefaults
 } from "./props.js";
 export default {};
+export { isMarkdownPath, protectCodeBlocks, renderMarkdownView } from "./markdown-view.js";

package/dist/markdown-view.d.ts

@@ -0,0 +1,25 @@
+/** Whether a path should be treated as a markdown view. */
+export declare function isMarkdownPath(filePath: string): boolean;
+/**
+ * Wrap code blocks so the stx pass leaves their contents alone.
+ *
+ * Applies to `<pre>` (fenced blocks) and to any `<code>` not already inside
+ * one (inline spans). Without this, a page documenting a directive executes it.
+ */
+export declare function protectCodeBlocks(html: string): string;
+/**
+ * Turn markdown source into HTML the stx pipeline can process.
+ *
+ * Frontmatter is returned rather than injected, so the caller decides how it
+ * merges with the rest of the render context.
+ */
+export declare function renderMarkdownView(source: string, options?: MarkdownViewOptions): Promise<MarkdownView>;
+export declare interface MarkdownViewOptions {
+  renderer?: MarkdownRenderer
+}
+export declare interface MarkdownView {
+  html: string
+  frontmatter: Record<string, any>
+}
+/** Converts markdown source to HTML. */
+export type MarkdownRenderer = (source: string) => string | Promise<string>;

package/dist/markdown-view.js

@@ -0,0 +1,39 @@
+import { parseFrontmatter, parseMarkdown } from "./internal-markdown.js";
+export function isMarkdownPath(filePath) {
+  return filePath.endsWith(".md") || filePath.endsWith(".markdown");
+}
+export function protectCodeBlocks(html) {
+  const protectedRanges = [];
+  collect(/<pre\b[^>]*>[\s\S]*?<\/pre>/gi);
+  const preRanges = [...protectedRanges];
+  collect(/<code\b[^>]*>[\s\S]*?<\/code>/gi, preRanges);
+  function collect(re, skipWithin) {
+    let m;
+    while ((m = re.exec(html)) !== null) {
+      const start = m.index, end = start + m[0].length;
+      if (skipWithin?.some((r) => start >= r.start && end <= r.end))
+        continue;
+      protectedRanges.push({ start, end });
+    }
+  }
+  if (protectedRanges.length === 0)
+    return html;
+  protectedRanges.sort((a, b) => a.start - b.start);
+  let out = "", cursor = 0;
+  for (const range of protectedRanges) {
+    if (range.start < cursor)
+      continue;
+    out += html.slice(cursor, range.start);
+    out += `@raw${html.slice(range.start, range.end)}@endraw`;
+    cursor = range.end;
+  }
+  out += html.slice(cursor);
+  return out;
+}
+export async function renderMarkdownView(source, options = {}) {
+  const { data, content } = parseFrontmatter(source), html = await (options.renderer ?? ((md) => parseMarkdown(md)))(content);
+  return {
+    html: protectCodeBlocks(html),
+    frontmatter: data ?? {}
+  };
+}

package/dist/production-server.js

@@ -4,6 +4,7 @@ import { serve } from "bun";
 import { loadManifest } from "./manifest.js";
 import { hydrateTemplateStream, hydrateFragment } from "./template-hydrator.js";
 import { extractLayoutMetadata } from "./app-shell.js";
+import { patternToRegex } from "stx-router";
 const MIME_TYPES = {
   ".js": "application/javascript",
   ".mjs": "application/javascript",
@@ -55,11 +56,8 @@ export async function startProductionServer(options = {}) {
   const exactRoutes = new Map, paramRoutes = [];
   for (const route of manifest.routes)
     if (route.hasParams) {
-      const paramNames = [], regexStr = route.pattern.replace(/:([^/]+)/g, (_, name) => {
-        paramNames.push(name);
-        return "([^/]+)";
-      });
-      paramRoutes.push({ regex: new RegExp(`^${regexStr}$`), route, paramNames });
+      const { regex, params: paramNames } = patternToRegex(route.pattern);
+      paramRoutes.push({ regex, route, paramNames });
     } else
       exactRoutes.set(route.pattern, route);
   const server = serve({

package/dist/render.d.ts

@@ -42,6 +42,7 @@ export declare function renderTemplateString(content: string, filePath: string,
 // Types
 // ============================================================================
 export declare interface RenderOptions {
+  markdownRenderer?: (source: string) => string | Promise<string>
   context?: Record<string, unknown>
   options?: Partial<StxOptions>
   processClientScripts?: boolean

package/dist/render.js

@@ -4,6 +4,7 @@ import { extractVariables } from "./variable-extractor.js";
 import { injectRouterScript, processDirectives } from "./process.js";
 import { extractBridgeData, processClientScript } from "./client-script.js";
 import { findSfcTemplateBlock } from "./sfc-template.js";
+import { isMarkdownPath, renderMarkdownView } from "./markdown-view.js";
 function parseTemplate(content) {
   let workingContent = content;
   const templateBlock = findSfcTemplateBlock(content);
@@ -69,7 +70,17 @@ export async function renderTemplate(filePath, renderOptions = {}) {
   const resolvedPath = resolve(filePath), file = Bun.file(resolvedPath);
   if (!await file.exists())
     throw Error(`Template file not found: ${resolvedPath}`);
-  const content = await file.text();
+  let content = await file.text(), markdownFrontmatter = null;
+  if (isMarkdownPath(resolvedPath)) {
+    const view = await renderMarkdownView(content, { renderer: renderOptions.markdownRenderer });
+    content = view.html;
+    markdownFrontmatter = view.frontmatter;
+  }
+  if (markdownFrontmatter)
+    renderOptions = {
+      ...renderOptions,
+      context: { ...markdownFrontmatter, ...renderOptions.context || {} }
+    };
   if (renderOptions.layout) {
     const layoutPath = resolve(renderOptions.layout), layoutFile = Bun.file(layoutPath);
     if (!await layoutFile.exists())

package/dist/ssr.js

@@ -3,6 +3,7 @@ import path from "node:path";
 import { errorLogger } from "./error-handling.js";
 import { processDirectives } from "./process.js";
 import { extractVariables } from "./utils.js";
+import { patternToRegex } from "stx-router";
 
 export class MemorySessionStore {
   store = new Map;
@@ -180,10 +181,7 @@ export function createApp(config = {}) {
     for (const route of routes) {
       if (route.method !== method && route.method !== "*")
         continue;
-      const paramNames = [], regexPattern = route.pattern.replace(/\/:(\w+)/g, (_, name) => {
-        paramNames.push(name);
-        return "/([^/]+)";
-      }).replace(/\//g, "\\/"), regex = new RegExp(`^${regexPattern}$`), match = pathname.match(regex);
+      const { regex, params: paramNames } = patternToRegex(route.pattern), match = pathname.match(regex);
       if (match) {
         const params = {};
         paramNames.forEach((name, i) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/stx",
   "type": "module",
-  "version": "0.2.148",
+  "version": "0.2.150",
   "description": "A performant UI Framework. Powered by Bun.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -117,12 +117,12 @@
   "dependencies": {
     "@cwcss/crosswind": "^0.2.14",
     "@stacksjs/clapp": "^0.2.0",
-    "@stacksjs/desktop": "0.2.148",
-    "@stacksjs/sanitizer": "0.2.148",
+    "@stacksjs/desktop": "0.2.150",
+    "@stacksjs/sanitizer": "0.2.150",
     "@stacksjs/ts-i18n": "^0.1.11",
-    "bun-plugin-stx": "0.2.148",
+    "bun-plugin-stx": "0.2.150",
     "bunfig": "^0.15.17",
-    "stx-router": "0.2.148",
+    "stx-router": "0.2.150",
     "ts-broadcasting": "^0.0.9",
     "ts-images": "^0.1.9",
     "ts-syntax-highlighter": "^0.2.1"