A proxy server to use a modern dev server in old browsers. "Run SvelteKit on a TV"
TVKit intercepts requests to the other webserver and makes them work in old browsers by injecting polyfills and tries to compile the modern javascript and CSS to code that is compatible with the older browser.
- Start your vite project as normal
- Run
npx tvkit@latest serve --browser "chrome 50"
in another terminal - Open http://localhost:3000/ in an old browser to visit your website
Option | Default value | Description |
---|---|---|
[target] | http://localhost:5173 | The URL of the website that is too new |
--port | 3000 | The port the proxy server is going to run on |
--browser | The transpilation target (uses browserslist) | |
--add | Override feature. Ex --add "es6-module" forces adding systemjs polyfill |
|
--remove | Override feature: Ex --remove fetch forces omitting whatwg-fetch polyfill |
|
--no-css | false | Disable CSS transpilation |
--ssl-cert | Path to the SSL certificate for https | |
--ssl-key | Path to the SSL certificate's private key | |
--help | Show message per command. Ex: tvkit serve --help |
tvkit adds browser aliases for SmartTV platforms:
Example --browser "Tizen 5"
is aliased to Chrome 63
Use concurrently to start both servers at the same time:
// package.json
"scripts": {
"dev": "concurrently --kill-others-on-fail \"npm:dev:*\"",
"dev:vite": "vite dev",
"dev:tvkit": "tvkit serve --browser \"Tizen 4, WebOS 4\"",
Experimental feature
Use alternative @vitejs/plugin-legacy if you can.
npx tvkit@latest build path/to/build --out path/to/output --browser "chrome 50"
- SystemJS to polyfill ES modules.
- Babel to transpile javascript on the fly.
- core-js, whatwg-fetch and others to polyfill missing features.
- PostCSS to transpile CSS on the fly using postcss-preset-env.
- And others: Rollup, Acorn, Yargs
Consider funding these projects as they do a lot of the heavy lifting.