tkeron 5.1.0 → 5.2.0

package/bun.lock

@@ -5,30 +5,30 @@
     "": {
       "name": "tkeron",
       "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.27.0",
-        "@tkeron/commands": "0.4.6",
-        "@tkeron/html-parser": "1.5.5",
-        "@tkeron/tools": "^0.4.0",
+        "@modelcontextprotocol/sdk": "^1.29.0",
+        "@tkeron/commands": "0.4.7",
+        "@tkeron/html-parser": "1.5.6",
+        "@tkeron/tools": "^0.4.1",
       },
       "devDependencies": {
-        "@types/bun": "^1.3.9",
+        "@types/bun": "^1.3.11",
         "prettier": "^3.8.1",
-        "typescript": "^5.9.3",
+        "typescript": "^6.0.2",
       },
     },
   },
   "packages": {
     "@hono/node-server": ["@hono/node-server@1.19.9", "", { "peerDependencies": { "hono": "^4" } }, "sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw=="],
 
-    "@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=="],
+    "@modelcontextprotocol/sdk": ["@modelcontextprotocol/sdk@1.29.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-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ=="],
 
-    "@tkeron/commands": ["@tkeron/commands@0.4.6", "", { "peerDependencies": { "typescript": "^5.9.3" } }, "sha512-Bojs3GmIpvd/4Mcw7FvbohRcDyHEzs3ZJHxwIeXE0diQzN+ER3R30xIFovgzwE8QfWvC9uFDaN2VTk4O+0ffyA=="],
+    "@tkeron/commands": ["@tkeron/commands@0.4.7", "", { "peerDependencies": { "typescript": "^5.9.3" } }, "sha512-QGYLnPcOFir5cMJpeUuLMZdW5IrcDyY/jjbML3o23yATI8Y3XzwYhRDW2l8kex0waLV7KsAwnGsb2zl8sRn1PQ=="],
 
-    "@tkeron/html-parser": ["@tkeron/html-parser@1.5.5", "", { "peerDependencies": { "typescript": "^5.9.3" } }, "sha512-GSmlscPWxb2XqlmGNvtQ9ArETIPQmt3vIFlUgpTftLglkcCVgsA/pVZNW9AKJ8OZMfy8Jfmq+tf8QpbUWBVnsQ=="],
+    "@tkeron/html-parser": ["@tkeron/html-parser@1.5.6", "", { "peerDependencies": { "typescript": "^5.9.3" } }, "sha512-dATXoSjxOuUjyjde5ocrZdd5xKfpKf7R9dwRklXHVCAvGwPR2UlJfISWmfmYIwlwFuidg+jmujXmLlLwA7hQgA=="],
 
-    "@tkeron/tools": ["@tkeron/tools@0.4.0", "", { "peerDependencies": { "typescript": "^5.9.3" } }, "sha512-lceNx2BGfEvL0U79BgLAb9ObGMwqeXoFYTdwbks1fDrxHaIinE1XWsQzF4k6jOSw00GFD++byUQMKgpiUilY5w=="],
+    "@tkeron/tools": ["@tkeron/tools@0.4.1", "", { "peerDependencies": { "typescript": "^5.9.3" } }, "sha512-nsmguSq/Ukx930ChwO11V433R786aJ/tniugzDdlfT/rzLrFxPJoHZerA71XGOIuD8/FRlvS7kJR9YI0CcxmqQ=="],
 
