JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2918
  • Score
    100M100P100Q119474F
  • License MIT

Lightweight 1KB JSX library. Using JSX (TypeScript/Babel) or Tagged Template Literals. SSR first, partially hydrate later.

Package Exports

  • nano-jsx

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nano-jsx) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Nano JSX Logo

Lightweight 1kB JSX library.

Designed to build ultra fast Multi-Page Apps (MPAs), using isomorphic JavaScript. Written in TypeScript. Perfect for your next PWA.

NPM version gzip size GitHub last commit code style: prettier Codecov Node version

Website

Checkout the website to find out more!

Demo App

Take a look at the demo app.
It's hosted on a free heroku dyno, so it might take a while to spin up the server and load the app

Features

The best about nano-jsx is the small bundle size. It builds, although is sound crazy, a even smaller bundle size than Svelte!

More Features

  • SSR
    Out of the box, very simple to use

  • Pre-Rendering
    Renders your app to static html if you want.
    (This is possible, but requires some knowledge.
    I plan to make a tutorial soon.)

  • Hydration
    Render your app on the server and hydrate it on the client

  • Partial Hydration
    Hydrate and only the parts you need

  • CSS in JS
    Use JavaScript objects for styling

  • No JSX build tools required
    Uses Tagged Templates instead of JSX if you prefer

  • Props, Ref, Context and Events
    Use Props, Ref, Context API and Events as you are used to in react

  • Inline SVG
    No problem

  • Prefetch
    Use the built-in Link Component

  • 1KB (gzip)
    All of this in only ~1KB
    (Well, the core module is only about ~1KB)

Why

In the past, I did a lot of websites using Isomorphic React (Pre-Rendering on the Server and Hydrating it on the client). Once the website did load all scripts, the website was very fast (not so much on mobile though). But the script where always way too big.

Nowadays, I prefer to pre-render the JSX on the server and only hydrate the parts that are needed. The client now only gets few kilobytes and uses much less CPU.

Of course with this new approach, the client does not have a router and must thus fetch each new site on navigating to it. But, this is not really a problem since the static html is usually very small and we can easily prefetch pages using <link rel="prefetch" href="index.html" as="document"> on page load or on hovering over a link.

Documentation

Checkout the website to find out more!