novac 2.2.2 → 2.3.0

package/kits/kitnovacweb/nvml/index.js

@@ -38,10 +38,16 @@ function executeAst(ast, opts = {}) {
  * Render a live NvmlDocument to an HTML string.
  * @param {NvmlDocument} doc
  * @param {object} opts
- *   novaEmitter(code) — compiles Nova code to JS for client scripts
+ *   novaEmitter(code)             — compiles Nova code to JS for client scripts
+ *   registerAction(name,code,type) — registers a named server action
+ *   csrfToken                     — CSRF token embedded in page JS
  */
 function renderDoc(doc, opts = {}) {
-  const renderer = new Renderer({ novaEmitter: opts.novaEmitter || null });
+  const renderer = new Renderer({
+    novaEmitter:    opts.novaEmitter    || null,
+    registerAction: opts.registerAction || null,
+    csrfToken:      opts.csrfToken      || '',
+  });
   return renderer.render(doc);
 }
 
@@ -64,4 +70,4 @@ function run(source, opts = {}) {
   return { doc, html, ast };
 }
 
-module.exports = { parse, executeAst, renderDoc, compile, run, NvmlDocument, makeBfObject };
+module.exports = { parse, executeAst, renderDoc, compile, run, NvmlDocument, makeBfObject };

package/kits/kitnovacweb/nvml/renderer.js

@@ -29,70 +29,72 @@
 const { makeBfObject } = require('./executor');
 
 const VOID_ELEMENTS = new Set([
-  'area','base','br','col','embed','hr','img','input',
-  'link','meta','param','source','track','wbr',
+  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+  'link', 'meta', 'param', 'source', 'track', 'wbr',
 ]);
 
 function safeAttr(name) { return String(name).replace(/[^a-zA-Z0-9\-_:.]/g, ''); }
-function escHtml(str)    { return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
-function esc(str)        { return String(str).replace(/\\/g,'\\\\').replace(/`/g,'\\`').replace(/\$\{/g,'\\${'); }
+function escHtml(str) { return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); }
+function esc(str) { return String(str).replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${'); }
 
 const HTML_ATTRS = new Set([
-  'id','class','style','href','src','alt','title','placeholder','type','value','name',
-  'action','method','target','rel','for','checked','disabled','readonly','required',
-  'autofocus','autocomplete','multiple','size','rows','cols','maxlength','minlength',
-  'min','max','step','pattern','tabindex','accesskey','dir','draggable','hidden',
-  'spellcheck','translate','contenteditable','width','height','loading','decoding',
-  'crossorigin','integrity','referrerpolicy','charset','media','onload','onclick',
-  'onchange','oninput','onsubmit','onkeydown','onkeyup','onkeypress','onmouseover',
-  'onmouseout','onmouseenter','onmouseleave','onfocus','onblur','ondblclick',
-  'onpointerdown','onpointerup','onpointermove','role',
-  'aria-label','aria-hidden','aria-expanded','aria-controls','aria-describedby',
-  'aria-labelledby','aria-live','aria-atomic','aria-relevant','aria-busy',
-  'aria-checked','aria-selected','aria-pressed','aria-disabled','aria-invalid',
-  'aria-required','aria-multiline','aria-multiselectable','aria-orientation',
-  'aria-valuemin','aria-valuemax','aria-valuenow','aria-valuetext','aria-setsize',
-  'aria-posinset','aria-level','aria-readonly','aria-autocomplete','aria-haspopup',
-  'aria-modal','aria-sort','aria-colcount','aria-colindex','aria-rowcount','aria-rowindex',
-  'data','form','formaction','formmethod','formnovalidate','formtarget','enctype',
-  'accept','accept-charset','list','inputmode','enterkeyhint','is','part','slot',
-  'exportparts','inert','popover','popovertarget','popovertargetaction',
+  'id', 'class', 'style', 'href', 'src', 'alt', 'title', 'placeholder', 'type', 'value', 'name',
+  'action', 'method', 'target', 'rel', 'for', 'checked', 'disabled', 'readonly', 'required',
+  'autofocus', 'autocomplete', 'multiple', 'size', 'rows', 'cols', 'maxlength', 'minlength',
+  'min', 'max', 'step', 'pattern', 'tabindex', 'accesskey', 'dir', 'draggable', 'hidden',
+  'spellcheck', 'translate', 'contenteditable', 'width', 'height', 'loading', 'decoding',
+  'crossorigin', 'integrity', 'referrerpolicy', 'charset', 'media', 'onload', 'onclick',
+  'onchange', 'oninput', 'onsubmit', 'onkeydown', 'onkeyup', 'onkeypress', 'onmouseover',
+  'onmouseout', 'onmouseenter', 'onmouseleave', 'onfocus', 'onblur', 'ondblclick',
+  'onpointerdown', 'onpointerup', 'onpointermove', 'role',
+  'aria-label', 'aria-hidden', 'aria-expanded', 'aria-controls', 'aria-describedby',
+  'aria-labelledby', 'aria-live', 'aria-atomic', 'aria-relevant', 'aria-busy',
+  'aria-checked', 'aria-selected', 'aria-pressed', 'aria-disabled', 'aria-invalid',
+  'aria-required', 'aria-multiline', 'aria-multiselectable', 'aria-orientation',
+  'aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'aria-valuetext', 'aria-setsize',
+  'aria-posinset', 'aria-level', 'aria-readonly', 'aria-autocomplete', 'aria-haspopup',
+  'aria-modal', 'aria-sort', 'aria-colcount', 'aria-colindex', 'aria-rowcount', 'aria-rowindex',
+  'data', 'form', 'formaction', 'formmethod', 'formnovalidate', 'formtarget', 'enctype',
+  'accept', 'accept-charset', 'list', 'inputmode', 'enterkeyhint', 'is', 'part', 'slot',
+  'exportparts', 'inert', 'popover', 'popovertarget', 'popovertargetaction',
 ]);
 
 class Renderer {
   constructor(options = {}) {
     this.novaEmitter = options.novaEmitter || null;
+    this.registerAction = options.registerAction || null; // (name, code, type) => void
+    this._csrfToken = options.csrfToken || '';
   }
 
   render(doc) {
     const config = doc.config || {};
-    const hasState    = Object.keys(doc.state || {}).length > 0;
+    const hasState = Object.keys(doc.state || {}).length > 0;
     const hasComputed = (doc.computed || []).length > 0;
-    const hasEffects  = (doc.effects  || []).length > 0;
-    const hasRoutes   = (doc.routes   || []).length > 0;
+    const hasEffects = (doc.effects || []).length > 0;
+    const hasRoutes = (doc.routes || []).length > 0;
 
     // ── <head> ──────────────────────────────────────────────────────
     const head = [];
 
     head.push(`  <meta charset="${escHtml(config.charset || 'UTF-8')}">`);
     head.push(`  <meta name="viewport" content="${escHtml(config.viewport || 'width=device-width, initial-scale=1.0')}">`);
-    if (config.title)       head.push(`  <title>${escHtml(config.title)}</title>`);
+    if (config.title) head.push(`  <title>${escHtml(config.title)}</title>`);
     if (config.description) head.push(`  <meta name="description" content="${escHtml(config.description)}">`);
-    if (config.author)      head.push(`  <meta name="author" content="${escHtml(config.author)}">`);
+    if (config.author) head.push(`  <meta name="author" content="${escHtml(config.author)}">`);
     if (config.keywords) {
       const kw = Array.isArray(config.keywords) ? config.keywords.join(', ') : config.keywords;
       head.push(`  <meta name="keywords" content="${escHtml(kw)}">`);
     }
     if (config['theme-color']) head.push(`  <meta name="theme-color" content="${escHtml(config['theme-color'])}">`);
-    if (config.robots)    head.push(`  <meta name="robots" content="${escHtml(config.robots)}">`);
+    if (config.robots) head.push(`  <meta name="robots" content="${escHtml(config.robots)}">`);
     if (config.canonical) head.push(`  <link rel="canonical" href="${escHtml(config.canonical)}">`);
-    if (config.favicon)   head.push(`  <link rel="icon" href="${escHtml(config.favicon)}">`);
-    if (config.base)      head.push(`  <base href="${escHtml(config.base)}">`);
+    if (config.favicon) head.push(`  <link rel="icon" href="${escHtml(config.favicon)}">`);
+    if (config.base) head.push(`  <base href="${escHtml(config.base)}">`);
 
-    for (const k of ['og:title','og:description','og:image','og:url','og:type']) {
+    for (const k of ['og:title', 'og:description', 'og:image', 'og:url', 'og:type']) {
       if (config[k]) head.push(`  <meta property="${escHtml(k)}" content="${escHtml(config[k])}">`);
     }
-    for (const k of ['twitter:card','twitter:title','twitter:description','twitter:image']) {
+    for (const k of ['twitter:card', 'twitter:title', 'twitter:description', 'twitter:image']) {
       if (config[k]) head.push(`  <meta name="${escHtml(k)}" content="${escHtml(config[k])}">`);
     }
 
@@ -109,9 +111,9 @@ class Renderer {
 
     // Transition CSS (generated from ~ hints collected during element render)
     this._transitionNames = new Set();
-    this._componentDefs   = doc.components || {};
-    this._slots           = doc.slots       || {};
-    this._langDefs        = doc.langs       || {};
+    this._componentDefs = doc.components || {};
+    this._slots = doc.slots || {};
+    this._langDefs = doc.langs || {};
 
     // Render body first to collect transition names and component templates
     this._componentTemplates = {};
@@ -139,9 +141,9 @@ class Renderer {
     }
 
     // ── <body> ──────────────────────────────────────────────────────
-    const lang      = config.lang || 'en';
+    const lang = config.lang || 'en';
     const bodyClass = config.bodyClass ? ` class="${escHtml(config.bodyClass)}"` : '';
-    const bodyId    = config.bodyId    ? ` id="${escHtml(config.bodyId)}"` : '';
+    const bodyId = config.bodyId ? ` id="${escHtml(config.bodyId)}"` : '';
     const bodyStyle = config.bodyStyle ? ` style="${escHtml(config.bodyStyle)}"` : '';
 
     return [
@@ -161,15 +163,27 @@ class Renderer {
   // ── Reactive runtime script ──────────────────────────────────────
 
   _renderRuntime(doc) {
-    const stateJson    = JSON.stringify(doc.state || {});
+    const stateJson = JSON.stringify(doc.state || {});
     const computedJson = JSON.stringify((doc.computed || []).map(c => ({ name: c.name, initial: c.initialValue })));
-    const effectsJson  = JSON.stringify((doc.effects || []).map(e => ({ deps: e.deps, code: e.code })));
+    // Effects: register named action at compile time, embed action name only
+    const effectsJson = JSON.stringify((doc.effects || []).map((e, i) => {
+      if (this.registerAction && e.code && e.code.trim()) {
+        const name = `effect_${i}`;
+        this.registerAction(name, e.code, 'nova');
+        return { deps: e.deps, action: name };
+      }
+      return { deps: e.deps, action: null }; // no-op if no server
+    }));
+    const csrf = this._csrfToken;
 
     return `  <script>
 // ── NVML Reactive Runtime ─────────────────────────────────────────────
 (function(){
 'use strict';
 
+// ── CSRF token (embedded at compile time) ─────────────────────────────
+const __csrf = '${csrf}';
+
 // ── Signal store ──────────────────────────────────────────────────────
 const _state    = ${stateJson};
 const _computed = ${computedJson};
@@ -214,12 +228,11 @@ function _subscribe(name, fn) {
 
 // ── Effects ────────────────────────────────────────────────────────────
 function _runEffect(effect) {
-  if (!effect.code || !effect.code.trim()) return;
-  // Effects with Nova code run via /_nvml/run server round-trip
-  fetch('/_nvml/run', {
+  if (!effect.action) return;
+  fetch('/_nvml/action/' + effect.action, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ code: effect.code, live: _liveSnapshot(), state: _state })
+    headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': __csrf },
+    body: JSON.stringify({ live: _liveSnapshot() })
   }).then(r => r.json()).then(({ mutations, error }) => {
     if (error) { console.error('[nvml effect]', error); return; }
     _applyMutations(mutations || []);
@@ -434,11 +447,11 @@ function _liveSnapshot() {
 }
 
 // ── Triggered server script handler ─────────────────────────────────────
-window.__nvmlRun = function(code) {
-  return fetch('/_nvml/run', {
+window.__nvmlRun = function(actionName) {
+  return fetch('/_nvml/action/' + actionName, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ code, live: _liveSnapshot() })
+    headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': __csrf },
+    body: JSON.stringify({ live: _liveSnapshot() })
   }).then(r => r.json()).then(({ mutations, error }) => {
     if (error) { console.error('[nvml]', error); return; }
     _applyMutations(mutations || []);
@@ -522,11 +535,11 @@ window.__nvml_bf_make = _makeBf;
 window.__nvml_bf = _makeBf();
 
 // ── __nvmlRunNode — triggered nodejs server script runner ────────────
-window.__nvmlRunNode = function(code) {
-  return fetch('/_nvml/run-node', {
+window.__nvmlRunNode = function(actionName) {
+  return fetch('/_nvml/action/' + actionName, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ code, live: window.__nvml ? { state: window.__nvml.state } : {} })
+    headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': __csrf },
+    body: JSON.stringify({ live: window.__nvml ? { state: window.__nvml.state } : {} })
   }).then(r => r.json()).then(({ mutations, error }) => {
     if (error) { console.error('[nvml nodejs]', error); return; }
     if (window.__nvml) window.__nvml.applyMutations(mutations || []);
@@ -540,8 +553,8 @@ window.__nvmlRunNode = function(code) {
 
   _renderRoutingScript(doc) {
     const routes = (doc.routes || []).map(r => ({
-      path:    typeof r.path === 'object' ? (r.path.value || r.path) : r.path,
-      html:    r.body.map(n => this.renderElement(this._bodyToEl(n), 1, doc)).join(''),
+      path: typeof r.path === 'object' ? (r.path.value || r.path) : r.path,
+      html: r.body.map(n => this.renderElement(this._bodyToEl(n), 1, doc)).join(''),
     }));
     const routesJson = JSON.stringify(routes);
     return `<script>
@@ -626,7 +639,7 @@ document.addEventListener('DOMContentLoaded', () => _render(location.pathname));
 
     // conditional render: data-nvml-if
     if (el.cond) {
-      attrs['data-nvml-if']      = el.cond;
+      attrs['data-nvml-if'] = el.cond;
       attrs['data-nvml-display'] = el.props.style?.includes('inline') ? 'inline' : 'block';
     }
 
@@ -676,7 +689,7 @@ document.addEventListener('DOMContentLoaded', () => _render(location.pathname));
       childLines.push(this.renderElement(child, depth + 1, doc));
     }
 
-    const inner    = childLines.length ? '\n' + childLines.filter(Boolean).join('\n') + '\n' + ind : '';
+    const inner = childLines.length ? '\n' + childLines.filter(Boolean).join('\n') + '\n' + ind : '';
     const closeTag = `</${tag}>`;
 
     return scopedStyleBlock + ind + openTag + inner + closeTag;
@@ -688,7 +701,7 @@ document.addEventListener('DOMContentLoaded', () => _render(location.pathname));
     // Generate a template string and a container div.
     // The reactive runtime will clone the template per item.
     // For SSR: render with the initial state value if available.
-    const signal  = el.eachSignal;
+    const signal = el.eachSignal;
     const itemVar = el.eachItemVar || 'item';
 
     // Build the per-item template as an HTML string with {{item}} placeholder
@@ -710,7 +723,7 @@ document.addEventListener('DOMContentLoaded', () => _render(location.pathname));
 
   _renderSlotOutlet(el, depth, doc) {
     const slotName = el.slotName || 'default';
-    const slotEls  = (this._slots || {})[slotName] || [];
+    const slotEls = (this._slots || {})[slotName] || [];
     if (!slotEls.length) return '';
     return slotEls.map(s => this.renderElement(s, depth, doc)).join('\n');
   }
@@ -718,7 +731,7 @@ document.addEventListener('DOMContentLoaded', () => _render(location.pathname));
   // ── Component placeholder (external) ─────────────────────────────
 
   _renderComponentPlaceholder(el, ind) {
-    const name  = el.props['data-component'];
+    const name = el.props['data-component'];
     const attrs = this._attrsToString(this._buildAttrs(el, null));
     return `${ind}<div${attrs}></div>`;
   }
@@ -727,7 +740,7 @@ document.addEventListener('DOMContentLoaded', () => _render(location.pathname));
 
   _renderScript(el, ind) {
     const scope = el._scriptScope || el.props.scope || 'client';
-    const lang  = el._scriptLang  || el.props.language || el.props.lang || 'js';
+    const lang = el._scriptLang || el.props.language || el.props.lang || 'js';
 
     // Nova server-side: already ran, leave a comment
     if ((lang === 'novac' || lang === 'nv') && scope === 'server') {
@@ -757,7 +770,7 @@ document.addEventListener('DOMContentLoaded', () => _render(location.pathname));
     }
 
     const extraAttrs = [];
-    if (el.props.src)   extraAttrs.push(`src="${escHtml(el.props.src)}"`);
+    if (el.props.src) extraAttrs.push(`src="${escHtml(el.props.src)}"`);
     if (el.props.defer) extraAttrs.push('defer');
     if (el.props.async) extraAttrs.push('async');
     if (el.props.type && lang !== 'novac' && lang !== 'nv') extraAttrs.push(`type="${escHtml(el.props.type)}"`);
@@ -771,15 +784,21 @@ document.addEventListener('DOMContentLoaded', () => _render(location.pathname));
   // Sends code to /_nvml/run-node endpoint; the server runs it in Node.js VM.
 
   _renderNodejsFetch(el, ind) {
-    const code    = (el._scriptCode || el.code || el.textValue || '').trim();
+    const code = (el._scriptCode || el.code || el.textValue || '').trim();
     const trigger = el.props.trigger || null;
-    const target  = el.props.target  || null;
-    const escaped = esc(code);
+    const target = el.props.target || null;
+    const actionName = el.props.action || el.props.id || null;
+
+    if (!actionName) {
+      process.stderr.write(`[nvml] Warning: nodejs script block missing 'action' prop — skipping. Add action="my-action-name".\n`);
+      return `${ind}<!-- nvml: nodejs script skipped — no action name -->`;
+    }
 
-    const fetchCall = `window.__nvmlRunNode(\`${escaped}\`)`;
+    if (this.registerAction) this.registerAction(actionName, code, 'nodejs');
+    const fetchCall = `window.__nvmlRunNode('${actionName}')`;
 
     if (trigger && target) {
-      const evList   = trigger.split(',').map(t => t.trim());
+      const evList = trigger.split(',').map(t => t.trim());
       const handlers = evList.map(ev => `_t.addEventListener('${ev}', function(_e){ ${fetchCall}; });`).join('\n    ');
       return `${ind}<script>
 ${ind}document.addEventListener('DOMContentLoaded', function() {
@@ -800,19 +819,24 @@ ${ind}</script>`;
       return `${ind}<!-- @lang ${langDef.name} (${langDef.runtimeLanguage}) script executed at render time -->`;
     }
 
-    const code    = el._scriptCode || el.code || el.textValue || '';
+    const code = el._scriptCode || el.code || el.textValue || '';
     const trigger = el.props.trigger || null;
-    const target  = el.props.target  || null;
+    const target = el.props.target || null;
 
-    // Server-side triggered custom lang: route through /_nvml/run (Nova) or /_nvml/run-node
+    // Server-side triggered custom lang: dispatch via /_nvml/action/:name
     if (langDef.scope === 'server-nova' || langDef.scope === 'server-node') {
-      const endpoint = langDef.scope === 'server-node' ? '/_nvml/run-node' : '/_nvml/run';
-      const wrapped  = langDef.code ? langDef.code + '\n' + code : code;
-      const escaped  = esc(wrapped);
-      const fetchCall = `fetch('${endpoint}', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ code: \`${escaped}\`, live: window.__nvml ? { state: window.__nvml.state } : {} }) }).then(r => r.json()).then(({ mutations }) => { if (window.__nvml) window.__nvml.applyMutations(mutations || []); })`;
+      const actionName = el.props.action || el.props.id || null;
+      if (!actionName) {
+        process.stderr.write(`[nvml] Warning: @lang server script missing 'action' prop — skipping.\n`);
+        return `${ind}<!-- nvml: @lang server script skipped — no action name -->`;
+      }
+      const wrapped = langDef.code ? langDef.code + '\n' + code : code;
+      const type = langDef.scope === 'server-node' ? 'nodejs' : 'nova';
+      if (this.registerAction) this.registerAction(actionName, wrapped, type);
+      const fetchCall = `fetch('/_nvml/action/${actionName}', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': __csrf }, body: JSON.stringify({ live: window.__nvml ? { state: window.__nvml.state } : {} }) }).then(r => r.json()).then(({ mutations }) => { if (window.__nvml) window.__nvml.applyMutations(mutations || []); })`;
 
       if (trigger && target) {
-        const evList   = trigger.split(',').map(t => t.trim());
+        const evList = trigger.split(',').map(t => t.trim());
         const handlers = evList.map(ev => `_t.addEventListener('${ev}', function() { ${fetchCall}; });`).join('\n    ');
         return `${ind}<script>
 ${ind}document.addEventListener('DOMContentLoaded', function() {
@@ -842,15 +866,21 @@ ${ind}</script>`;
   _renderNvFetch(el, ind) {
     if (el._ranOnServer) return `${ind}<!-- nv server script executed at render time -->`;
 
-    const code    = (el._scriptCode || el.code || el.textValue || '').trim();
+    const code = (el._scriptCode || el.code || el.textValue || '').trim();
     const trigger = el.props.trigger || null;
-    const target  = el.props.target  || null;
-    const escaped = esc(code);
+    const target = el.props.target || null;
+    const actionName = el.props.action || el.props.id || null;
+
+    if (!actionName) {
+      process.stderr.write(`[nvml] Warning: server-side script block missing 'action' prop — skipping. Add action="my-action-name".\n`);
+      return `${ind}<!-- nvml: server script skipped — no action name -->`;
+    }
 
-    const fetchCall = `window.__nvmlRun(\`${escaped}\`)`;
+    if (this.registerAction) this.registerAction(actionName, code, 'nova');
+    const fetchCall = `window.__nvmlRun('${actionName}')`;
 
     if (trigger && target) {
-      const evList   = trigger.split(',').map(t => t.trim());
+      const evList = trigger.split(',').map(t => t.trim());
       const handlers = evList.map(ev => `_t.addEventListener('${ev}', function(_e){ ${fetchCall}; });`).join('\n    ');
       return `${ind}<script>
 ${ind}document.addEventListener('DOMContentLoaded', function() {
@@ -870,8 +900,8 @@ ${ind}</script>`;
     const attrs = {};
 
     for (const [key, val] of Object.entries(el.props || {})) {
-      if (el.tag === 'script' && ['language','lang','scope','code','ss','trigger','target'].includes(key)) continue;
-      if (val === true)  attrs[safeAttr(key)] = true;
+      if (el.tag === 'script' && ['language', 'lang', 'scope', 'code', 'ss', 'trigger', 'target'].includes(key)) continue;
+      if (val === true) attrs[safeAttr(key)] = true;
       else if (val === false || val === null || val === undefined) continue;
       else {
         // check for signal ref value (prefixed __sig: by executor)
@@ -921,4 +951,4 @@ ${ind}</script>`;
   }
 }
 
-module.exports = { Renderer };
+module.exports = { Renderer };