kreftjs 0.0.6-beta → 0.0.7-beta

package/README.md

@@ -75,7 +75,7 @@ Views are escaped, logins use HttpOnly cookies with CSRF protection, passwords u
 
 ## Migrating from Som.js
 
-Kreft is Som.js under a new name: the package is `kreftjs` (version 0.0.6-beta), the command is `kreft` (`kreftjs` works too), the global is `Kreftjs` and component files end in `.kreftjs`. The old names keep working, so an existing project runs without edits. New files and everything the tools write use the new names. Move over when it suits you. (`kreft` was an earlier spelling of the new name; it is accepted in the same places.)
+Kreft is Som.js under a new name: the package is `kreftjs` (version 0.0.7-beta), the command is `kreft` (`kreftjs` works too), the global is `Kreftjs` and component files end in `.kreftjs`. The old names keep working, so an existing project runs without edits. New files and everything the tools write use the new names. Move over when it suits you. (`kreft` was an earlier spelling of the new name; it is accepted in the same places.)
 
 | Som.js | Kreft | Still works? |
 |---|---|---|

package/bin/build.js

@@ -31,7 +31,7 @@ const deps = require('./deps.js');
 // component files: .kreftjs, or .kreft / .som in an older project
 const isComp = (f) => /\.(?:kreftjs|kreft|som)$/i.test(f);
 const SERVER_DIRS = new Set();
