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/examples/init_sample/websrc/index.html CHANGED Viewed

@@ -3,260 +3,28 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <title>tkeron - Sample Project</title>
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      body {
-        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-        line-height: 1.6;
-        color: #1a1a1a;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        min-height: 100vh;
-        padding: 1rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      .container {
-        max-width: 1200px;
-        margin: 0 auto;
-      }
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        grid-template-rows: repeat(2, 1fr);
-        gap: 1rem;
-      }
-      @media (max-width: 900px) {
-        .grid {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto;
-        }
-      }
-      .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;
-      }
-      .logo {
-        width: 200px;
-        height: 200px;
-        margin-bottom: 1rem;
-        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
-        animation: float 3s ease-in-out infinite;
-      }
-      @keyframes float {
-        0%,
-        100% {
-          transform: translateY(0);
-        }
-        50% {
-          transform: translateY(-10px);
-        }
-      }
-      h1 {
-        font-size: 2rem;
-        margin-bottom: 0.25rem;
-        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-      }
-      .subtitle {
-        font-size: 0.9rem;
-        opacity: 0.95;
-      }
-      section {
-        background: white;
-        padding: 1.25rem;
-        border-radius: 12px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        transition:
-          transform 0.2s,
-          box-shadow 0.2s;
-      }
-      section:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
-      }
-      h2 {
-        color: #667eea;
-        margin-bottom: 0.75rem;
-        font-size: 1.2rem;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-      section p {
-        font-size: 0.9rem;
-      }
-      .counter {
-        margin-top: 1rem;
-        text-align: center;
-      }
-      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);
-      }
-      button:hover {
-        transform: scale(1.05);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-      }
-      button:active {
-        transform: scale(0.98);
-      }
-      .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;
-      }
-      code {
-        background: #f0f0f0;
-        padding: 0.2rem 0.4rem;
-        border-radius: 4px;
-        font-family: "Courier New", monospace;
-        font-size: 0.9em;
-      }
-      p {
-        margin-bottom: 0.5rem;
-      }
-      a {
-        transition:
-          transform 0.2s,
-          box-shadow 0.2s;
-      }
-      a:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-      }
-      .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>
+    <meta id="build-stamp" name="build-stamp" content="" />
+    <styles-injector></styles-injector>
   </head>
   <body>
+    <site-header></site-header>
     <div class="container">
       <div class="grid">
         <hero-section></hero-section>
         <pre-render-card></pre-render-card>
         <html-components-card></html-components-card>
         <ts-components-card></ts-components-card>
-        <counter-card></counter-card>
-        <!-- Crypto Prices - fetched at build time -->
-        <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>
-        <!-- Pre-rendered content with external API data -->
-        <section 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"
-            style="
-              margin: 1rem 0;
-              padding: 0.75rem;
-              background: #f8f9fa;
-              border-radius: 8px;
-              border-left: 4px solid #667eea;
-            "
-          ></div>
-          <div
-            id="build-metadata"
-            style="
-              margin-top: 1rem;
-              padding-top: 0.75rem;
-              border-top: 1px solid #eee;
-              font-size: 0.75rem;
-              color: #999;
-            "
-          ></div>
+        <section class="counter-card-wrap">
+          <counter-button></counter-button>
         </section>
+        <markdown-card></markdown-card>
+        <crypto-prices-card></crypto-prices-card>
+        <quote-card></quote-card>
       </div>
+      <user-badge count="4"></user-badge>
     </div>
+    <site-footer></site-footer>
     <script type="module" src="./index.ts"></script>
   </body>
 </html>

package/examples/init_sample/websrc/index.post.ts ADDED Viewed

