feat: router and runtime audit fixes

packages/router/src/client.tsmodified+61-38

Changes to packages/router/src/client.ts

		⋯26 linesShow the 26 lines above this hunk@@ -27,9 +27,20 @@ export function getRouterScript(): string {
27	27	var o=Object.assign({},defaults,window.__stxRouterConfig||{},window.STX_ROUTER_OPTIONS||{});
28	28	var containerSel=o.container;
29	29
	30	+ var CACHE_TTL=5*60*1000; // 5 minutes
30	31	var cache={};
31	32	var prefetching={};
32	33	var isNavigating=false;
	34	+ var currentAbort=null;
	35	+
	36	+ function normalizePath(p){return p.length>1&&p.charAt(p.length-1)==='/'?p.slice(0,-1):p}
	37	+ function getCached(key){
	38	+ var entry=cache[key];
	39	+ if(!entry)return null;
	40	+ if(Date.now()-entry.ts>CACHE_TTL){delete cache[key];return null}
	41	+ return entry.html;
	42	+ }
	43	+ function setCache(key,html){cache[key]={html:html,ts:Date.now()}}
33	44
34	45	function getContainer(){
35	46	return document.querySelector(containerSel)||document.querySelector('[data-stx-content]')||document.querySelector('main');
		⋯1 lineShow the 1 line above this hunk@@ -37,14 +48,13 @@ export function getRouterScript(): string {
37	48
38	49	// ── Navigation ──
39	50	function navigate(url,pushState){
40		- if(isNavigating)return;
41	51	var t=new URL(url,location.origin);
42	52
43	53	// Different origin → full navigation
44	54	if(t.origin!==location.origin){location.href=url;return}
45	55
46	56	// Hash-only navigation on same page
47		- if(t.pathname===location.pathname&&t.hash){
	57	+ if(normalizePath(t.pathname)===normalizePath(location.pathname)&&t.hash){
48	58	if(pushState!==false)history.pushState({},'',t.href);
49	59	var el=document.querySelector(t.hash);
50	60	if(el)el.scrollIntoView({behavior:'smooth'});
		⋯3 linesShow the 3 lines above this hunk@@ -54,27 +64,36 @@ export function getRouterScript(): string {
54	64	// Same page, no hash → skip
55	65	if(t.href===location.href&&!t.hash)return;
56	66
	67	+ // Save scroll position before navigating away
	68	+ history.replaceState({scrollX:window.scrollX,scrollY:window.scrollY},'',location.href);
	69	+
	70	+ // Abort any in-flight navigation
	71	+ if(currentAbort){currentAbort.abort();currentAbort=null}
	72	+
57	73	isNavigating=true;
58	74	document.body.classList.add(o.loadingClass);
59	75
60		- var targetHref=t.href;
61		- var targetPath=t.pathname;
	76	+ var targetPath=normalizePath(t.pathname);
62	77	var targetHash=t.hash;
63	78
64		- function done(){isNavigating=false;document.body.classList.remove(o.loadingClass)}
	79	+ function done(){isNavigating=false;currentAbort=null;document.body.classList.remove(o.loadingClass)}
65	80
66		- if(o.cache&&cache[targetPath]){
67		- swap(cache[targetPath],targetPath,pushState,targetHash);
	81	+ var cached=o.cache&&getCached(targetPath);
	82	+ if(cached){
	83	+ swap(cached,targetPath,pushState,targetHash);
68	84	done();
69	85	}
70		-else {
71		- fetch(url,{headers:{'X-STX-Router':'true','Accept':'text/html'}}).then(function(r){
	86	+ else {
	87	+ var abort=new AbortController();
	88	+ currentAbort=abort;
	89	+ fetch(url,{headers:{'X-STX-Router':'true','Accept':'text/html'},signal:abort.signal}).then(function(r){
72	90	if(!r.ok)throw new Error(r.status);
73	91	return r.text();
74	92	}).then(function(html){
75		- if(o.cache)cache[targetPath]=html;
	93	+ if(o.cache)setCache(targetPath,html);
76	94	swap(html,targetPath,pushState,targetHash);
77		- }).catch(function(){
	95	+ }).catch(function(err){
	96	+ if(err&&err.name==='AbortError')return;
78	97	location.href=url;
79	98	}).finally(done);
80	99	}
		⋯100 linesShow the 100 lines above this hunk@@ -181,17 +200,26 @@ else {
181	200	if(pushState!==false)history.pushState({},'',url+(hash||''));
182	201
183	202	// Update active nav links
184		- updateNav(url);
185	203	updateActiveLinks();
186	204
187		- // Scroll
188		- if(o.scrollToTop&&!hash)window.scrollTo({top:0,behavior:'instant'});
	205	+ // Scroll — restore saved position on back/forward, otherwise scroll to top
	206	+ if(pushState===false&&history.state&&typeof history.state.scrollY==='number'){
	207	+ window.scrollTo({top:history.state.scrollY,left:history.state.scrollX,behavior:'instant'});
	208	+ }
	209	+ else if(o.scrollToTop&&!hash)window.scrollTo({top:0,behavior:'instant'});
189	210	else if(hash){var el=document.querySelector(hash);if(el)el.scrollIntoView({behavior:'smooth'})}
190	211
191	212	// Update title
192	213	var newTitle=doc.querySelector('title');
193	214	if(newTitle)document.title=newTitle.textContent;
194	215
	216	+ // Swap meta tags (description, og:*, twitter:*)
	217	+ var swappableMeta='meta[name="description"],meta[property^="og:"],meta[name^="twitter:"]';
	218	+ document.querySelectorAll(swappableMeta).forEach(function(m){m.remove()});
	219	+ doc.querySelectorAll(swappableMeta).forEach(function(m){
	220	+ document.head.appendChild(m.cloneNode(true));
	221	+ });
	222	+
195	223	// Dispatch navigation events
196	224	window.dispatchEvent(new CustomEvent('stx:navigate',{detail:{url:url}}));
197	225	window.dispatchEvent(new Event('stx:load'));
		⋯22 linesShow the 22 lines above this hunk@@ -220,7 +248,7 @@ else {
220	248	if(href.startsWith('http')||href.startsWith('#')||href.startsWith('mailto:')||href.startsWith('tel:')||href.startsWith('javascript:'))return false;
221	249	if(link.target==='_blank')return false;
222	250	if(link.hasAttribute('data-stx-no-router')||link.hasAttribute('data-no-router')||link.hasAttribute('download'))return false;
223		- if(href===location.pathname)return false;
	251	+ if(normalizePath(href)===normalizePath(location.pathname))return false;
224	252	if(!getContainer())return false;
225	253	return true;
226	254	}
		⋯9 linesShow the 9 lines above this hunk@@ -236,7 +264,10 @@ else {
236	264	},true);
237	265
238	266	// ── Back/forward ──
239		- window.addEventListener('popstate',function(){
	267	+ window.addEventListener('popstate',function(e){
	268	+ // Cancel any in-flight navigation so back/forward always works
	269	+ if(currentAbort){currentAbort.abort();currentAbort=null}
	270	+ isNavigating=false;
240	271	navigate(location.pathname+location.search+location.hash,false);
241	272	});
242	273
		⋯5 linesShow the 5 lines above this hunk@@ -248,37 +279,29 @@ else {
248	279	if(!shouldIntercept(link))return;
249	280	// Only prefetch links with data-stx-prefetch or all internal links
250	281	var href=link.getAttribute('href');
251		- if(cache[href]||prefetching[href])return;
252		- prefetching[href]=true;
	282	+ var cacheKey=normalizePath(new URL(href,location.origin).pathname);
	283	+ if(getCached(cacheKey)||prefetching[cacheKey])return;
	284	+ prefetching[cacheKey]=true;
253	285	fetch(href,{headers:{'X-STX-Router':'true','Accept':'text/html'}}).then(function(r){return r.text()}).then(function(html){
254		- if(o.cache)cache[href]=html;
255		- }).catch(function(){}).finally(function(){delete prefetching[href]});
	286	+ if(o.cache)setCache(cacheKey,html);
	287	+ }).catch(function(){}).finally(function(){delete prefetching[cacheKey]});
256	288	},true);
257	289	}
258	290
259	291	// ── Active link management ──
260		- function updateNav(url){
261		- document.querySelectorAll('nav a[href], #mobileNav a[href], [data-stx-nav] a[href]').forEach(function(a){
262		- var href=a.getAttribute('href');
263		- if(!href||href.startsWith('#')||href.startsWith('http'))return;
264		- var isActive=(href===url)||(href==='/'&&url==='/');
265		- if(a.hasAttribute('data-stx-link')){
266		- var ac=a.getAttribute('data-stx-active-class')||'active';
267		- if(isActive)a.classList.add(ac);else a.classList.remove(ac);
268		- }
269		- });
270		- }
271		-
272	292	function updateActiveLinks(){
	293	+ var cur=normalizePath(location.pathname);
273	294	var links=document.querySelectorAll('[data-stx-link]');
274		- var cur=location.pathname;
275	295	links.forEach(function(link){
276		- var href=link.getAttribute('href')||'';
	296	+ var href=normalizePath(link.getAttribute('href')||'');
277	297	var ac=link.getAttribute('data-stx-active-class')||'active';
278	298	var eac=link.getAttribute('data-stx-exact-active-class')||'exact-active';
	299	+ // Remove all active classes first
279	300	ac.split(' ').forEach(function(cls){if(cls)link.classList.remove(cls)});
280	301	eac.split(' ').forEach(function(cls){if(cls)link.classList.remove(cls)});
	302	+ // Exact match
281	303	var isExact=cur===href;
	304	+ // Prefix match (root "/" only matches itself)
282	305	var isActive=href!=='/'?cur.startsWith(href):cur==='/';
283	306	if(isExact)eac.split(' ').forEach(function(cls){if(cls)link.classList.add(cls)});
284	307	if(isActive)ac.split(' ').forEach(function(cls){if(cls)link.classList.add(cls)});
		⋯20 linesShow the 20 lines above this hunk@@ -305,14 +328,15 @@ else {
305	328	navigate:navigate,
306	329	navigateTo:navigate,
307	330	prefetch:function(url){
308		- if(!cache[url]){
309		- fetch(url,{headers:{'X-STX-Router':'true'}}).then(function(r){return r.text()}).then(function(html){cache[url]=html}).catch(function(){});
	331	+ var key=normalizePath(new URL(url,location.origin).pathname);
	332	+ if(!getCached(key)){
	333	+ fetch(url,{headers:{'X-STX-Router':'true'}}).then(function(r){return r.text()}).then(function(html){setCache(key,html)}).catch(function(){});
310	334	}
311	335	},
312	336	clearCache:function(){for(var k in cache)delete cache[k]},
313	337	cache:cache,
314	338	swap:swap,
315		- updateNav:updateNav
	339	+ updateActiveLinks:updateActiveLinks
316	340	};
317	341
318	342	window.__stxRouter=router;
		⋯5 linesShow the 5 lines above this hunk@@ -324,7 +348,6 @@ else {
324	348	injectStyles();
325	349	injectViewTransitionCSS();
326	350	updateActiveLinks();
327		- updateNav(location.pathname);
328	351	}
329	352
330	353	if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',init);else init();

packages/stx/src/hydration.tsmodified+5-3

Changes to packages/stx/src/hydration.ts

		⋯253 linesShow the 253 lines above this hunk@@ -254,9 +254,10 @@ export class HydrationRuntime {
254	254	this.options.onHydrating()
255	255	this.root.classList.add('stx-hydrating')
256	256
257		- // Set up timeout
	257	+ // Set up timeout (cleared on success to prevent dangling timer)
	258	+ let timeoutId: ReturnType<typeof setTimeout>
258	259	const timeoutPromise = new Promise<never>((_, reject) => {
259		- setTimeout(() => reject(new Error('Hydration timeout')), this.options.timeout)
	260	+ timeoutId = setTimeout(() => reject(new Error('Hydration timeout')), this.options.timeout)
260	261	})
261	262
262	263	// Run hydration with timeout
		⋯1 lineShow the 1 line above this hunk@@ -264,6 +265,7 @@ export class HydrationRuntime {
264	265	this.runHydration(),
265	266	timeoutPromise,
266	267	])
	268	+ clearTimeout(timeoutId!)
267	269
268	270	this.isHydrated = true
269	271	this.root.classList.remove('stx-hydrating')
		⋯90 linesShow the 90 lines above this hunk@@ -360,7 +362,7 @@ catch (error) {
360	362	id,
361	363	name: name || id,
362	364	strategy: strategyAttr as ComponentHydrationConfig['strategy'],
363		- props: propsAttr ? JSON.parse(propsAttr) : {},
	365	+ props: propsAttr ? (() => { try { return JSON.parse(propsAttr) } catch (e) { console.warn('[Hydration] Failed to parse props for', id, e); return {} } })() : {},
364	366	events: [],
365	367	}
366	368

packages/stx/src/signals.tsmodified+21-1

Changes to packages/stx/src/signals.ts

		⋯1,425 linesShow the 1,425 lines above this hunk@@ -1426,6 +1426,10 @@ else {
1426	1426	};
1427	1427	window.addEventListener('popstate', syncFromUrl);
1428	1428	window.addEventListener('stx:navigate', syncFromUrl);
	1429	+ onDestroy(function() {
	1430	+ window.removeEventListener('popstate', syncFromUrl);
	1431	+ window.removeEventListener('stx:navigate', syncFromUrl);
	1432	+ });
1429	1433	return {
1430	1434	data: params,
1431	1435	get: function(key) { return params()[key]; },
		⋯17 linesShow the 17 lines above this hunk@@ -1449,6 +1453,14 @@ else {
1449	1453	// ==========================================================================
1450	1454
1451	1455	var _queryCache = {};
	1456	+ var _queryCacheKeys = [];
	1457	+ var QUERY_CACHE_MAX = 50;
	1458	+ function _evictQueryCache() {
	1459	+ while (_queryCacheKeys.length > QUERY_CACHE_MAX) {
	1460	+ var oldest = _queryCacheKeys.shift();
	1461	+ delete _queryCache[oldest];
	1462	+ }
	1463	+ }
1452	1464
1453	1465	function useQuery(url, options) {
1454	1466	options = options || {};
		⋯37 linesShow the 37 lines above this hunk@@ -1492,6 +1504,8 @@ else {
1492	1504	data.set(transformed);
1493	1505	isStale.set(false);
1494	1506	_queryCache[key] = { data: transformed, timestamp: Date.now() };
	1507	+ if (_queryCacheKeys.indexOf(key) === -1) _queryCacheKeys.push(key);
	1508	+ _evictQueryCache();
1495	1509	if (options.onSuccess) options.onSuccess(transformed);
1496	1510	// Schedule cache eviction
1497	1511	setTimeout(function() { delete _queryCache[key]; }, cacheTime);
		⋯426 linesShow the 426 lines above this hunk@@ -1924,7 +1938,13 @@ else if (name === '@text' || name === ':text') {
1924	1938	}
1925	1939	else if (name === '@html' || name === ':html') {
1926	1940	effect(() => {
1927		- el.innerHTML = evalAttrExpr(value);
	1941	+ var rawHtml = evalAttrExpr(value);
	1942	+ // Basic sanitization: strip <script> tags and on* event handlers
	1943	+ if (typeof rawHtml === 'string') {
	1944	+ rawHtml = rawHtml.replace(/<script\\b[^>]*>[\\s\\S]*?<\\/script>/gi, '');
	1945	+ rawHtml = rawHtml.replace(/\\son\\w+\\s*=\\s*["'][^"']*["']/gi, '');
	1946	+ }
	1947	+ el.innerHTML = rawHtml;
1928	1948	});
1929	1949	el.removeAttribute(name);
1930	1950	}