A monorepo for TypeScript template engine tools and libraries. This project enables using TypeScript template literals with proper syntax highlighting for various file formats in VSCode, along with code generation capabilities.
- Use TypeScript template literals as a templating engine
- Syntax highlighting for various file types within template literals
- Support for multiple file types in a single template
- Support for 40+ programming languages and file formats
- Easy to extend with new file type support
- Test utilities for verifying templates
This monorepo contains the following packages:
Core template literals functionality with syntax highlighting.
# Using npm/npx
npx jsr add @tmpl/core
# Using Deno/JSR
import { html, css, js } from "jsr:@tmpl/core";
Code generation CLI for template literals. Create template files with language extensions and generate code from them.
# Process input from stdin
deno run -A jsr:@tmpl/gen < index.html.ts
# Use current directory as both source and destination
deno run -A jsr:@tmpl/gen ./src
# Specify source and destination directories
deno run -A jsr:@tmpl/gen ./dist ./src/templates
import { html, css, js, sql } from "@tmpl/core";
// HTML with syntax highlighting
const template = html`
<div class="container">
<h1>${title}</h1>
<p>${content}</p>
</div>
`;
// CSS with syntax highlighting
const styles = css`
.container {
max-width: 800px;
margin: 0 auto;
}
`;
// JavaScript with syntax highlighting
const script = js`
function handleClick() {
console.log('Button clicked!');
}
`;
// SQL with syntax highlighting
const query = sql`
SELECT * FROM users WHERE id = ${userId}
`;
This project includes a VSCode extension that provides syntax highlighting for template literals within TypeScript (.ts) files. To use it:
- Install the extension from the VSCode marketplace
- Use the appropriate tag functions in your TypeScript code (html, css, js, etc.)
- The content inside the template literals will be highlighted with the appropriate syntax highlighting for that language
- This works directly in your .ts files - no special file extensions needed!
The project consists of:
- Core template tag functions for various file types
- A registry system for managing file type handlers
- VSCode extension configuration for syntax highlighting
TypeScript Template Engine supports 40+ programming languages and file formats, including:
- HTML (
html
) - CSS (
css
) - JavaScript (
js
) - TypeScript (
ts
) - JSX (
jsx
) - TSX (
tsx
)
- JSON (
json
) - XML (
xml
) - YAML (
yaml
) - TOML (
toml
) - INI (
ini
) - CSV (
csv
)
- Markdown (
md
) - LaTeX (
tex
) - reStructuredText (
rst
)
- SQL (
sql
) - GraphQL (
graphql
)
- Python (
py
) - Ruby (
rb
) - Go (
go
) - Rust (
rs
) - C (
c
) - C++ (
cpp
) - C# (
cs
) - Java (
java
) - PHP (
php
) - Swift (
swift
) - Kotlin (
kt
) - And many more!
You can use any file extension with the ext
function:
import { ext } from "@tmpl/core";
// Use a custom extension
const svelte = ext("svelte");
const template = svelte`
<script>
let count = 0;
function increment() {
count += 1;
}
</script>
<button on:click={increment}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
`;
Create template files with language extensions:
// index.html.ts
import { html } from "@tmpl/core";
const title = "My Website";
const navItems = ["Home", "About", "Contact"];
export default html`
<!DOCTYPE html>
<html>
<head>
<title>${title}</title>
</head>
<body>
<header>
<h1>${title}</h1>
<nav>
<ul>
${navItems.map(item => html`
<li><a href="#${item.toLowerCase()}">${item}</a></li>`.indent(-2)
).join('\n ')}
</ul>
</nav>
</header>
</body>
</html>
`;
Then generate the files using one of these methods:
# Process input from stdin
deno run -A jsr:@tmpl/gen < index.html.ts
# Use current directory as both source and destination
deno run -A jsr:@tmpl/gen ./src
# Specify source and destination directories
deno run -A jsr:@tmpl/gen ./dist ./src/templates
The CLI includes signal handling to ensure temporary files are properly cleaned up when processing stdin input, even if the process is interrupted.
The project uses a Makefile to simplify development, testing, building, and publishing tasks.
# Show available make targets
make help
# Run tests
make test
# Generate syntax highlighting configurations for VSCode extension
make generate-syntaxes
# Sync version from deno.json to all workspace files
make sync-version
# Build the VSCode extension
make build-extension
# Run the demo
make demo
This project uses GitHub Actions and semantic-release for automated publishing with semantic versioning.
This project follows the Conventional Commits specification for commit messages:
feat: ...
- A new feature (minor version bump)fix: ...
- A bug fix (patch version bump)docs: ...
- Documentation changesstyle: ...
- Code style changes (formatting, etc.)refactor: ...
- Code changes that neither fix bugs nor add featuresperf: ...
- Performance improvementstest: ...
- Adding or updating testschore: ...
- Changes to the build process or auxiliary tools
Breaking changes are indicated by adding BREAKING CHANGE:
in the commit message body or using !
after the type:
feat!: change API to use new authentication system
You can also publish packages manually:
# Publish to JSR
make publish-jsr
# Publish VSCode extension
make publish-extension
# Publish all packages to all platforms
make publish
The project uses a version synchronization system to ensure that all packages in the monorepo have the same version. The version is defined in the root deno.json
file and is automatically synchronized to all workspace packages when building or publishing.
To manually synchronize versions:
make sync-version
This will update the version in:
- src/core/deno.json
- src/gen/deno.json
- vscode-extension/package.json
BSD 3-Clause License