Lestin

Lestin has one job: Transform JSX codes to pure HTML elements using document.createElement().

Lestin is DOM-based. There's no virtual-DOM, and thus, no additional overhead. We can theoretically say its performance is ~equal to vanilla JS (it's just three functions). (Please contribute on testing Lestin performance).

Lestin adds less than 1KB gzipped to bundles, but reduces the project size much more than this, as it simplifies component and element creations by supporting JSX; Compared to React (~30KB) and Preact (~3KB).

Using Lestin

To use Lestin, install it with TypeScript and Vite, and add the configs described below to tsconfig.json.

Installing Lestin

Installing using Yarn:

yarn add -D lestin typescript vite

Installing using NPM:

npm install -D lestin typescript vite

Configuring JSX for Lestin

After installing, to support JSX, add these configs to your tsconfig.json in the root of your project:

{
	"compilerOptions": {
		"jsx": "react-jsx",
		"jsxImportSource": "lestin",
		"moduleResolution": "node",
		"esModuleInterop": true,
	}
}

Examples

Check out /examples for more examples.

These are some mini projects built with Lestin as examples:

• Toastification - Toast notifications for DOM WebApps
• ImageSort - A simple picture categorizer for the exhaust of photos on phone
• A presentation about RegEx based on code-presentation
• A client-side SVG creator
• A simple code presentation
• A very basic event adder for Google Calendar

Below are some examples of other libraries like React and their equivalents in Lestin:

React Example

What it's like in React (Source):

import { createRoot } from 'react-dom/client';

function HelloMessage({ name }) {
    return <div>Hello {name}</div>;
}

const root = createRoot(document.body);
root.render(<HelloMessage name="Taylor" />);

The same in Lestin:

function HelloMessage({ name }) {
    return <div>Hello {name}</div>;
}

document.body.appendChild(<HelloMessage name="Taylor" />);

You don't need to import Lestin in your scripts for JSX. TypeScript and Vite automatically import them upon build. This is due to setting lestin as the jsxImportSource in tsconfig.json. Although you may import it to use it's type declarations such as Lestin.PropsWithChildren.

Lestin uses Vite as its primarily supported bundler. Vite is extremely fast⚡️, and reliable.

Quick reminder: If you choose not to use JSX in your project, using Lestin does nothing, and you can safely remove it. But I really can't find a reason not to use JSX in new projects.

SSR with Lestin

Puppeteer and Prerender are excellent renderers (technically headless browser middlewares) for SSR. Lestin is tested on them too. Read Headless Chrome: an answer to server-side rendering JS sites @ Chrome Developers.

Thank You

Special thanks to React, @types/react, How to Use JSX without React by Kartik Nair, future contributors to this project, and you, for using Lestin.

License

Lestin is MIT licensed.

Copyright 2023-present Shahab Movahhedi (shmovahhedi.com).

Copyrights on the type definition files are respective of each contributor listed at the beginning of each definition file. Their licenses apply.