From 4800a3bcacc2fb6334610d06f8b96e2eaee7aef9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Garc=C3=ADa?= Date: Tue, 1 Feb 2022 18:25:49 +0100 Subject: [PATCH] feat: update jsx examples --- examples/{jsx => }/app-jsx.js | 31 ++++++++++++++++++------------- examples/index-jsx.html | 2 +- examples/index.js | 15 ++++++++++++--- examples/jsx/app.jsx | 3 +++ examples/jsx/esbuild-jsx.js | 4 ++-- examples/jsx/h-shim.js | 20 +++++++++++++++----- 6 files changed, 51 insertions(+), 24 deletions(-) rename examples/{jsx => }/app-jsx.js (80%) diff --git a/examples/jsx/app-jsx.js b/examples/app-jsx.js similarity index 80% rename from examples/jsx/app-jsx.js rename to examples/app-jsx.js index 5deab3a..fb315e0 100644 --- a/examples/jsx/app-jsx.js +++ b/examples/app-jsx.js @@ -24,6 +24,11 @@ } 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__ || {}; @@ -31,14 +36,6 @@ !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 index 33f4bf8..4efc0d3 100644 --- a/examples/index-jsx.html +++ b/examples/index-jsx.html @@ -25,7 +25,7 @@

Counter

diff --git a/examples/index.js b/examples/index.js index b269231..45755d9 100644 --- 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 index 79c1246..8f58933 100644 --- a/examples/jsx/app.jsx +++ b/examples/jsx/app.jsx @@ -21,6 +21,9 @@ const content = () => ( (input = el)} onInput={add} name="input" type="number" value={count} /> + ); diff --git a/examples/jsx/esbuild-jsx.js b/examples/jsx/esbuild-jsx.js index 1fabc7f..068e7c2 100644 --- 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 index f769bd8..8516d13 100644 --- 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 };