Converts JSX to HTML strings at compile time.

Overview

unplugin-jsx-string npm

Unit Test

Converts JSX to HTML strings at compile time.

Installation

npm i unplugin-jsx-string
Vite
// vite.config.ts
import JsxString from 'unplugin-jsx-string/vite'

export default defineConfig({
  plugins: [JsxString()],
})


Rollup
// rollup.config.js
import JsxString from 'unplugin-jsx-string/rollup'

export default {
  plugins: [JsxString()],
}


esbuild
// esbuild.config.js
import { build } from 'esbuild'

build({
  plugins: [require('unplugin-jsx-string/esbuild')()],
})


Webpack
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [require('unplugin-jsx-string/webpack')()],
}


Vue CLI
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [require('unplugin-jsx-string/webpack')()],
  },
}


TypeScript Support

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-jsx-string" /* ... */]
  }
}

Usage

// basic usage
jsxToString(<div>Hello</div>)
// "<div>Hello</div>"

// class list
jsxToString(<div className={['bar', 'foo']} />)
// `<div class="bar foo"/>`

// styles
jsxToString(<div style={{ color: 'red', textAlign: 'center' }} />)
// `<div style="color:red;text-align:center"/>`

// events
jsxToString(<button onClick={() => 'clicked'}></button>)
// "<button onclick="&apos;clicked&apos;"></button>"

// children
jsxToString(
  <div>
    <p>foo</p>
    <p>bar</p>
    <br />
    <div />
    123
  </div>
)
// "<div><p>foo</p><p>bar</p><br/><div/>123</div>"

Benchmark

<div>Hello World</div> x 73,893 ops/sec ±0.76% (91 runs sampled)
<div><img src={'foo'} /><div></div></div> x 52,859 ops/sec ±0.77% (93 runs sampled)
Tested on Apple M1 Max / 32GB

More samples are welcome.

Sponsors

License

MIT License © 2022 三咲智子

Comments
Releases(v0.5.6)
Owner
三咲智子
Student | Entrepreneur | Full Stack Developer | @element-plus team member
三咲智子
Jsonup - This is a zero dependency compile-time JSON parser written in TypeScript

jsonup This is a zero dependency compile-time JSON parser written in TypeScript.

TANIGUCHI Masaya 39 Dec 8, 2022
Allows you to build fetcher function by URL at compile-time.

fetch.macro Allows you to build fetcher function by URL at compile-time. Usage Simply install and configure babel-plugin-macros and then use fetch.mac

RiN 18 Nov 7, 2022
Experimental compile-time optimizer for SolidJS

solid-optimizer Experimental compile-time optimizer for SolidJS Install npm i -D solid-optimizer yarn add -D solid-optimizer pnpm add -D solid-optimiz

Alexis H. Munsayac 6 Oct 21, 2022
Compile Master CSS ahead of time with zero-configuration integration with build tools

CSS Compiler Compile Master CSS ahead of time with zero-configuration integration with build tools On this page Usage webpack.config.js vite.config.js

Master 5 Oct 31, 2022
Command line tool that converts HTML to markdown.

@wcj/html-to-markdown HTML conversion tool to markdown. command line tool => @wcj/html-to-markdown-cli. Installation This package is ESM only: Node 14

小弟调调™ 11 Nov 6, 2022
Create a html response with JSX.

Htm Create a text/html response with JSX, powered by Preact and UnoCSS. Usage To use Htm, create a server.tsx file like this: /** @jsx h */ import {

X. 34 Dec 9, 2022
A simple nodejs module which is wrapper around solc that allows you to compile Solidity code

Simple Solidity Compiler It's a simple nodejs module which is wrapper around solc that allows you to compile Solidity code and get the abi and bytecod

King Rayhan 4 Feb 21, 2022
A Svelte parser that compiles to Mitosis JSON, allowing you to write Svelte components once and compile to every framework.

Sveltosis Still in development A Svelte parser that compiles to Mitosis JSON, allowing you to write Svelte components once and compile to every framew

sveltosis 70 Nov 24, 2022
A hardhat solidity template with necessary libraries that support to develop, compile, test, deploy, upgrade, verify solidity smart contract

solidity-hardhat-template A solidity hardhat template with necessary libraries that support to develop, compile, test, deploy, upgrade, verify solidit

ChimGoKien 4 Oct 16, 2022
Web Components engine based on JSX & TypeScript

WebCell Web Components engine based on JSX & TypeScript Usage Demo & GitHub template: https://web-cell.dev/scaffold/ Project bootstrap Command npm ini

null 162 Nov 17, 2022
High performance JSX web views for S.js applications

Surplus const name = S.data("world"), view = <h1>Hello {name()}!</h1>; document.body.appendChild(view); Surplus is a compiler and runtime to all

Adam Haile 587 Dec 30, 2022
Like JSX, but native and fast

esx High throughput React Server Side Rendering For a simplified example of esx in action, check out esx-demo. esx is designed to be a high speed SSR

ESX 645 Jan 2, 2023
converts nuggies to usd and usd to nuggies for a variety of restaurant chains. Also includes a rest api. Built using NextJS and TypeScript

Prices All prices are currently based on the 4-piece from the respective chain or the equivalent lowest amount of nuggies. Plan is to add multiple pri

Sean Maizel 2 Jan 14, 2022
A typescript transform that converts exported const enums into object literal.

ts-transformer-optimize-const-enum A typescript transformer that convert exported const enum into object literal. This is just like the one from @babe

Fonger 22 Jul 27, 2022
A Plugin which converts .md Files from Obsidian to your Kindle

Project 2: obsidian-kindle-export An Obsidian-Plugin which sends your Notes to your Kindle as .mobi File This is the exported .mobi File Introduction

Simerl 21 Dec 26, 2022
Converts your IPv4 address to a 4x4 2-bit PNG which you can extract the IP from.

IP-to-PNG Converts your IPv4 address to a 4x4 2-bit PNG which you can extract the IP from. https://www.npmjs.com/package/ip2png Run npm install ip2png

Görkem / Federal 18 Nov 30, 2022
Converts an iterable, iterable of Promises, or async iterable into a Promise of an Array.

iterate-all A utility function that converts any of these: Iterable<T> Iterable<Promise<T>> AsyncIterable<T> AsyncIterable<Promise<T>> Into this: Prom

Lily Scott 8 Jun 7, 2022
A generative engine that takes various png layers on a sprite sheet format, combines them and then converts them into a .gif file

Welcome to the Generative GIF Engine v2.0.4 ?? [8 minute read] This python and node app generates layered-based gifs to create NFT gif art! It is fast

Jalagar 112 Jan 2, 2023
✏️ Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped

Sugar High Introduction Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped Usage npm install --save sugar-high import { h

Jiachi Liu 67 Dec 8, 2022