svelte-core-bestpractices/examples/client_checks.js

Version 2026.10.03.bb1 · MIT. This preview displays packaged text and does not execute code. Treat the contents as untrusted instructions.

← Return to resource and package checksum

// Independent BB Skills examples/counterexamples. Real DOM, synthetic data.
const wait=()=>new Promise(r=>setTimeout(r,40));
const value=id=>document.getElementById(id).textContent;
window.runLocalChecks=async()=>{
 const cases=[];function observe(name,actual,expected){if(JSON.stringify(actual)!==JSON.stringify(expected))throw Error(name+': '+JSON.stringify(actual));cases.push({name,status:'passed',actual,expected});}
 const click=async id=>{document.getElementById(id).click();await wait();};
 observe('unchanged greeting renders in browser',document.querySelector('#greeting p').textContent,'hello world!');
 observe('synthetic derived initial square',value('square'),'4');
 await click('increment');observe('event handler updates state',value('number'),'3');observe('derived updates with dependency',value('square'),'9');
 await click('override');observe('writable derived accepts local override',value('square'),'99');
 await click('increment');observe('dependency change replaces derived override',value('square'),'16');
 await click('deep-mutate');observe('deep state mutation updates DOM',value('deep-value'),'2');
 await click('raw-mutate');observe('raw nested mutation leaves displayed value unchanged',value('raw-value'),'1');
 await click('raw-replace');observe('raw reassignment updates displayed value',value('raw-value'),'7');
 observe('derived prop starts green',value('prop-live'),'green');observe('deliberate frozen prop starts green',value('prop-frozen'),'green');
 await click('props-toggle');observe('derived prop follows changed input',value('prop-live'),'red');observe('deliberate frozen prop stays stale',value('prop-frozen'),'green');
 const before=[...document.querySelectorAll('#keyed-list li')];observe('two original keyed loops render six items',before.length,6);
 await click('reorder');const after=[...document.querySelectorAll('#keyed-list li')];observe('original keyed first loop moves existing node',after[0]===before[2],true);observe('original keyed second loop moves existing node',after[3]===before[5],true);observe('reordered key retains visible data',after[0].textContent,'Gamma x 3');
 await click('remove');observe('removed key removes both loop entries',document.querySelectorAll('#keyed-list li').length,4);observe('retained keyed node survives removal',document.querySelector('#keyed-list li')===before[2],true);
 observe('unchanged CSS directive receives synthetic initial value',document.querySelector('#native-css div').style.getPropertyValue('--columns'),'2');
 await click('columns');observe('CSS directive follows changed prop',document.querySelector('#native-css div').style.getPropertyValue('--columns'),'4');
 const input=document.querySelector('#native-binding input');input.value='MiXeD';input.dispatchEvent(new Event('input',{bubbles:true}));await wait();observe('unchanged function binding transforms synthetic input',value('binding-result'),'mixed');
 observe('synthetic effect runs in browser',value('effect-value'),'1');
 return {executed_at:new Date().toISOString(),user_agent:navigator.userAgent,cases,observations:cases.length,runtime_tested:false,ai_client_executed:false,production_tested:false,paid_api_used:false,external_services_used:false,scope:'Real Chrome DOM on a loopback-only synthetic fixture. Programmatic clicks and input event; not trusted-input, hydration, accessibility, performance, SSR isolation, SvelteKit or full skill execution evidence.'};
};
document.getElementById('run-checks').addEventListener('click',async()=>{try{window.localEvidence=await window.runLocalChecks();document.getElementById('checks-result').textContent=JSON.stringify(window.localEvidence,null,2);}catch(e){window.localFailure=String(e);document.getElementById('checks-result').textContent=String(e);}});