tkeron 5.0.0 → 5.0.2

package/README.md

@@ -82,8 +82,8 @@ document.getElementById("quote").textContent = data.content;
 
 ```bash
 tk init <name>           # Initialize new project
-tk build [src] [out]     # Build project (default: websrc → web)
-tk dev [src] [out]       # Dev server with hot reload (port 3000)
+tk build                 # Build project (websrc → web)
+tk dev [port] [host]     # Dev server with hot reload (default: localhost:3000)
 ```
 
 **Aliases:** `tk i`, `tk b`, `tk d`

package/changelog.md

@@ -1,3 +1,33 @@
+# 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
+
+- Fix: `tk build` and `tk dev` CLI signatures corrected in README (removed wrong `[src] [out]` args, aligned with v5.0 breaking change)
+- Fix: Component resolution docs updated to reflect actual glob search behavior (not limited to root `websrc/`)
+- Fix: Build process docs updated to include `.com.md` processing step and iterative loop (up to 10 iterations)
+- Fix: `tsconfig.json` example corrected to match real config (`lib: ["ESNext", "DOM"]`, removed `types: ["bun-types"]`)
+- Fix: TypeScript compilation docs clarified — Bun transpiler does NOT type-check, only transpiles
+- Fix: Broken link `tkeron.dev/docs` → `tkeron.com`
+- Fix: `components-html.md` quick start used `<button>` (reserved HTML tag, no hyphen) — replaced with `<my-button>`
+- Fix: `best-practices.md` Summary had orphaned/corrupted code fragment — removed
+- Fix: Added `.com.md` to all feature lists, tables, and build process diagrams across all docs
+- Fix: `package.json` description updated to reflect actual purpose
+- Deps: `bun update --latest` — updated all dependencies
+
+---
+
 # v5.0.0
 
 ## Breaking: sourceDir and targetDir removed as CLI arguments

package/docs/best-practices.md

@@ -231,23 +231,20 @@ document.getElementById("stars").textContent = data.public_repos;
 
 - HTML components: static markup
 - TypeScript components: dynamic generation
+- Markdown components: content in Markdown
 - Pre-rendering: DOM manipulation at build time
 - Browser code: regular TypeScript/JavaScript
 - No bundling of npm packages
 - No type checking (use `tsc --noEmit`)
 - Powered by Bun
-  document.querySelectorAll('.my-button').forEach(btn => {
-  btn.addEventListener('click', handleClick);
-  });
-  });
 
-````
+---
 
 ```typescript
 // ❌ Don't try to maintain state
 let count = 0; // This is meaningless
 com.innerHTML = `<button>Count: ${count}</button>`;
-````
+```
 
 **Solution:** Use client-side JavaScript for stateful UI.
 

package/docs/cli-reference.md

@@ -75,16 +75,20 @@ tk b
 1. Creates temporary directory as sibling to source
 2. Copies source to temp directory
 3. Runs `.pre.ts` files (pre-rendering)
-4. Processes `.com.ts` components (TypeScript components)
-5. Processes `.com.html` components (HTML components)
-6. Compiles TypeScript to JavaScript
-7. Copies result to target directory
-8. Cleans up temporary directory
+4. Iterative component processing (up to 10 iterations):
+   - Processes `.com.ts` components (TypeScript components)
+   - Processes `.com.html` components (HTML components)
+   - Processes `.com.md` components (Markdown components)
+   - Repeats until no changes are detected
+5. Compiles TypeScript to JavaScript
+6. Copies result to target directory
+7. Cleans up temporary directory
 
 **Files Excluded from Output:**
 
 - `*.com.html` - HTML components (inlined)
 - `*.com.ts` - TypeScript components (inlined)
+- `*.com.md` - Markdown components (inlined)
 - `*.pre.ts` - Pre-rendering scripts (executed)
 
 **Exit Codes:**
@@ -448,8 +452,8 @@ Tkeron doesn't require a `tsconfig.json`, but you can add one for editor support
   "compilerOptions": {
     "target": "ESNext",
     "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
     "moduleResolution": "bundler",
-    "types": ["bun-types"],
     "strict": true,
     "skipLibCheck": true
   },
