svelte-core-bestpractices/examples/build_fixture.mjs
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 fixture. Upstream blocks remain byte-for-byte intact.
import {readFileSync, writeFileSync, mkdirSync, readdirSync} from 'node:fs';
import {resolve, dirname, relative} from 'node:path';
import {fileURLToPath, pathToFileURL} from 'node:url';
import {createHash} from 'node:crypto';
import {compile, VERSION} from 'svelte/compiler';
import {build} from 'esbuild';
const base=dirname(fileURLToPath(import.meta.url)), root=resolve(base,'..');
const hash=x=>createHash('sha256').update(x).digest('hex');
const dist=resolve(base,'dist');mkdirSync(dist,{recursive:true});
const blocks=name=>[...readFileSync(resolve(root,name),'utf8').matchAll(/```(?:js|svelte)\s*\n([\s\S]*?)```/g)].map(x=>x[1]);
const main=blocks('upstream-original/SKILL.md');
const cases=[],nativeBlocks=[],diagnostics=[];
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});}
function native(source,index,prefix='',suffix='',failure=false){
const original=blocks(source)[index];if(original===undefined)throw Error('Missing original block');
const content=prefix+original+suffix,filename='Native'+nativeBlocks.length+'.svelte';
const record={source,block_index:index,block_sha256:hash(original),wrapper_prefix:prefix,wrapper_suffix:suffix,filename,expected_failure:failure};
nativeBlocks.push(record);
if(failure){let error;try{compile(content,{filename,runes:true,generate:'client'});}catch(e){error=e;}if(!error)throw Error('Expected rejection');
record.diagnostic_code=error.code;observe('unchanged block '+source+' #'+index+' rejected',error.code,'js_parse_error');return;
}
const generated={};for(const mode of ['client','server']){const result=compile(content,{filename,runes:true,generate:mode,dev:false});
generated[mode]=result.js.code;diagnostics.push(...result.warnings.map(x=>({filename,mode,code:x.code})));
observe('unchanged block '+source+' #'+index+' compiles '+mode,Boolean(result.js.code),true);
}
writeFileSync(resolve(dist,filename),content);writeFileSync(resolve(dist,filename+'.server.mjs'),generated.server);
return filename;
}
// Contrast blocks redeclare a variable; event examples contain documentation placeholders.
native('upstream-original/SKILL.md',0,'<script>let num=$state(2);\n','\n</script>',true);
native('upstream-original/SKILL.md',1,'<script>\n','\n</script>',true);
native('upstream-original/SKILL.md',2,'','',true);
native('upstream-original/SKILL.md',3,'','',true);
const greeting=native('upstream-original/SKILL.md',4);
const css=native('upstream-original/SKILL.md',5,'<script>let {columns}=$props();</script>\n');
const each=native('references/each.md',2,'<script>let {items}=$props();</script>\n');
const binding=native('references/bind.md',0,'<script>let value=$state("start");</script>\n','\n<output id="binding-result">{value}</output>');
const {render}=await import('svelte/server');
const greetingModule=await import(pathToFileURL(resolve(dist,greeting+'.server.mjs')));
observe('unchanged greeting server render contains world',render(greetingModule.default).body.includes('<p>hello world!</p>'),true);
const child=`<script>let {type}=$props();let live=$derived(type==='danger'?'red':'green');let frozen=type==='danger'?'red':'green';</script><output id="prop-live">{live}</output><output id="prop-frozen">{frozen}</output>`;
writeFileSync(resolve(dist,'Props.svelte'),child);
const app=`<script>
import Greeting from './${greeting}';import CSS from './${css}';import Each from './${each}';import Binding from './${binding}';import Props from './Props.svelte';
let number=$state(2);let square=$derived(number*number);let deep=$state({count:1});let raw=$state.raw({count:1});let type=$state('safe');let columns=$state(2);
let items=$state([{id:'a',name:'Alpha',qty:1},{id:'b',name:'Beta',qty:2},{id:'c',name:'Gamma',qty:3}]);let effects=$state(0);
$effect(()=>{effects=1;});
</script>
<h1>Local Svelte reactivity fixture</h1><p>Independent synthetic experiment; no external services or production data.</p>
<div id="greeting"><Greeting/></div>
<button id="increment" onclick={()=>number+=1}>Increment</button><button id="override" onclick={()=>square=99}>Override derived</button><output id="number">{number}</output><output id="square">{square}</output>
<button id="deep-mutate" onclick={()=>deep.count+=1}>Deep mutation</button><output id="deep-value">{deep.count}</output>
<button id="raw-mutate" onclick={()=>raw.count+=1}>Raw nested mutation</button><button id="raw-replace" onclick={()=>raw={count:7}}>Replace raw object</button><output id="raw-value">{raw.count}</output>
<button id="props-toggle" onclick={()=>type=type==='safe'?'danger':'safe'}>Change prop</button><Props {type}/>
<button id="reorder" onclick={()=>items=[items[2],items[0],items[1]]}>Reorder</button><button id="remove" onclick={()=>items=items.filter(x=>x.id!=='a')}>Remove Alpha</button><ol id="keyed-list"><Each {items}/></ol>
<button id="columns" onclick={()=>columns=4}>Change CSS variable</button><div id="native-css"><CSS {columns}/></div><div id="native-binding"><Binding/></div>
<output id="effect-value">{effects}</output><button id="run-checks">Run local observations</button><pre id="checks-result">Not run</pre>`;
writeFileSync(resolve(dist,'App.svelte'),app);
const serverResult=compile(app,{filename:'App.svelte',runes:true,generate:'server',dev:false});
writeFileSync(resolve(dist,'App.server.mjs'),serverResult.js.code.replaceAll('.svelte\'', '.svelte.server.mjs\''));
writeFileSync(resolve(dist,'Props.svelte.server.mjs'),compile(child,{filename:'Props.svelte',runes:true,generate:'server',dev:false}).js.code);
const ssr=await import(pathToFileURL(resolve(dist,'App.server.mjs')));
observe('synthetic effect does not run during server render',render(ssr.default).body.includes('id="effect-value">0</output>'),true);
writeFileSync(resolve(dist,'entry.mjs'),`import {mount,flushSync} from 'svelte';import App from './App.svelte';mount(App,{target:document.getElementById('app')});flushSync();await import('../client_checks.js');`);
await build({entryPoints:[resolve(dist,'entry.mjs')],outfile:resolve(dist,'bundle.js'),bundle:true,format:'esm',platform:'browser',conditions:['browser'],plugins:[{name:'svelte-local',setup(b){b.onLoad({filter:/\.svelte$/},args=>{const result=compile(readFileSync(args.path,'utf8'),{filename:args.path,runes:true,generate:'client',dev:false});diagnostics.push(...result.warnings.map(x=>({filename:relative(dist,args.path),mode:'client',code:x.code})));return {contents:result.js.code,loader:'js'};});}}]});
observe('frozen prop example emits state_referenced_locally warning',diagnostics.some(x=>x.filename==='Props.svelte'&&x.code==='state_referenced_locally'),true);
const html='<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="robots" content="noindex"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Local Svelte fixture</title></head><body><div id="app"></div><script type="module" src="/bundle.js"></script></body></html>';
writeFileSync(resolve(dist,'index.html'),html);
const sourceHashes={};for(const name of ['build_fixture.mjs','client_checks.js','serve_fixture.mjs'])sourceHashes['examples/'+name]=hash(readFileSync(resolve(base,name)));
const evidence={executed_at:new Date().toISOString(),versions:{node:process.version,svelte:VERSION,esbuild:JSON.parse(readFileSync(resolve(root,'node_modules/esbuild/package.json'))).version},
cases,observations:cases.length,native_blocks:nativeBlocks,diagnostics,source_hashes:sourceHashes,bundle_sha256:hash(readFileSync(resolve(dist,'bundle.js'))),
runtime_tested:false,ai_client_executed:false,production_tested:false,paid_api_used:false,external_services_used:false,scope:'Compiler acceptance/rejection and two server renders; browser DOM evidence is separate. Documentation contrasts/placeholders are intentionally rejected unchanged; wrappers supply synthetic declarations to complete examples.'};
writeFileSync(resolve(base,'compiler-evidence.json'),JSON.stringify(evidence,null,2)+'\n');
console.log(JSON.stringify({compiler_observations:cases.length,native_blocks:nativeBlocks.length,versions:evidence.versions}));