npm - tkeron - Versions diffs - 6.0.0 → 6.0.1 - Mend

tkeron 6.0.0 → 6.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/changelog.md CHANGED Viewed

@@ -1,3 +1,21 @@
+# v6.0.1
+## Docs: CSS via components pattern
+- Skills updated to enforce "CSS via components, never `<link rel="stylesheet">`" as a non-negotiable rule (`tkeron`, `tkeron-patterns`, `tkeron-organization`, `tkeron-troubleshooting`)
+- `tkeron-patterns` adds a full "CSS via components" section covering per-component `<style>` in `.com.html` (auto-dedup, tree-shaking) and global CSS inlined through a `.com.ts` loader
+- New anti-pattern entry: `<link rel="stylesheet">` (extra request, no dedup, blocks first paint)
+- `tkeron-organization` clarifies that `styles/` is optional and `.css` files are free to live anywhere — always inlined via a component, never linked
+## Examples: rewrite `init_sample` + new style examples
+- `init_sample` reorganized into the canonical structure: multi-page (`index.html`, `about.html`, `docs.html`), shared components under `components/layout/`, `components/ui/`, `components/content/`, build utils under `utils/`, global CSS in `styles/main.css` inlined via `styles-injector.com.ts`
+- New example `with_global_styles/`: demonstrates the global-styles loader component pattern vs the `<link>` anti-pattern
+- New example `with_style_dedup/`: `tag-chip` component proving per-component `<style>` dedup in the build output
+- `tests/init.test.ts` updated to assert the new `init_sample` layout
+---
 # v6.0.0
 ## BREAKING: remove MCP server

package/examples/init_sample/websrc/about.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>About — tkeron</title>
+    <styles-injector></styles-injector>
+  </head>
+  <body>
+    <site-header></site-header>
+    <main class="container">
+      <article class="page">
+        <h1>About</h1>
+        <about-intro></about-intro>
+      </article>
+    </main>
+    <site-footer></site-footer>
+  </body>
+</html>

package/examples/init_sample/websrc/components/content/about-intro.com.md ADDED Viewed

@@ -0,0 +1,7 @@
+**tkeron** is a build-time TypeScript toolkit for vanilla web development.
+It compiles `.ts` to `.js`, inlines components, and runs pre/post scripts —
+all at build time. No frameworks, no runtime, no bundler.
+This Markdown lives in `components/content/about-intro.com.md` and is reused
+on the home page (inside the `<markdown-card>`) and on the **About** page.

package/examples/init_sample/websrc/components/layout/hero-section.com.html ADDED Viewed

