21

jsxdirect: Client-side JSX transpiler supporting entire script blocks, functions...

 5 years ago
source link: https://www.tuicool.com/articles/hit/fumuiqv
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

jsxdirect

A browser based JSX transpiler supporting entire script blocks, functions, and simple HTML.

Usage

preact.h
jsx.compile

The example below can be found in the examples directory. 

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/preact/dist/preact.js"></script>
<script src="../index.js"></script>

<script type="text/jsx">
class Clock extends preact.Component {
  render() {
	let time = new Date().toLocaleTimeString();
      return (<div>Time:<span>${ time }</span></div>);
  }
}
</script>

<script>
jsx.compile({env:"preact"});
</script>

</head>
<body>

<div id="clock"></div>
<div id="hello"></div>
<div id="cool"></div>

<script>
preact.render(new Clock().render(),document.getElementById("clock"));

preact.render(jsx(
		`<div id='foo'>
		<span> Hello, world! </span>
		<button onclick={ e => alert('hi!') }>Click Me</button>
		</div>`,{env:"preact"}),document.getElementById("hello"));
		
preact.render(jsx.compile({env:"preact"},"function() { return(<div>Pretty cool, huh?</div>) }")(),document.getElementById("cool"));
</script>

</body>
</html>

Or, as you can see above, wrap JSX in jsx(<jsx string>,<options>) and pass it directly to a VDOM consumer.

Or, compile functions containing JSX using jsx.compile(<options>,<function definition string>) , and pass the result of invoking them to a VDOM consumer.

Credits

The JSX parser is based on the work of @stolksdorf.

License

MIT

Release History (reverse chronological order)

2018-06-25 v0.0.1 Initial public release


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK