Skip to content

bossley9/sjsx

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

sjsx

sjsx is a tiny JSX transform. sjsx stands for "small JSX".

Usage

In your compiler, set the following options:

jsx: react-jsx
jsxImportSource: @bossley9/sjsx@X.X.X

See examples for more applications.

Examples

Motivation

JSX is an XML-like syntax that transforms into JavaScript code with the help of a compiler. I want something lighter than React (316 kB minified) without bells and whistles (React hooks) and something that doesn't always have to transform into DOM instructions (document.createElement) if HTML is generated on a server. I also want a solution that allows proper HTML syntax (no React camelCase property names) and has the ability to write all HTML tags (head/meta tags), not just those in the body.

sjsx is a tiny JSX transform with zero dependencies and minimal code. The transform is so small you can read it all in one file. sjsx transforms JSX to HTML strings instead of DOM elements so you're not restricted to writing JSX with a DOM helper library. It also follows proper HTML attribute syntax so you don't need to learn an alternate camelCase version of HTML attributes if you already know how to write syntactically correct HTML. It also performs basic minification by default so you can get away with small HTML without a bundler or minifier.

Because sjsx is so small and usage-agnostic, you can do almost anything with it.