@@ -0,0 +1,88 @@
+<style>
+  .hero {
+    text-align: center;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    padding: 1.5rem;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    grid-row: span 2;
+  }
+  .hero .features {
+    margin-top: 1rem;
+    text-align: left;
+    width: 100%;
+  }
+  .hero .features li {
+    margin-bottom: 0.3rem;
+    padding-left: 0.5rem;
+    opacity: 0.9;
+    font-size: 0.85rem;
+  }
+  .hero .logo {
+    width: 200px;
+    height: 200px;
+    margin-bottom: 1rem;
+    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
+    animation: hero-float 3s ease-in-out infinite;
+  }
+  .hero .subtitle {
+    font-size: 0.9rem;
+    opacity: 0.95;
+  }
+  .hero .links {
+    margin-top: 1.5rem;
+    display: flex;
+    gap: 0.75rem;
+    width: 100%;
+  }
+  .hero .links a {
+    flex: 1;
+    padding: 0.65rem;
+    color: white;
+    text-decoration: none;
+    border-radius: 6px;
+    text-align: center;
+    font-weight: 600;
+    font-size: 0.85rem;
+  }
+  .hero .links .npm {
+    background: rgba(203, 56, 55, 0.9);
+  }
+  .hero .links .github {
+    background: rgba(36, 41, 46, 0.9);
+  }
+  @keyframes hero-float {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+</style>
+<div class="hero">
+  <div>
+    <img src="./assets/profile.png" alt="tkeron logo" class="logo" />
+    <h1>tkeron</h1>
+    <p class="subtitle">Build-time TypeScript for modern web development</p>
+  </div>
+  <div class="features">
+    <ul style="list-style: none">
+      <li>⚡ Fast builds with Bun</li>
+      <li>🎯 Build-time HTML generation</li>
+      <li>🧩 HTML &amp; TypeScript components</li>
+      <li>🔧 Pure TypeScript &amp; HTML</li>
+    </ul>
+  </div>
+  <div class="links">
+    <a href="https://www.npmjs.com/package/tkeron" target="_blank" class="npm">📦 npm</a>
+    <a href="https://github.com/tkeron/tkeron" target="_blank" class="github">⭐ GitHub</a>
+  </div>
+</div>

package/examples/init_sample/websrc/components/layout/site-footer.com.html ADDED Viewed

@@ -0,0 +1,20 @@
+<style>
+  .site-footer {
+    width: 100%;
+    max-width: 1200px;
+    margin: 1rem auto 0;
+    padding: 1rem 1.25rem;
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 0.85rem;
+    text-align: center;
+  }
+  .site-footer a {
+    color: white;
+    text-decoration: underline;
+  }
+</style>
+<footer class="site-footer">
+  Built with
+  <a href="https://github.com/tkeron/tkeron" target="_blank">tkeron</a>
+  — zero runtime, vanilla TypeScript.
+</footer>

package/examples/init_sample/websrc/components/layout/site-header.com.html ADDED Viewed

@@ -0,0 +1,44 @@
+<style>
+  .site-header {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto 1rem;
+    padding: 1rem 1.25rem;
+    background: rgba(255, 255, 255, 0.12);
+    backdrop-filter: blur(10px);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: white;
+  }
+  .site-header .brand {
+    font-weight: 700;
+    font-size: 1.1rem;
+    text-decoration: none;
+    color: white;
+  }
+  .site-header nav {
+    display: flex;
+    gap: 0.75rem;
+  }
+  .site-header nav a {
+    color: white;
+    text-decoration: none;
+    padding: 0.4rem 0.75rem;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .site-header nav a:hover {
+    background: rgba(255, 255, 255, 0.25);
+  }
+</style>
+<header class="site-header">
+  <a href="./index.html" class="brand">tkeron</a>
+  <nav>
+    <a href="./index.html">Home</a>
+    <a href="./about.html">About</a>
+    <a href="./docs.html">Docs</a>
+  </nav>
+</header>

package/examples/init_sample/websrc/components/ui/counter-button.com.html ADDED Viewed

@@ -0,0 +1,48 @@
+<style>
+  .counter-button-wrap {
+    margin-top: 1rem;
+    text-align: center;
+  }
+  .counter-button-wrap button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 0.75rem 2rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: 600;
+    transition:
+      transform 0.1s,
+      box-shadow 0.2s;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+  .counter-button-wrap button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  }
+  .counter-button-wrap button:active {
+    transform: scale(0.98);
+  }
+  .counter-button-wrap .count {
+    font-size: 2rem;
+    font-weight: bold;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-top: 1rem;
+  }
+</style>
+<section class="counter-card">
+  <h2>🎯 Client-side TypeScript</h2>
+  <p style="margin-bottom: 0.75rem">Interactive features in the browser:</p>
+  <div class="counter-button-wrap">
+    <button id="increment">Click me!</button>
+    <div class="count">Clicks: <span id="count">0</span></div>
+  </div>
+  <p style="font-size: 0.85rem; color: #666; margin-top: 0.75rem">
+    ✓ Event handling &amp; DOM manipulation<br />✓ Regular TypeScript for
+    interactivity
+  </p>
+</section>

package/examples/init_sample/websrc/components/ui/crypto-prices-card.com.html ADDED Viewed

@@ -0,0 +1,52 @@
+<style>
+  .crypto-prices-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+  }
+  .crypto-card {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 1.25rem;
+    border-radius: 12px;
+    color: white;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s;
+  }
+  .crypto-card:hover {
+    transform: translateY(-4px);
+  }
+  .crypto-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+  }
+  .crypto-name {
+    font-weight: 600;
+    font-size: 1rem;
+  }
+  .crypto-symbol {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+  .crypto-price {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .crypto-change {
+    font-size: 0.9rem;
+    font-weight: 600;
+  }
+</style>
+<section style="grid-column: span 3">
+  <h2>💰 Asset Prices (Build Time)</h2>
+  <p style="font-size: 0.85rem; margin-bottom: 0.75rem">
+    Real cryptocurrency prices fetched from CoinGecko API at build time:
+  </p>
+  <div id="crypto-prices" class="crypto-prices-container"></div>
+</section>

package/examples/init_sample/websrc/{info-card.com.html → components/ui/info-card.com.html} RENAMED Viewed

@@ -1,14 +1,18 @@
-<div
-  style="
+<style>
+  .info-card {
     padding: 1rem;
     background: #eff6ff;
     border-left: 4px solid #2563eb;
     border-radius: 4px;
-  "
->
+  }
+  .info-card p {
+    margin-top: 0.5rem;
+  }
+</style>
+<div class="info-card">
   <strong>This is an HTML component!</strong>
-  <p style="margin-top: 0.5rem">
+  <p>
     Defined in <code>info-card.com.html</code> and reused anywhere in your HTML
-    as <code>&amp;lt;info-card&amp;gt;&amp;lt;/info-card&amp;gt;</code>.
+    as <code>&lt;info-card&gt;&lt;/info-card&gt;</code>.
   </p>
 </div>

package/examples/init_sample/websrc/components/ui/markdown-card.com.html ADDED Viewed

@@ -0,0 +1,21 @@
+<style>
+  .markdown-card .md-body {
+    padding: 0.75rem 1rem;
+    background: #fffbea;
+    border-left: 4px solid #f59e0b;
+    border-radius: 4px;
+    font-size: 0.9rem;
+  }
+</style>
+<section class="markdown-card">
+  <h2>📄 Markdown Components</h2>
+  <p style="margin-bottom: 0.75rem">
+    Author content with <code>.com.md</code>:
+  </p>
+  <div class="md-body">
+    <about-intro></about-intro>
+  </div>
+  <p style="font-size: 0.85rem; color: #666; margin-top: 0.75rem">
+    ✓ Markdown rendered at build time<br />✓ Reusable like any component
+  </p>
+</section>

package/examples/init_sample/websrc/{pre-render-card.com.html → components/ui/pre-render-card.com.html} RENAMED Viewed

@@ -1,10 +1,13 @@
 <section id="pre-render-card">
-  <h2>📝 Pre-rendering</h2>
-  <p>Generate HTML at build time using <code>.pre.ts</code>:</p>
+  <h2>📝 Pre / Post Rendering</h2>
+  <p>
+    Run code at build time with <code>.pre.ts</code> (before components) and
+    <code>.post.ts</code> (after components):
+  </p>
   <p
     id="build-time"
     style="font-weight: bold; color: #667eea; margin: 0.75rem 0"
-  ></p>
+  >·</p>
   <p style="font-size: 0.85rem; color: #666; margin-top: 0.75rem">
     ✓ Manipulate DOM before deployment<br />
     ✓ Import any TypeScript module<br />

package/examples/init_sample/websrc/components/ui/quote-card.com.html ADDED Viewed

@@ -0,0 +1,32 @@
+<style>
+  .quote-card #pre-rendered-quote {
+    margin: 1rem 0;
+    padding: 0.75rem;
+    background: #f8f9fa;
+    border-radius: 8px;
+    border-left: 4px solid #667eea;
+  }
+  .quote-card #build-metadata {
+    margin-top: 1rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid #eee;
+    font-size: 0.75rem;
+    color: #999;
+  }
+  .quote-card blockquote p {
+    font-style: italic;
+  }
+  .quote-card blockquote footer {
+    margin-top: 0.5rem;
+    font-size: 0.85rem;
+    color: #666;
+  }
+</style>
+<section class="quote-card" style="grid-column: span 3">
+  <h2>💬 Quote of the Build</h2>
+  <p style="font-size: 0.85rem; margin-bottom: 0.75rem">
+    This content was fetched from an external API at build time:
+  </p>
+  <div id="pre-rendered-quote"></div>
+  <div id="build-metadata"></div>
+</section>

