@progalaxyelabs/htms-cli 0.4.1 → 0.5.0

package/bin/htms.js

@@ -23,9 +23,12 @@ program
 // Compile command
 program
   .command('compile')
-  .description('Compile .htms file to TypeScript')
+  .description('Compile .htms file to TypeScript or HTML')
   .argument('<input>', 'Input .htms file')
   .option('-o, --output <dir>', 'Output directory', 'dist')
+  .option('-f, --format <format>', 'Output format: typescript or html', 'typescript')
+  .option('-t, --template <file>', 'HTML template file to inject into (only for html format)')
+  .option('-s, --split-templates', 'Split templates into separate files for lazy loading (only for html format)')
   .option('-w, --watch', 'Watch for changes')
   .option('-q, --quiet', 'Suppress output')
   .action(async (input, options) => {

package/dist/router.ts

@@ -0,0 +1,77 @@
+// Generated by HTMS Compiler
+// Do not edit manually
+
+interface RouterConfig {
+  mode: 'hash' | 'history';
+  routes: Record<string, () => void>;
+  notFound: () => void;
+}
+
+class Router {
+  constructor(config: RouterConfig) {
+    const handleRoute = () => {
+      const hash = window.location.hash.slice(1) || '/';
+      const handler = config.routes[hash];
+      if (handler) {
+        handler();
+      } else {
+        config.notFound();
+      }
+    };
+    window.addEventListener('hashchange', handleRoute);
+    handleRoute();
+  }
+}
+
+import { HomePage } 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,
+};
+
+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('/'),
+  },
+  notFound: () => renderPage('__404__'),
+});

package/dist/templates.ts

@@ -0,0 +1,69 @@
+// Generated by HTMS Compiler
+// Do not edit manually
+
+export type Context = Record<string, unknown>;
+
+export function TodoItem(ctx: Context): HTMLElement {
+  const el0 = document.createElement('div');
+  el0.className = 'todo-item';
+  const el1 = document.createElement('input');
+  el1.type = 'checkbox';
+  el0.appendChild(el1);
+  const el2 = document.createElement('span');
+  el2.className = 'todo-title';
+  const el3 = document.createTextNode('Todo title');
+  el2.appendChild(el3);
+  el0.appendChild(el2);
+  const el4 = document.createElement('span');
+  el4.className = 'todo-date';
+  const el5 = document.createTextNode('Date');
+  el4.appendChild(el5);
+  el0.appendChild(el4);
+  const el6 = document.createElement('button');
+  el6.className = 'delete-btn';
+  const el7 = document.createTextNode('×');
+  el6.appendChild(el7);
+  el0.appendChild(el6);
+  return el0;
+}
+
+export function EmptyState(ctx: Context): HTMLElement {
+  const el0 = document.createElement('p');
+  el0.className = 'empty';
+  const el1 = document.createTextNode('No todos yet. Add one above!');
+  el0.appendChild(el1);
+  return el0;
+}
+
+export function HomePage(ctx: Context): HTMLElement {
+  const el0 = document.createElement('main');
+  el0.className = 'container';
+  const el1 = document.createElement('h1');
+  const el2 = document.createTextNode('My Todos');
+  el1.appendChild(el2);
+  el0.appendChild(el1);
+  const el3 = document.createElement('p');
+  el3.className = 'subtitle';
+  const el4 = document.createTextNode('Simple todo app with localStorage');
+  el3.appendChild(el4);
+  el0.appendChild(el3);
+  const el5 = document.createElement('div');
+  el5.className = 'add-todo';
+  const el6 = document.createElement('input');
+  el6.type = 'text';
+  el6.id = 'todoInput';
+  el6.placeholder = 'What needs to be done?';
+  el5.appendChild(el6);
+  const el7 = document.createElement('button');
+  el7.id = 'addBtn';
+  const el8 = document.createTextNode('Add Todo');
+  el7.appendChild(el8);
+  el5.appendChild(el7);
+  el0.appendChild(el5);
+  const el9 = document.createElement('div');
+  el9.id = 'todoList';
+  el9.className = 'todo-list';
+  el0.appendChild(el9);
+  return el0;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progalaxyelabs/htms-cli",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "CLI for HTMS compiler",
   "type": "module",
   "bin": {
@@ -19,10 +19,10 @@
     "compiler",
     "cli"
   ],
-  "author": "ProGalaxy Labs",
+  "author": "ProGalaxy eLabs <info@progalaxyelabs.com>",
   "license": "MIT",
   "dependencies": {
-    "@progalaxyelabs/htms-compiler": "^0.4.1",
+    "@progalaxyelabs/htms-compiler": "^0.5.0",
     "chokidar": "^3.5.0",
     "commander": "^11.0.0",
     "picocolors": "^1.0.0"

package/src/compiler.js

@@ -1,4 +1,4 @@
-import { compile_wasm, init } from '@progalaxyelabs/htms-compiler';
+import { compile_wasm, compile_with_options_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';
@@ -14,7 +14,7 @@ async function ensureWasmInit() {
 }
 
 /**
- * Compile HTMS file to TypeScript
+ * Compile HTMS file to TypeScript or HTML
  * @param {string} inputPath - Path to .htms file
  * @param {string} outputDir - Output directory for generated files
  * @param {object} options - Compilation options
@@ -26,8 +26,27 @@ export async function compileFile(inputPath, outputDir, options = {}) {
   // Read source file
   const source = await readFile(inputPath, 'utf-8');
 
+  // Read template file if provided
+  let templateHtml = undefined;
+  if (options.template) {
+    templateHtml = await readFile(options.template, 'utf-8');
+  }
+
+  // Get source filename for HTML output (e.g., "app.htms" -> "app.html")
+  const sourceFilename = basename(inputPath, '.htms') + '.html';
+
+  // Prepare compile options
+  const compileOptions = {
+    output_format: options.format || 'typescript',
+    generate_router: true,
+    generate_events: true,
+    template_html: templateHtml,
+    source_filename: sourceFilename,
+    split_templates: options.splitTemplates || false,
+  };
+
   // Compile using WASM
-  const result = compile_wasm(source);
+  const result = compile_with_options_wasm(source, compileOptions);
 
   // Print diagnostics
   if (result.diagnostics && result.diagnostics.length > 0) {