feat: update jsx examples

gc-victor · Feb 1, 2022 · 4800a3b · 4800a3b
1 parent 11a2d8c
commit 4800a3b
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 24 deletions.
diff --git a/examples/jsx/app-jsx.js → examples/app-jsx.js b/examples/jsx/app-jsx.js → examples/app-jsx.js
@@ -24,21 +24,18 @@
  }
  for (let i = 0; i < length; i++) {
  const key = keys[i];
+ if (key && !/^key$|^on|^ref$|^$/.test(key)) {
+ if (key !== "checked" || key === "checked" && props[key]) {
+ element.setAttribute(key === "htmlFor" ? "for" : key === "className" ? "class" : CAMEL_PROPS.test(key) && key.replace(/[A-Z0-9]/, "-$&").toLowerCase() || key, props[key]);
+ }
+ }
  if (key && /^on/.test(key)) {
  const eventType = key.toLowerCase().substring(2);
  element.__handler__ = element.__handler__ || {};
  element.__handler__[eventType] = props[key];
  !events[eventType] && document.addEventListener(eventType, handler);
  events[eventType] = 1;
  }
- if (key && !/^key$/.test(key) && !/^on/.test(key) && !/^ref$/.test(key)) {
- const classProp = key === "className" ? "class" : "";
- const forProp = key === "htmlFor" ? "for" : "";
- const hyphenated = CAMEL_PROPS.test(key) && key.replace(/[A-Z0-9]/, "-$&").toLowerCase();
- if (key !== "checked" || key === "checked" && props[key]) {
- element.setAttribute(forProp || classProp || hyphenated || key, props[key]);
- }
- }
  if (key && /^key$/.test(key)) {
  element.__key__ = props[key];
  }
@@ -63,9 +60,17 @@
  var src_default = h2;
 
  // examples/jsx/h-shim.js
- var fragment = "__FRAGMENT__";
- function h(type, props, children) {
- return type !== fragment ? src_default(type, props, arguments.length > 3 ? [].slice.call(arguments, 2) : children) : [].slice.call(arguments, 2);
+ function h(type, props, ...children) {
+ if (typeof type === "function") {
+ return type({
+ ...props || {},
+ children: [].concat.apply([], children)
+ });
+ }
+ return src_default(type, props || {}, [].concat.apply([], children));
+ }
+ function Fragment(props) {
+ return props.children;
  }
 
  // examples/jsx/app.jsx
@@ -82,7 +87,7 @@
  var add = (ev) => {
  count = Number(ev.target.value);
  };
- var content = () => /* @__PURE__ */ h(fragment, null, /* @__PURE__ */ h("h1", null, "Counter"), /* @__PURE__ */ h("button", {
+ var content = () => /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h("h1", null, "Counter"), /* @__PURE__ */ h("button", {
  onClick: increment
  }, "+"), /* @__PURE__ */ h("input", {
  ref: (el) => input = el,
@@ -92,7 +97,7 @@
  value: count
  }), /* @__PURE__ */ h("button", {
  onClick: decrement
- }, "-"));
+ }, "-"), /* @__PURE__ */ h("ul", null, ["0", "1"].map((i) => /* @__PURE__ */ h("li", null, i))));
  var counter = () => {
  return /* @__PURE__ */ h("div", {
  id: "app"

diff --git a/examples/index-jsx.html b/examples/index-jsx.html
@@ -25,7 +25,7 @@ <h1>Counter</h1>
  <script type="importmap">
  {
  "imports": {
- "index": "./jsx/app-jsx.js"
+ "index": "./app-jsx.js"
  }
  }
  </script>

diff --git a/examples/index.js b/examples/index.js
@@ -9,7 +9,9 @@ const increment = () => {
 };
 const decrement = () => {
  count = count - 1;
- input.value = count;
+ // input.value = count;
+ const app = document.getElementById('app');
+ app.parentNode.replaceChild(counter(), app);
 };
 const add = (ev) => {
  count = Number(ev.target.value);
@@ -19,8 +21,15 @@ const counter = () => {
  return h('div', { id: 'app' }, [
  h('h1', null, ['Counter']),
  h('button', { onClick: increment }, ['+']),
- h('input', { ref: (el) => input = el, onInput: add, name: 'input', type: 'number', value: count }),
- h('button', { onClick: decrement }, ['-']),
+ h('input', {
+ ref: (el) => (input = el),
+ onInput: add,
+ name: 'input',
+ type: 'number',
+ value: count,
+ }),
+ ...['0', '1'].map((i) => h('span', {}, i)),
+ h('button', { onClick: decrement }, [h('span', {}, ['-'])]),
  ]);
 };
 

diff --git a/examples/jsx/app.jsx b/examples/jsx/app.jsx
@@ -21,6 +21,9 @@ const content = () => (
  <button onClick={increment}>+</button>
  <input ref={(el) => (input = el)} onInput={add} name="input" type="number" value={count} />
  <button onClick={decrement}>-</button>
+ <ul>
+ {['0', '1'].map((i) => <li>{i}</li>)}
+ </ul>
  </>
 );
 

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