https://github.com/avivahl/native-esm-react

native esm react example
https://github.com/avivahl/native-esm-react

Last synced: 2 months ago
JSON representation

native esm react example

• Host: GitHub
• URL: https://github.com/avivahl/native-esm-react
• Owner: AviVahl
• License: mit
• Created: 2021-11-05T12:45:43.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-12T13:41:33.000Z (9 months ago)
• Last Synced: 2024-04-13T13:01:28.372Z (8 months ago)
• Language: TypeScript
• Size: 374 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# native-esm-react

Native esm React example.

## What's shown?

- An example [React](https://github.com/facebook/react) application rendering two svg logos.

- An http server that:

  - serves the above application, providing both the SSR (`http://localhost:3000/`) and client-only (`http://localhost:3000/index.html`) approaches.

  - uses a worker thread to separate app evaluation/rendering from http server.

  - supports live reloading of the SSR renderer and connected clients.

  - is not production-ready, as there's no caching, compression, etc.

- Both application and server are compiled into a **single** ESM output that works natively in Node.js _AND_ browsers that [support import maps](https://caniuse.com/import-maps).

- Source maps work in Node and browsers. Nicer debugging experience compared to CommonJS, as imported symbol names are kept the same.

- Asset references using `new URL('./asset.svg, import.meta.url)` are shown and work for SSR as well. Assets must live outside the `src` tree so relative references from `dist` work.

- A _really_ cool `"start"` script that triggers server reloading while giving a `tsc -w` like experience.

- Tiny amount of dev/runtime dependencies. `npm i` and look at `node_modules`.

- React itself is _not_ published as native ESM, so the files in the `static/esm-bridge` folder allow browser ESM imports to use the UMD versions of `react`/`react-dom`, which are loaded by `index.html`.

- Written using strict TypeScript.

## Getting Started

- Clone repository.

- `npm i`

- `npm start`

- Open `http://localhost:3000/` in a browser [compatible with import maps](https://caniuse.com/import-maps).

## License

MIT