kreftjs 0.0.10-beta → 0.0.12-beta

package/bin/build.js

@@ -229,6 +229,7 @@ ${indent(components.join('\n\n'))}
       : html.replace(/<head>/i, `<head>\n  <base href="${b}">`);
   }
   write(dist, 'index.html', html);
+  addCacheBusters(dist);
   if (htaccess) writeHtaccess(dist, html);
 
   const report = () => {
@@ -252,6 +253,22 @@ ${indent(components.join('\n\n'))}
   report();
 };
 
+// A host keeps .js and .css for days (Hostinger: 7), and a new build keeps the same file names, so visitors would run the old
+// runtime and old pages after an upgrade (the welcome page still saying "Kreft 0.0.6-beta"). A short hash of each file goes into its
+// address (kreftjs.js?v=3f2a9c1b): a changed file is a new address, an unchanged one stays cached.
+function addCacheBusters(dist) {
+  const file = path.join(dist, 'index.html');
+  const html = fs.readFileSync(file, 'utf8');
+  const out = html.replace(/(<(?:script|link)\b[^>]*?\b(?:src|href)=)(["'])([^"']+)\2/gi, (m, pre, q, url) => {
+    if (/^(?:[a-z][a-z0-9+.-]*:|\/\/|#)/i.test(url) || /[?#]/.test(url) || !/\.(?:m?js|css)$/i.test(url)) return m;
+    const target = path.join(dist, url.replace(/^\//, ''));
+    if (!target.startsWith(dist + path.sep) || !fs.existsSync(target) || !fs.statSync(target).isFile()) return m;
+    const hash = require('crypto').createHash('sha1').update(fs.readFileSync(target)).digest('hex').slice(0, 8);
+    return pre + q + url + '?v=' + hash + q;
+  });
+  if (out !== html) fs.writeFileSync(file, out);
+}
+
 // Apache (Hostinger, cPanel …) answers /docs with a 404, because only index.html exists on disk. These rules send every page address
 // (no file extension, not under /api/) that is not a real file, or a folder with its own index.html (a prerendered page), to index.html,
 // so reloading a page works even when a folder has the page's name (the docs/ folder next to the /docs page). A missing file such as
@@ -273,6 +290,13 @@ function writeHtaccess(dist, html) {
   RewriteCond %{REQUEST_URI} !\\.[A-Za-z0-9]+$
   RewriteRule . ${base}index.html [L]
 </IfModule>
+
+# index.html names the other files with their hashes, so it must always be asked for again
+<IfModule mod_headers.c>
+  <FilesMatch "^index\\.html$">
+    Header set Cache-Control "no-cache"
+  </FilesMatch>
+</IfModule>
 `);
 }
 

package/docs/README.md

@@ -82,7 +82,7 @@ npx kreftjs dev
 ### Check that it works
 
 ```bash
-kreft --version     # for example 0.0.10-beta
+kreft --version     # for example 0.0.12-beta
 kreft about         # Kreft and Node.js versions, this project's settings and drivers
 kreft list          # every command your version has
 ```
@@ -1751,7 +1751,7 @@ RewriteCond %{REQUEST_URI} !\.[A-Za-z0-9]+$
 RewriteRule . /index.html [L]
 ```
 
-Apache only knows the files on disk, so without these rules `/docs` or any other clean address gives a 404 when someone opens or reloads it. With them, every page address (no file extension, not under `/api/`) that is not a real file, or a folder with its own `index.html`, opens `index.html` and the router takes over. A missing file such as `app.js`, or an `/api/` address, stays a plain 404, so code that asks for data never receives the page's HTML. Upload the file too (it starts with a dot, so some file managers hide it; turn on "show hidden files"). If the site lives in a folder, build with `--base /folder/` and the rules follow it. An `.htaccess` you keep in `public/` is used as it is. A relative base (`--base ./`, used by the desktop build) gets no file.
+Apache only knows the files on disk, so without these rules `/docs` or any other clean address gives a 404 when someone opens or reloads it. With them, every page address (no file extension, not under `/api/`) that is not a real file, or a folder with its own `index.html`, opens `index.html` and the router takes over. A missing file such as `app.js`, or an `/api/` address, stays a plain 404, so code that asks for data never receives the page's HTML. Upload the file too (it starts with a dot, so some file managers hide it; turn on "show hidden files"). If the site lives in a folder, build with `--base /folder/` and the rules follow it. An `.htaccess` you keep in `public/` is used as it is. `kreft build` also puts a short hash into the address of each script and style sheet (`app.js?v=28a965f6`), and the `.htaccess` tells the host never to keep `index.html`. Hosts cache `.js` and `.css` for days, so without the hash visitors would keep running the old runtime and old pages after you upload a new build. A relative base (`--base ./`, used by the desktop build) gets no file.
 
 > [!NOTE]
 > This hosts the front end only. Login, the database and everything under `/api` need the Node.js server, which Apache does not run.

package/kreftjs.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for Kreft 0.0.10-beta
+// Type definitions for Kreft 0.0.12-beta
 // Use from TypeScript or for editor hints in plain JavaScript (// @ts-check).
 
 export interface Signal<T> { value: T }

package/kreftjs.js

@@ -1,5 +1,5 @@
 /*!
- * Kreft v0.0.10-beta — reactive by nature
+ * Kreft v0.0.12-beta — reactive by nature
  * The .kreft component language (state · derive · action · when · watch · on),
  * { } views with k-if / k-each / k-model, components, slots, router, stores,
  * share / receive, event bus and a template engine.
@@ -5036,7 +5036,7 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.10-beta';
+  const VERSION = '0.0.12-beta';
   const Kreftjs = {
     version: VERSION,
     // PUBLIC_ values from .env (kreft dev and kreft build put them here); never secrets

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kreftjs",
-  "version": "0.0.10-beta",
+  "version": "0.0.12-beta",
   "description": "A tiny reactive framework with its own component language (.kreft files): router with nested routes, stores, saved data, animations, an API client, hot reload, DevTools and a template engine.",
   "license": "Elastic-2.0",
   "main": "kreftjs.js",
@@ -14,7 +14,7 @@
     "start": "node bin/kreftjs.js dev --api demo/db.json --db sqlite:demo/database/demo.db --migrations demo/database/migrations --server demo/server --backend demo --seed",
     "build": "node bin/kreftjs.js build demo --out dist/demo --include docs",
     "preview": "node bin/kreftjs.js dev dist --api demo/db.json --db sqlite:demo/database/demo.db --migrations demo/database/migrations --server demo/server --backend demo --seed",
-    "test": "node --test test/security.test.js test/prerender.test.js test/seo.test.js test/rebrand.test.js test/noauth.test.js test/winspawn.test.js test/htaccess.test.js test/cookie-secure.test.js test/password-rule.test.js",
+    "test": "node --test test/security.test.js test/prerender.test.js test/seo.test.js test/rebrand.test.js test/noauth.test.js test/winspawn.test.js test/htaccess.test.js test/cookie-secure.test.js test/password-rule.test.js test/headline.test.js",
     "electron": "kreftjs electron",
     "electron:dev": "kreftjs electron:dev",
     "electron:build": "kreftjs electron:build"

package/templates/app/frontend/errors/ErrorMonitor.kreft

@@ -92,7 +92,7 @@ state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$
         <div class="badges">
           <span class="badge danger-badge">HTTP {status}</span>
           <span class="badge solid">{currentTitle}</span>
-          <span class="badge">Kreft {Kreftjs.version || '0.0.10-beta'}</span>
+          <span class="badge">Kreft {Kreftjs.version || '0.0.12-beta'}</span>
         </div>
         <div class="actions">
           <button class="sm" @click={copyReport}>{copied ? 'Copied Markdown' : 'Copy Report'}</button>
@@ -189,7 +189,7 @@ state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$
         <h3>Kreft Runtime</h3>
         <table>
           <tbody>
-            <tr><th>Engine</th><td><code>Kreft v{Kreftjs.version || '0.0.10-beta'}</code></td></tr>
+            <tr><th>Engine</th><td><code>Kreft v{Kreftjs.version || '0.0.12-beta'}</code></td></tr>
             <tr><th>Sanitizer</th><td><code>Active (cleanHtml / SafeHtml)</code></td></tr>
             <tr><th>Environment</th><td><code>development (APP_DEBUG=true)</code></td></tr>
           </tbody>

package/templates/app/frontend/kreftjs.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for Kreft 0.0.10-beta
+// Type definitions for Kreft 0.0.12-beta
 // Use from TypeScript or for editor hints in plain JavaScript (// @ts-check).
 
 export interface Signal<T> { value: T }

package/templates/app/frontend/kreftjs.js

@@ -1,5 +1,5 @@
 /*!
- * Kreft v0.0.10-beta — reactive by nature
+ * Kreft v0.0.12-beta — reactive by nature
  * The .kreft component language (state · derive · action · when · watch · on),
  * { } views with k-if / k-each / k-model, components, slots, router, stores,
  * share / receive, event bus and a template engine.
@@ -5036,7 +5036,7 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.10-beta';
+  const VERSION = '0.0.12-beta';
   const Kreftjs = {
     version: VERSION,
     // PUBLIC_ values from .env (kreft dev and kreft build put them here); never secrets

package/templates/app/frontend/pages/Dashboard.kreft

@@ -112,7 +112,7 @@ state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$
         <div class="info-list">
           <div class="info-item">
             <span class="info-label">Framework Engine</span>
-            <span class="info-value">Kreft {Kreftjs.version || '0.0.10-beta'}</span>
+            <span class="info-value">Kreft {Kreftjs.version || '0.0.12-beta'}</span>
           </div>
           <div class="info-item">
             <span class="info-label">Active Database</span>

package/templates/app/frontend/pages/Home.kreft

@@ -4,6 +4,22 @@
 state name = 'Enterprise User'
 state count = 0
 state copied = false
+
+// the headline changes every few seconds: each line slides in from the right with a flash of red light (not for people who asked for less motion)
+state rotating = [
+  'Build full-stack apps in plain words.',
+  'The JavaScript framework that reads like English.',
+  'Components, backend and database in one small framework.',
+  'A small framework for the whole stack.',
+]
+state rotIndex = 0
+derive rotWord = [rotating[rotIndex]]
+let rotTimer
+on ready {
+  const calm = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  if (!calm) rotTimer = setInterval(() => { rotIndex = (rotIndex + 1) % rotating.length }, 3800)
+}
+on destroy { clearInterval(rotTimer) }
 derive double = count * 2
 
 state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
@@ -64,10 +80,9 @@ action copy() {
     <section class="hero-grid">
       <!-- Left Column: Copy, Headlines & CTA Badges -->
       <div class="hero-copy">
-        <h1 class="hero-headline">
-          The Enterprise<br>
-          JavaScript<br>
-          Framework.
+        <p class="version-pill"><span class="version-dot" aria-hidden="true"></span>Kreft v{Kreftjs.version}</p>
+        <h1 class="hero-headline" aria-label="Build full-stack apps in plain words.">
+          <span aria-hidden="true">{for w in rotWord key w}<span class="rotator">{w}</span>{/for}</span>
         </h1>
 
         <p class="hero-tagline">Built for scale, speed, and safety.</p>
@@ -275,8 +290,34 @@ action copy() {
 .hero-copy {
   max-width: 540px;
 }
+.version-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 20px;
+  padding: 5px 12px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--foreground);
+  background: var(--accent);
+  border: 1px solid var(--border);
+  border-radius: 9999px;
+}
+.version-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; }
+
+/* the changing headline: each line slides in from the right (a marquee) with a flash of red light, then settles */
+.rotator { display: block; animation: rotator-flash 0.9s ease-out; }
+@keyframes rotator-flash {
+  0% { opacity: 0; transform: translateX(1.4em); filter: blur(6px); color: #ef4444; text-shadow: 0 0 0.7em rgba(239, 68, 68, 0.95); }
+  35% { opacity: 1; filter: blur(0); color: #ef4444; text-shadow: 0 0 0.55em rgba(239, 68, 68, 0.85); }
+  100% { opacity: 1; transform: none; filter: none; color: var(--foreground); text-shadow: none; }
+}
+@media (prefers-reduced-motion: reduce) { .rotator { animation: none; } }
 .hero-headline {
-  font-size: clamp(38px, 5.2vw, 66px);
+  font-size: clamp(30px, 3.9vw, 48px);
+  min-height: 3.3em; /* three lines for the longest headline, so the page below does not jump */
+  overflow: hidden;
   line-height: 1.05;
   letter-spacing: -0.04em;
   font-weight: 800;
@@ -605,7 +646,7 @@ dd { margin: 0; color: var(--muted); }
 }
 @media (max-width: 640px) {
   .welcome-container { padding: 24px 0 48px; }
-  .hero-headline { font-size: 36px; }
+  .hero-headline { font-size: 32px; }
   .hero-tagline { font-size: 20px; }
   .cta-actions { flex-direction: column; width: 100%; }
   .pill-btn { width: 100%; text-align: center; }

package/templates/errors/ErrorMonitor.kreft

@@ -118,7 +118,7 @@ state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$
         <div class="hero-badges">
           <span class="badge-exception">{currentTitle}</span>
           <span class="badge-env">Node.js {typeof process !== 'undefined' ? process.version : 'v22.0.0'}</span>
-          <span class="badge-env">Kreft v0.0.10-beta</span>
+          <span class="badge-env">Kreft v0.0.12-beta</span>
         </div>
         <h1 class="hero-error-message">{currentMessage}</h1>
       </div>