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/templatesimport { 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/templatesThe 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 demoThis 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 publishThe 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-versionThis will update the version in:
- src/core/deno.json
- src/gen/deno.json
- vscode-extension/package.json
BSD 3-Clause License