-    "@types/bun": ["@types/bun@1.3.9", "", { "dependencies": { "bun-types": "1.3.9" } }, "sha512-KQ571yULOdWJiMH+RIWIOZ7B2RXQGpL1YQrBtLIV3FqDcCu6FsbFUBwhdKUlCKUpS3PJDsHlJ1QKlpxoVR+xtw=="],
+    "@types/bun": ["@types/bun@1.3.11", "", { "dependencies": { "bun-types": "1.3.11" } }, "sha512-5vPne5QvtpjGpsGYXiFyycfpDF2ECyPcTSsFBMa0fraoxiQyMJ3SmuQIGhzPg2WJuWxVBoxWJ2kClYTcw/4fAg=="],
 
     "@types/node": ["@types/node@25.3.0", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-4K3bqJpXpqfg2XKGK9bpDTc6xO/xoUP/RBWS7AtRMug6zZFaRekiLzjVtAoZMquxoAbzBvy5nxQ7veS5eYzf8A=="],
 
@@ -40,7 +40,7 @@
 
     "body-parser": ["body-parser@2.2.2", "", { "dependencies": { "bytes": "^3.1.2", "content-type": "^1.0.5", "debug": "^4.4.3", "http-errors": "^2.0.0", "iconv-lite": "^0.7.0", "on-finished": "^2.4.1", "qs": "^6.14.1", "raw-body": "^3.0.1", "type-is": "^2.0.1" } }, "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA=="],
 
-    "bun-types": ["bun-types@1.3.9", "", { "dependencies": { "@types/node": "*" } }, "sha512-+UBWWOakIP4Tswh0Bt0QD0alpTY8cb5hvgiYeWCMet9YukHbzuruIEeXC2D7nMJPB12kbh8C7XJykSexEqGKJg=="],
+    "bun-types": ["bun-types@1.3.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg=="],
 
     "bytes": ["bytes@3.1.2", "", {}, "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="],
 
@@ -202,7 +202,7 @@
 
     "type-is": ["type-is@2.0.1", "", { "dependencies": { "content-type": "^1.0.5", "media-typer": "^1.1.0", "mime-types": "^3.0.0" } }, "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw=="],
 
-    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+    "typescript": ["typescript@6.0.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ=="],
 
     "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
 

package/changelog.md

@@ -1,3 +1,22 @@
+# v5.2.0
+
+## Feature: `.post.ts` post-processing support
+
+- New file type `.post.ts`: runs after the build to post-process the corresponding `.html` file
+- The `.post.ts` script receives a `document` object (parsed from the HTML) and writes the result back to the HTML file after execution
+- Executes with `bun run` in the project root context
+- Useful for final DOM manipulation, injecting metadata, or any transformation after components are resolved
+- `processPost` returns `false` when no `.post.ts` files are found (no-op)
+
+## Feature: `data-tk-id` attribute on component `<style>` elements
+
+- Root-level `<style>` elements in component output now receive a `data-tk-id="component-name"` attribute
+- Nested `<style>` elements (inside wrappers) also receive `data-tk-id`
+- Applies to both `.com.html` and `.com.ts` components
+- Enables per-component style scoping and identification in the final HTML
+
+---
+
 # v5.1.0
 
 ## Feature: .com.html template injection into .com.ts components

package/docs/testing.md

@@ -61,7 +61,7 @@ import { getBuildResult, type BuildResult } from "tkeron";
 import { join } from "path";
 
 describe("my project", () => {
-  const sourcePath = join(import.meta.dir, "src");
+  const sourcePath = join(import.meta.dir, "websrc");
   let result: BuildResult;
 
   beforeAll(async () => {

package/examples/with_com_html_in_ts/{src → websrc}/index.html

@@ -11,10 +11,9 @@
     <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>
+    <info-panel
+      data-title="Features"
+      data-items="HTML templates for structure,TypeScript for logic,Clean separation of concerns"
+    ></info-panel>
   </body>
 </html>

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

@@ -0,0 +1,14 @@
+const title = com.getAttribute("data-title") || "Info";
+const rawItems = com.getAttribute("data-items") || "";
+const items = rawItems
+  .split(",")
+  .map((s: string) => s.trim())
+  .filter((s: string) => s.length > 0);
+
+const titleEl = com.querySelector(".title");
+if (titleEl) titleEl.textContent = title;
+
+const itemsEl = com.querySelector(".items");
+if (itemsEl) {
+  itemsEl.innerHTML = items.map((item: string) => `<li>${item}</li>`).join("");
+}

package/mcp-server.ts

@@ -177,8 +177,7 @@ server.registerTool(
       const examplePath = join(EXAMPLES_DIR, name);
       return (
         statSync(examplePath).isDirectory() &&
-        (existsSync(join(examplePath, "src")) ||
-          existsSync(join(examplePath, "websrc")))
+        existsSync(join(examplePath, "websrc"))
       );
     });
 
@@ -228,17 +227,14 @@ server.registerTool(
       };
     }
 
-    let srcPath = join(examplePath, "src");
-    if (!existsSync(srcPath)) {
-      srcPath = join(examplePath, "websrc");
-    }
+    const srcPath = join(examplePath, "websrc");
 
     if (!existsSync(srcPath)) {
       return {
         content: [
           {
             type: "text" as const,
-            text: `Example ${exampleName} does not have a src or websrc directory`,
+            text: `Example ${exampleName} does not have a websrc directory`,
           },
         ],
         isError: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tkeron",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "CLI build tool for vanilla web development with TypeScript.",
   "type": "module",
   "main": "./src/index.ts",
@@ -32,15 +32,15 @@
   "author": "tkeron",
   "license": "MIT",
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.27.0",
-    "@tkeron/commands": "0.4.6",
-    "@tkeron/html-parser": "1.5.5",
-    "@tkeron/tools": "^0.4.0"
+    "@modelcontextprotocol/sdk": "^1.29.0",
+    "@tkeron/commands": "0.4.7",
+    "@tkeron/html-parser": "1.5.6",
+    "@tkeron/tools": "^0.4.1"
   },
   "devDependencies": {
-    "@types/bun": "^1.3.9",
+    "@types/bun": "^1.3.11",
     "prettier": "^3.8.1",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.2"
   },
   "keywords": [
     "cli",
@@ -57,6 +57,7 @@
   "publishConfig": {
     "access": "public"
   },
+  "homepage": "https://tkeron.com",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tkeron/tkeron.git"

package/src/build.ts

@@ -4,6 +4,7 @@ import { processPre } from "./processPre";
 import { processCom } from "./processCom";
 import { processComTs } from "./processComTs";
 import { processComMd } from "./processComMd";
+import { processPost } from "./processPost";
 import { rm, exists, mkdir, cp } from "fs/promises";
 import type { Logger } from "@tkeron/tools";
 import { silentLogger } from "@tkeron/tools";
@@ -56,6 +57,8 @@ export const build = async (options: BuildOptions) => {
       }
     }
 
+    await processPost(tempDir, { logger: log, projectRoot: sourceParent });
+
     if (await exists(target)) {
       await rm(target, { recursive: true, force: true });
     }

package/src/develop.ts

@@ -130,30 +130,45 @@ export const develop = async (
 
   log.log(`🚀 Development server running at http://${host}:${port}`);
 
+  let currentBuild: Promise<void> | null = null;
+  let isStopped = false;
+
   const watcher = watch(
     source,
     { recursive: true },
     async (event, filename) => {
-      if (filename) {
-        log.log(`📝 File changed: ${filename}`);
-        log.log("🔨 Rebuilding...");
-        await build({ sourceDir: source, targetDir: target, logger: log });
-        log.log("✅ Build complete!");
-
-        reloadClients.forEach((controller) => {
-          try {
-            controller.enqueue("data: reload\n\n");
-          } catch (e) {
-            reloadClients.delete(controller);
-          }
-        });
+      if (!filename || isStopped || currentBuild) return;
+      log.log(`📝 File changed: ${filename}`);
+      log.log("🔨 Rebuilding...");
+      const buildPromise = build({
+        sourceDir: source,
+        targetDir: target,
+        logger: log,
+      });
+      currentBuild = buildPromise;
+      try {
+        await buildPromise;
+      } finally {
+        if (currentBuild === buildPromise) currentBuild = null;
       }
+      if (isStopped) return;
+      log.log("✅ Build complete!");
+
+      reloadClients.forEach((controller) => {
+        try {
+          controller.enqueue("data: reload\n\n");
+        } catch (e) {
+          reloadClients.delete(controller);
+        }
+      });
     },
   );
 
   const stop = async () => {
     log.log("\n👋 Shutting down server...");
+    isStopped = true;
     watcher.close();
+    await currentBuild?.catch(() => {});
     server.stop();
 
     await new Promise((resolve) => setTimeout(resolve, 100));

package/src/processCom.ts

@@ -189,6 +189,18 @@ const processComponents = async (
             (tempContainer as any).childNodes || [],
           ).map((node: any) => (node?.cloneNode ? node.cloneNode(true) : node));
 
+          for (const node of nodesToInsert) {
+            if ((node as any).nodeType === 1) {
+              if ((node as any).tagName?.toLowerCase() === "style") {
+                (node as any).setAttribute("data-tk-id", tagName);
+              }
+              const nested = (node as any).querySelectorAll?.("style") || [];
+              for (const styleEl of nested) {
+                (styleEl as any).setAttribute("data-tk-id", tagName);
+              }
+            }
+          }
+
           const parent = (child as any).parentNode;
 
           if (parent) {

package/src/processComTs.ts

@@ -335,6 +335,18 @@ ${codeWithoutImports}
             (node: any) => (node?.cloneNode ? node.cloneNode(true) : node),
           );
 
+          for (const node of nodesToInsert) {
+            if ((node as any).nodeType === 1) {
+              if ((node as any).tagName?.toLowerCase() === "style") {
+                (node as any).setAttribute("data-tk-id", tagName);
+              }
+              const nested = (node as any).querySelectorAll?.("style") || [];
+              for (const styleEl of nested) {
+                (styleEl as any).setAttribute("data-tk-id", tagName);
+              }
+            }
+          }
+
           const parent = (child as any).parentNode;
 
           if (parent) {

package/src/processPost.ts

@@ -0,0 +1,80 @@
+import { join, dirname } from "path";
+import { getFilePaths } from "@tkeron/tools";
+import type { Logger } from "@tkeron/tools";
+import { silentLogger } from "@tkeron/tools";
+
+const HTML_PARSER_PATH = import.meta.resolve("@tkeron/html-parser");
+
+export interface ProcessPostOptions {
+  logger?: Logger;
+  projectRoot?: string;
+}
+
+export const processPost = async (
+  tempDir: string,
+  options: ProcessPostOptions = {},
+): Promise<boolean> => {
+  const log = options.logger || silentLogger;
+
+  if (!tempDir || typeof tempDir !== "string") {
+    log.error(`\n❌ Error: Invalid tempDir provided for processPost.`);
+    return false;
+  }
+
+  const postFiles = getFilePaths(tempDir, "**/*.post.ts", true);
+
+  if (postFiles.length === 0) return false;
+
+  for (const postFile of postFiles) {
+    const htmlFile = postFile.replace(/\.post\.ts$/, ".html");
+
+    const originalCode = await Bun.file(postFile).text();
+
+    const htmlContent = await Bun.file(htmlFile).text();
+
+    const modifiedCode = `
+        import { parseHTML } from ${JSON.stringify(HTML_PARSER_PATH)};
+
+        const htmlPath = ${JSON.stringify(htmlFile)};
+        const htmlContent = ${JSON.stringify(htmlContent)};
+        const document = parseHTML(htmlContent);
+
+        ${originalCode}
+
+
+        const doctype = '<!DOCTYPE html>\\n';
+        const htmlOutput = doctype + document.documentElement.outerHTML;
+        await Bun.write(htmlPath, htmlOutput);
+    `;
+
+    await Bun.write(postFile, modifiedCode);
+
+    const proc = Bun.spawn(["bun", "run", postFile], {
+      cwd: options.projectRoot || dirname(postFile),
+      stdout: "pipe",
+      stderr: "pipe",
+      env: { ...process.env },
+    });
+
+    await proc.exited;
+
+    if (proc.exitCode !== 0) {
+      const stderr = await new Response(proc.stderr).text();
+      const stdout = await new Response(proc.stdout).text();
+      log.error(
+        `\n❌ Error: Post-processing failed for ${postFile.split("/").pop()}`,
+      );
+      log.error(`\n💡 File: ${postFile}`);
+      if (stderr) {
+        log.error(`\nError details:\n${stderr}`);
+      }
+      if (stdout) {
+        log.error(`\nOutput:\n${stdout}`);
+      }
+      log.error("");
+      throw new Error(`Post-processing failed for ${postFile}`);
+    }
+  }
+
+  return true;
+};

package/tkeron.d.ts

@@ -1 +1,2 @@
 declare const com: HTMLElement;
+declare const document: Document;

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

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