Ideas to put in the skill:
compressed doc with a lot of snippets covering different patterns (insist on differences from manim python)
use the idea in Callback for log messages #380 watch.js file that sets up the communication.
It could look like:
const http = require ( 'http' ) ;
const fs = require ( 'fs' ) ;
const logs = [ ] ;
let clients = [ ] ;
fs . watch ( 'index.html' , ( ) => {
logs . length = 0 ;
clients . forEach ( res => res . write ( 'data: reload\n\n' ) ) ;
} ) ;
http . createServer ( ( req , res ) => {
if ( req . method === 'GET' && req . url === '/' ) {
res . setHeader ( 'Content-Type' , 'text/html' ) ;
res . end ( fs . readFileSync ( 'index.html' ) ) ;
}
else if ( req . method === 'GET' && req . url === '/__reload' ) {
res . setHeader ( 'Content-Type' , 'text/event-stream' ) ;
res . setHeader ( 'Cache-Control' , 'no-cache' ) ;
clients . push ( res ) ;
req . on ( 'close' , ( ) => clients = clients . filter ( c => c !== res ) ) ;
}
else if ( req . method === 'POST' && req . url === '/__log' ) {
let body = '' ;
req . on ( 'data' , d => body += d ) ;
req . on ( 'end' , ( ) => { logs . push ( JSON . parse ( body ) ) ; res . end ( 'ok' ) ; } ) ;
}
else if ( req . method === 'GET' && req . url === '/__logs' ) {
res . setHeader ( 'Content-Type' , 'application/json' ) ;
res . end ( JSON . stringify ( logs ) ) ;
}
else {
res . writeHead ( 404 ) ; res . end ( ) ;
}
} ) . listen ( 3000 , ( ) => console . log ( 'http://localhost:3000' ) ) ; <!DOCTYPE html>
< html >
< body >
< div id ="app "> </ div >
< script >
new EventSource ( '/__reload' ) . onmessage = ( ) => location . reload ( ) ;
</ script >
< script type ="module ">
import { Scene , Circle , Create , onLog } from 'https://cdn.jsdelivr.net/npm/manim-web@latest/dist/manim-web.browser.js' ;
onLog ( entry => fetch ( '/__log' , { method : 'POST' , body : JSON . stringify ( entry ) } ) ) ;
const scene = new Scene ( document . getElementById ( 'app' ) , { width : 500 , height : 300 } ) ;
await scene . play ( new Create ( new Circle ( { radius : 1.5 } ) ) ) ;
</ script >
</ body >
</ html >
how to lookup documentation / code (from node_modules probably)
a few style guidelines
how to report an issue
Ideas to put in the skill:
watch.jsfile that sets up the communication.It could look like:
node_modulesprobably)