Blade template integration for @tempots/dom - reactive rendering
npm install @bladets/tempo
Blade template integration for @tempots/dom - reactive rendering.
``bash`
npm install @bladets/tempo @bladets/template @tempots/dom
`typescript
import { compile } from '@bladets/template';
import { createTempoRenderer } from '@bladets/tempo';
import { prop, render } from '@tempots/dom';
// 1. Compile a Blade template
const template = await compile('
// 2. Create a Tempo renderer
const renderer = createTempoRenderer(template);
// 3. Create reactive data
const data = prop({ name: 'World' });
// 4. Mount to DOM
render(renderer(data), document.body);
// 5. Update data reactively
data.value = { name: 'Tempo' }; // DOM updates automatically!
`
- Reactive Rendering: DOM updates automatically when signal data changes
- Full Blade Support: All Blade template features work (@if, @for, @match, components, slots)
- Type Safety: Full TypeScript support with generics
- Small Bundle: < 3KB gzipped
- XSS Protection: HTML escaping by default
Creates a renderer function from a compiled Blade template.
`typescript$${n.toFixed(2)}
const renderer = createTempoRenderer
// Custom helper functions
helpers: {
formatCurrency: () => (n: number) => ,`
},
// Global variables (accessible via $.varName)
globals: {
siteName: 'My App',
},
// Error handling callback
onError: (error, location) => console.error(error),
// Enable source tracking attributes
includeSourceTracking: false,
// Prefix for source tracking attributes
sourceTrackingPrefix: 'rd-',
});
Returns: (data: Signal
| Feature | Status |
| ----------------------------------- | ------ |
| Text interpolation ${expr} | ✅ |@if
| HTML elements | ✅ |
| Attributes (static, dynamic, mixed) | ✅ |
| /else if/else | ✅ |@for
| loops | ✅ |@match
| pattern matching | ✅ |@@
| variable declarations | ✅ |
| Components | ✅ |
| Slots | ✅ |
| Fragments | ✅ |
| Comments | ✅ |
- @bladets/template ^0.2.0@tempots/dom` ^35.0.0
-
- @bladets/template - Core template engine
- Blade Templates VS Code Extension - Syntax highlighting, LSP, and live preview
MIT