This is a fun experiment to run a TypeScript application (with a framework like Preact) in the browser with no build step (more accurately, by compiling TypeScript in the browser). This is probably a terrible idea, but one can learn a lot from trying things out.
The loader application uses the
showDirectoryPicker
API to open the project directory or, if unsupported, falls back to loading a
zip file directly in the browser. It utilizes
typescript-vfs alongside
the TypeScript compiler API to compile the files. The compiled output is then
stored in the browser's
Cache and served via a
service worker, which intercepts and handles requests seamlessly.
TypeScript 7.0 cannot be used as the in-browser compiler here because it does
not provide a programmatic compiler API. The loader therefore keeps the
typescript import specifier while resolving it to the official
@typescript/typescript6
API compatibility package (currently 6.0.2). If TypeScript 7.1 exposes a new
API, supporting it will require a dedicated loader port. See the
TypeScript 7.0 announcement
for the background.
Visit ts-app-loader.fardjad.com and open
example-apps/preact in the loader application. For
browsers that don't support the showDirectoryPicker API, you can zip the
contents of the directory and open the zip file in the loader application.