@progalaxyelabs/htms-cli 0.3.0

package/README.md

@@ -0,0 +1,108 @@
+# HTMS CLI
+
+Command-line interface for the HTMS compiler.
+
+## Installation
+
+```bash
+npm install -g @htms/cli
+```
+
+## Usage
+
+### Compile
+
+Compile a `.htms` file to TypeScript:
+
+```bash
+htms compile src/app.htms -o dist/
+```
+
+Options:
+- `-o, --output <dir>` - Output directory (default: `dist`)
+- `-w, --watch` - Watch for changes
+- `-q, --quiet` - Suppress output
+
+### Check
+
+Validate a `.htms` file without generating output:
+
+```bash
+htms check src/app.htms
+```
+
+### Watch Mode
+
+Watch for changes and recompile automatically:
+
+```bash
+htms compile src/app.htms -o dist/ --watch
+```
+
+### Init
+
+Initialize a new HTMS project (coming soon):
+
+```bash
+htms init
+```
+
+## Programmatic API
+
+You can also use the CLI programmatically:
+
+```javascript
+import { compileFile, checkFile } from '@htms/cli';
+
+const result = await compileFile('src/app.htms', 'dist/');
+console.log(result.success); // true/false
+```
+
+## Vite Plugin
+
+Use HTMS in your Vite project:
+
+```javascript
+// vite.config.js
+import { htmsPlugin } from '@htms/cli/vite';
+
+export default {
+  plugins: [htmsPlugin({
+    include: /\.htms$/,
+    outputDir: 'src/generated',
+    watch: true
+  })]
+};
+```
+
+### Plugin Options
+
+- `include` - RegExp pattern for files to process (default: `/\.htms$/`)
+- `outputDir` - Directory for generated files (default: `'src/generated'`)
+- `watch` - Enable watch mode (default: `true`)
+
+## Output Files
+
+The compiler generates three TypeScript files:
+
+1. **templates.ts** - Component/section/page functions
+2. **router.ts** - Hash-based router with context management
+3. **events.ts** - Event delegation and two-way binding
+
+## Error Formatting
+
+Errors are displayed with source context:
+
+```
+error[E002]: Undefined component: 'NavBar'
+  --> src/app.htms:10:5
+
+   9 | page home "/" {
+  10 |   NavBar
+     |   ^^^^^^
+  11 | }
+```
+
+## License
+
+MIT

