Core types and utilities for multi-context Tempo framework
npm install @tempots/core



Core types and utilities for multi-context Tempo framework.
@tempots/core provides the foundational types and utilities that are shared across all Tempo rendering contexts (DOM, ThreeJS, Konva, PixiJS, etc.). This package enables a consistent programming model across different rendering targets while maintaining strong type safety.
``bash`
pnpm add @tempots/core
A Renderable is an object that can be rendered into a specific context. It has two properties:
- type: A symbol for runtime type checkingrender(ctx)
- : A method that renders content and returns a cleanup function
`typescript
import { Renderable, RenderContext, Clear } from '@tempots/core'
const MY_TYPE = Symbol('MY_RENDERABLE')
const myRenderable: Renderable
type: MY_TYPE,
render: (ctx) => {
// Render logic here
return (removeTree) => {
// Cleanup logic here
}
}
}
`
The base interface for all rendering contexts. Context-specific implementations (DOM, ThreeJS, etc.) extend this interface with their own methods.
`typescript`
interface RenderContext {
clear(removeTree: boolean): void
}
Extended interface for contexts that support hierarchical rendering with ordered children. Provides the makeRef() method for creating reference markers that preserve insertion points.
`typescript`
interface HierarchicalContext extends RenderContext {
makeRef(): this
}
A function that cleans up rendered content. The removeTree parameter indicates whether to remove the entire tree or just event listeners and subscriptions.
`typescript`
type Clear = (removeTree: boolean) => void
A flexible type representing any content that can be rendered:
`typescript`
type TNode
| Renderable
| Value
| undefined
| null
| Renderable
Represents a value that can be either static or reactive (a Signal):
`typescript`
type Value
Creates a renderable object from a render function and type symbol.
`typescript
import { createRenderable } from '@tempots/core'
const MY_TYPE = Symbol('MY_RENDERABLE')
const myComponent = createRenderable(MY_TYPE, (ctx) => {
// Render logic
return (removeTree) => {
// Cleanup logic
}
})
`
Creates a unique symbol for dependency injection.
`typescript
import { makeProviderMark } from '@tempots/core'
interface UserService {
getUser(id: string): Promise
}
const USER_SERVICE = makeProviderMark
`
This package is typically used indirectly through context-specific packages like @tempots/dom, @tempots/three, etc. Those packages provide higher-level APIs built on these core types.
`typescript
// In @tempots/dom
import { createRenderable, type Renderable } from '@tempots/core'
import type { DOMContext } from './dom-context'
export const DOM_RENDERABLE_TYPE = Symbol('DOM_RENDERABLE')
export type DOMRenderable = Renderable
export function domRenderable(
renderFn: (ctx: DOMContext) => Clear
): DOMRenderable {
return createRenderable(DOM_RENDERABLE_TYPE, renderFn)
}
`
`typescript
// In @tempots/three
import { createRenderable, type Renderable } from '@tempots/core'
import type { ThreeContext } from './three-context'
export const THREE_RENDERABLE_TYPE = Symbol('THREE_RENDERABLE')
export type ThreeRenderable = Renderable
export function threeRenderable(
renderFn: (ctx: ThreeContext) => Clear
): ThreeRenderable {
return createRenderable(THREE_RENDERABLE_TYPE, renderFn)
}
`
The symbol-based branding system ensures compile-time type safety:
`typescript
// ✅ Valid: DOM renderable in DOM context
html.div(html.span('Hello'))
// ❌ Invalid: ThreeJS renderable in DOM context
html.div(mesh.box({ width: 1, height: 1, depth: 1 }))
// Type error: ThreeRenderable is not assignable to DOMNode
``
Apache-2.0
See the main Tempo repository for contribution guidelines.