Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/loreanvictor/render-jsx
Tools for building JSX-based libraries / frameworks, also a super-thin and fast pure DOM renderer.
https://github.com/loreanvictor/render-jsx
abstraction dom frontend javascript jsx typescript
Last synced: 8 days ago
JSON representation
Tools for building JSX-based libraries / frameworks, also a super-thin and fast pure DOM renderer.
- Host: GitHub
- URL: https://github.com/loreanvictor/render-jsx
- Owner: loreanvictor
- License: mit
- Created: 2020-09-07T20:13:50.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2020-12-01T13:19:52.000Z (almost 4 years ago)
- Last Synced: 2024-10-13T07:08:55.413Z (23 days ago)
- Topics: abstraction, dom, frontend, javascript, jsx, typescript
- Language: TypeScript
- Homepage: https://loreanvictor.github.io/render-jsx/
- Size: 1.18 MB
- Stars: 39
- Watchers: 4
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Render-JSX
[](https://github.com/loreanvictor/render-jsx/actions?query=workflow%3A%22Test+and+Report+Coverage%22)
[](https://codecov.io/gh/loreanvictor/render-jsx)
[](https://www.npmjs.com/package/render-jsx)
Tools for building JSX-based libraries / frameworks, also a super-thin and fast pure DOM renderer.
```bash
npm i render-jsx
```
```tsx
/** @jsx renderer.create */
import { CommonDOMRenderer } from 'render-jsx/dom';
const renderer = new CommonDOMRenderer();
renderer.render(
Hellow World!
).on(document.body);
```
[► TRY IT!](https://stackblitz.com/edit/render-jsx-demo)
👉 [Read the Docs](https://loreanvictor.github.io/render-jsx/)
# Overview
[JSX](https://facebook.github.io/jsx/) is an syntax extension of JavaScript,
allowing for XML-style representations within JavaScript. JSX needs to be transpiled (since it is an extension),
with transpilers such as [TypeScript](https://www.typescriptlang.org) or [Babel](https://babeljs.io).
Transpilers in turn need to know what JSX should mean.
**Render-JSX** provides abstraction for specifying that _meaning_ in a highly extensible way, allowing re-use
of components and common JSX patterns across different domains.
For example, you can re-use your components (or your custom class-based component system) while rendering to DOM (client-side),
to HTML string (server side), to native UI libraries, to custom input format of a PDF generator, etc.
**Render-JSX** also comes with a super-thin and fast DOM renderer (which is mostly meant as a basis of more involved UI renderers).
This means you can use it to create simple web interfaces without any extra dependency.
👉 [Read the Docs](https://loreanvictor.github.io/render-jsx/docs/overview)
```
╭────────────────────╮ ╭────────────────────╮
│ │ │ │
│ App │────▶│ Components │╶╶╶╶╶╶╶╶╮
│ │╶╮ │ │ ╷
╰────────────────────╯ ╷ ╰────────────────────╯ ╷
│ ╷ │ ╷
╰────╮ ╰╶╶╶╶╶╶╶╶╶╶╶╶╶ │ ╶╶╶╶╶╶╶╶╶╶╶╶╶╶╮ ╷
│ │ ╷ ╷
╭────────────╮ ▼ ▼ ╷ ╷
╭─│ Renderer │────────────────────────────────╮ ╷ ╷
│ ╰────────────╯ │ ╷ ╷
│ ╭─────────────────────────────────╮ │ ╷ ╷
│ │ │ │ ╷ ╷
│ │ Plugins │╶╶╶╶╶╶╶╶╶╮ ╷ ╷
│ │ │ │ ╷ ╷ ╷
│ ╰─────────────────────────────────╯ │ ╷ ╷ ╷
│ │ │ ╷ ╷ ╷
│ ▼ │ ╷ ╷ ╷
│ ╭─────────────────────────────────╮ │ ╷ ╷ ╷
│ │ │ │ ╷ ╷ ╷
│ │ Base Renderer │ │ ╷ ╷ ╷
│ │ │ │ ╷ ╷ ╷
│ ╰─────────────────────────────────╯ │ ╷ ╷ ╷
│ │ │ ╷ ╷ ╷
╰────────────────────── │ ──────────────────────╯ ╷ ╷ ╷
│ ╷ ╷ ╷
▼ ▽ ▽ ▽
╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮ ╭──╮
│ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ ╰──╯ │
│ │
│ Environment / Context │
│ │
```
# Installation
Use starter templates:
- [JavaScript Starter Template](https://github.com/loreanvictor/render-jsx-starter-js)
- [TypeScript Starter Template](https://github.com/loreanvictor/render-jsx-starter-ts)
Or get the package:
```
npm i render-jsx
```
And use the following pragmas in your `.jsx`/`.tsx` files:
```
/** @jsx renderer.create */
/** @jsxFrag renderer.fragment */
```
👉 [Read the Docs](https://loreanvictor.github.io/render-jsx/docs/install)
# Contribution
There are no contribution guidelines or issue templates currently, so just be nice (and also note that this is REALLY early stage).
Useful commands for development / testing:
```bash
git clone https://github.com/loreanvictor/render-jsx.git
```
```bash
npm i # --> install dependencies
```
```bash
npm start # --> run `samples/index.tsx` on `localhost:3000`
```
```bash
npm test # --> run all tests
```
```bash
npm run cov:view # --> run tests and display the code coverage report
```
```bash
npm i -g @codedoc/cli # --> install CODEDOC cli (for working on docs)
```
```bash
codedoc install # --> install CODEDOC dependencies (for working on docs)
```
```bash
codedoc serve # --> serve docs on `localhost:3000/render-jsx` (from `docs/md/`)
```