release: WRNexusJS 0.2.31
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/csr",
|
||||
"version": "0.2.30",
|
||||
"version": "0.2.31",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
+375
-81
@@ -4,127 +4,421 @@
|
||||
* Progressive enhancement over normal links: intercepts same-origin `<a>`
|
||||
* clicks, fetches the target page's HTML, swaps the `#app` container in place,
|
||||
* updates history/title/scroll, ensures any framework runtimes the new page
|
||||
* needs are present, and re-hydrates. Anything unexpected (cross-origin,
|
||||
* modified click, non-HTML response, missing `#app`) falls back to a full
|
||||
* browser navigation, so behaviour degrades safely.
|
||||
* needs are present, and re-hydrates.
|
||||
*
|
||||
* Data "loaders": pages load their data on the server (SSR `api` bindings), so
|
||||
* the fetched HTML already contains fresh data — no separate client loader is
|
||||
* needed. Client-side (`csr`) bindings and reactive scopes re-hydrate after the
|
||||
* swap. Programmatic navigation is exposed as `window.__wrnexusNavigate(url)`.
|
||||
* Before replacing the current page, component lifecycle behaviors are
|
||||
* explicitly disposed. This ensures `unmount` hooks and watcher cleanups run
|
||||
* before the old DOM is removed.
|
||||
*
|
||||
* Programmatic navigation is exposed as:
|
||||
*
|
||||
* window.__wrnexusNavigate(url)
|
||||
*/
|
||||
|
||||
export const NAV_RUNTIME = String.raw`
|
||||
(function () {
|
||||
if (!window.history || !history.pushState || !window.fetch || !window.DOMParser) return;
|
||||
if (window.__wrnexusNavInstalled) return;
|
||||
if (
|
||||
!window.history ||
|
||||
!history.pushState ||
|
||||
!window.fetch ||
|
||||
!window.DOMParser
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.__wrnexusNavInstalled) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.__wrnexusNavInstalled = true;
|
||||
|
||||
var APP_ID = "app";
|
||||
var inFlight = null;
|
||||
|
||||
function pathOf(src) { return String(src).split("?")[0]; }
|
||||
function pathOf(src) {
|
||||
return String(src).split("?")[0];
|
||||
}
|
||||
|
||||
function isLocalLink(anchor) {
|
||||
if (
|
||||
!anchor ||
|
||||
anchor.hasAttribute("download") ||
|
||||
anchor.hasAttribute("data-no-nav")
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (anchor.target && anchor.target !== "_self") {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (anchor.origin !== location.origin) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var href = anchor.getAttribute("href");
|
||||
|
||||
if (!href || href.charAt(0) === "#") {
|
||||
return false;
|
||||
}
|
||||
|
||||
var rel = (
|
||||
anchor.getAttribute("rel") || ""
|
||||
).toLowerCase();
|
||||
|
||||
function isLocalLink(a) {
|
||||
if (!a || a.hasAttribute("download") || a.hasAttribute("data-no-nav")) return false;
|
||||
if (a.target && a.target !== "_self") return false;
|
||||
if (a.origin !== location.origin) return false;
|
||||
var href = a.getAttribute("href");
|
||||
if (!href || href.charAt(0) === "#") return false;
|
||||
var rel = (a.getAttribute("rel") || "").toLowerCase();
|
||||
return rel.indexOf("external") === -1;
|
||||
}
|
||||
|
||||
function loadedScriptPaths() {
|
||||
var set = {};
|
||||
document.querySelectorAll("script[src]").forEach(function (s) {
|
||||
var src = s.getAttribute("src");
|
||||
if (src) set[pathOf(src)] = true;
|
||||
});
|
||||
return set;
|
||||
var loaded = {};
|
||||
|
||||
document
|
||||
.querySelectorAll("script[src]")
|
||||
.forEach(function (script) {
|
||||
var src = script.getAttribute("src");
|
||||
|
||||
if (src) {
|
||||
loaded[pathOf(src)] = true;
|
||||
}
|
||||
});
|
||||
|
||||
return loaded;
|
||||
}
|
||||
|
||||
// Append any /__wrnexus/* runtime the incoming page declares but the current
|
||||
// document has not loaded yet. Fresh scripts self-initialise on load.
|
||||
/**
|
||||
* Append framework runtimes declared by the incoming document but not
|
||||
* currently loaded.
|
||||
*/
|
||||
function ensureScripts(doc) {
|
||||
var loaded = loadedScriptPaths();
|
||||
doc.querySelectorAll("script[src]").forEach(function (s) {
|
||||
var src = s.getAttribute("src");
|
||||
if (!src || loaded[pathOf(src)]) return;
|
||||
loaded[pathOf(src)] = true;
|
||||
var el = document.createElement("script");
|
||||
el.src = src;
|
||||
el.async = false; // preserve execution order (e.g. schemas.js before validate.js)
|
||||
document.body.appendChild(el);
|
||||
});
|
||||
|
||||
doc
|
||||
.querySelectorAll("script[src]")
|
||||
.forEach(function (script) {
|
||||
var src = script.getAttribute("src");
|
||||
|
||||
if (!src || loaded[pathOf(src)]) {
|
||||
return;
|
||||
}
|
||||
|
||||
loaded[pathOf(src)] = true;
|
||||
|
||||
var element =
|
||||
document.createElement("script");
|
||||
|
||||
element.src = src;
|
||||
element.async = false;
|
||||
|
||||
document.body.appendChild(element);
|
||||
});
|
||||
}
|
||||
|
||||
// Re-hydrate already-loaded runtimes against the swapped-in DOM. Every
|
||||
// entrypoint is idempotent, so this is safe even when a fresh script also
|
||||
// self-initialises the same nodes.
|
||||
function rehydrate() {
|
||||
try { if (window.__wrnexusHydrateScopes) window.__wrnexusHydrateScopes(document); } catch (e) {}
|
||||
try { if (window.__wrnexusHydrateCsrFetches) window.__wrnexusHydrateCsrFetches(document); } catch (e) {}
|
||||
try { if (window.__wireValidate) window.__wireValidate.init(document); } catch (e) {}
|
||||
try { if (window.wireTheme) window.wireTheme.bind(document); } catch (e) {}
|
||||
/**
|
||||
* Run explicit component cleanup before removing the existing page.
|
||||
*
|
||||
* The reactive runtime also observes removed DOM nodes, but explicit
|
||||
* disposal here guarantees that unmount hooks run before replacement.
|
||||
*/
|
||||
function dispose(root) {
|
||||
try {
|
||||
if (
|
||||
typeof window.__wrnexusDisposeBehaviors ===
|
||||
"function"
|
||||
) {
|
||||
window.__wrnexusDisposeBehaviors(root);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"[wrnexus] failed to dispose page behaviors",
|
||||
error,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-hydrate already-loaded runtimes against newly inserted DOM.
|
||||
*
|
||||
* All framework hydration functions must remain idempotent.
|
||||
*/
|
||||
function rehydrate(root) {
|
||||
try {
|
||||
if (
|
||||
typeof window.__wrnexusHydrateScopes ===
|
||||
"function"
|
||||
) {
|
||||
window.__wrnexusHydrateScopes(root);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"[wrnexus] failed to hydrate reactive scopes",
|
||||
error,
|
||||
);
|
||||
}
|
||||
|
||||
try {
|
||||
if (
|
||||
typeof window.__wrnexusHydrateCsrFetches ===
|
||||
"function"
|
||||
) {
|
||||
window.__wrnexusHydrateCsrFetches(root);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"[wrnexus] failed to hydrate CSR bindings",
|
||||
error,
|
||||
);
|
||||
}
|
||||
|
||||
try {
|
||||
if (
|
||||
window.__wireValidate &&
|
||||
typeof window.__wireValidate.init ===
|
||||
"function"
|
||||
) {
|
||||
window.__wireValidate.init(document);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"[wrnexus] failed to hydrate validation",
|
||||
error,
|
||||
);
|
||||
}
|
||||
|
||||
try {
|
||||
if (
|
||||
window.wireTheme &&
|
||||
typeof window.wireTheme.bind ===
|
||||
"function"
|
||||
) {
|
||||
window.wireTheme.bind(document);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"[wrnexus] failed to hydrate theme bindings",
|
||||
error,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function dispatchNavigationEvent(url) {
|
||||
try {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("wrnexus:navigated", {
|
||||
detail: {
|
||||
url: url,
|
||||
},
|
||||
}),
|
||||
);
|
||||
} catch (_) {
|
||||
// CustomEvent may not be available in very old browsers.
|
||||
}
|
||||
}
|
||||
|
||||
function hardNavigate(url) {
|
||||
location.href = url;
|
||||
}
|
||||
|
||||
function render(html, url, isPop) {
|
||||
var doc = new DOMParser().parseFromString(html, "text/html");
|
||||
var to = doc.getElementById(APP_ID);
|
||||
var from = document.getElementById(APP_ID);
|
||||
if (!to || !from) { location.href = url; return; } // structure mismatch → hard nav
|
||||
if (doc.title) document.title = doc.title;
|
||||
// Swap #app by importing nodes — NOT innerHTML — so it works under a strict
|
||||
// Trusted-Types CSP (require-trusted-types-for 'script').
|
||||
var imported = [];
|
||||
for (var i = 0; i < to.childNodes.length; i++) imported.push(document.importNode(to.childNodes[i], true));
|
||||
from.replaceChildren.apply(from, imported);
|
||||
ensureScripts(doc);
|
||||
rehydrate();
|
||||
if (!isPop) { history.pushState({ wrnexusNav: true }, "", url); window.scrollTo(0, 0); }
|
||||
try {
|
||||
window.dispatchEvent(new CustomEvent("wrnexus:navigated", { detail: { url: url } }));
|
||||
} catch (e) {}
|
||||
}
|
||||
var doc;
|
||||
|
||||
var inFlight = null;
|
||||
try {
|
||||
doc = new DOMParser().parseFromString(
|
||||
html,
|
||||
"text/html",
|
||||
);
|
||||
} catch (_) {
|
||||
hardNavigate(url);
|
||||
return;
|
||||
}
|
||||
|
||||
var incomingApp =
|
||||
doc.getElementById(APP_ID);
|
||||
|
||||
var currentApp =
|
||||
document.getElementById(APP_ID);
|
||||
|
||||
if (!incomingApp || !currentApp) {
|
||||
hardNavigate(url);
|
||||
return;
|
||||
}
|
||||
|
||||
if (doc.title) {
|
||||
document.title = doc.title;
|
||||
}
|
||||
|
||||
var importedNodes = [];
|
||||
|
||||
for (
|
||||
var index = 0;
|
||||
index < incomingApp.childNodes.length;
|
||||
index++
|
||||
) {
|
||||
importedNodes.push(
|
||||
document.importNode(
|
||||
incomingApp.childNodes[index],
|
||||
true,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
* Run unmount hooks and watcher cleanup while the current DOM is still
|
||||
* connected. This is important for components that remove window or
|
||||
* document listeners during lifecycle.unmount.
|
||||
*/
|
||||
dispose(currentApp);
|
||||
|
||||
try {
|
||||
/*
|
||||
* Avoid innerHTML so navigation works with strict Trusted Types and CSP
|
||||
* configurations.
|
||||
*/
|
||||
currentApp.replaceChildren.apply(
|
||||
currentApp,
|
||||
importedNodes,
|
||||
);
|
||||
} catch (_) {
|
||||
hardNavigate(url);
|
||||
return;
|
||||
}
|
||||
|
||||
/*
|
||||
* Load any runtime required only by the incoming page. Fresh scripts
|
||||
* initialise themselves when loaded.
|
||||
*/
|
||||
ensureScripts(doc);
|
||||
|
||||
/*
|
||||
* Hydrate runtimes that are already available. Hydration is scoped to
|
||||
* #app instead of the entire document for less DOM traversal.
|
||||
*/
|
||||
rehydrate(currentApp);
|
||||
|
||||
if (!isPop) {
|
||||
history.pushState(
|
||||
{
|
||||
wrnexusNav: true,
|
||||
},
|
||||
"",
|
||||
url,
|
||||
);
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
dispatchNavigationEvent(url);
|
||||
}
|
||||
|
||||
function navigate(url, isPop) {
|
||||
var token = {};
|
||||
|
||||
inFlight = token;
|
||||
fetch(url, { headers: { "x-wrnexus-nav": "1", accept: "text/html" }, credentials: "same-origin" })
|
||||
.then(function (r) {
|
||||
if (inFlight !== token) return null; // superseded by a newer navigation
|
||||
if (r.redirected && r.url) url = r.url; // follow server redirects (e.g. auth)
|
||||
var ct = r.headers.get("content-type") || "";
|
||||
if (ct.indexOf("text/html") === -1) { location.href = url; return null; }
|
||||
return r.text().then(function (t) {
|
||||
if (inFlight === token) render(t, url, isPop);
|
||||
|
||||
fetch(url, {
|
||||
headers: {
|
||||
"x-wrnexus-nav": "1",
|
||||
accept: "text/html",
|
||||
},
|
||||
|
||||
credentials: "same-origin",
|
||||
})
|
||||
.then(function (response) {
|
||||
if (inFlight !== token) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (response.redirected && response.url) {
|
||||
url = response.url;
|
||||
}
|
||||
|
||||
var contentType =
|
||||
response.headers.get("content-type") ||
|
||||
"";
|
||||
|
||||
if (
|
||||
contentType.indexOf("text/html") === -1
|
||||
) {
|
||||
hardNavigate(url);
|
||||
return null;
|
||||
}
|
||||
|
||||
var contentType =
|
||||
response.headers.get("content-type") ||
|
||||
"";
|
||||
|
||||
if (
|
||||
contentType.indexOf("text/html") === -1
|
||||
) {
|
||||
hardNavigate(url);
|
||||
return null;
|
||||
}
|
||||
|
||||
return response.text().then(function (text) {
|
||||
if (inFlight !== token) {
|
||||
return;
|
||||
}
|
||||
|
||||
render(text, url, isPop);
|
||||
});
|
||||
})
|
||||
.catch(function () { location.href = url; });
|
||||
.catch(function () {
|
||||
if (inFlight === token) {
|
||||
hardNavigate(url);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener(
|
||||
"click",
|
||||
function (e) {
|
||||
if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
|
||||
var a = e.target && e.target.closest ? e.target.closest("a") : null;
|
||||
if (!isLocalLink(a)) return;
|
||||
if (a.href === location.href) { e.preventDefault(); return; }
|
||||
e.preventDefault();
|
||||
navigate(a.href, false);
|
||||
function (event) {
|
||||
if (
|
||||
event.defaultPrevented ||
|
||||
event.button !== 0 ||
|
||||
event.metaKey ||
|
||||
event.ctrlKey ||
|
||||
event.shiftKey ||
|
||||
event.altKey
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
var anchor =
|
||||
event.target &&
|
||||
event.target.closest
|
||||
? event.target.closest("a")
|
||||
: null;
|
||||
|
||||
if (!isLocalLink(anchor)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (anchor.href === location.href) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
navigate(anchor.href, false);
|
||||
},
|
||||
false,
|
||||
);
|
||||
|
||||
window.addEventListener("popstate", function () {
|
||||
navigate(location.href, true);
|
||||
});
|
||||
window.addEventListener(
|
||||
"popstate",
|
||||
function () {
|
||||
navigate(location.href, true);
|
||||
},
|
||||
);
|
||||
|
||||
// Programmatic navigation for forms/actions and app code.
|
||||
/**
|
||||
* Programmatic navigation for forms, actions and application code.
|
||||
*/
|
||||
window.__wrnexusNavigate = function (url) {
|
||||
navigate(new URL(url, location.href).href, false);
|
||||
navigate(
|
||||
new URL(url, location.href).href,
|
||||
false,
|
||||
);
|
||||
};
|
||||
})();
|
||||
`.trim();
|
||||
|
||||
@@ -15,8 +15,109 @@
|
||||
* Expressions are evaluated by a tiny parser instead of `eval`/`new Function`,
|
||||
* so production can use a strong CSP without `unsafe-eval`.
|
||||
*/
|
||||
|
||||
export const REACTIVE_RUNTIME = String.raw`
|
||||
(function () {
|
||||
var behaviorInstances = new WeakMap();
|
||||
var mountedBehaviorRoots = new Set();
|
||||
var pendingUpdateHooks = new Map();
|
||||
var updateHooksScheduled = false;
|
||||
var behaviorObserver;
|
||||
|
||||
function scheduleUpdateHook(element, callback) {
|
||||
pendingUpdateHooks.set(element, callback);
|
||||
if (updateHooksScheduled) return;
|
||||
updateHooksScheduled = true;
|
||||
queueMicrotask(function () {
|
||||
updateHooksScheduled = false;
|
||||
var pending = Array.from(pendingUpdateHooks.entries());
|
||||
pendingUpdateHooks.clear();
|
||||
pending.forEach(function (entry) {
|
||||
var root = entry[0];
|
||||
var hook = entry[1];
|
||||
if (!root.isConnected) return;
|
||||
try { hook(); } catch (error) {
|
||||
console.error("[wrnexus] component update hook failed", error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function parseBehavior(element) {
|
||||
var raw = element.getAttribute("data-wrn-behavior");
|
||||
if (!raw) return null;
|
||||
try {
|
||||
var parsed = JSON.parse(raw);
|
||||
return parsed && typeof parsed === "object" ? parsed : null;
|
||||
} catch (error) {
|
||||
console.error("[wrnexus] failed to parse component behavior", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function extractBehaviorFunctions(source) {
|
||||
var functions = [];
|
||||
var re = /(?:async\s+)?function\s+([A-Za-z_$][\w$]*)\s*\(([^)]*)\)\s*\{/g;
|
||||
var match;
|
||||
while ((match = re.exec(source || ""))) {
|
||||
var start = re.lastIndex;
|
||||
var depth = 1;
|
||||
var quote = "";
|
||||
var i = start;
|
||||
for (; i < source.length; i++) {
|
||||
var ch = source[i];
|
||||
if (quote) {
|
||||
if (ch === "\\") i++;
|
||||
else if (ch === quote) quote = "";
|
||||
continue;
|
||||
}
|
||||
if (ch === '"' || ch === "'" || ch === "\`") {
|
||||
quote = ch;
|
||||
continue;
|
||||
}
|
||||
if (ch === "{") depth++;
|
||||
else if (ch === "}" && --depth === 0) break;
|
||||
}
|
||||
if (depth !== 0) break;
|
||||
functions.push({
|
||||
name: match[1],
|
||||
args: match[2].split(",").map(function (arg) { return arg.trim(); }).filter(Boolean),
|
||||
body: source.slice(start, i),
|
||||
});
|
||||
re.lastIndex = i + 1;
|
||||
}
|
||||
return functions;
|
||||
}
|
||||
|
||||
function splitStatements(input) {
|
||||
var parts = [];
|
||||
var start = 0;
|
||||
var depth = 0;
|
||||
var quote = "";
|
||||
for (var i = 0; i < input.length; i++) {
|
||||
var ch = input[i];
|
||||
if (quote) {
|
||||
if (ch === "\\") i++;
|
||||
else if (ch === quote) quote = "";
|
||||
continue;
|
||||
}
|
||||
if (ch === '"' || ch === "'" || ch === "\`") {
|
||||
quote = ch;
|
||||
continue;
|
||||
}
|
||||
if (ch === "(" || ch === "[" || ch === "{") depth++;
|
||||
else if (ch === ")" || ch === "]" || ch === "}") depth--;
|
||||
else if ((ch === ";" || ch === "\n" || ch === "\r") && depth === 0) {
|
||||
var part = input.slice(start, i).trim();
|
||||
if (part) parts.push(part);
|
||||
start = i + 1;
|
||||
}
|
||||
}
|
||||
var tail = input.slice(start).trim();
|
||||
if (tail) parts.push(tail);
|
||||
return parts;
|
||||
}
|
||||
|
||||
function signal(initial) {
|
||||
var value = initial;
|
||||
var subs = new Set();
|
||||
@@ -24,8 +125,9 @@ export const REACTIVE_RUNTIME = String.raw`
|
||||
get: function () { return value; },
|
||||
set: function (v) {
|
||||
if (Object.is(v, value)) return;
|
||||
var previous = value;
|
||||
value = v;
|
||||
subs.forEach(function (f) { f(value); });
|
||||
subs.forEach(function (f) { f(value, previous); });
|
||||
},
|
||||
subscribe: function (f) { subs.add(f); return function () { subs.delete(f); }; }
|
||||
};
|
||||
@@ -58,29 +160,117 @@ export const REACTIVE_RUNTIME = String.raw`
|
||||
}
|
||||
function renderAll() { renderers.forEach(function (f) { f(); }); }
|
||||
|
||||
function readScope(name) {
|
||||
var sig = signals[name];
|
||||
if (!sig) return undefined;
|
||||
if (currentRenderer) sig.subscribe(currentRenderer); // track dependency
|
||||
return sig.get();
|
||||
}
|
||||
function peekScope(name) {
|
||||
return signals[name] ? signals[name].get() : undefined;
|
||||
var behaviorFunctions = {};
|
||||
var stateWatchers = {};
|
||||
var anyStateListeners = new Set();
|
||||
var cleanupCallbacks = [];
|
||||
var disposed = false;
|
||||
|
||||
function readGlobal(name) {
|
||||
if (name === "window") return window;
|
||||
if (name === "document") return document;
|
||||
if (name === "console") return console;
|
||||
if (name === "Math") return Math;
|
||||
if (name === "JSON") return JSON;
|
||||
if (name === "Date") return Date;
|
||||
if (name === "URL") return URL;
|
||||
if (name === "location") return window.location;
|
||||
if (name === "history") return window.history;
|
||||
if (name === "navigator") return window.navigator;
|
||||
if (name === "setTimeout") return window.setTimeout.bind(window);
|
||||
if (name === "clearTimeout") return window.clearTimeout.bind(window);
|
||||
if (name === "requestAnimationFrame") return window.requestAnimationFrame.bind(window);
|
||||
if (name === "cancelAnimationFrame") return window.cancelAnimationFrame.bind(window);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function evalExpr(expr) {
|
||||
return evaluateExpression(expr, readScope);
|
||||
function readScope(name) {
|
||||
var sig = signals[name];
|
||||
if (sig) {
|
||||
if (currentRenderer) sig.subscribe(currentRenderer);
|
||||
return sig.get();
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(behaviorFunctions, name)) {
|
||||
return behaviorFunctions[name];
|
||||
}
|
||||
return readGlobal(name);
|
||||
}
|
||||
function runStmt(stmt) {
|
||||
splitTopLevel(stmt, ";").forEach(function (part) {
|
||||
runStatement(part, function (e) { return evaluateExpression(e, peekScope); }, peekScope, function (name, value) {
|
||||
if (!signals[name]) {
|
||||
signals[name] = signal(value);
|
||||
renderAll(); // new variable: re-run once so readers pick it up + re-track
|
||||
} else {
|
||||
signals[name].set(value);
|
||||
|
||||
function peekScope(name) {
|
||||
if (signals[name]) return signals[name].get();
|
||||
if (Object.prototype.hasOwnProperty.call(behaviorFunctions, name)) {
|
||||
return behaviorFunctions[name];
|
||||
}
|
||||
return readGlobal(name);
|
||||
}
|
||||
|
||||
function notifyState(name, value, previous) {
|
||||
var watchers = stateWatchers[name];
|
||||
if (watchers) {
|
||||
watchers.slice().forEach(function (watcher) {
|
||||
try { watcher(value, previous); } catch (error) {
|
||||
console.error("[wrnexus] watcher for '" + name + "' failed", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
anyStateListeners.forEach(function (listener) {
|
||||
try { listener(name, value, previous); } catch (error) {
|
||||
console.error("[wrnexus] state subscriber failed", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function writeScope(name, value) {
|
||||
if (!signals[name]) {
|
||||
signals[name] = signal(value);
|
||||
renderAll();
|
||||
notifyState(name, value, undefined);
|
||||
return;
|
||||
}
|
||||
var previous = signals[name].get();
|
||||
if (Object.is(previous, value)) return;
|
||||
signals[name].set(value);
|
||||
notifyState(name, value, previous);
|
||||
}
|
||||
|
||||
function evalExpr(expr, locals) {
|
||||
return evaluateExpression(expr, function (name) {
|
||||
if (locals && Object.prototype.hasOwnProperty.call(locals, name)) {
|
||||
return locals[name];
|
||||
}
|
||||
return readScope(name);
|
||||
});
|
||||
}
|
||||
|
||||
function runStmt(stmt, locals) {
|
||||
splitStatements(stmt).forEach(function (part) {
|
||||
runStatement(
|
||||
part,
|
||||
function (expression) { return evalExpr(expression, locals); },
|
||||
function (name) {
|
||||
if (locals && Object.prototype.hasOwnProperty.call(locals, name)) return locals[name];
|
||||
return peekScope(name);
|
||||
},
|
||||
function (name, value) {
|
||||
if (locals && Object.prototype.hasOwnProperty.call(locals, name)) {
|
||||
locals[name] = value;
|
||||
} else {
|
||||
writeScope(name, value);
|
||||
}
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function installBehaviorFunctions(source) {
|
||||
extractBehaviorFunctions(source || "").forEach(function (definition) {
|
||||
behaviorFunctions[definition.name] = function () {
|
||||
var locals = {};
|
||||
for (var i = 0; i < definition.args.length; i++) {
|
||||
locals[definition.args[i]] = arguments[i];
|
||||
}
|
||||
runStmt(definition.body, locals);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
@@ -287,27 +477,146 @@ export const REACTIVE_RUNTIME = String.raw`
|
||||
})(textNode, template);
|
||||
}
|
||||
|
||||
// data-on-<event> handlers, on the scope element and the descendants it owns.
|
||||
// Event handlers on elements, window, and document.
|
||||
var nodes = [el].concat(Array.prototype.slice.call(el.querySelectorAll("*")));
|
||||
nodes.forEach(function (node) {
|
||||
if (!owns(node)) return;
|
||||
Array.prototype.slice.call(node.attributes).forEach(function (attr) {
|
||||
if (attr.name.indexOf("data-on-") !== 0) return;
|
||||
var evt = attr.name.slice("data-on-".length);
|
||||
|
||||
var rawName = attr.name.slice("data-on-".length);
|
||||
var target = node;
|
||||
var evt = rawName;
|
||||
|
||||
if (rawName.indexOf("window-") === 0) {
|
||||
target = window;
|
||||
evt = rawName.slice("window-".length);
|
||||
} else if (rawName.indexOf("document-") === 0) {
|
||||
target = document;
|
||||
evt = rawName.slice("document-".length);
|
||||
}
|
||||
|
||||
var stmt = attr.value;
|
||||
node.addEventListener(evt, function () {
|
||||
try { runStmt(stmt); } catch (e) {
|
||||
console.error("[wrnexus] handler error in '" + stmt + "'", e);
|
||||
var listener = function (event) {
|
||||
try { runStmt(stmt, { event: event, $event: event }); } catch (error) {
|
||||
console.error("[wrnexus] handler error in '" + stmt + "'", error);
|
||||
}
|
||||
};
|
||||
|
||||
var options =
|
||||
target === window && (evt === "scroll" || evt === "touchstart" || evt === "touchmove")
|
||||
? { passive: true }
|
||||
: undefined;
|
||||
|
||||
target.addEventListener(evt, listener, options);
|
||||
cleanupCallbacks.push(function () {
|
||||
target.removeEventListener(evt, listener, options);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
var behavior = parseBehavior(el);
|
||||
if (behavior) {
|
||||
installBehaviorFunctions(behavior.functions);
|
||||
|
||||
(behavior.watches || []).forEach(function (watch) {
|
||||
if (!watch || typeof watch.state !== "string" || typeof watch.body !== "string") return;
|
||||
if (!stateWatchers[watch.state]) stateWatchers[watch.state] = [];
|
||||
stateWatchers[watch.state].push(function (value, previous) {
|
||||
runStmt(watch.body, { value: value, previous: previous });
|
||||
});
|
||||
});
|
||||
|
||||
var updateSource =
|
||||
behavior.lifecycle && typeof behavior.lifecycle.update === "string"
|
||||
? behavior.lifecycle.update.trim()
|
||||
: "";
|
||||
|
||||
if (updateSource) {
|
||||
anyStateListeners.add(function () {
|
||||
scheduleUpdateHook(el, function () {
|
||||
if (!disposed) runStmt(updateSource);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var mountSource =
|
||||
behavior.lifecycle && typeof behavior.lifecycle.mount === "string"
|
||||
? behavior.lifecycle.mount.trim()
|
||||
: "";
|
||||
|
||||
var unmountSource =
|
||||
behavior.lifecycle && typeof behavior.lifecycle.unmount === "string"
|
||||
? behavior.lifecycle.unmount.trim()
|
||||
: "";
|
||||
|
||||
var instance = {
|
||||
dispose: function () {
|
||||
if (disposed) return;
|
||||
disposed = true;
|
||||
cleanupCallbacks.splice(0).reverse().forEach(function (cleanup) {
|
||||
try { cleanup(); } catch (_) { /* ignore cleanup errors */ }
|
||||
});
|
||||
pendingUpdateHooks.delete(el);
|
||||
if (unmountSource) {
|
||||
try { runStmt(unmountSource); } catch (error) {
|
||||
console.error("[wrnexus] component unmount hook failed", error);
|
||||
}
|
||||
}
|
||||
mountedBehaviorRoots.delete(el);
|
||||
behaviorInstances.delete(el);
|
||||
el.__wrnexusScope = false;
|
||||
},
|
||||
};
|
||||
|
||||
behaviorInstances.set(el, instance);
|
||||
mountedBehaviorRoots.add(el);
|
||||
|
||||
if (mountSource) {
|
||||
queueMicrotask(function () {
|
||||
if (!disposed && el.isConnected) {
|
||||
try { runStmt(mountSource); } catch (error) {
|
||||
console.error("[wrnexus] component mount hook failed", error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
renderAll();
|
||||
}
|
||||
|
||||
function disposeBehaviors(root) {
|
||||
var elements = [];
|
||||
if (root && root.nodeType === 1 && root.hasAttribute("data-wrn-behavior")) {
|
||||
elements.push(root);
|
||||
}
|
||||
if (root && root.querySelectorAll) {
|
||||
Array.prototype.push.apply(elements, root.querySelectorAll("[data-wrn-behavior]"));
|
||||
}
|
||||
elements.reverse().forEach(function (element) {
|
||||
var instance = behaviorInstances.get(element);
|
||||
if (instance) instance.dispose();
|
||||
});
|
||||
}
|
||||
|
||||
function ensureBehaviorObserver() {
|
||||
if (behaviorObserver || typeof MutationObserver === "undefined") return;
|
||||
behaviorObserver = new MutationObserver(function (records) {
|
||||
records.forEach(function (record) {
|
||||
Array.prototype.forEach.call(record.removedNodes, function (node) {
|
||||
if (node && node.nodeType === 1) disposeBehaviors(node);
|
||||
});
|
||||
});
|
||||
});
|
||||
behaviorObserver.observe(document.documentElement, { childList: true, subtree: true });
|
||||
}
|
||||
|
||||
function hydrateScopes(root) {
|
||||
(root || document).querySelectorAll("[data-scope]").forEach(setupScope);
|
||||
var host = root || document;
|
||||
if (host.nodeType === 1 && host.matches && host.matches("[data-scope]")) setupScope(host);
|
||||
if (host.querySelectorAll) host.querySelectorAll("[data-scope]").forEach(setupScope);
|
||||
ensureBehaviorObserver();
|
||||
}
|
||||
|
||||
function parseScopeDecl(decl) {
|
||||
@@ -635,6 +944,7 @@ export const REACTIVE_RUNTIME = String.raw`
|
||||
|
||||
window.__wrnexusHydrateScopes = hydrateScopes;
|
||||
window.__wrnexusHydrateCsrFetches = hydrateCsrFetches;
|
||||
window.__wrnexusDisposeBehaviors = disposeBehaviors;
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
hydrateScopes(document);
|
||||
|
||||
Reference in New Issue
Block a user