-const SKIP = new Set(['node_modules', '.git', '.vscode', '.idea', 'package.json', 'package-lock.json', '.DS_Store']);
+const SKIP = new Set(['node_modules', 'dist', 'dist-electron', '.git', '.vscode', '.idea', 'package.json', 'package-lock.json', '.DS_Store']);
 
 module.exports = function build(args) {
   let folder = null, out = null, base = null, prerender = null, urlsFile = null, htaccess = true;

package/bin/no-auth.js

@@ -75,6 +75,8 @@ Route.prefix('/tests').name('tests.').group(() => {
 `;
 
 const LAYOUT = (todos) => `<!-- The default layout: a slim bar and the page. Every route without .layout(…) uses it (see index.html). -->
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
+
 <view>
   <header>
     <kreft-link to="/" class="brand"><span class="mark" aria-hidden="true"></span>{env.PUBLIC_APP_NAME || 'My app'}</kreft-link>
@@ -83,7 +85,7 @@ const LAYOUT = (todos) => `<!-- The default layout: a slim bar and the page. Eve
       <kreft-link to="/todos" exact-class="here">Todos</kreft-link>` : ''}
       <kreft-link to="/error-monitor" exact-class="here">Error monitor</kreft-link>
       <kreft-link to="/tests" exact-class="here">Tests</kreft-link>
-      <kreft-link to="/docs" exact-class="here">Docs</kreft-link>
+      <a href={docs + '/docs'} target="_blank" rel="noopener">Docs</a>
       <button type="button" class="theme" @click="theme.toggle()" aria-label="Toggle theme" title="Toggle theme">
         <span k-if="theme.dark">☀</span><span k-else>🌙</span>
       </button>

package/docs/README.md

@@ -82,7 +82,7 @@ npx kreftjs dev
 ### Check that it works
 
 ```bash
-kreft --version     # for example 0.0.6-beta
+kreft --version     # for example 0.0.7-beta
 kreft about         # Kreft and Node.js versions, this project's settings and drivers
 kreft list          # every command your version has
 ```
@@ -2267,6 +2267,7 @@ Set these in `.env` (never commit it). Variables that start with `PUBLIC_` are c
 | `LOGIN_MAX_FAILURES`, `LOGIN_WINDOW_SECONDS` | 10, 900 | Wrong passwords per account before a lockout. |
 | `TWO_FACTOR_MAX_FAILURES` | 8 | Wrong two-factor codes per account before a lockout. |
 | `PUBLIC_SESSION_TIMEOUT`, `PUBLIC_SESSION_WARNING` | 15, 2 | Minutes of page inactivity before sign-out, and the warning before it. |
+| `PUBLIC_DOCS_URL` | `http://kreftjs.com` | Where the "Documentation" links of a new app's pages go. Change it to `https://…` or to your own site. |
 
 ### Network and tools
 

package/kreftjs.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for Kreft 0.0.6-beta
+// Type definitions for Kreft 0.0.7-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.6-beta — reactive by nature
+ * Kreft v0.0.7-beta — reactive by nature
  * The .kreftjs 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.
@@ -5032,7 +5032,7 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.6-beta';
+  const VERSION = '0.0.7-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.6-beta",
+  "version": "0.0.7-beta",
   "description": "A tiny reactive framework with its own component language (.kreftjs 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",

package/templates/app/README.md

@@ -28,7 +28,7 @@ Your project cleanly isolates client-side UI (`frontend/`) from server-side busi
 │   ├── pages/                 # Route views (Home, Dashboard, Users, Profile, auth/*)
 │   ├── components/            # Reusable widgets (Field.kreftjs, StatCard.kreftjs, profile/*)
 │   ├── errors/                # Custom HTTP error views (404.kreftjs, 500.kreftjs, ErrorMonitor.kreftjs)
-│   ├── docs/                  # Built-in documentation (accessible at /docs)
+│   ├── docs/                  # Built-in copy of the documentation (at /docs); the pages link to PUBLIC_DOCS_URL, http://kreftjs.com
 │   └── ui.css                 # Design system tokens & component styles
 │
 ├── backend/                   # Private server engine (never exposed or built into dist/)

package/templates/app/_env.example

@@ -11,6 +11,8 @@ APP_URL=http://localhost:8000
 # Only values that start with PUBLIC_ also reach the browser: {env.PUBLIC_APP_NAME} in any .kreftjs file.
 # Never put a password or a secret key in a PUBLIC_ value.
 PUBLIC_APP_NAME="${APP_NAME}"
+# Where the "Documentation" links of the pages go
+PUBLIC_DOCS_URL="http://kreftjs.com"
 
 # The database: sqlite:file.db, mysql://user:password@host:3306/name or postgres://user:password@host:5432/name
 DATABASE_URL=sqlite:backend/database/app.db

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

@@ -82,6 +82,8 @@ action copyReport() {
   }
 }
 
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
+
 <view>
   <div class="kreft-inspector">
     <!-- Header Card -->
@@ -90,11 +92,11 @@ action copyReport() {
         <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.6-beta'}</span>
+          <span class="badge">Kreft {Kreftjs.version || '0.0.7-beta'}</span>
         </div>
         <div class="actions">
           <button class="sm" @click={copyReport}>{copied ? 'Copied Markdown' : 'Copy Report'}</button>
-          <kreft-link to="/docs" class="btn sm ghost">Docs</kreft-link>
+          <a href={docs + '/docs'} class="btn sm ghost" target="_blank" rel="noopener">Docs</a>
         </div>
       </div>
 
@@ -187,7 +189,7 @@ action copyReport() {
         <h3>Kreft Runtime</h3>
         <table>
           <tbody>
-            <tr><th>Engine</th><td><code>Kreft v{Kreftjs.version || '0.0.6-beta'}</code></td></tr>
+            <tr><th>Engine</th><td><code>Kreft v{Kreftjs.version || '0.0.7-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.6-beta
+// Type definitions for Kreft 0.0.7-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.6-beta — reactive by nature
+ * Kreft v0.0.7-beta — reactive by nature
  * The .kreftjs 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.
@@ -5032,7 +5032,7 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.6-beta';
+  const VERSION = '0.0.7-beta';
   const Kreftjs = {
     version: VERSION,
     // PUBLIC_ values from .env (kreft dev and kreft build put them here); never secrets

package/templates/app/frontend/layouts/app.kreftjs

@@ -11,6 +11,7 @@ state remainingMinutes = 5
 state inactivityTimer = null
 
 // SVG vector icon paths (24x24)
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
 state icons = {
   dashboard: 'M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z',
   users: 'M16 19v-1a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v1M9.5 10a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7M21 19v-1a4 4 0 0 0-3-3.87M15.5 3.13a3.5 3.5 0 0 1 0 6.75',
@@ -33,7 +34,7 @@ state navGroups = [
   { label: 'Platform', links: [
     { to: 'welcome', label: 'Showcase', icon: 'showcase' },
     { to: 'error-monitor', label: 'Error Monitor', icon: 'panel' },
-    { to: 'docs', label: 'Documentation', icon: 'docs' },
+    { docs: '/docs', label: 'Documentation', icon: 'docs' },
     { to: 'tests.index', label: 'Test Suite', icon: 'tests' },
   ] },
 ]
@@ -130,7 +131,12 @@ action extendSession() {
             <ul class="nav-list">
               {for link in group.links}
                 <li>
+                  <a k-if="link.docs" href={docs + link.docs} target="_blank" rel="noopener" title={collapsed ? link.label : null} class="nav-item">
+                    <svg viewBox="0 0 24 24" aria-hidden="true" class="nav-icon"><path d={icons[link.icon] || icons.panel}></path></svg>
+                    <span class="nav-label">{link.label}</span>
+                  </a>
                   <kreft-link
+                    k-else
                     to={link.to}
                     exact-class={link.exact ? 'active-link' : 'kreft-link-exact'}
                     active-class={link.exact ? 'kreft-link-active' : 'active-link'}

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

@@ -5,6 +5,8 @@
 load stats = api.get('/api/admin/stats')
 load board = api.get('/api/dashboard')
 
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
+
 <view>
   <div class="dashboard-page">
     <div class="dashboard-header">
@@ -110,7 +112,7 @@ load board = api.get('/api/dashboard')
         <div class="info-list">
           <div class="info-item">
             <span class="info-label">Framework Engine</span>
-            <span class="info-value">Kreft {Kreftjs.version || '0.0.6-beta'}</span>
+            <span class="info-value">Kreft {Kreftjs.version || '0.0.7-beta'}</span>
           </div>
           <div class="info-item">
             <span class="info-label">Active Database</span>
@@ -128,7 +130,7 @@ load board = api.get('/api/dashboard')
 
         <div class="quick-nav-group">
           <kreft-link to="/profile" class="btn secondary sm w-full">Edit Profile Settings</kreft-link>
-          <kreft-link to="/docs" class="btn ghost sm w-full">API Documentation</kreft-link>
+          <a href={docs + '/docs'} class="btn ghost sm w-full" target="_blank" rel="noopener">API Documentation</a>
           <kreft-link to="/welcome" class="btn ghost sm w-full">Landing Page Showcase</kreft-link>
         </div>
       </section>

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

@@ -6,6 +6,7 @@ state count = 0
 state copied = false
 derive double = count * 2
 
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
 state words = [
   { word: 'state', says: 'a value that can change', to: '/docs#components-and-the-kreftjs-file' },
   { word: 'saved', says: 'a value kept after a reload', to: '/docs#saving-data-in-the-browser' },
@@ -49,7 +50,7 @@ action copy() {
     <header class="site-bar">
       <kreft-link to="/" class="site-brand"><span class="site-mark" aria-hidden="true"></span>{env.PUBLIC_APP_NAME || 'Kreft'}</kreft-link>
       <nav class="site-nav">
-        <kreft-link to="/docs">Documentation</kreft-link>
+        <a href={docs + '/docs'} target="_blank" rel="noopener">Documentation</a>
         <kreft-link k-if="$store.auth.user" to="/dashboard">Dashboard</kreft-link>
         <kreft-link k-if="!$store.auth.user" to="/login">Log in</kreft-link>
         <kreft-link k-if="!$store.auth.user" to="/register" class="site-cta">Sign up</kreft-link>
@@ -77,10 +78,10 @@ action copy() {
 
         <!-- CTA Buttons -->
         <div class="cta-actions">
-          <kreft-link to="/docs" class="pill-btn primary">Read the docs</kreft-link>
+          <a href={docs + '/docs'} class="pill-btn primary" target="_blank" rel="noopener">Read the docs</a>
           <kreft-link k-if="$store.auth.user" to="/dashboard" class="pill-btn ghost">Open dashboard</kreft-link>
           <kreft-link k-if="!$store.auth.user" to="/register" class="pill-btn ghost">Sign up</kreft-link>
-          <kreft-link to="/docs#your-first-app" class="pill-btn ghost">Quick start</kreft-link>
+          <a href={docs + '/docs#your-first-app'} class="pill-btn ghost" target="_blank" rel="noopener">Quick start</a>
         </div>
 
         <!-- Badges Row -->
@@ -177,7 +178,7 @@ action copy() {
       <h2>The whole language fits on one screen</h2>
       <dl>
         {for w in words key w.word}
-          <div><dt><kreft-link to={w.to}>{w.word}</kreft-link></dt><dd>{w.says}</dd></div>
+          <div><dt><a href={docs + w.to} target="_blank" rel="noopener">{w.word}</a></dt><dd>{w.says}</dd></div>
         {/for}
       </dl>
     </section>
@@ -186,7 +187,7 @@ action copy() {
       <h2>Also in the box</h2>
       <ul>
         {for p in parts key p.title}
-          <li><kreft-link to={p.to}><strong>{p.title}</strong><span>{p.text}</span></kreft-link></li>
+          <li><a href={docs + p.to} target="_blank" rel="noopener"><strong>{p.title}</strong><span>{p.text}</span></a></li>
         {/for}
       </ul>
     </section>
@@ -197,12 +198,12 @@ action copy() {
         <code>kreft new my-app --db sqlite</code>
         <button class="sm" @click={copy} aria-label="Copy the command">{copied ? 'Copied' : 'Copy'}</button>
       </div>
-      <p>Then <code>cd my-app</code> and <code>npm run dev</code>. Coming from Vue? The <kreft-link to="/docs">docs</kreft-link> have a table with the Kreft name for every Vue feature.</p>
+      <p>Then <code>cd my-app</code> and <code>npm run dev</code>. Coming from Vue? The <a href={docs + '/docs'} target="_blank" rel="noopener">docs</a> have a table with the Kreft name for every Vue feature.</p>
     </section>
 
     <footer class="site-foot">
       <span>Kreft {Kreftjs.version}</span>
-      <kreft-link to="/docs">Docs</kreft-link>
+      <a href={docs + '/docs'} target="_blank" rel="noopener">Docs</a>
       <kreft-link to="/error-monitor">Error monitor</kreft-link>
     </footer>
   </div>

package/templates/errors/ErrorMonitor.kreftjs

@@ -79,6 +79,8 @@ action copyReport() {
   }
 }
 
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
+
 <view>
   <div class="error-monitor-wrapper">
     <!-- Top Navigation Bar -->
@@ -99,10 +101,10 @@ action copyReport() {
       </div>
 
       <div class="nav-meta">
-        <kreft-link to="/docs" class="nav-link-docs">
+        <a href={docs + '/docs'} class="nav-link-docs" target="_blank" rel="noopener">
           <span class="tab-icon">📖</span>
           <span>DOCS</span>
-        </kreft-link>
+        </a>
         <button class="btn-copy-report" @click={copyReport}>
           {copiedToast ? '✓ Copied' : 'Copy Report'}
         </button>
@@ -116,7 +118,7 @@ action copyReport() {
         <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.6-beta</span>
+          <span class="badge-env">Kreft v0.0.7-beta</span>
         </div>
         <h1 class="hero-error-message">{currentMessage}</h1>
       </div>