@@ -635,7 +639,7 @@ tk
 This document! Also available at:
 
 - [GitHub Repository](https://github.com/tkeron/tkeron)
-- [Documentation Site](https://tkeron.dev/docs)
+- [Documentation Site](https://tkeron.com)
 
 ### Report Issues
 

package/docs/common-issues.md

@@ -125,9 +125,9 @@ blog-post.com.ts      → <blog-post>
 
 ## TypeScript Compilation
 
-### Issue: TypeScript Errors Prevent Build
+### Issue: TypeScript Errors in Source
 
-**Problem:** Type errors block compilation
+**Problem:** TypeScript code has type errors
 
 ```typescript
 // ❌ WRONG
@@ -135,18 +135,24 @@ const user = { name: "Alice" };
 user.age = 30; // Error: Property 'age' does not exist
 ```
 
-**Why this happens:**
+**Why this matters:**
 
-- Tkeron uses Bun's TypeScript transpiler
-- Type errors can prevent successful builds
-- Missing types for global variables
+- Tkeron uses Bun's TypeScript transpiler, which **does NOT type-check** — it only transpiles
+- Type errors won't prevent the build from running
+- However, type errors may indicate real bugs in your code
+- Missing types for global variables can confuse your IDE
 
 **Solution:**
 
+- Run `tsc --noEmit` separately to catch type errors before building
 - Use `tkeron.d.ts` for global type declarations
-- Fix type errors before building
 - Use `any` strategically if types are complex
 
+```bash
+# Check types, then build
+tsc --noEmit && tk build
+```
+
 ```typescript
 // ✅ CORRECT
 const user: { name: string; age?: number } = { name: "Alice" };
@@ -166,16 +172,17 @@ user.age = 30; // OK
 
 **Why this happens:**
 
-- Tkeron searches in 2 locations only:
+- Tkeron searches in 2 ways:
   1. Same directory as HTML file
-  2. Root directory (`websrc/`)
-- Not in subdirectories or parent directories (except root)
+  2. Glob search across the entire source tree
+- If no match is found in either, the element remains unchanged
 
 **Solution:**
-Either place component:
+Place the component file anywhere in the source tree — Tkeron will find it via glob search. For clarity, common locations:
 
-- In `blog/user-card.com.html` (next to `post.html`)
-- Or in `websrc/user-card.com.html` (root, available everywhere)
+- In `blog/user-card.com.html` (next to `post.html` — higher priority)
+- In `websrc/user-card.com.html` (root)
+- In `websrc/components/user-card.com.html` (organized in a subfolder)
 
 ## Build Performance
 

package/docs/components-html.md

@@ -7,7 +7,7 @@ HTML components (`.com.html` files) are the simplest way to create reusable piec
 Create a file named with `.com.html` extension:
 
 ```html
-<!-- button.com.html -->
+<!-- my-button.com.html -->
 <button class="btn">Click me</button>
 ```
 
@@ -15,7 +15,7 @@ Use it with a matching custom element:
 
 ```html
 <!-- index.html -->
-<button></button>
+<my-button></my-button>
 ```
 
 Build, and the custom element is replaced with the component's content.
@@ -36,7 +36,7 @@ Component filenames must:
 | -------------------- | -------------- | ------------------------- |
 | `user-card.com.html` | `<user-card>`  | ✅ Yes                    |
 | `nav-menu.com.html`  | `<nav-menu>`   | ✅ Yes                    |
-| `header.com.html`    | `<header>`     | ❌ No (no hyphen)         |
+| `card.com.html`      | `<card>`       | ❌ No (no hyphen)         |
 | `UserCard.com.html`  | `<user-card>`  | ✅ Yes (case-insensitive) |
 
 ### 2. Component Resolution
@@ -44,23 +44,25 @@ Component filenames must:
 Tkeron looks for components in this order:
 
 1. **Same directory** as the file using it
-2. **Root directory** (`websrc/`)
+2. **Any directory** in the source tree (via glob search)
 
 **Example structure:**
 
 ```
 websrc/
 ├── index.html
-├── header.com.html          # Available to all files
+├── site-header.com.html        # Available to all files
+├── components/
+│   └── blog-comment.com.html   # Also available to all files
 ├── blog/
 │   ├── post.html
-│   └── comment.com.html     # Available only to blog/post.html
+│   └── blog-comment.com.html   # Takes priority for blog/post.html
 ```
 
 In `blog/post.html`:
 
-- `<comment>` → Finds `blog/comment.com.html` first
-- `<header>` → Falls back to `websrc/header.com.html`
+- `<blog-comment>` → Finds `blog/blog-comment.com.html` first (same directory)
+- `<site-header>` → Found via glob search in the source tree
 
 ### 3. Build Process
 

package/docs/components-markdown.md

@@ -50,23 +50,23 @@ Component filenames must:
 Tkeron looks for components in this order:
 
 1. **Same directory** as the file using it
-2. **Root directory** (`websrc/`)
+2. **Any directory** in the source tree (via glob search)
 
 **Example structure:**
 
 ```
 websrc/
 ├── index.html
-├── site-intro.com.md         # Available to all files
+├── site-intro.com.md           # Available to all files
 ├── blog/
 │   ├── post.html
-│   └── post-footer.com.md    # Available only to blog/post.html
+│   └── post-footer.com.md      # Takes priority for blog/post.html
 ```
 
 In `blog/post.html`:
 
-- `<post-footer>` → Finds `blog/post-footer.com.md` first
-- `<site-intro>` → Falls back to `websrc/site-intro.com.md`
+- `<post-footer>` → Finds `blog/post-footer.com.md` first (same directory)
+- `<site-intro>` → Found via glob search in the source tree
 
 ### 3. Component Priority
 

package/docs/components-typescript.md

@@ -84,7 +84,7 @@ Custom elements in HTML must contain at least one hyphen to distinguish them fro
 Same as HTML components:
 
 1. **Same directory** as the file using it
-2. **Root directory** (`websrc/`)
+2. **Any directory** in the source tree (via glob search)
 
 ### IDE Support & IntelliSense
 

package/docs/getting-started.md

@@ -88,7 +88,7 @@ web/
 └── ...              # Other processed files
 ```
 
-Notice that `.com.html`, `.com.ts`, and `.pre.ts` files are **not** copied to output - they're processed and inlined.
+Notice that `.com.html`, `.com.ts`, `.com.md`, and `.pre.ts` files are **not** copied to output - they're processed and inlined.
 
 ## Start Development Server
 
@@ -198,6 +198,7 @@ Open `web/index.html` in your browser. You'll see the greeting component inlined
 | `.ts` / `.js`       | Scripts for pages     | ✅ Yes (compiled) |
 | `.com.html`         | HTML components       | ❌ No (inlined)   |
 | `.com.ts`           | TypeScript components | ❌ No (inlined)   |
+| `.com.md`           | Markdown components   | ❌ No (inlined)   |
 | `.pre.ts`           | Pre-rendering scripts | ❌ No (executed)  |
 | `.css`              | Stylesheets           | ✅ Yes            |
 | Images, fonts, etc. | Static assets         | ✅ Yes            |
@@ -271,4 +272,4 @@ tk dev 3001
 
 - Component names **must** contain a hyphen: `user-card`, not `usercard`
 - File must be named exactly: `user-card.com.html`
-- Component files must be in `websrc/` or the same directory as the page using them
+- Component files can be anywhere in the source tree — Tkeron searches the same directory first, then the entire source via glob

package/docs/overview.md

@@ -11,6 +11,7 @@ Powered by [Bun](https://bun.sh).
 - Compiles TypeScript to JavaScript
 - Inlines HTML components (`.com.html`)
 - Executes TypeScript components (`.com.ts`) at build time
+- Renders Markdown components (`.com.md`) at build time
 - Runs pre-rendering scripts (`.pre.ts`)
 - Copies assets
 - Dev server with hot reload
@@ -107,11 +108,12 @@ websrc/               Build Steps           web/
 ├── index.html    →  1. .pre.ts        →  ├── index.html
 ├── index.ts         2. .com.ts           ├── index.js
 ├── index.pre.ts     3. .com.html
-├── nav.com.html     4. TypeScript
-└── card.com.ts      5. Assets
+├── nav.com.html     4. .com.md
+├── card.com.ts      5. TypeScript
+└── info.com.md      6. Assets
 ```
 
-Component files (`.com.html`, `.com.ts`, `.pre.ts`) are not copied to output.
+Component files (`.com.html`, `.com.ts`, `.com.md`, `.pre.ts`) are not copied to output.
 
 ---
 

package/docs/pre-rendering.md

@@ -71,10 +71,13 @@ This is the parsed DOM from the corresponding `.html` file.
 
 ```
 1. Run .pre.ts files    → Modify HTML documents
-2. Process .com.ts      → Replace TypeScript components
-3. Process .com.html    → Replace HTML components
-4. Compile .ts to .js   → TypeScript compilation
-5. Copy to output       → Final build
+2. Iterative component processing (up to 10 iterations):
+   a. Process .com.ts   → Replace TypeScript components
+   b. Process .com.html → Replace HTML components
+   c. Process .com.md   → Replace Markdown components
+   d. Repeat until no changes
+3. Compile .ts to .js   → TypeScript compilation
+4. Copy to output       → Final build
 ```
 
 Pre-rendering happens **first**, so you can inject components dynamically.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tkeron",
-  "version": "5.0.0",
-  "description": "CLI tool for backend-driven frontend development with TypeScript.",
+  "version": "5.0.2",
+  "description": "CLI build tool for vanilla web development with TypeScript.",
   "type": "module",
   "main": "./src/index.ts",
   "exports": {

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,47 @@ const ensureHtmlDocument = (html: string): string => {
   return `${DOCTYPE}<html><head></head><body>${html}</body></html>`;
 };
 
+interface ComponentCache {
+  componentMap: 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 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 +68,59 @@ export const processComTs = async (
     return false;
   }
 
+  const componentMap = buildComponentMap(tempDir);
+  const cache: ComponentCache = {
+    componentMap,
+    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 processComponentsTs = async (
@@ -69,6 +131,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 +147,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 +158,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 +184,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;
 
@@ -187,13 +241,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 +288,7 @@ ${codeWithoutImports}
             depth + 1,
             log,
             options,
+            cache,
           );
 
           const nodesToInsert = Array.from((div as any).childNodes || []).map(
@@ -266,6 +323,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");