Mdsvex test

---
title: "Testing Dynamic MDsveX Components"
description: "A test article demonstrating pre-compiled component rendering"
---

<script>
  import { Callout, CodeBlock, Chart, Video } from '$lib/components/article';
  
  const testData = [10, 25, 35, 50, 45, 60];
</script>

# Dynamic Component Test

This article tests the pre-compiled MDsveX rendering system with dynamic component loading.

<Callout type="success" title="System Online">
If you can see this styled callout box, the dynamic component system is working!
</Callout>

## How It Works

The system now:

1. **Compiles** MDsveX content with Svelte compiler
2. **Executes** compiled SSR code with component registry
3. **Renders** HTML server-side with all components resolved
4. **Caches** the result for 1 hour
5. **Serves** pre-rendered HTML to the client

<Callout type="info">
All components are pre-compiled and executed on the server. The client receives fully-rendered HTML.
</Callout>

## Component Examples

### Callouts

<Callout type="warning" title="Warning">
This is a warning callout with custom styling.
</Callout>

<Callout type="tip">
Pro tip: Components are fully rendered server-side!
</Callout>

<Callout type="danger" title="Error">
Danger zone - be careful!
</Callout>

### Code Blocks

<CodeBlock lang="javascript" code={`
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 55
`} />

<Callout type="info">
The code above has syntax highlighting applied server-side.
</Callout>

### Charts

Here's a chart with dynamic data:

<Chart 
  data={testData}
  type="line"
  label="Test Data Visualization"
  width={700}
  height={400}
/>

<Callout type="success">
Charts are rendered as SVG on the server!
</Callout>

### Multiple Components

<Callout type="tip" title="Nested Example">

You can even nest components:

<CodeBlock lang="python">
{`
def greet(name):
    return f"Hello, {name}!"

print(greet("World"))
`}
</CodeBlock>

This works because everything is pre-compiled!

</Callout>

## Performance

<Callout type="info" title="Speed">
- **First request**: 1-3 seconds (compilation + rendering)
- **Cached requests**: <50ms (served from cache)
- **Cache duration**: 1 hour
- **SEO**: Fully rendered HTML, perfect for search engines
</Callout>

## Technical Details

The system uses:

- **MDsveX**: Markdown preprocessing
- **Svelte Compiler**: SSR compilation
- **Component Registry**: Whitelisted components
- **Server Execution**: Safe eval with controlled context
- **Caching**: In-memory with TTL

<CodeBlock lang="typescript" code={`
// Server-side rendering
const compiled = await compileMdsvex(content);
const rendered = await renderCompiledComponent(
  compiled.ssrModule
);
// Returns fully rendered HTML
`} />

## Testing Checklist

- [ ] Callouts display correctly
- [ ] Code blocks have syntax highlighting
- [ ] Charts render as SVG
- [ ] Components can be nested
- [ ] Variables work correctly
- [ ] Cache invalidation works
- [ ] Error handling is graceful

<Callout type="success" title="Success!">
If all components above rendered correctly, the system is working perfectly!
</Callout>

## Next Steps

1. Test cache invalidation: `POST /api/invalidate-cache`
2. Check cache stats: `GET /api/invalidate-cache`
3. View compiled code (in dev mode)
4. Test with more complex components

<Chart
  data={[100, 200, 150, 300, 250, 400]}
  type="bar"
  label="Final Test Chart"
/>