jamdesk 1.0.0

package/vendored/lib/snippet-compiler-isr.ts

@@ -0,0 +1,114 @@
+/**
+ * On-Demand Snippet Compiler for ISR
+ *
+ * Compiles JSX/TSX snippet files from R2 on demand for ISR rendering.
+ * Uses Babel standalone for transpilation and caches results.
+ */
+
+import { transform } from '@babel/standalone';
+import { fetchSnippet } from './r2-content';
+
+interface CompiledSnippet {
+  /** Exported component/function names */
+  exports: string[];
+  /** Transpiled JavaScript code */
+  code: string;
+  /** Whether the snippet has 'use client' directive */
+  isClientComponent: boolean;
+}
+
+// In-memory cache for compiled snippets
+const snippetCache = new Map<string, { result: CompiledSnippet; timestamp: number }>();
+const CACHE_TTL = 300_000; // 5 minutes
+
+/**
+ * Compile a snippet file on demand for ISR.
+ * Fetches from R2, transpiles JSX, caches result.
+ *
+ * @param projectSlug - Project identifier
+ * @param snippetPath - Path to snippet file (e.g., 'badge.tsx')
+ * @returns Compiled snippet with exports and code
+ */
+export async function compileSnippetIsr(
+  projectSlug: string,
+  snippetPath: string
+): Promise<CompiledSnippet> {
+  const cacheKey = `${projectSlug}:${snippetPath}`;
+
+  // Check cache
+  const cached = snippetCache.get(cacheKey);
+  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
+    return cached.result;
+  }
+
+  // Fetch from R2
+  const source = await fetchSnippet(projectSlug, snippetPath);
+
+  // Check for 'use client' directive
+  const trimmed = source.trimStart();
+  const isClientComponent =
+    trimmed.startsWith("'use client'") || trimmed.startsWith('"use client"');
+
+  // Transpile JSX to JavaScript
+  const transpiled = transform(source, {
+    presets: ['react', 'typescript'],
+    plugins: [['transform-react-jsx', { runtime: 'automatic' }]],
+    filename: snippetPath,
+  });
+
+  if (!transpiled.code) {
+    throw new Error(`Failed to compile snippet: ${snippetPath}`);
+  }
+
+  // Extract export names (const, function, class exports)
+  const exportMatches = source.matchAll(/export\s+(?:const|function|class)\s+(\w+)/g);
+  const exports = Array.from(exportMatches, (m) => m[1]);
+
+  const result: CompiledSnippet = {
+    exports,
+    code: transpiled.code,
+    isClientComponent,
+  };
+
+  // Cache it
+  snippetCache.set(cacheKey, { result, timestamp: Date.now() });
+
+  return result;
+}
+
+/**
+ * Clear snippet cache.
+ *
+ * @param projectSlug - Optional project to clear. If not provided, clears all.
+ */
+export function clearSnippetCache(projectSlug?: string): void {
+  if (projectSlug) {
+    for (const key of snippetCache.keys()) {
+      if (key.startsWith(`${projectSlug}:`)) {
+        snippetCache.delete(key);
+      }
+    }
+  } else {
+    snippetCache.clear();
+  }
+}
+
+/**
+ * Preload commonly used snippets.
+ *
+ * @param projectSlug - Project identifier
+ * @param snippetPaths - Paths to preload
+ */
+export async function preloadSnippets(
+  projectSlug: string,
+  snippetPaths: string[]
+): Promise<void> {
+  await Promise.all(snippetPaths.map((path) => compileSnippetIsr(projectSlug, path)));
+}
+
+/**
+ * Get the current size of the snippet cache.
+ */
+export function getSnippetCacheSize(): number {
+  return snippetCache.size;
+}

package/vendored/lib/snippet-loader-isr.ts

