tkeron 5.1.1 → 5.2.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tkeron",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "CLI build tool for vanilla web development with TypeScript.",
   "type": "module",
   "main": "./src/index.ts",

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/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;