@@ -0,0 +1,70 @@
+// Post-render — runs at build time, AFTER components are resolved.
+// Perfect for filling nodes that live inside components, plus final DOM
+// rewrites such as rel="noopener" hardening.
+import {
+  getRandomQuote,
+  getBuildMetadata,
+  getCryptoPrices,
+  escapeHtml,
+} from "./utils/api-service";
+const externalLinks = document.querySelectorAll('a[target="_blank"]');
+externalLinks.forEach((link) => {
+  link.setAttribute("rel", "noopener noreferrer");
+});
+const buildTimeElement = document.getElementById("build-time");
+if (buildTimeElement) {
+  buildTimeElement.innerHTML = `<strong>${escapeHtml(new Date().toLocaleString())}</strong>`;
+}
+const [quote, metadata, prices] = await Promise.all([
+  getRandomQuote(),
+  Promise.resolve(getBuildMetadata()),
+  getCryptoPrices(),
+]);
+const quoteElement = document.getElementById("pre-rendered-quote");
+if (quoteElement) {
+  quoteElement.innerHTML = `
+    <blockquote>
+      <p>"${escapeHtml(quote.quote)}"</p>
+      <footer>— ${escapeHtml(quote.author)}</footer>
+    </blockquote>
+  `;
+}
+const metadataElement = document.getElementById("build-metadata");
+if (metadataElement) {
+  metadataElement.innerHTML = `
+    <small>
+      Built: ${escapeHtml(metadata.timestamp)} |
+      tkeron: ${escapeHtml(metadata.tkeron)} |
+      Runtime: ${escapeHtml(metadata.runtime)} |
+      Platform: ${escapeHtml(metadata.platform)}
+    </small>
+  `;
+}
+const cryptoPricesElement = document.getElementById("crypto-prices");
+if (cryptoPricesElement) {
+  cryptoPricesElement.innerHTML = prices
+    .map((crypto) => {
+      const positive = crypto.price_change_percentage_24h >= 0;
+      const changeColor = positive ? "#10b981" : "#ef4444";
+      const changeSymbol = positive ? "▲" : "▼";
+      return `
+        <div class="crypto-card">
+          <div class="crypto-header">
+            <span class="crypto-name">${escapeHtml(crypto.name)}</span>
+            <span class="crypto-symbol">${escapeHtml(crypto.symbol.toUpperCase())}</span>
+          </div>
+          <div class="crypto-price">$${crypto.current_price.toLocaleString()}</div>
+          <div class="crypto-change" style="color: ${changeColor}">
+            ${changeSymbol} ${Math.abs(crypto.price_change_percentage_24h).toFixed(2)}%
+          </div>
+        </div>
+      `;
+    })
+    .join("");
+}

package/examples/init_sample/websrc/index.pre.ts CHANGED Viewed