package/examples/init_sample/websrc/components/ui/styles-injector.com.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { join } from "path";
+const css = await Bun.file(join(__dirname, "../../styles/main.css")).text();
+com.innerHTML = `<style>${css}</style>`;

package/examples/init_sample/websrc/{ts-components-card.com.html → components/ui/ts-components-card.com.html} RENAMED Viewed

@@ -5,7 +5,7 @@
   </p>
   <user-badge count="3"></user-badge>
   <p style="font-size: 0.85rem; color: #666; margin-top: 0.75rem">
-    ✓ Loops & conditionals<br />✓ Read attributes dynamically<br />✓ Build-time
-    code execution
+    ✓ Loops &amp; conditionals<br />✓ Read attributes dynamically<br />✓
+    Build-time code execution
   </p>
 </section>

package/examples/init_sample/websrc/components/ui/user-badge.com.ts ADDED Viewed

@@ -0,0 +1,30 @@
+const count = com.getAttribute("count") || "3";
+const numCount = parseInt(count, 10);
+const items: string[] = [];
+for (let i = 1; i <= numCount; i++) {
+  items.push(`<li>✓ Item ${i}</li>`);
+}
+com.innerHTML = `
+  <div class="user-badge">
+    <ul>
+      ${items.join("")}
+    </ul>
+  </div>
+  <style>
+    .user-badge {
+      background: #f0fdf4;
+      border-left: 3px solid #22c55e;
+      padding: 0.75rem;
+      border-radius: 4px;
+    }
+    .user-badge ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      font-size: 0.9rem;
+      color: #166534;
+    }
+  </style>
+`;

package/examples/init_sample/websrc/docs.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Docs — tkeron</title>
+    <styles-injector></styles-injector>
+  </head>
+  <body>
+    <site-header></site-header>
+    <main class="container">
+      <article class="page">
+        <h1>Docs</h1>
+        <p>Getting started with tkeron:</p>
+        <ul style="margin-left: 1.5rem; margin-top: 0.5rem">
+          <li><code>tk dev</code> — start the dev server on <code>:3000</code></li>
+          <li><code>tk build</code> — compile <code>websrc/</code> into <code>web/</code></li>
+          <li><code>tk init &lt;name&gt;</code> — scaffold a new project</li>
+        </ul>
+        <p style="margin-top: 1rem">
+          Components live under <code>websrc/components/</code> grouped by domain:
+          <code>layout/</code>, <code>ui/</code>, <code>content/</code>.
+        </p>
+        <p>
+          Pages at the root of <code>websrc/</code> map directly to URLs —
+          <code>about.html</code> → <code>/about</code>,
+          <code>docs.html</code> → <code>/docs</code>.
+        </p>
+      </article>
+    </main>
+    <site-footer></site-footer>
+  </body>
+</html>