package/bin/htms.js

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import { compileFile, checkFile, getStats } from '../src/compiler.js';
+import { watchFiles } from '../src/watch.js';
+import { readFile } from 'fs/promises';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+import pc from 'picocolors';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const packageJson = JSON.parse(
+  await readFile(join(__dirname, '../package.json'), 'utf-8')
+);
+
+const program = new Command();
+
+program
+  .name('htms')
+  .description('HTMS compiler - compile .htms files to TypeScript')
+  .version(packageJson.version);
+
+// Compile command
+program
+  .command('compile')
+  .description('Compile .htms file to TypeScript')
+  .argument('<input>', 'Input .htms file')
+  .option('-o, --output <dir>', 'Output directory', 'dist')
+  .option('-w, --watch', 'Watch for changes')
+  .option('-q, --quiet', 'Suppress output')
+  .action(async (input, options) => {
+    try {
+      if (options.watch) {
+        watchFiles(input, options.output, options);
+      } else {
+        const result = await compileFile(input, options.output, options);
+        const stats = getStats(result);
+
+        if (result.success) {
+          if (!options.quiet) {
+            console.log(pc.green('\n✓ Compilation successful!'));
+            console.log(pc.gray(`  Generated ${stats.files} file(s)`));
+            if (stats.warnings > 0) {
+              console.log(pc.yellow(`  ${stats.warnings} warning(s)`));
+            }
+          }
+          process.exit(0);
+        } else {
+          if (!options.quiet) {
+            console.error(pc.red('\n✗ Compilation failed!'));
+            console.error(pc.gray(`  ${stats.errors} error(s)`));
+          }
+          process.exit(1);
+        }
+      }
+    } catch (error) {
+      console.error(pc.red('Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
+// Check command
+program
+  .command('check')
+  .description('Check .htms file for errors without generating output')
+  .argument('<input>', 'Input .htms file')
+  .action(async (input) => {
+    try {
+      const result = await checkFile(input);
+      const stats = getStats(result);
+
+      if (result.success) {
+        console.log(pc.green('\n✓ No errors found!'));
+        if (stats.warnings > 0) {
+          console.log(pc.yellow(`  ${stats.warnings} warning(s)`));
+        }
+        process.exit(0);
+      } else {
+        console.error(pc.red('\n✗ Validation failed!'));
+        console.error(pc.gray(`  ${stats.errors} error(s)`));
+        process.exit(1);
+      }
+    } catch (error) {
+      console.error(pc.red('Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
+// Init command (scaffold new project)
+program
+  .command('init')
+  .description('Initialize a new HTMS project')
+  .option('-d, --dir <directory>', 'Project directory', '.')
+  .action(async (options) => {
+    console.log(pc.blue('📦 Initializing new HTMS project...'));
+    console.log(pc.gray(`   Directory: ${options.dir}\n`));
+
+    // This would create a basic project structure
+    // For now, just show what would be created
+    console.log(pc.gray('Would create:'));
+    console.log(pc.gray('  src/'));
+    console.log(pc.gray('    app.htms'));
+    console.log(pc.gray('    actions.ts'));
+    console.log(pc.gray('    runtime.ts'));
+    console.log(pc.gray('  dist/'));
+    console.log(pc.gray('  package.json'));
+    console.log(pc.gray('  vite.config.ts\n'));
+
+    console.log(pc.yellow('⚠  Init command not yet implemented'));
+    console.log(pc.gray('   This is a placeholder for future functionality'));
+  });
+
+program.parse();

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@progalaxyelabs/htms-cli",
+  "version": "0.3.0",
+  "description": "CLI for HTMS compiler",
+  "type": "module",
+  "bin": {
+    "htms": "./bin/htms.js"
+  },
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./vite": "./src/vite-plugin.js"
+  },
+  "scripts": {
+    "test": "node --test"
+  },
+  "keywords": ["htms", "compiler", "cli"],
+  "author": "ProGalaxy Labs",
+  "license": "MIT",
+  "dependencies": {
+    "@progalaxyelabs/htms-compiler": "^0.3.0",
+    "commander": "^11.0.0",
+    "chokidar": "^3.5.0",
+    "picocolors": "^1.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/src/compiler.js

@@ -0,0 +1,87 @@
+import { compile_wasm, init } from '@progalaxyelabs/htms-compiler';
+import { readFile, writeFile, mkdir } from 'fs/promises';
+import { dirname, join, basename } from 'path';
+import { printDiagnostics } from './format-errors.js';
+import pc from 'picocolors';
+
+// Initialize WASM module
+let wasmInitialized = false;
+async function ensureWasmInit() {
+  if (!wasmInitialized) {
+    await init();
+    wasmInitialized = true;
+  }
+}
+
+/**
+ * Compile HTMS file to TypeScript
+ * @param {string} inputPath - Path to .htms file
+ * @param {string} outputDir - Output directory for generated files
+ * @param {object} options - Compilation options
+ * @returns {Promise<{success: boolean, diagnostics: Array}>}
+ */
+export async function compileFile(inputPath, outputDir, options = {}) {
+  await ensureWasmInit();
+
+  // Read source file
+  const source = await readFile(inputPath, 'utf-8');
+
+  // Compile using WASM
+  const result = compile_wasm(source);
+
+  // Print diagnostics
+  if (result.diagnostics && result.diagnostics.length > 0) {
+    printDiagnostics(result.diagnostics, source, inputPath);
+  }
+
+  // Write output files if successful
+  if (result.success && result.files) {
+    await mkdir(outputDir, { recursive: true });
+
+    for (const file of result.files) {
+      const outputPath = join(outputDir, file.path);
+      await writeFile(outputPath, file.content, 'utf-8');
+
+      if (!options.quiet) {
+        console.log(pc.green('✓') + ` Generated ${pc.cyan(file.path)}`);
+      }
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Check HTMS file for errors without generating output
+ * @param {string} inputPath - Path to .htms file
+ * @returns {Promise<{success: boolean, diagnostics: Array}>}
+ */
+export async function checkFile(inputPath) {
+  await ensureWasmInit();
+
+  // Read source file
+  const source = await readFile(inputPath, 'utf-8');
+
+  // Compile (but don't write output)
+  const result = compile_wasm(source);
+
+  // Print diagnostics
+  if (result.diagnostics && result.diagnostics.length > 0) {
+    printDiagnostics(result.diagnostics, source, inputPath);
+  }
+
+  return result;
+}
+
+/**
+ * Get compilation statistics
+ * @param {object} result - Compilation result
+ * @returns {object} Statistics
+ */
+export function getStats(result) {
+  const errors = result.diagnostics?.filter(d => d.severity === 'Error').length || 0;
+  const warnings = result.diagnostics?.filter(d => d.severity === 'Warning').length || 0;
+  const files = result.files?.length || 0;
+
+  return { errors, warnings, files };
+}

package/src/format-errors.js

@@ -0,0 +1,73 @@
+import pc from 'picocolors';
+
+/**
+ * Format diagnostics with source context
+ * @param {Array} diagnostics - Array of diagnostic objects
+ * @param {string} source - Original source code
+ * @param {string} filename - Filename for display
+ * @returns {string} Formatted error messages
+ */
+export function formatDiagnostics(diagnostics, source, filename = 'input.htms') {
+  if (diagnostics.length === 0) {
+    return '';
+  }
+
+  const lines = source.split('\n');
+  const output = [];
+
+  for (const diag of diagnostics) {
+    const { severity, message, location, code } = diag;
+    const { line, column } = location;
+
+    // Header with severity
+    const severityStr = severity === 'Error'
+      ? pc.red(pc.bold('error'))
+      : pc.yellow(pc.bold('warning'));
+
+    const codeStr = code ? pc.gray(`[${code}]`) : '';
+    output.push(`${severityStr}${codeStr}: ${message}`);
+
+    // Location
+    output.push(pc.cyan(`  --> ${filename}:${line}:${column}`));
+    output.push('');
+
+    // Source context (line before, error line, line after)
+    const startLine = Math.max(1, line - 1);
+    const endLine = Math.min(lines.length, line + 1);
+
+    for (let i = startLine; i <= endLine; i++) {
+      const lineNum = String(i).padStart(4, ' ');
+      const sourceLine = lines[i - 1] || '';
+
+      if (i === line) {
+        // Error line
+        output.push(pc.gray(`${lineNum} | `) + sourceLine);
+
+        // Underline the error
+        const padding = ' '.repeat(column - 1);
+        const underline = pc.red('^'.repeat(Math.max(1, sourceLine.length - column + 1)));
+        output.push(pc.gray('     | ') + padding + underline);
+      } else {
+        // Context line
+        output.push(pc.gray(`${lineNum} | ${sourceLine}`));
+      }
+    }
+
+    output.push('');
+  }
+
+  return output.join('\n');
+}
+
+/**
+ * Print diagnostics to console
+ * @param {Array} diagnostics - Array of diagnostic objects
+ * @param {string} source - Original source code
+ * @param {string} filename - Filename for display
+ */
+export function printDiagnostics(diagnostics, source, filename) {
+  const formatted = formatDiagnostics(diagnostics, source, filename);
+  if (formatted) {
+    console.error(formatted);
+  }
+}

package/src/index.js

@@ -0,0 +1,8 @@
+/**
+ * HTMS CLI - Main exports
+ */
+
+export { compileFile, checkFile, getStats } from './compiler.js';
+export { watchFiles } from './watch.js';
+export { formatDiagnostics, printDiagnostics } from './format-errors.js';
+export { htmsPlugin } from './vite-plugin.js';

package/src/vite-plugin.js

@@ -0,0 +1,133 @@
+import { compile_wasm, init } from '@htms/compiler';
+import { readFile, writeFile } from 'fs/promises';
+import { dirname, join, relative } from 'path';
+import pc from 'picocolors';
+
+let wasmInitialized = false;
+
+/**
+ * Vite plugin for HTMS compilation
+ * @param {object} options - Plugin options
+ * @returns {import('vite').Plugin}
+ */
+export function htmsPlugin(options = {}) {
+  const {
+    include = /\.htms$/,
+    outputDir = 'src/generated',
+    watch = true
+  } = options;
+
+  return {
+    name: 'vite-plugin-htms',
+
+    async buildStart() {
+      if (!wasmInitialized) {
+        await init();
+        wasmInitialized = true;
+      }
+    },
+
+    async handleHotUpdate({ file, server }) {
+      // Only process .htms files
+      if (!include.test(file)) {
+        return;
+      }
+
+      console.log(pc.blue('[htms]') + ` Compiling ${pc.cyan(relative(process.cwd(), file))}`);
+
+      try {
+        const source = await readFile(file, 'utf-8');
+        const result = compile_wasm(source);
+
+        if (result.success && result.files) {
+          // Write generated files
+          for (const genFile of result.files) {
+            const outputPath = join(outputDir, genFile.path);
+            await writeFile(outputPath, genFile.content, 'utf-8');
+            console.log(pc.green('  ✓') + ` Generated ${pc.gray(genFile.path)}`);
+          }
+
+          // Trigger HMR for generated files
+          const modules = [];
+          for (const genFile of result.files) {
+            const modulePath = join(outputDir, genFile.path);
+            const module = server.moduleGraph.getModuleById(modulePath);
+            if (module) {
+              modules.push(module);
+            }
+          }
+
+          if (modules.length > 0) {
+            return modules;
+          }
+        } else {
+          // Print errors
+          console.error(pc.red('  ✗') + ` Compilation failed`);
+          for (const diag of result.diagnostics || []) {
+            if (diag.severity === 'Error') {
+              console.error(pc.red(`    ${diag.message}`) + pc.gray(` at line ${diag.location.line}`));
+            }
+          }
+        }
+      } catch (error) {
+        console.error(pc.red('[htms]') + ` Error: ${error.message}`);
+      }
+
+      return [];
+    },
+
+    async transform(code, id) {
+      // Only process .htms files
+      if (!include.test(id)) {
+        return null;
+      }
+
+      try {
+        const result = compile_wasm(code);
+
+        if (!result.success) {
+          // Show errors in console
+          console.error(pc.red('[htms]') + ` Compilation failed for ${id}`);
+          for (const diag of result.diagnostics || []) {
+            if (diag.severity === 'Error') {
+              console.error(pc.red(`  ${diag.message}`) + pc.gray(` at line ${diag.location.line}`));
+            }
+          }
+
+          // Return error as module
+          const errorMsg = result.diagnostics
+            ?.filter(d => d.severity === 'Error')
+            .map(d => `${d.message} (line ${d.location.line})`)
+            .join('\\n');
+
+          return {
+            code: `throw new Error('HTMS compilation failed:\\n${errorMsg}');`,
+            map: null
+          };
+        }
+
+        // Write generated files to output directory
+        if (result.files) {
+          for (const file of result.files) {
+            const outputPath = join(outputDir, file.path);
+            await writeFile(outputPath, file.content, 'utf-8');
+          }
+        }
+
+        // Return a module that imports the generated templates
+        return {
+          code: `export { default } from '${outputDir}/templates.js';`,
+          map: null
+        };
+      } catch (error) {
+        console.error(pc.red('[htms]') + ` Error processing ${id}:`, error.message);
+        return {
+          code: `throw new Error('HTMS plugin error: ${error.message}');`,
+          map: null
+        };
+      }
+    }
+  };
+}
+
+export default htmsPlugin;

package/src/watch.js

@@ -0,0 +1,60 @@
+import chokidar from 'chokidar';
+import { compileFile, getStats } from './compiler.js';
+import pc from 'picocolors';
+
+/**
+ * Watch HTMS files for changes and recompile
+ * @param {string} pattern - Glob pattern for files to watch
+ * @param {string} outputDir - Output directory
+ * @param {object} options - Watch options
+ */
+export function watchFiles(pattern, outputDir, options = {}) {
+  console.log(pc.blue('👁  Watching for changes...'));
+  console.log(pc.gray(`   Pattern: ${pattern}`));
+  console.log(pc.gray(`   Output:  ${outputDir}\n`));
+
+  const watcher = chokidar.watch(pattern, {
+    persistent: true,
+    ignoreInitial: false,
+    awaitWriteFinish: {
+      stabilityThreshold: 100,
+      pollInterval: 50
+    }
+  });
+
+  watcher
+    .on('add', path => handleChange(path, outputDir, 'added', options))
+    .on('change', path => handleChange(path, outputDir, 'changed', options))
+    .on('error', error => console.error(pc.red(`Watcher error: ${error}`)));
+
+  // Handle graceful shutdown
+  process.on('SIGINT', () => {
+    console.log('\n' + pc.blue('Stopping watcher...'));
+    watcher.close();
+    process.exit(0);
+  });
+
+  return watcher;
+}
+
+async function handleChange(filePath, outputDir, action, options) {
+  const timestamp = new Date().toLocaleTimeString();
+  console.log(pc.gray(`[${timestamp}]`) + ` File ${action}: ${pc.cyan(filePath)}`);
+
+  try {
+    const result = await compileFile(filePath, outputDir, { ...options, quiet: false });
+    const stats = getStats(result);
+
+    if (result.success) {
+      console.log(pc.green('✓') + ` Compiled successfully (${stats.files} files generated)`);
+      if (stats.warnings > 0) {
+        console.log(pc.yellow('⚠') + ` ${stats.warnings} warning(s)`);
+      }
+    } else {
+      console.log(pc.red('✗') + ` Compilation failed (${stats.errors} error(s))`);
+    }
+    console.log('');
+  } catch (error) {
+    console.error(pc.red('Error:') + ` ${error.message}\n`);
+  }
+}

package/test/error.htms

@@ -0,0 +1,3 @@
+page home "/" {
+  UndefinedComponent
+}

package/test/output/events.ts

@@ -0,0 +1,108 @@
+// Generated by HTMS Compiler
+// Do not edit manually
+
+import { getContext, setContext, rerender } from './router';
+import { actions } from './actions';
+
+export interface ActionContext {
+  data: Record<string, unknown>;
+  rerender: () => void;
+}
+
+export function initEvents(): void {
+  // Event delegation
+  document.addEventListener('click', handleEvent);
+  document.addEventListener('submit', handleEvent);
+  document.addEventListener('input', handleEvent);
+  document.addEventListener('change', handleEvent);
+  document.addEventListener('blur', handleEvent, true);
+  document.addEventListener('focus', handleEvent, true);
+
+  // Two-way binding
+  initBinding();
+}
+
+function handleEvent(event: Event): void {
+  const target = event.target as HTMLElement;
+  const actionEl = target.closest('[data-action]') as HTMLElement;
+
+  if (!actionEl) return;
+
+  const actionName = actionEl.dataset.action;
+  const eventType = actionEl.dataset.event;
+
+  // Only handle if event type matches
+  if (eventType && eventType !== event.type) return;
+
+  // Handle modifiers
+  if (actionEl.dataset.prevent === 'true') {
+    event.preventDefault();
+  }
+  if (actionEl.dataset.stop === 'true') {
+    event.stopPropagation();
+  }
+
+  // Get action
+  const action = (actions as Record<string, Function>)[actionName!];
+  if (action) {
+    const ctx: ActionContext = {
+      data: getContext(),
+      rerender: () => {
+        setContext(ctx.data);
+        rerender();
+      }
+    };
+
+    // Parse arguments if present
+    const argsStr = actionEl.dataset.args;
+    if (argsStr) {
+      try {
+        const args = JSON.parse(argsStr);
+        action(...args)(ctx, event);
+      } catch {
+        action(ctx, event);
+      }
+    } else {
+      action(ctx, event);
+    }
+
+    // Handle once modifier
+    if (actionEl.dataset.once === 'true') {
+      actionEl.removeAttribute('data-action');
+    }
+  }
+}
+
+function initBinding(): void {
+  document.addEventListener('input', (e) => {
+    const el = e.target as HTMLInputElement;
+    const bindPath = el.dataset.bind;
+    if (bindPath) {
+      const ctx = getContext();
+      setNestedValue(ctx, bindPath, el.value);
+      setContext(ctx);
+    }
+  });
+
+  document.addEventListener('change', (e) => {
+    const el = e.target as HTMLInputElement;
+    const bindPath = el.dataset.bind;
+    if (bindPath && el.type === 'checkbox') {
+      const ctx = getContext();
+      setNestedValue(ctx, bindPath, el.checked);
+      setContext(ctx);
+    }
+  });
+}
+
+function setNestedValue(obj: Record<string, unknown>, path: string, value: unknown): void {
+  const keys = path.split('.');
+  const last = keys.pop()!;
+  const target = keys.reduce((o, k) => {
+    if (!(o as Record<string, unknown>)[k]) {
+      (o as Record<string, unknown>)[k] = {};
+    }
+    return (o as Record<string, unknown>)[k];
+  }, obj) as Record<string, unknown>;
+  target[last] = value;
+}

package/test/output/router.ts

@@ -0,0 +1,58 @@
+// Generated by HTMS Compiler
+// Do not edit manually
+
+import { Router } from './runtime';
+import { HomePage, AboutPage } from './templates';
+
+// Application context
+let context: Record<string, unknown> = {};
+let currentPage: string = '';
+const appContainer = document.getElementById('app');
+
+export function getContext(): Record<string, unknown> {
+  return context;
+}
+
+export function setContext(data: Record<string, unknown>): void {
+  context = data;
+}
+
+export function rerender(): void {
+  if (currentPage && appContainer) {
+    const renderer = routes[currentPage];
+    if (renderer) {
+      appContainer.innerHTML = '';
+      appContainer.appendChild(renderer(context));
+    }
+  }
+}
+
+// Route definitions
+const routes: Record<string, (ctx: Record<string, unknown>) => HTMLElement> = {
+  '/': HomePage,
+  '/about': AboutPage,
+};
+
+function renderPage(route: string): void {
+  currentPage = route;
+  const renderer = routes[route];
+  if (renderer && appContainer) {
+    appContainer.innerHTML = '';
+    appContainer.appendChild(renderer(context));
+  } else if (appContainer) {
+    const el = document.createElement('h1');
+    el.textContent = '404 - Page Not Found';
+    appContainer.innerHTML = '';
+    appContainer.appendChild(el);
+  }
+}
+
+// Create router
+export const router = new Router({
+  mode: 'hash',
+  routes: {
+    '/': () => renderPage('/'),
+    '/about': () => renderPage('/about'),
+  },
+  notFound: () => renderPage('__404__'),
+});

package/test/output/templates.ts

@@ -0,0 +1,52 @@
+// Generated by HTMS Compiler
+// Do not edit manually
+
+import { actions } from './actions';
+
+export type Context = Record<string, unknown>;
+
+export function NavBar(ctx: Context): HTMLElement {
+  const el0 = document.createElement('nav');
+  el0.className = 'navbar';
+  const el1 = document.createElement('a');
+  el1.href = '#/';
+  const el2 = document.createTextNode('Home');
+  el1.appendChild(el2);
+  el0.appendChild(el1);
+  const el3 = document.createElement('a');
+  el3.href = '#/about';
+  const el4 = document.createTextNode('About');
+  el3.appendChild(el4);
+  el0.appendChild(el3);
+  return el0;
+}
+
+export function HomePage(ctx: Context): HTMLElement {
+  const fragment = document.createDocumentFragment();
+  const el0 = NavBar(ctx);
+  fragment.appendChild(el0);
+  const el1 = document.createElement('div');
+  el1.className = 'hero';
+  const el2 = document.createElement('h1');
+  const el3 = document.createTextNode('Welcome to HTMS!');
+  el2.appendChild(el3);
+  el1.appendChild(el2);
+  fragment.appendChild(el1);
+  const root = document.createElement('div');
+  root.appendChild(fragment);
+  return root;
+}
+
+export function AboutPage(ctx: Context): HTMLElement {
+  const fragment = document.createDocumentFragment();
+  const el0 = NavBar(ctx);
+  fragment.appendChild(el0);
+  const el1 = document.createElement('div');
+  const el2 = document.createTextNode('About Page');
+  el1.appendChild(el2);
+  fragment.appendChild(el1);
+  const root = document.createElement('div');
+  root.appendChild(fragment);
+  return root;
+}
+

package/test/test.htms

@@ -0,0 +1,18 @@
+component NavBar {
+  nav [class: "navbar"] {
+    a [href: "#/"] {{ Home }}
+    a [href: "#/about"] {{ About }}
+  }
+}
+
+page home "/" {
+  NavBar
+  div [class: "hero"] {
+    h1 {{ Welcome to HTMS! }}
+  }
+}
+
+page about "/about" {
+  NavBar
+  div {{ About Page }}
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2022"],
+    "allowJs": true,
+    "checkJs": false,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*.js", "bin/**/*.js"],
+  "exclude": ["node_modules", "dist"]
+}