Create sigpro-ssr.js
This commit is contained in:
Natxo
302
sigpro/sigpro-ssr.js
Normal file
302
sigpro/sigpro-ssr.js
Normal file
@@ -0,0 +1,302 @@
|
|||||||
|
/**
|
||||||
|
* SigPro Core v1.1.13 - Full SSR & Hydration Support
|
||||||
|
*/
|
||||||
|
(() => {
|
||||||
|
const isServer = typeof window === "undefined";
|
||||||
|
const _global = isServer ? global : window;
|
||||||
|
|
||||||
|
let activeEffect = null;
|
||||||
|
let currentOwner = null;
|
||||||
|
let SSR_MODE = false;
|
||||||
|
let HYDRATE_PTR = null; // Puntero al nodo real en el DOM durante hidratación
|
||||||
|
|
||||||
|
// --- MOCK DOM PARA NODE.JS ---
|
||||||
|
const _doc = !isServer ? document : {
|
||||||
|
createElement: (tag) => ({ tagName: tag.toUpperCase(), childNodes: [], appendChild: () => {}, setAttribute: () => {}, style: {} }),
|
||||||
|
createTextNode: (txt) => ({ nodeType: 3, textContent: txt }),
|
||||||
|
createComment: (txt) => ({ nodeType: 8, textContent: txt })
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- REACTIVITY CORE ---
|
||||||
|
const effectQueue = new Set();
|
||||||
|
let isFlushing = false;
|
||||||
|
const flush = () => {
|
||||||
|
isFlushing = true;
|
||||||
|
for (const eff of Array.from(effectQueue).sort((a, b) => (a.depth || 0) - (b.depth || 0))) {
|
||||||
|
if (!eff._deleted) eff();
|
||||||
|
}
|
||||||
|
effectQueue.clear();
|
||||||
|
isFlushing = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const track = (subs) => {
|
||||||
|
if (SSR_MODE || !activeEffect || activeEffect._deleted) return;
|
||||||
|
subs.add(activeEffect);
|
||||||
|
activeEffect._deps.add(subs);
|
||||||
|
};
|
||||||
|
|
||||||
|
const trigger = (subs) => {
|
||||||
|
if (SSR_MODE) return;
|
||||||
|
for (const eff of subs) {
|
||||||
|
if (eff === activeEffect || eff._deleted) continue;
|
||||||
|
eff._isComputed ? (eff.markDirty(), eff._subs && trigger(eff._subs)) : effectQueue.add(eff);
|
||||||
|
}
|
||||||
|
if (!isFlushing) queueMicrotask(flush);
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- SIGNALS ($) ---
|
||||||
|
const $ = (initial, key = null) => {
|
||||||
|
if (typeof initial === "function") {
|
||||||
|
const subs = new Set();
|
||||||
|
let cached, dirty = true;
|
||||||
|
const effect = () => {
|
||||||
|
if (effect._deleted) return;
|
||||||
|
effect._deps.forEach(s => s.delete(effect));
|
||||||
|
effect._deps.clear();
|
||||||
|
const prev = activeEffect;
|
||||||
|
activeEffect = effect;
|
||||||
|
try {
|
||||||
|
const val = initial();
|
||||||
|
if (!Object.is(cached, val) || dirty) { cached = val; dirty = false; if (!SSR_MODE) trigger(subs); }
|
||||||
|
} finally { activeEffect = prev; }
|
||||||
|
};
|
||||||
|
effect._deps = new Set();
|
||||||
|
effect._isComputed = true;
|
||||||
|
effect._subs = subs;
|
||||||
|
effect.markDirty = () => (dirty = true);
|
||||||
|
effect.stop = () => { effect._deleted = true; effect._deps.forEach(s => s.delete(effect)); };
|
||||||
|
if (currentOwner && !SSR_MODE) currentOwner.cleanups.add(effect.stop);
|
||||||
|
effect(); // Primera ejecución
|
||||||
|
return () => { if (dirty && !SSR_MODE) effect(); track(subs); return cached; };
|
||||||
|
}
|
||||||
|
|
||||||
|
let value = initial;
|
||||||
|
if (key && !isServer) {
|
||||||
|
const saved = localStorage.getItem(key);
|
||||||
|
if (saved) try { value = JSON.parse(saved); } catch { value = saved; }
|
||||||
|
}
|
||||||
|
const subs = new Set();
|
||||||
|
return (...args) => {
|
||||||
|
if (args.length && !SSR_MODE) {
|
||||||
|
const next = typeof args[0] === "function" ? args[0](value) : args[0];
|
||||||
|
if (!Object.is(value, next)) {
|
||||||
|
value = next;
|
||||||
|
if (key && !isServer) localStorage.setItem(key, JSON.stringify(value));
|
||||||
|
trigger(subs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
track(subs);
|
||||||
|
return value;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const $watch = (target, fn) => {
|
||||||
|
if (SSR_MODE) return () => {};
|
||||||
|
const isArr = Array.isArray(target);
|
||||||
|
const cb = isArr ? fn : target;
|
||||||
|
const runner = () => {
|
||||||
|
if (runner._deleted) return;
|
||||||
|
runner._deps.forEach(s => s.delete(runner)); runner._deps.clear();
|
||||||
|
runner._cleanups.forEach(c => c()); runner._cleanups.clear();
|
||||||
|
const prevEff = activeEffect, prevOwn = currentOwner;
|
||||||
|
activeEffect = runner; currentOwner = { cleanups: runner._cleanups };
|
||||||
|
runner.depth = prevEff ? prevEff.depth + 1 : 0;
|
||||||
|
try { isArr ? (cb(), target.forEach(d => typeof d === "function" && d())) : cb(); }
|
||||||
|
finally { activeEffect = prevEff; currentOwner = prevOwn; }
|
||||||
|
};
|
||||||
|
runner._deps = new Set(); runner._cleanups = new Set();
|
||||||
|
runner.stop = () => { runner._deleted = true; runner._deps.forEach(s => s.delete(runner)); runner._cleanups.forEach(c => c()); };
|
||||||
|
if (currentOwner) currentOwner.cleanups.add(runner.stop);
|
||||||
|
runner();
|
||||||
|
return runner.stop;
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- VIRTUAL VIEW / HYDRATION ENGINE ---
|
||||||
|
const _view = (fn) => {
|
||||||
|
const cleanups = new Set();
|
||||||
|
const prev = currentOwner;
|
||||||
|
currentOwner = { cleanups };
|
||||||
|
try {
|
||||||
|
const res = fn({ onCleanup: f => cleanups.add(f) });
|
||||||
|
if (SSR_MODE) {
|
||||||
|
const toStr = (n) => {
|
||||||
|
if (Array.isArray(n)) return n.map(toStr).join('');
|
||||||
|
return n?._isRuntime ? n._ssrString : (n?.ssr || String(n ?? ''));
|
||||||
|
};
|
||||||
|
return { _isRuntime: true, _ssrString: toStr(res) };
|
||||||
|
}
|
||||||
|
const container = _doc.createElement("div");
|
||||||
|
container.style.display = "contents";
|
||||||
|
const process = (n) => {
|
||||||
|
if (!n) return;
|
||||||
|
if (n._isRuntime) container.appendChild(n.container);
|
||||||
|
else if (Array.isArray(n)) n.forEach(process);
|
||||||
|
else container.appendChild(n.nodeType ? n : _doc.createTextNode(String(n)));
|
||||||
|
};
|
||||||
|
process(res);
|
||||||
|
return { _isRuntime: true, container, destroy: () => { cleanups.forEach(f => f()); container.remove(); } };
|
||||||
|
} finally { currentOwner = prev; }
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- HTML TAG ENGINE ---
|
||||||
|
const $html = (tag, props = {}, content = []) => {
|
||||||
|
if (props.nodeType || Array.isArray(props) || typeof props !== "object") { content = props; props = {}; }
|
||||||
|
|
||||||
|
if (SSR_MODE) {
|
||||||
|
let attrs = '';
|
||||||
|
for (let [k, v] of Object.entries(props)) {
|
||||||
|
if (k === "ref" || k.startsWith("on")) continue;
|
||||||
|
const val = typeof v === "function" ? v() : v;
|
||||||
|
if (val !== false && val != null) attrs += ` ${k === "class" ? "class" : k}="${val}"`;
|
||||||
|
}
|
||||||
|
const children = [].concat(content).map(c => {
|
||||||
|
const v = typeof c === "function" ? c() : c;
|
||||||
|
return v?._isRuntime ? v._ssrString : (v?.ssr || String(v ?? ''));
|
||||||
|
}).join('');
|
||||||
|
return { ssr: `<${tag}${attrs}>${children}</${tag}>` };
|
||||||
|
}
|
||||||
|
|
||||||
|
// CLIENT / HYDRATION
|
||||||
|
let el;
|
||||||
|
if (HYDRATE_PTR && HYDRATE_PTR.tagName === tag.toUpperCase()) {
|
||||||
|
el = HYDRATE_PTR;
|
||||||
|
HYDRATE_PTR = el.firstChild; // Entramos al primer hijo para la recursión
|
||||||
|
} else {
|
||||||
|
el = _doc.createElement(tag);
|
||||||
|
}
|
||||||
|
|
||||||
|
el._cleanups = el._cleanups || new Set();
|
||||||
|
for (let [k, v] of Object.entries(props)) {
|
||||||
|
if (k === "ref") { typeof v === "function" ? v(el) : (v.current = el); continue; }
|
||||||
|
if (k.startsWith("on")) {
|
||||||
|
const name = k.slice(2).toLowerCase();
|
||||||
|
el.addEventListener(name, v);
|
||||||
|
el._cleanups.add(() => el.removeEventListener(name, v));
|
||||||
|
} else if (typeof v === "function") {
|
||||||
|
el._cleanups.add($watch(() => {
|
||||||
|
const val = v();
|
||||||
|
if (k === "class") el.className = val || "";
|
||||||
|
else val == null ? el.removeAttribute(k) : el.setAttribute(k, val);
|
||||||
|
}));
|
||||||
|
} else if (!el.hasAttribute(k)) el.setAttribute(k, v);
|
||||||
|
}
|
||||||
|
|
||||||
|
const append = (c) => {
|
||||||
|
if (Array.isArray(c)) return c.forEach(append);
|
||||||
|
if (typeof c === "function") {
|
||||||
|
const marker = _doc.createTextNode("");
|
||||||
|
if (!HYDRATE_PTR) el.appendChild(marker);
|
||||||
|
let nodes = [];
|
||||||
|
el._cleanups.add($watch(() => {
|
||||||
|
const res = c();
|
||||||
|
const next = (Array.isArray(res) ? res : [res]).map(i => i?._isRuntime ? i.container : (i instanceof Node ? i : _doc.createTextNode(i ?? "")));
|
||||||
|
nodes.forEach(n => n.remove());
|
||||||
|
next.forEach(n => marker.parentNode?.insertBefore(n, marker));
|
||||||
|
nodes = next;
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
const child = c?._isRuntime ? c.container : (c instanceof Node ? c : _doc.createTextNode(String(c ?? "")));
|
||||||
|
if (!HYDRATE_PTR) el.appendChild(child);
|
||||||
|
else if (HYDRATE_PTR.nodeType === 3) HYDRATE_PTR = HYDRATE_PTR.nextSibling; // Saltar texto ya hidratado
|
||||||
|
}
|
||||||
|
};
|
||||||
|
append(content);
|
||||||
|
|
||||||
|
if (el === HYDRATE_PTR?.parentNode) HYDRATE_PTR = el.nextSibling; // Volvemos al nivel superior
|
||||||
|
return el;
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- CONTROL FLOW ---
|
||||||
|
const $if = (cond, t, f = null) => {
|
||||||
|
if (SSR_MODE) {
|
||||||
|
const b = (typeof cond === "function" ? cond() : cond) ? t : f;
|
||||||
|
return b ? (typeof b === "function" ? b() : b) : '';
|
||||||
|
}
|
||||||
|
const marker = _doc.createTextNode("");
|
||||||
|
const container = $html("div", { style: "display:contents" }, [marker]);
|
||||||
|
let curr = null, last = null;
|
||||||
|
$watch(() => {
|
||||||
|
const s = !!(typeof cond === "function" ? cond() : cond);
|
||||||
|
if (s !== last) {
|
||||||
|
last = s; if (curr) curr.destroy();
|
||||||
|
const b = s ? t : f;
|
||||||
|
if (b) { curr = _view(() => typeof b === "function" ? b() : b); container.insertBefore(curr.container, marker); }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return container;
|
||||||
|
};
|
||||||
|
|
||||||
|
const $for = (src, itemFn, keyFn) => {
|
||||||
|
if (SSR_MODE) {
|
||||||
|
return ((typeof src === "function" ? src() : src) || []).map((item, i) => {
|
||||||
|
const r = itemFn(item, i);
|
||||||
|
return r?._isRuntime ? r._ssrString : (r?.ssr || String(r));
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
const marker = _doc.createTextNode("");
|
||||||
|
const container = $html("div", { style: "display:contents" }, [marker]);
|
||||||
|
const cache = new Map();
|
||||||
|
$watch(() => {
|
||||||
|
const items = (typeof src === "function" ? src() : src) || [];
|
||||||
|
const newKeys = new Set();
|
||||||
|
items.forEach((item, i) => {
|
||||||
|
const k = keyFn(item, i); newKeys.add(k);
|
||||||
|
let run = cache.get(k);
|
||||||
|
if (!run) { run = _view(() => itemFn(item, i)); cache.set(k, run); }
|
||||||
|
container.insertBefore(run.container, marker);
|
||||||
|
});
|
||||||
|
cache.forEach((r, k) => { if (!newKeys.has(k)) { r.destroy(); cache.delete(k); }});
|
||||||
|
});
|
||||||
|
return container;
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- ROUTER ---
|
||||||
|
const $router = (routes) => {
|
||||||
|
const getPath = () => SSR_MODE ? $router._ssrPath : (window.location.hash.replace(/^#/, "") || "/");
|
||||||
|
if (SSR_MODE) {
|
||||||
|
const path = getPath();
|
||||||
|
const r = routes.find(rt => rt.path === path || rt.path === "*") || routes[0];
|
||||||
|
const res = r.component({});
|
||||||
|
return typeof res === "function" ? $ssr(res) : (res?.ssr || String(res));
|
||||||
|
}
|
||||||
|
const sPath = $(getPath());
|
||||||
|
window.addEventListener("hashchange", () => sPath(getPath()));
|
||||||
|
const outlet = $html("div", { class: "router-outlet" });
|
||||||
|
let curr = null;
|
||||||
|
$watch([sPath], () => {
|
||||||
|
if (curr) curr.destroy();
|
||||||
|
const r = routes.find(rt => rt.path === sPath() || rt.path === "*") || routes[0];
|
||||||
|
curr = _view(() => r.component({}));
|
||||||
|
outlet.appendChild(curr.container);
|
||||||
|
});
|
||||||
|
return outlet;
|
||||||
|
};
|
||||||
|
$router._ssrPath = "/";
|
||||||
|
|
||||||
|
// --- PUBLIC API ---
|
||||||
|
_global.$ssr = (comp, path = "/") => {
|
||||||
|
const prev = SSR_MODE; SSR_MODE = true; $router._ssrPath = path;
|
||||||
|
try { return _view(typeof comp === "function" ? comp : () => comp)._ssrString; }
|
||||||
|
finally { SSR_MODE = prev; }
|
||||||
|
};
|
||||||
|
|
||||||
|
_global.$mount = (comp, target) => {
|
||||||
|
const el = typeof target === "string" ? document.querySelector(target) : target;
|
||||||
|
if (!el) return;
|
||||||
|
if (el.firstChild) {
|
||||||
|
HYDRATE_PTR = el.firstChild;
|
||||||
|
const inst = _view(typeof comp === "function" ? comp : () => comp);
|
||||||
|
HYDRATE_PTR = null;
|
||||||
|
return inst;
|
||||||
|
}
|
||||||
|
const inst = _view(typeof comp === "function" ? comp : () => comp);
|
||||||
|
el.replaceChildren(inst.container);
|
||||||
|
return inst;
|
||||||
|
};
|
||||||
|
|
||||||
|
_global.$ = $; _global.$watch = $watch; _global.$html = $html; _global.$if = $if; _global.$for = $for; _global.$router = $router;
|
||||||
|
|
||||||
|
const tags = 'div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong i b u mark code form label input textarea select button table tr th td img video audio svg'.split(' ');
|
||||||
|
tags.forEach(t => _global[t.charAt(0).toUpperCase() + t.slice(1)] = (p, c) => $html(t, p, c));
|
||||||
|
|
||||||
|
})();
|
||||||
Reference in New Issue
Block a user