@@ -1,71 +1,15 @@
-// Pre-rendering - runs at build time
-// Demonstrates importing any TypeScript module for pre-rendering
-import {
-  getRandomQuote,
-  getBuildMetadata,
-  getCryptoPrices,
-} from "./api-service";
+// Pre-render — runs at build time, BEFORE components are inlined.
+// Use it for elements that exist directly in this page's HTML or for
+// injecting custom elements that the component loop will then process.
+import { getRandomQuote, escapeHtml } from "./utils/api-service";
-const buildTimeElement = document.getElementById("build-time");
-if (buildTimeElement) {
-  const now = new Date();
-  buildTimeElement.innerHTML = `<strong>${now.toLocaleString()}</strong>`;
+const stamp = document.getElementById("build-stamp");
+if (stamp) {
+  stamp.setAttribute("content", new Date().toISOString());
 }
-// Fetch data from external API at build time
-const quoteElement = document.getElementById("pre-rendered-quote");
-if (quoteElement) {
+const titleElement = document.querySelector("title");
+if (titleElement) {
   const quote = await getRandomQuote();
-  quoteElement.innerHTML = `
-    <blockquote class="quote">
-      <p>"${quote.quote}"</p>
-      <footer>— ${quote.author}</footer>
-    </blockquote>
-  `;
-}
-// Add build metadata
-const metadataElement = document.getElementById("build-metadata");
-if (metadataElement) {
-  const metadata = await getBuildMetadata();
-  metadataElement.innerHTML = `
-    <div class="metadata">
-      <small>
-        Built: ${metadata.timestamp} |
-        tkeron: ${metadata.tkeron} |
-        Runtime: ${metadata.runtime} |
-        Platform: ${metadata.platform}
-      </small>
-    </div>
-  `;
-}
-// Fetch crypto prices at build time
-const cryptoPricesElement = document.getElementById("crypto-prices");
-if (cryptoPricesElement) {
-  const prices = await getCryptoPrices();
-  const pricesHtml = prices
-    .map((crypto) => {
-      const changeColor =
-        crypto.price_change_percentage_24h >= 0 ? "#10b981" : "#ef4444";
-      const changeSymbol = crypto.price_change_percentage_24h >= 0 ? "▲" : "▼";
-      return `
-      <div class="crypto-card">
-        <div class="crypto-header">
-          <span class="crypto-name">${crypto.name}</span>
-          <span class="crypto-symbol">${crypto.symbol.toUpperCase()}</span>
-        </div>
-        <div class="crypto-price">$${crypto.current_price.toLocaleString()}</div>
-        <div class="crypto-change" style="color: ${changeColor}">
-          ${changeSymbol} ${Math.abs(crypto.price_change_percentage_24h).toFixed(2)}%
-        </div>
-      </div>
-    `;
-    })
-    .join("");
-  cryptoPricesElement.innerHTML = pricesHtml;
+  titleElement.textContent = `tkeron — ${escapeHtml(quote.author)}`;
 }

package/examples/init_sample/websrc/index.ts CHANGED Viewed

@@ -1,10 +1,12 @@
-// Client-side TypeScript - runs in the browser
+// Client-side TypeScript — only fills data into already existing nodes.
 let clickCount = 0;
-const button = document.getElementById("increment") as HTMLButtonElement;
-const countDisplay = document.getElementById("count") as HTMLSpanElement;
+const button = document.getElementById("increment");
+const countDisplay = document.getElementById("count");
-button.addEventListener("click", () => {
-  clickCount++;
-  countDisplay.textContent = clickCount.toString();
-});
+if (button && countDisplay) {
+  button.addEventListener("click", () => {
+    clickCount++;
+    countDisplay.textContent = clickCount.toString();
+  });
+}

package/examples/init_sample/websrc/styles/global-styles.com.ts ADDED Viewed

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

package/examples/init_sample/websrc/styles/main.css ADDED Viewed

@@ -0,0 +1,112 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  line-height: 1.6;
+  color: #1a1a1a;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 1rem;
+}
+@media (max-width: 900px) {
+  .grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+}
+.page {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin-top: 1rem;
+}
+.page h1 {
+  color: #4c51bf;
+  margin-bottom: 0.5rem;
+  font-size: 1.75rem;
+}
+.page p {
+  margin-bottom: 0.5rem;
+}
+h1 {
+  font-size: 2rem;
+  margin-bottom: 0.25rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+h2 {
+  color: #667eea;
+  margin-bottom: 0.75rem;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+p {
+  margin-bottom: 0.5rem;
+}
+section {
+  background: white;
+  padding: 1.25rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+section:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+}
+section p {
+  font-size: 0.9rem;
+}
+code {
+  background: #f0f0f0;
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  font-family: "Courier New", monospace;
+  font-size: 0.9em;
+}
+a {
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+a:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}

package/examples/init_sample/websrc/{api-service.ts → utils/api-service.ts} RENAMED Viewed

@@ -1,48 +1,46 @@
-// External API service - can be imported in .pre.ts files
-// Demonstrates that pre-rendering can use any TypeScript module
 export interface Quote {
   id: number;
   quote: string;
   author: string;
 }
-/**
- * Fetches a random quote from a public API
- * This runs at build time during pre-rendering
- */
-export async function getRandomQuote(): Promise<Quote> {
-  try {
-    const response = await fetch("https://dummyjson.com/quotes/random");
+export const escapeHtml = (str: string): string =>
+  str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+export const getRandomQuote = async (): Promise<Quote> => {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 5000);
+  try {
+    const response = await fetch("https://dummyjson.com/quotes/random", {
+      signal: controller.signal,
+    });
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
     const data = await response.json();
     return data as Quote;
-  } catch (error) {
-    // Fallback quote if API fails
-    console.warn("API call failed, using fallback quote");
+  } catch {
     return {
       id: 0,
       quote: "The only way to do great work is to love what you do.",
       author: "Steve Jobs",
     };
+  } finally {
+    clearTimeout(timeout);
   }
-}
+};
-/**
- * Gets build metadata
- */
-export async function getBuildMetadata() {
-  return {
-    timestamp: new Date().toLocaleString(),
-    runtime: `Bun ${Bun.version}`,
-    tkeron: process.env.TKERON_VERSION || "unknown",
-    platform: process.platform,
-  };
-}
+export const getBuildMetadata = () => ({
+  timestamp: new Date().toLocaleString(),
+  runtime: `Bun ${Bun.version}`,
+  tkeron: process.env.TKERON_VERSION || "unknown",
+  platform: process.platform,
+});
 export interface CryptoPrice {
   id: string;
@@ -52,25 +50,20 @@ export interface CryptoPrice {
   price_change_percentage_24h: number;
 }
-/**
- * Fetches cryptocurrency prices from CoinGecko API
- * This runs at build time during pre-rendering
- */
-export async function getCryptoPrices(): Promise<CryptoPrice[]> {
+export const getCryptoPrices = async (): Promise<CryptoPrice[]> => {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 5000);
   try {
     const response = await fetch(
       "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin,ethereum,solana&order=market_cap_desc&sparkline=false",
+      { signal: controller.signal },
     );
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
     const data = await response.json();
     return data as CryptoPrice[];
-  } catch (error) {
-    // Fallback data if API fails
-    console.warn("Crypto API call failed, using fallback data");
+  } catch {
     return [
       {
         id: "bitcoin",
@@ -94,5 +87,7 @@ export async function getCryptoPrices(): Promise<CryptoPrice[]> {
         price_change_percentage_24h: 5.8,
       },
     ];
+  } finally {
+    clearTimeout(timeout);
   }
-}
+};

package/examples/with_global_styles/websrc/bad.html ADDED Viewed

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bad — link rel stylesheet</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <h1>Bad: <code>&lt;link rel="stylesheet"&gt;</code></h1>
+    <p>
+      The CSS is referenced via a <code>&lt;link&gt;</code> tag. tkeron bundles
+      it into a separate <code>.css</code> file — an extra HTTP request on every
+      page load.
+    </p>
+    <p>
+      Check <code>web/bad.html</code>: you will find a
+      <code>&lt;link rel="stylesheet" href="./bad.css"&gt;</code> and a
+      companion <code>bad.css</code> file next to it.
+    </p>
+    <a href="index.html">Back to index</a>
+  </body>
+</html>