leontrolski / using-tsx-without-npm

Example usage of TSX without NPM or React

Example usage of TSX without npm or React.

Install swc

Remember to pick the correct architecture. All releases listed here, for some reason many of the releases don't have a binary file, pick one like this:

curl -L -o ~/bin/swc https://github.com/swc-project/swc/releases/download/v1.5.6/swc-darwin-arm64
chmod +x ~/bin/swc

Write a dumb-dumb's React

React is too complicated for our needs right now, let's just blat everything on the page on each render.

Write your application

See static/index.tsx, static/index.html.

Compile your .tsx files

~/bin/swc compile --config-file=static/.swcrc --out-dir=. static/**/*.tsx

There are various useful options for eg. source maps if you'd like to set them up.

If you'd like to watch for changes (nicer ways are available):

fswatch -0 ./**/*.tsx | xargs -0 -n1 -I {} sh -c '~/bin/swc compile --config-file=static/.swcrc --out-dir=. $(echo {} | sed "s|$PWD/||")'

Serve your app

python -m http.server
open -a "Google Chrome" localhost:8000/static