[{"data":1,"prerenderedAt":290},["ShallowReactive",2],{"project-44634143":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":44,"post_text":45,"what":46,"said":80,"maker_in_thread":159,"shape":169,"grid":174,"attempts":251,"same_week":252,"maker_shows":281,"maker_hidden":282,"reader_version":283,"card":284},"44634143","Tsbro","TypeScript for the browser, no build step","title","Show HN: Tsbro – TypeScript for the browser, no build step","https:\u002F\u002Fgithub.com\u002Fstagas\u002Ftsbro","github.com","stagas",1753098995,2025,39,33,1454,3837,38,"shown","languages","browser typescript runtime","library",[24,25,26,27,28],"typescript browser","no build step","swc wasm","browser modules","service worker","mixed",-0.139,{"positive":32,"neutral":33,"mixed":34,"critical":35},3,5,0,7,15,{"performance":38,"execution":39,"idea":41,"design":42,"privacy":43},{"positive":34,"critical":33},{"positive":40,"critical":40},1,{"positive":34,"critical":34},{"positive":40,"critical":34},{"positive":40,"critical":34},[40,40,40,40,34,34,34,40,34,34,32,34,40,33,32,40,34,34,34,34,34,33,34,34,32,34,34,34,32,33,32,34,34],null,{"problem":47,"audience":45,"pricing":45,"motivation":53,"time_to_build":45,"stack":61,"openness":78,"stage":79,"team_size":79},{"value":48,"source":49,"evidence":50},"TypeScript in the browser normally requires tooling, bundlers and build steps","maker",[51],{"id":52},"post",{"value":54,"source":55,"evidence":56},"Quick demos and PoCs without build tooling","commenter",[57],{"id":58,"by":59,"text":60},"44686899","rafram","That's totally fair. The OP seems to be intended for your main page logic: > TypeScript is still second-class citizen with regards to browser adoption, there is a proposal to fix…",[62,69,72],{"value":63,"source":55,"evidence":64},"TypeScript",[65],{"id":66,"by":67,"text":68},"44680625","carl_dr","That is how this works. > tsbro solves this by completely bypassing the browser's import system using synchronous XHR, transpile with swc wasm and a sophisticated ESM-to-CJS…",{"value":26,"source":55,"evidence":70},[71],{"id":66,"by":67,"text":68},{"value":73,"source":49,"evidence":74},"Service Worker",[75],{"id":76,"by":11,"text":77},"44703023","As per another commenter's suggestion, I gave it a shot using a Service Worker and it looks like it works as well[1]. [1]: https:\u002F\u002Fgithub.com\u002Fstagas\u002Ftssw","open_source","unknown",{"praise":81,"objections":100,"requests":125,"questions":126,"alternatives":133},[82,89],{"value":83,"source":55,"evidence":84},"Name is fun",[85],{"id":86,"by":87,"text":88},"44680566","Tade0","I'm wondering if it would be useful\u002Fpossible to run the compilation in a service worker that would intercept requests for *.ts and compile them in the worker? I've seen an…",{"value":90,"source":55,"evidence":91},"Useful for running TS in browser for tests or embedded code samples",[92,96],{"id":93,"by":94,"text":95},"44682506","catapart","Neat! I've been working on a custom element for running tests in the browser, and was thinking of wiring up swc to prevent having to compile the tests from ts before running…",{"id":97,"by":98,"text":99},"44686078","spankalee","Oh, I wouldn't use something like this for the main code of a page. You should absolutely just compile and bundle the TS once, rather than on every page load. But there are cases…",[101,110,116],{"value":102,"source":55,"evidence":103},"Synchronous XHR hurts performance for large module graphs",[104,107],{"id":105,"by":98,"text":106},"44680682","Synchronous XHR is a really bad way to do this. The performance will be terrible for anything but the smallest module graphs. But the TypeScript compiler API is synchronous, so…",{"id":108,"by":98,"text":109},"44684655","The compiler is about 730k compressed, not 10 MB. You can also lazy load it so that you show code before being able to run it. Being in a worker only causes the synchronous…",{"value":111,"source":55,"evidence":112},"Downloads a 5MB wasm file",[113],{"id":114,"by":87,"text":115},"44680754","Yes, but it's doing all that locally. When I ran the code it downloaded a 5MB file, namely https:\u002F\u002Fesm.sh\u002F@swc\u002Fwasm-web@1.13.2\u002Fwasm_bg.wasm. It's also not using a service worker.",{"value":117,"source":55,"evidence":118},"Compiler is large to ship to every page",[119,122],{"id":120,"by":59,"text":121},"44683376","> But the TypeScript compiler API is synchronous, so there's a problem. But it doesn't use DOM APIs, so you can run it in a worker without any issue. Monaco (the embeddable…",{"id":123,"by":59,"text":124},"44685072","> The compiler is about 730k compressed Thanks, you're right, I was looking at the unminified version. Minified is 3.4 MB uncompressed, 730 KB compressed. That's still crazy…",[],[127],{"value":128,"source":55,"evidence":129},"How does this differ from esm.sh\u002Ftsx?",[130],{"id":131,"by":132,"text":128},"44680664","nikisweeting",[134,141,148,155],{"value":135,"source":55,"evidence":136},"esm.sh\u002Ftsx",[137,138],{"id":131,"by":132,"text":128},{"id":139,"by":11,"text":140},"44719026","In their docs[0]: > Your source code is sent to the server, compiled, cached at the edge, and served to the browser as a JavaScript module. [0]: https:\u002F\u002Fesm.sh\u002F#tsx",{"value":142,"source":55,"evidence":143},"sucrase service worker",[144],{"id":145,"by":146,"text":147},"44680576","altbdoor","I've tried this before, with a service worker[1] that intercepts TS\u002FX-ish requests, and directing them over to sucrase[2] to compile to JS, before being loaded by the browser.…",{"value":149,"source":55,"evidence":150},"erasableSyntaxOnly in TypeScript 5.8+",[151],{"id":152,"by":153,"text":154},"44682082","simulo","If you are interested in TypeScript for the browser, you might also like --erasableSyntaxOnly option of typescript >5.8. The only tool needed for it is the typescript compiler…",{"value":156,"source":55,"evidence":157},"Playground Elements",[158],{"id":105,"by":98,"text":106},{"comments":160,"answered":40,"key":161},4,[162,163,166],{"id":76,"text":77},{"id":164,"text":165},"44703014","Thanks for this! I gave it a shot and it works[1]. [1] https:\u002F\u002Fgithub.com\u002Fstagas\u002Ftssw",{"id":167,"text":168},"44703036","If you like this and are interested in a less hacky way, I've also implemented it using a Service Worker[1] that intercepts and transpiles modules on-the-fly. [1]:…",{"commenters":170,"max_depth":171,"maker_replies":160,"first_comment_mins":172,"lifespan_hours":173},19,6,5494,189,[175,177,178,179,180,182,184,187,191,193,195,197,198,201,203,205,206,207,211,214,217,219,221,225,228,230,232,235,238,240,244,247,249],[105,34,40,176,98,34],"project\u002Fcritical\u002Fperformance",[120,34,40,176,59,34],[108,34,40,176,98,34],[123,34,40,176,59,34],[97,34,34,181,98,34],"commenter\u002Fneutral\u002Fnone",[58,34,34,183,59,34],"commenter\u002Fneutral\u002Fidea",[185,34,34,181,186,34],"44686216","Zardoz84",[188,34,40,189,190,34],"44684707","project\u002Fcritical\u002Fexecution","WorldMaker",[192,34,34,181,98,34],"44686052",[76,34,34,194,11,40],"maker\u002Fneutral\u002Fexecution",[145,40,32,196,146,34],"project\u002Fneutral\u002Fidea",[164,40,34,194,11,40],[152,199,40,200,153,34],2,"project\u002Fcritical\u002Fnone",[86,32,33,202,87,34],"project\u002Fpositive\u002Fdesign",[66,32,32,204,67,34],"project\u002Fneutral\u002Fexecution",[114,32,40,176,87,34],[167,160,34,194,11,40],[208,33,34,209,210,34],"44680640","other\u002Fneutral\u002Fidea","vendiddy",[212,33,34,209,213,34],"44680936","Imustaskforhelp",[215,33,34,209,216,34],"44681199","pjc50",[218,33,34,209,210,34],"44720918",[93,171,33,220,94,34],"project\u002Fpositive\u002Fexecution",[222,35,34,223,224,34],"44680714","other\u002Fneutral\u002Fnone","ohnoesjmr",[226,35,34,223,227,34],"44680735","teaearlgraycold",[229,35,32,204,213,34],"44680905",[231,35,34,181,227,34],"44680996",[233,35,34,181,234,34],"44681232","orta",[236,35,34,181,237,34],"44681523","silverwind",[131,239,32,196,132,34],8,[241,239,33,242,243,34],"44688747","project\u002Fpositive\u002Fprivacy","Foorack",[245,239,32,246,132,34],"44713764","project\u002Fneutral\u002Fprivacy",[139,239,34,248,11,40],"other\u002Fneutral\u002Fprivacy",[250,239,34,181,132,34],"44720217",[],[253,258,263,268,272,277],{"id":254,"name":255,"points":256,"category":257},"44664873","Tender",1030,"consumer_social",{"id":259,"name":260,"points":261,"category":262},"44594584","Conductor",228,"dev_tools",{"id":264,"name":265,"points":266,"category":267},"44630648","connmap",205,"infrastructure",{"id":269,"name":270,"points":271,"category":267},"44661673","Apple Health MCP",199,{"id":273,"name":274,"points":275,"category":276},"44613438","Compass CNC",176,"hardware",{"id":278,"name":279,"points":280,"category":267},"44662497","TheProtector",167,9,false,"v2",{"id":285,"name":5,"line":6,"ai":282,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":286,"top":18,"kw":287,"maker":11,"domain":10,"tier":19,"attempts":34,"strip":288,"url":9,"mix":289,"praise":83,"objection":102,"sub":21},44634143,-0.14,[24,25,26,27,28],"111100010030153100000500300035300",[32,33,34,35],1794036678879]