A tiny library that turns JSX into DOM operations

Last update: Jul 20, 2022

dom-jsx-runtime

A tiny library that turns JSX into DOM operations

Usage

This library uses React's new JSX transform, so all you need to do is configure your build tool to use https://esm.sh/dom-jsx-runtime for jsxImportSource.

In Deno, for example, your deno.json file should look like this:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "https://esm.sh/dom-jsx-runtime"
  }
}

Example

From the test, run via deno test:

dom-jsx-runtimeA tiny library that turns JSX into DOM operations' Deno.test( 'Input and output HTML are identical', () => assertEquals(source, target) )"> 
import {assertEquals} from 'https://deno.land/std/testing/asserts.ts'
import {DOMParser} from 'https://deno.land/x/deno_dom/deno-dom-wasm.ts'
globalThis.document = new DOMParser().parseFromString('', 'text/html')

let dom =
  <html lang='en'>
    <head>
      <title>dom-jsx-runtime</title>
    </head>
    <body>A tiny library that turns JSX into DOM operations</body>
  </html>

let source = dom.outerHTML
let target = 'dom-jsx-runtimeA tiny library that turns JSX into DOM operations'

Deno.test(
  'Input and output HTML are identical',
  () => assertEquals(source, target)
)

GitHub

https://github.com/jed/dom-jsx-runtime
You might also like...

A javascript microframework to shorten daily use CSS class manipulator methods by adding them all into a single method

CSS Class Builder A small typescript package built to work with ReactJS to short

Jan 7, 2022

Open Source Module to Upload your Media and files into AWS S3 Bucket directly from Front-end React

react-aws-s3 Open Source Module to Upload your Media and files into AWS S3 Bucket directly from Front-end React. Help the Module developer (Amit Mishr

Jul 10, 2022

Just a small collection of hooks that make it easy to integrate React Query into a REST API

react-query-restful is just a small collection of hooks that make it easy to integrate React Query into a REST API.

May 7, 2022

Step-by-step guide on compiling C++ codes with Emscripten into wasm and using it with Webpack + Typescript + React setup

Step-by-step guide on compiling C++ codes with Emscripten into wasm and using it with Webpack + Typescript + React setup

Step-by-step guide on compiling C++ codes with Emscripten into wasm and using it with Webpack + Typescript + React setup

Jun 30, 2022

A React library to show an administrative UI for the Mock Service Worker JS library

A React library to show an administrative UI for the Mock Service Worker JS library

A React library to show an administrative UI for the Mock Service Worker JS library

May 27, 2022

:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server. Description The main obje

Aug 5, 2022

@use-gesture is a library that let you bind richer mouse and touch events to any component or view.

@use-gesture is a library that let you bind richer mouse and touch events to any component or view.

👇Bread n butter utility for component-tied mouse/touch gestures in React

Aug 3, 2022

📝 Self-configuring product tour library for React

📝 Self-configuring product tour library for React

React Spotlight Tour A self-configuring tutorial library for React. Blog | Docs | Demo | npm Features Clean and unobtrusive overlay to highlight the i

Jun 1, 2022

A lightweight react global state management library

Reate A lightweight react global state management library. ✨ Feature Simple and easy to use, only three APIs

Oct 26, 2021
Related tags
Miscellaneous dom-jsx-runtime
Appends a new DOM node to the end of the `document.body` and renders it's child React tree into it.

@react-lit/portal Appends a new DOM node to the end of the document.body and renders it's child React tree into it. Useful to break out of the DOM hie

Dec 9, 2021
JSONX - Create React Elements, JSX and HTML from JSON

JSONX Description JSONX is a module that creates React Elements, JSX and HTML from JSON. Declarative The JSONX UMD comes with batteries included so yo

Jul 25, 2022
Alt + Click on rendered JSX to open it's source code in VSCode
 Alt + Click on rendered JSX to open it's source code in VSCode

Alt + Click on rendered JSX to open it's source code in VSCode

Jul 7, 2022
🦁 <1kb compiler-augmented virtual DOM. It's fast!

English | 中文 <1kb compiler-augmented virtual DOM. It's fast! Current Virtual DOM implementations are inadequate—Ranging from overcomplicated to abando

Aug 4, 2022
Reactive DOM elements, based on mutableJS's state

mutableJS / DOM DOM elements, brought to life by @mutablejs/core FAQ Can mutableJS / DOM be standalone? In theory it can, but it is kinda pointless, s

Aug 4, 2022
Million + React - Write the same modern React with a faster Virtual DOM

Million makes creating user interfaces as easy as React, but with faster performance and smaller bundle size for the end user. By computing the user interface beforehand with a compiler, Million reduces the overhead of traditional Virtual DOM.

Jul 30, 2022
Converts HTML pages into React components
 Converts HTML pages into React components

Extract annotated portions of HTML into React components as separate modules. The structure of HTML is preserved by importing child components and rep

Aug 5, 2022
In this repo you will find the sample project where we dive deeper into the nuances of how hooks work, particularly in the context of the React render/rerender cycle.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Jan 29, 2022
This tutorial to guide you how to add react.js into shopify normal theme

Integrate-react.js-into-shopify-theme Tutorial to integrate the react.js into shopify theme https://prnt.sc/1w0rgx0 Step note: you have to run theme w

Jul 19, 2022
Lift a React component's state into the url
 Lift a React component's state into the url

with-url-state Lifts the state out of a react component and into the url Hooks There is a hook based api available on the 3.0.0 branch, published as a

May 11, 2022