@@ -0,0 +1,276 @@
+/**
+ * ISR Snippet Loader
+ *
+ * Dynamically loads and compiles snippet components from R2 for ISR mode.
+ * Handles the complete flow:
+ * 1. Extract snippet imports from MDX content
+ * 2. Fetch snippet files from R2
+ * 3. Compile and evaluate to React components
+ * 4. Return components map for MDXRemote
+ */
+
+import React from 'react';
+import * as jsxRuntime from 'react/jsx-runtime';
+import { transform } from '@babel/standalone';
+import { fetchSnippet } from './r2-content';
+import { extractSnippetImports } from './preprocess-mdx';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyComponent = React.ComponentType<any>;
+
+interface CompiledSnippet {
+  exports: Record<string, AnyComponent>;
+  isClientComponent: boolean;
+}
+
+// In-memory cache for compiled snippet components
+const snippetComponentCache = new Map<
+  string,
+  { result: CompiledSnippet; timestamp: number }
+>();
+const CACHE_TTL = 300_000; // 5 minutes
+
+/**
+ * Convert kebab-case or snake_case to PascalCase.
+ */
+function toPascalCase(str: string): string {
+  return str
+    .split(/[-_]/)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+    .join('');
+}
+
+/**
+ * Extract snippet path from import statement.
+ * '/snippets/plans-available.mdx' -> 'plans-available.mdx'
+ * '../snippets/foo.tsx' -> 'foo.tsx'
+ */
+function normalizeSnippetPath(importPath: string): string {
+  // Remove leading dots and slashes, and 'snippets/' prefix
+  return importPath
+    .replace(/^(?:\.\.\/)*\/?snippets\//, '')
+    .replace(/^\//, '');
+}
+
+/**
+ * Transpile JSX source code to JavaScript.
+ */
+function transpileJsx(source: string): string {
+  const result = transform(source, {
+    presets: ['react', 'typescript'],
+    plugins: [['transform-react-jsx', { runtime: 'automatic', importSource: 'react' }]],
+    filename: 'snippet.tsx',
+  });
+
+  if (!result.code) {
+    throw new Error('Babel transpilation failed');
+  }
+
+  // Remove the automatic imports that Babel adds
+  return result.code.replace(/^import\s+.*?;\s*/gm, '').trim();
+}
+
+/**
+ * Extract export statements from transpiled JavaScript.
+ * Returns map of export names to their function code.
+ *
+ * Handles:
+ * - export const Name = ...
+ * - export function Name(...) { ... }
+ */
+function extractExports(transpiledCode: string): Record<string, string> {
+  const exports: Record<string, string> = {};
+
+  // Pattern 1: export const Name = (arrow function or expression)
+  // The transpiled code will have: export const Name = props => _jsx(...)
+  const constPattern = /export\s+const\s+(\w+)\s*=\s*([\s\S]*?)(?=export\s+(?:const|function)|\s*$)/g;
+
+  let match;
+  while ((match = constPattern.exec(transpiledCode)) !== null) {
+    const [, name, body] = match;
+    // Clean up the body - remove trailing semicolons and whitespace
+    const cleanBody = body.trim().replace(/;?\s*$/, '');
+    exports[name] = cleanBody;
+  }
+
+  // Pattern 2: export function Name(...) { ... }
+  // Need to match balanced braces for the function body
+  const funcPattern = /export\s+function\s+(\w+)\s*(\([^)]*\)\s*\{)/g;
+  while ((match = funcPattern.exec(transpiledCode)) !== null) {
+    const [fullMatch, name, paramsAndBrace] = match;
+    const startIdx = match.index + fullMatch.length - 1; // Position of opening brace
+
+    // Find matching closing brace
+    let depth = 1;
+    let endIdx = startIdx + 1;
+    while (depth > 0 && endIdx < transpiledCode.length) {
+      if (transpiledCode[endIdx] === '{') depth++;
+      if (transpiledCode[endIdx] === '}') depth--;
+      endIdx++;
+    }
+
+    // Extract the full function and convert to arrow function format
+    const funcBody = transpiledCode.slice(startIdx, endIdx);
+    const params = paramsAndBrace.replace(/\s*\{$/, '');
+    exports[name] = `${params} => ${funcBody}`;
+  }
+
+  return exports;
+}
+
+/**
+ * Compile a single snippet into React components.
+ */
+async function compileSnippet(
+  projectSlug: string,
+  snippetPath: string,
+  builtInComponents: Record<string, AnyComponent> = {}
+): Promise<CompiledSnippet> {
+  const cacheKey = `${projectSlug}:${snippetPath}`;
+
+  // Check cache
+  const cached = snippetComponentCache.get(cacheKey);
+  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
+    return cached.result;
+  }
+
+  // Fetch from R2
+  const source = await fetchSnippet(projectSlug, snippetPath);
+
+  // Check for 'use client' directive
+  const trimmed = source.trimStart();
+  const isClientComponent =
+    trimmed.startsWith("'use client'") || trimmed.startsWith('"use client"');
+
+  // Transpile JSX to JavaScript
+  const transpiled = transpileJsx(source);
+
+  // Extract exports from transpiled code
+  const exportedFunctions = extractExports(transpiled);
+
+  // Compile each export into an actual React component
+  const builtInNames = Object.keys(builtInComponents);
+  const exports: Record<string, AnyComponent> = {};
+
+  for (const [name, functionCode] of Object.entries(exportedFunctions)) {
+    try {
+      // Create function that returns the component
+      // NOTE: new Function() is intentionally used here to compile user-provided snippets
+      // eslint-disable-next-line @typescript-eslint/no-implied-eval
+      const createComponent = new Function(
+        'React',
+        '_jsx',
+        '_jsxs',
+        '_Fragment',
+        ...builtInNames,
+        `return ${functionCode}`
+      );
+
+      const component = createComponent(
+        React,
+        jsxRuntime.jsx,
+        jsxRuntime.jsxs,
+        jsxRuntime.Fragment,
+        ...builtInNames.map((n) => builtInComponents[n])
+      );
+
+      exports[name] = component;
+    } catch (error) {
+      console.error(
+        `[ISR Snippet] Failed to compile "${name}" from ${snippetPath}:`,
+        error instanceof Error ? error.message : error
+      );
+      // Continue with other exports
+    }
+  }
+
+  const result: CompiledSnippet = { exports, isClientComponent };
+
+  // Cache the result
+  snippetComponentCache.set(cacheKey, { result, timestamp: Date.now() });
+
+  return result;
+}
+
+/**
+ * Load all snippets referenced in MDX content for ISR mode.
+ *
+ * @param projectSlug - Project identifier
+ * @param mdxContent - Raw MDX content (before preprocessing)
+ * @param builtInComponents - Built-in MDX components (Note, Card, etc.)
+ * @returns Map of component names to compiled React components
+ */
+export async function loadSnippetsForIsr(
+  projectSlug: string,
+  mdxContent: string,
+  builtInComponents: Record<string, AnyComponent> = {}
+): Promise<Record<string, AnyComponent>> {
+  // Extract snippet imports from the MDX content
+  const imports = extractSnippetImports(mdxContent);
+
+  if (imports.length === 0) {
+    return {};
+  }
+
+  const components: Record<string, AnyComponent> = {};
+
+  // Process each import
+  await Promise.all(
+    imports.map(async (imp) => {
+      try {
+        const snippetPath = normalizeSnippetPath(imp.path);
+        const compiled = await compileSnippet(
+          projectSlug,
+          snippetPath,
+          builtInComponents
+        );
+
+        // Map import aliases to compiled components
+        for (const alias of imp.imports) {
+          // Check if the alias matches an exported name directly
+          if (alias in compiled.exports) {
+            components[alias] = compiled.exports[alias];
+          } else {
+            // Try to find the component by various naming conventions
+            // The snippet might export with a different name than the alias
+            const exportNames = Object.keys(compiled.exports);
+            if (exportNames.length === 1) {
+              // Single export - use it regardless of name
+              components[alias] = compiled.exports[exportNames[0]];
+            } else if (exportNames.length > 1) {
+              // Multiple exports - try to match by PascalCase conversion of filename
+              const filename = snippetPath.replace(/\.(mdx|jsx|tsx|js|ts)$/, '');
+              const pascalName = toPascalCase(filename);
+              if (pascalName in compiled.exports) {
+                components[alias] = compiled.exports[pascalName];
+              }
+            }
+          }
+        }
+      } catch (error) {
+        console.error(
+          `[ISR Snippet] Failed to load snippet "${imp.path}":`,
+          error instanceof Error ? error.message : error
+        );
+        // Continue with other snippets
+      }
+    })
+  );
+
+  return components;
+}
+
+/**
+ * Clear the snippet component cache.
+ */
+export function clearSnippetComponentCache(projectSlug?: string): void {
+  if (projectSlug) {
+    for (const key of snippetComponentCache.keys()) {
+      if (key.startsWith(`${projectSlug}:`)) {
+        snippetComponentCache.delete(key);
+      }
+    }
+  } else {
+    snippetComponentCache.clear();
+  }
+}