tkeron 5.0.1 → 5.1.0

package/bun.lock

@@ -5,7 +5,7 @@
     "": {
       "name": "tkeron",
       "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.26.0",
+        "@modelcontextprotocol/sdk": "^1.27.0",
         "@tkeron/commands": "0.4.6",
         "@tkeron/html-parser": "1.5.5",
         "@tkeron/tools": "^0.4.0",
@@ -20,7 +20,7 @@
   "packages": {
     "@hono/node-server": ["@hono/node-server@1.19.9", "", { "peerDependencies": { "hono": "^4" } }, "sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw=="],
 
-    "@modelcontextprotocol/sdk": ["@modelcontextprotocol/sdk@1.26.0", "", { "dependencies": { "@hono/node-server": "^1.19.9", "ajv": "^8.17.1", "ajv-formats": "^3.0.1", "content-type": "^1.0.5", "cors": "^2.8.5", "cross-spawn": "^7.0.5", "eventsource": "^3.0.2", "eventsource-parser": "^3.0.0", "express": "^5.2.1", "express-rate-limit": "^8.2.1", "hono": "^4.11.4", "jose": "^6.1.3", "json-schema-typed": "^8.0.2", "pkce-challenge": "^5.0.0", "raw-body": "^3.0.0", "zod": "^3.25 || ^4.0", "zod-to-json-schema": "^3.25.1" }, "peerDependencies": { "@cfworker/json-schema": "^4.1.1" }, "optionalPeers": ["@cfworker/json-schema"] }, "sha512-Y5RmPncpiDtTXDbLKswIJzTqu2hyBKxTNsgKqKclDbhIgg1wgtf1fRuvxgTnRfcnxtvvgbIEcqUOzZrJ6iSReg=="],
+    "@modelcontextprotocol/sdk": ["@modelcontextprotocol/sdk@1.27.0", "", { "dependencies": { "@hono/node-server": "^1.19.9", "ajv": "^8.17.1", "ajv-formats": "^3.0.1", "content-type": "^1.0.5", "cors": "^2.8.5", "cross-spawn": "^7.0.5", "eventsource": "^3.0.2", "eventsource-parser": "^3.0.0", "express": "^5.2.1", "express-rate-limit": "^8.2.1", "hono": "^4.11.4", "jose": "^6.1.3", "json-schema-typed": "^8.0.2", "pkce-challenge": "^5.0.0", "raw-body": "^3.0.0", "zod": "^3.25 || ^4.0", "zod-to-json-schema": "^3.25.1" }, "peerDependencies": { "@cfworker/json-schema": "^4.1.1" }, "optionalPeers": ["@cfworker/json-schema"] }, "sha512-qOdO524oPMkUsOJTrsH9vz/HN3B5pKyW+9zIW51A9kDMVe7ON70drz1ouoyoyOcfzc+oxhkQ6jWmbyKnlWmYqA=="],
 
     "@tkeron/commands": ["@tkeron/commands@0.4.6", "", { "peerDependencies": { "typescript": "^5.9.3" } }, "sha512-Bojs3GmIpvd/4Mcw7FvbohRcDyHEzs3ZJHxwIeXE0diQzN+ER3R30xIFovgzwE8QfWvC9uFDaN2VTk4O+0ffyA=="],
 

package/changelog.md

@@ -1,3 +1,27 @@
+# v5.1.0
+
+## Feature: .com.html template injection into .com.ts components
+
+- When both `name.com.html` and `name.com.ts` exist for the same component, the `.com.html` content is loaded as `com.innerHTML` before executing the `.com.ts` code
+- The `.com.html` acts as a static template that `.com.ts` can read, modify, or override
+- Template resolution uses the same priority system: adjacent to `.com.ts` first, then fallback to root
+- Fully backwards compatible: `.com.ts`-only components work exactly as before
+- Added example `with_com_html_in_ts` demonstrating the feature
+
+---
+
+# v5.0.2
+
+## Performance: component processing optimization
+
+- Perf: single glob scan per build pass to pre-load all component paths into a `Map<tagName, filePath[]>` — eliminates O(pages × components) filesystem scans in `processCom`, `processComTs`, `processComMd`
+- Perf: `Map<path, content>` cache avoids redundant disk reads when the same component is used across multiple pages
+- Perf: `Map<code, jsCode>` transpilation cache in `processComTs` — `Bun.Transpiler.transformSync` result reused for unchanged `.com.ts` files
+- Perf: parallel page processing via `Promise.all` instead of sequential `for...of` — independent pages now process concurrently
+- Perf: lazy `package.json` read in `processPre` — removed top-level `await` that ran on module import regardless of whether pre-rendering was needed
+
+---
+
 # v5.0.1
 
 ## Documentation fixes and dependency updates

package/docs/components-markdown.md

@@ -76,6 +76,8 @@ When multiple component types exist for the same name, Tkeron uses this priority
 2. **`.com.html`** (HTML components)
 3. **`.com.md`** (Markdown components — lowest priority)
 
+**Special case:** When both `.com.ts` and `.com.html` exist for the same name, the `.com.html` is loaded as the template (`com.innerHTML`) before the `.com.ts` executes. See [TypeScript Components — HTML Template + TypeScript Logic](./components-typescript.md#html-template--typescript-logic).
+
 If both `hero-text.com.html` and `hero-text.com.md` exist, the `.com.html` version is used and `.com.md` is ignored.
 
 ### 4. Build Process

package/docs/components-typescript.md

@@ -540,6 +540,65 @@ If a component doesn't need attributes or logic, use [HTML components](./compone
 </footer>
 ```
 
+## HTML Template + TypeScript Logic
+
+When both `name.com.html` and `name.com.ts` exist for the same component, the `.com.html` content is loaded as `com.innerHTML` **before** the `.com.ts` code executes. This lets you separate structure from logic.
+
+### How It Works
+
+```
+1. Tkeron finds <user-card name="Alice">
+2. Loads user-card.com.html content into com.innerHTML
+3. Executes user-card.com.ts (com already has the template)
+4. Replaces <user-card> with the final com.innerHTML
+```
+
+### Example
+
+**Template** (`user-card.com.html`):
+
+```html
+<div class="card">
+  <h3 class="name"></h3>
+  <p class="role"></p>
+</div>
+```
+
+**Logic** (`user-card.com.ts`):
+
+```typescript
+const name = com.getAttribute("data-name") || "Unknown";
+const role = com.getAttribute("data-role") || "N/A";
+
+const nameEl = com.querySelector(".name");
+const roleEl = com.querySelector(".role");
+
+if (nameEl) nameEl.textContent = name;
+if (roleEl) roleEl.textContent = `Role: ${role}`;
+```
+
+**Usage:**
+
+```html
+<user-card data-name="Alice" data-role="Developer"></user-card>
+```
+
+**Output:**
+
+```html
+<div class="card">
+  <h3 class="name">Alice</h3>
+  <p class="role">Role: Developer</p>
+</div>
+```
+
+### Key Points
+
+- The `.com.ts` can read, modify, or completely override the template
+- If only `.com.ts` exists (no `.com.html`), it works exactly as before
+- Template resolution follows the same directory priority as components (adjacent first, then root)
+- Great for separating HTML structure from dynamic logic
+
 ## Debugging
 
 ### Log at Build Time

package/examples/with_com_html_in_ts/src/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HTML Template in TS Component Example</title>
+  </head>
+  <body>
+    <h1>.com.html Template + .com.ts Logic</h1>
+
+    <user-card data-name="Alice" data-role="Developer"></user-card>
+    <user-card data-name="Bob" data-role="Designer"></user-card>
+
+    <info-panel data-title="Features">
+      <li>HTML templates for structure</li>
+      <li>TypeScript for logic</li>
+      <li>Clean separation of concerns</li>
+    </info-panel>
+  </body>
+</html>

package/examples/with_com_html_in_ts/src/info-panel.com.html

@@ -0,0 +1,12 @@
+<div
+  style="
+    background: #f0f9ff;
+    border: 1px solid #0284c7;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 16px 0;
+  "
+>
+  <h3 class="title" style="margin-top: 0; color: #0284c7"></h3>
+  <ul class="items"></ul>
+</div>

package/examples/with_com_html_in_ts/src/info-panel.com.ts

@@ -0,0 +1,3 @@
+const title = com.getAttribute("data-title") || "Info";
+const titleEl = com.querySelector(".title");
+if (titleEl) titleEl.textContent = title;

package/examples/with_com_html_in_ts/src/user-card.com.html

@@ -0,0 +1,12 @@
+<div
+  style="
+    border: 2px solid #333;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 16px 0;
+    max-width: 300px;
+  "
+>
+  <h3 class="name" style="margin-top: 0; color: #2563eb"></h3>
+  <p class="role"></p>
+</div>

package/examples/with_com_html_in_ts/src/user-card.com.ts

@@ -0,0 +1,8 @@
+const name = com.getAttribute("data-name") || "Unknown";
+const role = com.getAttribute("data-role") || "N/A";
+
+const nameEl = com.querySelector(".name");
+const roleEl = com.querySelector(".role");
+
+if (nameEl) nameEl.textContent = name;
+if (roleEl) roleEl.textContent = `Role: ${role}`;

package/mcp-server.ts

@@ -106,6 +106,8 @@ const EXAMPLE_DESCRIPTIONS: { [key: string]: string } = {
     "TypeScript components (.com.ts) with local override priority",
   with_com_mixed_priority:
     "Mixed .com.html and .com.ts showing processing order",
+  with_com_html_in_ts:
+    "HTML template (.com.html) injected into .com.ts as com.innerHTML before execution",
   with_component_iteration:
     "Component iteration: .com.ts with logic, .com.html for templates",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tkeron",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "description": "CLI build tool for vanilla web development with TypeScript.",
   "type": "module",
   "main": "./src/index.ts",
@@ -26,12 +26,13 @@
     "sample5": "bun . build examples/with_com_ts/src",
     "sample6": "bun . build examples/with_com_ts_priority/src",
     "sample7": "bun . build examples/with_com_mixed_priority/src",
-    "build_examples": "bun run sample1 && bun run sample2 && bun run sample3 && bun run sample4 && bun run sample5 && bun run sample6 && bun run sample7"
+    "sample8": "bun . build examples/with_com_html_in_ts/src",
+    "build_examples": "bun run sample1 && bun run sample2 && bun run sample3 && bun run sample4 && bun run sample5 && bun run sample6 && bun run sample7 && bun run sample8"
   },
   "author": "tkeron",
   "license": "MIT",
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.26.0",
+    "@modelcontextprotocol/sdk": "^1.27.0",
     "@tkeron/commands": "0.4.6",
     "@tkeron/html-parser": "1.5.5",
     "@tkeron/tools": "^0.4.0"

package/src/processCom.ts

@@ -12,10 +12,50 @@ const ensureHtmlDocument = (html: string): string => {
   return `${DOCTYPE}<html><head></head><body>${html}</body></html>`;
 };
 
+interface ComponentCache {
+  componentMap: Map<string, string[]>;
+  contentCache: Map<string, string>;
+}
+
+const buildComponentMap = (rootDir: string): Map<string, string[]> => {
+  const allFiles = getFilePaths(rootDir, "**/*.com.html", true);
+  const map = new Map<string, string[]>();
+  for (const file of allFiles) {
+    const basename = file.split("/").pop()!;
+    const tagName = basename.replace(/\.com\.html$/, "");
+    if (!map.has(tagName)) map.set(tagName, []);
+    map.get(tagName)!.push(file);
+  }
+  return map;
+};
+
+const getCachedContent = async (
+  path: string,
+  cache: Map<string, string>,
+): Promise<string> => {
+  const cached = cache.get(path);
+  if (cached !== undefined) return cached;
+  const content = await Bun.file(path).text();
+  cache.set(path, content);
+  return content;
+};
+
 export interface ProcessComOptions {
   logger?: Logger;
 }
 
+const resolveComponent = (
+  tagName: string,
+  currentDir: string,
+  componentMap: Map<string, string[]>,
+): string | null => {
+  const matches = componentMap.get(tagName);
+  if (!matches || matches.length === 0) return null;
+  const localPath = join(currentDir, `${tagName}.com.html`);
+  if (matches.includes(localPath)) return localPath;
+  return matches[0]!;
+};
+
 export const processCom = async (
   tempDir: string,
   options: ProcessComOptions = {},
@@ -27,37 +67,45 @@ export const processCom = async (
     return false;
   }
 
+  const componentMap = buildComponentMap(tempDir);
+  const cache: ComponentCache = {
+    componentMap,
+    contentCache: new Map(),
+  };
+
   const htmlFiles = getFilePaths(tempDir, "**/*.html", true).filter(
     (p) => !p.endsWith(".com.html"),
   );
 
-  let hasChanges = false;
-
-  for (const htmlFile of htmlFiles) {
-    const htmlContent = await Bun.file(htmlFile).text();
-    const document = parseHTML(ensureHtmlDocument(htmlContent));
-
-    const htmlElement =
-      document.querySelector("html") || document.documentElement;
-    if (htmlElement) {
-      const changed = await processComponents(
-        htmlElement,
-        dirname(htmlFile),
-        tempDir,
-        [],
-        0,
-        log,
-      );
-      hasChanges = hasChanges || changed;
-    }
+  const results = await Promise.all(
+    htmlFiles.map(async (htmlFile) => {
+      const htmlContent = await Bun.file(htmlFile).text();
+      const document = parseHTML(ensureHtmlDocument(htmlContent));
+
+      const htmlElement =
+        document.querySelector("html") || document.documentElement;
+      let changed = false;
+      if (htmlElement) {
+        changed = await processComponents(
+          htmlElement,
+          dirname(htmlFile),
+          tempDir,
+          [],
+          0,
+          log,
+          cache,
+        );
+      }
 
-    const output =
-      DOCTYPE +
-      (htmlElement?.outerHTML || document.documentElement?.outerHTML || "");
-    await Bun.write(htmlFile, output);
-  }
+      const output =
+        DOCTYPE +
+        (htmlElement?.outerHTML || document.documentElement?.outerHTML || "");
+      await Bun.write(htmlFile, output);
+      return changed;
+    }),
+  );
 
-  return hasChanges;
+  return results.some(Boolean);
 };
 
 const processComponents = async (
@@ -67,6 +115,7 @@ const processComponents = async (
   componentStack: string[],
   depth: number = 0,
   log: Logger = silentLogger,
+  cache: ComponentCache,
 ): Promise<boolean> => {
   let hasChanges = false;
   const MAX_DEPTH = 50;
@@ -82,13 +131,10 @@ const processComponents = async (
 
     if (tagName) {
       if (!tagName.includes("-")) {
-        const localPath = join(currentDir, `${tagName}.com.html`);
-        const globMatches = getFilePaths(
-          rootDir,
-          `**/${tagName}.com.html`,
-          true,
-        );
-        if ((await Bun.file(localPath).exists()) || globMatches.length > 0) {
+        const matches = cache.componentMap.get(tagName);
+        if (matches && matches.length > 0) {
+          const localPath = join(currentDir, `${tagName}.com.html`);
+          const filePath = matches.includes(localPath) ? localPath : matches[0];
           log.error(
             `\n❌ Error: Component name '${tagName}' must contain at least one hyphen.`,
           );
@@ -96,30 +142,17 @@ const processComponents = async (
           log.error(
             `   Rename '${tagName}.com.html' to 'tk-${tagName}.com.html' or similar.`,
           );
-          log.error(
-            `   File: ${(await Bun.file(localPath).exists()) ? localPath : globMatches[0]}\n`,
-          );
+          log.error(`   File: ${filePath}\n`);
           throw new Error(
             `Component name '${tagName}' must contain at least one hyphen`,
           );
         }
       } else {
-        const localPath = join(currentDir, `${tagName}.com.html`);
-
-        let componentPath: string | null = null;
-
-        if (await Bun.file(localPath).exists()) {
-          componentPath = localPath;
-        } else {
-          const globMatches = getFilePaths(
-            rootDir,
-            `**/${tagName}.com.html`,
-            true,
-          );
-          if (globMatches.length > 0) {
-            componentPath = globMatches[0];
-          }
-        }
+        const componentPath = resolveComponent(
+          tagName,
+          currentDir,
+          cache.componentMap,
+        );
 
         if (componentPath) {
           hasChanges = true;
@@ -137,7 +170,10 @@ const processComponents = async (
             throw new Error(`Circular dependency: ${chain}`);
           }
 
-          const componentHtml = await Bun.file(componentPath).text();
+          const componentHtml = await getCachedContent(
+            componentPath,
+            cache.contentCache,
+          );
 
           const tempDoc = parseHTML(
             `<html><body><div id="__tkeron_component_root__">${componentHtml}</div></body></html>`,
@@ -182,6 +218,7 @@ const processComponents = async (
                 nextStack,
                 depth + 1,
                 log,
+                cache,
               );
               hasChanges = hasChanges || nestedChanged;
             }
@@ -197,6 +234,7 @@ const processComponents = async (
       componentStack,
       depth,
       log,
+      cache,
     );
     hasChanges = hasChanges || childChanged;
   }

package/src/processComMd.ts

@@ -12,10 +12,50 @@ const ensureHtmlDocument = (html: string): string => {
   return `${DOCTYPE}<html><head></head><body>${html}</body></html>`;
 };
 
+interface ComponentCache {
+  componentMap: Map<string, string[]>;
+  contentCache: Map<string, string>;
+}
+
+const buildComponentMap = (rootDir: string): Map<string, string[]> => {
+  const allFiles = getFilePaths(rootDir, "**/*.com.md", true);
+  const map = new Map<string, string[]>();
+  for (const file of allFiles) {
+    const basename = file.split("/").pop()!;
+    const tagName = basename.replace(/\.com\.md$/, "");
+    if (!map.has(tagName)) map.set(tagName, []);
+    map.get(tagName)!.push(file);
+  }
+  return map;
+};
+
+const getCachedContent = async (
+  path: string,
+  cache: Map<string, string>,
+): Promise<string> => {
+  const cached = cache.get(path);
+  if (cached !== undefined) return cached;
+  const content = await Bun.file(path).text();
+  cache.set(path, content);
+  return content;
+};
+
 export interface ProcessComMdOptions {
   logger?: Logger;
 }
 
+const resolveComponent = (
+  tagName: string,
+  currentDir: string,
+  componentMap: Map<string, string[]>,
+): string | null => {
+  const matches = componentMap.get(tagName);
+  if (!matches || matches.length === 0) return null;
+  const localPath = join(currentDir, `${tagName}.com.md`);
+  if (matches.includes(localPath)) return localPath;
+  return matches[0]!;
+};
+
 export const processComMd = async (
   tempDir: string,
   options: ProcessComMdOptions = {},
@@ -27,37 +67,45 @@ export const processComMd = async (
     return false;
   }
 
+  const componentMap = buildComponentMap(tempDir);
+  const cache: ComponentCache = {
+    componentMap,
+    contentCache: new Map(),
+  };
+
   const htmlFiles = getFilePaths(tempDir, "**/*.html", true).filter(
     (p) => !p.endsWith(".com.html"),
   );
 
-  let hasChanges = false;
-
-  for (const htmlFile of htmlFiles) {
-    const htmlContent = await Bun.file(htmlFile).text();
-    const document = parseHTML(ensureHtmlDocument(htmlContent));
-
-    const htmlElement =
-      document.querySelector("html") || document.documentElement;
-    if (htmlElement) {
-      const changed = await processComponents(
-        htmlElement,
-        dirname(htmlFile),
-        tempDir,
-        [],
-        0,
-        log,
-      );
-      hasChanges = hasChanges || changed;
-    }
+  const results = await Promise.all(
+    htmlFiles.map(async (htmlFile) => {
+      const htmlContent = await Bun.file(htmlFile).text();
+      const document = parseHTML(ensureHtmlDocument(htmlContent));
+
+      const htmlElement =
+        document.querySelector("html") || document.documentElement;
+      let changed = false;
+      if (htmlElement) {
+        changed = await processComponents(
+          htmlElement,
+          dirname(htmlFile),
+          tempDir,
+          [],
+          0,
+          log,
+          cache,
+        );
+      }
 
-    const output =
-      DOCTYPE +
-      (htmlElement?.outerHTML || document.documentElement?.outerHTML || "");
-    await Bun.write(htmlFile, output);
-  }
+      const output =
+        DOCTYPE +
+        (htmlElement?.outerHTML || document.documentElement?.outerHTML || "");
+      await Bun.write(htmlFile, output);
+      return changed;
+    }),
+  );
 
-  return hasChanges;
+  return results.some(Boolean);
 };
 
 const processComponents = async (
@@ -67,6 +115,7 @@ const processComponents = async (
   componentStack: string[],
   depth: number = 0,
   log: Logger = silentLogger,
+  cache: ComponentCache,
 ): Promise<boolean> => {
   let hasChanges = false;
   const MAX_DEPTH = 50;
@@ -82,9 +131,10 @@ const processComponents = async (
 
     if (tagName) {
       if (!tagName.includes("-")) {
-        const localPath = join(currentDir, `${tagName}.com.md`);
-        const globMatches = getFilePaths(rootDir, `**/${tagName}.com.md`, true);
-        if ((await Bun.file(localPath).exists()) || globMatches.length > 0) {
+        const matches = cache.componentMap.get(tagName);
+        if (matches && matches.length > 0) {
+          const localPath = join(currentDir, `${tagName}.com.md`);
+          const filePath = matches.includes(localPath) ? localPath : matches[0];
           log.error(
             `\n❌ Error: Component name '${tagName}' must contain at least one hyphen.`,
           );
@@ -92,30 +142,17 @@ const processComponents = async (
           log.error(
             `   Rename '${tagName}.com.md' to 'tk-${tagName}.com.md' or similar.`,
           );
-          log.error(
-            `   File: ${(await Bun.file(localPath).exists()) ? localPath : globMatches[0]}\n`,
-          );
+          log.error(`   File: ${filePath}\n`);
           throw new Error(
             `Component name '${tagName}' must contain at least one hyphen`,
           );
         }
       } else {
-        const localPath = join(currentDir, `${tagName}.com.md`);
-
-        let componentPath: string | null = null;
-
-        if (await Bun.file(localPath).exists()) {
-          componentPath = localPath;
-        } else {
-          const globMatches = getFilePaths(
-            rootDir,
-            `**/${tagName}.com.md`,
-            true,
-          );
-          if (globMatches.length > 0) {
-            componentPath = globMatches[0];
-          }
-        }
+        const componentPath = resolveComponent(
+          tagName,
+          currentDir,
+          cache.componentMap,
+        );
 
         if (componentPath) {
           hasChanges = true;
@@ -131,7 +168,10 @@ const processComponents = async (
             throw new Error(`Circular dependency: ${chain}`);
           }
 
-          const mdContent = await Bun.file(componentPath).text();
+          const mdContent = await getCachedContent(
+            componentPath,
+            cache.contentCache,
+          );
           const componentHtml = Bun.markdown.html(mdContent);
 
           const tempDoc = parseHTML(
@@ -177,6 +217,7 @@ const processComponents = async (
                 nextStack,
                 depth + 1,
                 log,
+                cache,
               );
               hasChanges = hasChanges || nestedChanged;
             }
@@ -192,6 +233,7 @@ const processComponents = async (
       componentStack,
       depth,
       log,
+      cache,
     );
     hasChanges = hasChanges || childChanged;
   }

package/src/processComTs.ts

@@ -12,6 +12,60 @@ const ensureHtmlDocument = (html: string): string => {
   return `${DOCTYPE}<html><head></head><body>${html}</body></html>`;
 };
 
+interface ComponentCache {
+  componentMap: Map<string, string[]>;
+  htmlTemplateMap: Map<string, string[]>;
+  contentCache: Map<string, string>;
+  transpileCache: Map<string, string>;
+}
+
+const buildComponentMap = (rootDir: string): Map<string, string[]> => {
+  const allFiles = getFilePaths(rootDir, "**/*.com.ts", true);
+  const map = new Map<string, string[]>();
+  for (const file of allFiles) {
+    const basename = file.split("/").pop()!;
+    const tagName = basename.replace(/\.com\.ts$/, "");
+    if (!map.has(tagName)) map.set(tagName, []);
+    map.get(tagName)!.push(file);
+  }
+  return map;
+};
+
+const buildHtmlTemplateMap = (rootDir: string): Map<string, string[]> => {
+  const allFiles = getFilePaths(rootDir, "**/*.com.html", true);
+  const map = new Map<string, string[]>();
+  for (const file of allFiles) {
+    const basename = file.split("/").pop()!;
+    const tagName = basename.replace(/\.com\.html$/, "");
+    if (!map.has(tagName)) map.set(tagName, []);
+    map.get(tagName)!.push(file);
+  }
+  return map;
+};
+
+const getCachedContent = async (
+  path: string,
+  cache: Map<string, string>,
+): Promise<string> => {
+  const cached = cache.get(path);
+  if (cached !== undefined) return cached;
+  const content = await Bun.file(path).text();
+  cache.set(path, content);
+  return content;
+};
+
+const getCachedTranspile = (
+  tsCode: string,
+  cache: Map<string, string>,
+): string => {
+  const cached = cache.get(tsCode);
+  if (cached !== undefined) return cached;
+  const transpiler = new Bun.Transpiler({ loader: "ts" });
+  const jsCode = transpiler.transformSync(tsCode);
+  cache.set(tsCode, jsCode);
+  return jsCode;
+};
+
 export interface ProcessComTsOptions {
   logger?: Logger;
 }
@@ -27,38 +81,73 @@ export const processComTs = async (
     return false;
   }
 
+  const componentMap = buildComponentMap(tempDir);
+  const htmlTemplateMap = buildHtmlTemplateMap(tempDir);
+  const cache: ComponentCache = {
+    componentMap,
+    htmlTemplateMap,
+    contentCache: new Map(),
+    transpileCache: new Map(),
+  };
+
   const htmlFiles = getFilePaths(tempDir, "**/*.html", true).filter(
     (p) => !p.endsWith(".com.html"),
   );
 
-  let hasChanges = false;
+  const results = await Promise.all(
+    htmlFiles.map(async (htmlFile) => {
+      const htmlContent = await Bun.file(htmlFile).text();
+      const document = parseHTML(ensureHtmlDocument(htmlContent));
+
+      const htmlElement =
+        document.querySelector("html") || document.documentElement;
+      let changed = false;
+      if (htmlElement) {
+        changed = await processComponentsTs(
+          htmlElement,
+          dirname(htmlFile),
+          tempDir,
+          [],
+          0,
+          log,
+          options,
+          cache,
+        );
+      }
 
-  for (const htmlFile of htmlFiles) {
-    const htmlContent = await Bun.file(htmlFile).text();
-    const document = parseHTML(ensureHtmlDocument(htmlContent));
-
-    const htmlElement =
-      document.querySelector("html") || document.documentElement;
-    if (htmlElement) {
-      const changed = await processComponentsTs(
-        htmlElement,
-        dirname(htmlFile),
-        tempDir,
-        [],
-        0,
-        log,
-        options,
-      );
-      hasChanges = hasChanges || changed;
-    }
+      const output =
+        DOCTYPE +
+        (htmlElement?.outerHTML || document.documentElement?.outerHTML || "");
+      await Bun.write(htmlFile, output);
+      return changed;
+    }),
+  );
 
-    const output =
-      DOCTYPE +
-      (htmlElement?.outerHTML || document.documentElement?.outerHTML || "");
-    await Bun.write(htmlFile, output);
-  }
+  return results.some(Boolean);
+};
 
-  return hasChanges;
+const resolveComponent = (
+  tagName: string,
+  currentDir: string,
+  componentMap: Map<string, string[]>,
+): string | null => {
+  const matches = componentMap.get(tagName);
+  if (!matches || matches.length === 0) return null;
+  const localPath = join(currentDir, `${tagName}.com.ts`);
+  if (matches.includes(localPath)) return localPath;
+  return matches[0]!;
+};
+
+const resolveHtmlTemplate = (
+  tagName: string,
+  tsDir: string,
+  htmlTemplateMap: Map<string, string[]>,
+): string | null => {
+  const matches = htmlTemplateMap.get(tagName);
+  if (!matches || matches.length === 0) return null;
+  const adjacentPath = join(tsDir, `${tagName}.com.html`);
+  if (matches.includes(adjacentPath)) return adjacentPath;
+  return matches[0]!;
 };
 
 const processComponentsTs = async (
@@ -69,6 +158,7 @@ const processComponentsTs = async (
   depth: number = 0,
   log: Logger = silentLogger,
   options: ProcessComTsOptions = {},
+  cache: ComponentCache,
 ): Promise<boolean> => {
   let hasChanges = false;
   const MAX_DEPTH = 50;
@@ -84,9 +174,10 @@ const processComponentsTs = async (
 
     if (tagName) {
       if (!tagName.includes("-")) {
-        const localPath = join(currentDir, `${tagName}.com.ts`);
-        const globMatches = getFilePaths(rootDir, `**/${tagName}.com.ts`, true);
-        if ((await Bun.file(localPath).exists()) || globMatches.length > 0) {
+        const matches = cache.componentMap.get(tagName);
+        if (matches && matches.length > 0) {
+          const localPath = join(currentDir, `${tagName}.com.ts`);
+          const filePath = matches.includes(localPath) ? localPath : matches[0];
           log.error(
             `\n❌ Error: Component name '${tagName}' must contain at least one hyphen.`,
           );
@@ -94,30 +185,17 @@ const processComponentsTs = async (
           log.error(
             `   Rename '${tagName}.com.ts' to 'tk-${tagName}.com.ts' or similar.`,
           );
-          log.error(
-            `   File: ${(await Bun.file(localPath).exists()) ? localPath : globMatches[0]}\n`,
-          );
+          log.error(`   File: ${filePath}\n`);
           throw new Error(
             `Component name '${tagName}' must contain at least one hyphen`,
           );
         }
       } else {
-        const localPath = join(currentDir, `${tagName}.com.ts`);
-
-        let componentPath: string | null = null;
-
-        if (await Bun.file(localPath).exists()) {
-          componentPath = localPath;
-        } else {
-          const globMatches = getFilePaths(
-            rootDir,
-            `**/${tagName}.com.ts`,
-            true,
-          );
-          if (globMatches.length > 0) {
-            componentPath = globMatches[0];
-          }
-        }
+        const componentPath = resolveComponent(
+          tagName,
+          currentDir,
+          cache.componentMap,
+        );
 
         if (componentPath) {
           hasChanges = true;
@@ -133,7 +211,10 @@ const processComponentsTs = async (
             throw new Error(`Circular dependency: ${chain}`);
           }
 
-          const originalComponentCode = await Bun.file(componentPath).text();
+          const originalComponentCode = await getCachedContent(
+            componentPath,
+            cache.contentCache,
+          );
 
           const elementHTML = (child as any).outerHTML;
 
@@ -155,6 +236,19 @@ const processComponentsTs = async (
             );
           }
 
+          const htmlTemplatePath = resolveHtmlTemplate(
+            tagName,
+            dirname(componentPath),
+            cache.htmlTemplateMap,
+          );
+          if (htmlTemplatePath) {
+            const templateContent = await getCachedContent(
+              htmlTemplatePath,
+              cache.contentCache,
+            );
+            com.innerHTML = templateContent;
+          }
+
           const hasImports = /^\s*import\s+/m.test(originalComponentCode);
 
           try {
@@ -187,13 +281,15 @@ ${codeWithoutImports}
                 await module.component(com);
               } finally {
                 try {
-                  const fs = await import("fs/promises");
-                  await fs.unlink(tempPath);
+                  const { unlink } = await import("fs/promises");
+                  await unlink(tempPath);
                 } catch {}
               }
             } else {
-              const transpiler = new Bun.Transpiler({ loader: "ts" });
-              const jsCode = transpiler.transformSync(originalComponentCode);
+              const jsCode = getCachedTranspile(
+                originalComponentCode,
+                cache.transpileCache,
+              );
               const AsyncFunction = Object.getPrototypeOf(
                 async function () {},
               ).constructor;
@@ -232,6 +328,7 @@ ${codeWithoutImports}
             depth + 1,
             log,
             options,
+            cache,
           );
 
           const nodesToInsert = Array.from((div as any).childNodes || []).map(
@@ -266,6 +363,7 @@ ${codeWithoutImports}
       depth,
       log,
       options,
+      cache,
     );
     hasChanges = hasChanges || childChanged;
   }

package/src/processPre.ts

@@ -4,8 +4,14 @@ import type { Logger } from "@tkeron/tools";
 import { silentLogger } from "@tkeron/tools";
 
 const packageJsonPath = join(import.meta.dir, "..", "package.json");
-const packageJson = await Bun.file(packageJsonPath).json();
-const TKERON_VERSION = packageJson.version;
+
+let _tkeronVersion: string | null = null;
+const getTkeronVersion = async (): Promise<string> => {
+  if (_tkeronVersion) return _tkeronVersion;
+  const packageJson = await Bun.file(packageJsonPath).json();
+  _tkeronVersion = packageJson.version;
+  return _tkeronVersion!;
+};
 
 const HTML_PARSER_PATH = import.meta.resolve("@tkeron/html-parser");
 
@@ -40,6 +46,8 @@ export const processPre = async (
 
   const hasChanges = preFiles.length > 0;
 
+  const TKERON_VERSION = hasChanges ? await getTkeronVersion() : "";
+
   for (const preFile of preFiles) {
     const htmlFile = preFile.replace(/\.pre\.ts$/, ".html");