feat: add JSX fragment

gc-victor · Nov 2, 2021 · 11a2d8c · 11a2d8c
1 parent 31edb99
commit 11a2d8c
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 17 deletions.
diff --git a/examples/jsx/app-jsx.js b/examples/jsx/app-jsx.js
@@ -63,8 +63,9 @@
  var src_default = h2;
 
  // examples/jsx/h-shim.js
+ var fragment = "__FRAGMENT__";
  function h(type, props, children) {
- return src_default(type, props, arguments.length > 3 ? [].slice.call(arguments, 2) : children);
+ return type !== fragment ? src_default(type, props, arguments.length > 3 ? [].slice.call(arguments, 2) : children) : [].slice.call(arguments, 2);
  }
 
  // examples/jsx/app.jsx
@@ -81,20 +82,21 @@
  var add = (ev) => {
  count = Number(ev.target.value);
  };
+ var content = () => /* @__PURE__ */ h(fragment, null, /* @__PURE__ */ h("h1", null, "Counter"), /* @__PURE__ */ h("button", {
+ onClick: increment
+ }, "+"), /* @__PURE__ */ h("input", {
+ ref: (el) => input = el,
+ onInput: add,
+ name: "input",
+ type: "number",
+ value: count
+ }), /* @__PURE__ */ h("button", {
+ onClick: decrement
+ }, "-"));
  var counter = () => {
  return /* @__PURE__ */ h("div", {
  id: "app"
- }, /* @__PURE__ */ h("h1", null, "Counter"), /* @__PURE__ */ h("button", {
- onClick: increment
- }, "+"), /* @__PURE__ */ h("input", {
- ref: (el) => input = el,
- onInput: add,
- name: "input",
- type: "number",
- value: count
- }), /* @__PURE__ */ h("button", {
- onClick: decrement
- }, "-"));
+ }, content());
  };
  var app = document.getElementById("app");
  app.parentNode.replaceChild(counter(), app);

diff --git a/examples/jsx/app.jsx b/examples/jsx/app.jsx
@@ -15,13 +15,17 @@ const add = (ev) => {
  count = Number(ev.target.value);
 };
 
-const counter = () => {
- return <div id="app">
+const content = () => (
+ <>
  <h1>Counter</h1>
  <button onClick={increment}>+</button>
- <input ref={(el) => input = el} onInput={add} name="input" type="number" value={count} />
+ <input ref={(el) => (input = el)} onInput={add} name="input" type="number" value={count} />
  <button onClick={decrement}>-</button>
- </div>;
+ </>
+);
+
+const counter = () => {
+ return <div id="app">{content()}</div>;
 };
 
 const app = document.getElementById('app');

diff --git a/examples/jsx/esbuild-jsx.js b/examples/jsx/esbuild-jsx.js
@@ -2,6 +2,7 @@ require('esbuild').buildSync({
  entryPoints: ['examples/jsx/app.jsx'],
  inject: ['examples/jsx/h-shim.js'],
  jsxFactory: 'h',
+ jsxFragment: 'fragment',
  bundle: true,
  outfile: 'examples/jsx/app-jsx.js',
 });
diff --git a/examples/jsx/h-shim.js b/examples/jsx/h-shim.js
@@ -1,5 +1,8 @@
 import hh from '../src/index.js';
 
+export const fragment = '__FRAGMENT__';
 export default function h(type, props, children) {
- return hh(type, props, arguments.length > 3 ? [].slice.call(arguments, 2) : children);
+ return type !== fragment
+ ? hh(type, props, arguments.length > 3 ? [].slice.call(arguments, 2) : children)
+ : [].slice.call(arguments, 2);
 }