{"_id":"@aduh95/async-jsx","_rev":"5-74dc186f9c66a5a177947002a14ce306","name":"@aduh95/async-jsx","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@aduh95/async-jsx","version":"0.1.0","description":"JSX syntax for vanilla JS, and async","main":"index.js","directories":{"lib":"lib"},"scripts":{"build":"tsc"},"repository":{"type":"git","url":"git+https://github.com/aduh95/async-jsx.git"},"keywords":["jsx","react","typescript"],"author":{"name":"Antoine du Hamel","email":"duhamelantoine1995@gmail.com"},"license":"MIT","devDependencies":{"typescript":"^3.6.3"},"gitHead":"34306e990fccf1481d0f94e94957499d6df4f798","bugs":{"url":"https://github.com/aduh95/async-jsx/issues"},"homepage":"https://github.com/aduh95/async-jsx#readme","_id":"@aduh95/async-jsx@0.1.0","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-VDoRiSczQJ+nBL+efNCWrjLVztGo0Ojx2aMr8GJUR47I9HkFsVpIEX3BVNEnpVlyxMdgUwdMBcAFeiEJATuRlw==","shasum":"a238ee5c0a77df6cb1efa017aee6e15ff5740d99","tarball":"https://registry.npmjs.org/@aduh95/async-jsx/-/async-jsx-0.1.0.tgz","fileCount":54,"unpackedSize":39525,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdfllFCRA9TVsSAnZWagAApkMP+QAYWvLlczmYvrWVXxWR\nzdezi6FRWYRYgTNUjaP1lQVNVo8ormFc+LK0qjQ4IJwXXJ0+vGB3AHvJ3ptp\nUbI744rx7t7zbYiJUzseIzvTJ0lY4JAVhQbIlqJX0i4ETd5heIZwO9l9nKgJ\n5gjnApN4SzSgLy1B9ZAB5121c7jXMHCmeh1eVxH4j6M9ayrxGw4EiX2l3vgl\nxFXqK3khNOQAC91ftzT1iABLn+2Jak4K7Cf+ZnCs3fpvvZRC+Rnb8PojZKn3\nSuoYLuz6ppvA0WcycL128wY/PaMgkjL8ETQ/huWRIEFKztg7/94H8IcjVYi5\nVfEPmYdCw9hTtK5bGyRbUYxfCOvpLWmSKm7jir34sun8+QvPHV09oo8Z1WCp\nKYi/g1hRaXycIWFgGBTLpCQf0LBmLVAlc2ZL8bDql25BXhhoDuj++lFvzK2c\ncmbvcqUN1RJcazNOhRVbYVSCqdi+gVVzN3WzXF2RMiHVGhF+0mvtvMJM/bXG\noSwCcpOrKsWjIbN57ta/cBUNk9hP6vk3g1ed6p3KlyDCgEznx/uQ+82pNSCp\nfXySNRBVIc9++qLy7nHqBLIOeamppoFOS3w4CRwG4Llr/Ir0bG7waLR6vSd3\n+2RU4DQ6IK+T4vqjZwD0FtiTD1aHTRHcC0pmZTmZHDs1ClCtnal1EB4JdT0x\nO+hi\r\n=3/yG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHjsSci7ZawE8fAW40ybS4AZ33LNbRffw7WT6TW1f10AIgLlPoLpcnjUqH4M9JkpyaOUoNgTIbSu2gqxFUg8My2bw="}]},"maintainers":[{"name":"aduh95","email":"duhamelantoine1995@gmail.com"}],"_npmUser":{"name":"aduh95","email":"duhamelantoine1995@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/async-jsx_0.1.0_1568561476810_0.26182995008211063"},"_hasShrinkwrap":false},"0.1.1":{"name":"@aduh95/async-jsx","version":"0.1.1","description":"JSX syntax for vanilla JS, and async","module":"dist/index.js","types":"dist/index.d.ts","directories":{"lib":"lib"},"scripts":{"build":"tsc","prepack":"tsc"},"repository":{"type":"git","url":"git+https://github.com/aduh95/async-jsx.git"},"keywords":["jsx","react","typescript"],"author":{"name":"Antoine du Hamel","email":"duhamelantoine1995@gmail.com"},"license":"MIT","devDependencies":{"typescript":"^3.6.3"},"gitHead":"9e6efcc35bdae831b6245f0551a586156cc232e5","bugs":{"url":"https://github.com/aduh95/async-jsx/issues"},"homepage":"https://github.com/aduh95/async-jsx#readme","_id":"@aduh95/async-jsx@0.1.1","_nodeVersion":"12.9.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-IEOZEuiDXv4GkGEThJNbpX8mmlXm9yqdrB652cW75eH1jyRnDu0d1PJmH5sAWeqynfvN6YE8onybWcDMtZ0WwQ==","shasum":"14bf8cffd3b8bfecf706ed48e2b2c5360d00babe","tarball":"https://registry.npmjs.org/@aduh95/async-jsx/-/async-jsx-0.1.1.tgz","fileCount":71,"unpackedSize":56365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgCiZCRA9TVsSAnZWagAAcisQAI8z/mk5BRF/LlLH1i5W\nIkvoyvahAx77ewhckGRyiPDeeso4EgP3XrzYXfG565Gn865CaTLsrx9BYcqY\nowVvPl1KRBT/gH80x2rNkBQm6fia+IlF6IZyrYLDmEmonawVd2W1qyIu7Cxn\nhqZ/PgfRxmjnOlI42+dZih36vn/1pfm50W9FokUZJkw/BwBw9+xj+tkyOg59\nPwLF8FqYaYacAOPa68q6YkcCSeKCJG9Pv3XcophjnmP3tVCQTzJ/w//wxXnm\nzdsysPzvNTVxX2U3yKJp54wG1mA9fEDGYEo0IyVOxgq/Se4NpXMU8/I0rYvn\nYcK71I2A7/SnfSz8kQAwZboEzSfnqG+EbtFSN7ineo+LTq80nvip6EUJoSgf\npWAbU9V6UIHhkyFFig+FuVsH0bzmpyC+PF61kklUBW6c74QkNsP0lU4nT2Qg\ngV9BzmirnKzcQAcX4+ZHc7ufppaIRGnXFZBh+7kbivsiG39xG6crB7lB3rAm\nethQRzoCuTK2fMPWkC5lYj3Xah+jayLawhdBXXenzEq26KavG4L7JCfCmKQO\n+WpxKaL4Kf7gbjZ/Wf8exQl0UQ0Z13ZuLPbLp81ffPv8UCi+49vSAZ9yIpjR\nmJgPShqDS2dsP53VmxF9Rc8XO/blkruteLsDNCqYoRsIRFlMLnqqI9HmhVIH\nOx/z\r\n=/CLc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgFqGSWIK0DjEmCAaDX2efPkzv7+6R0gAQBdpeeBI+rAIhAOYiNorzaSzdk4gh+eILiG2Px7Euh+VlHgH9HYcX0uYO"}]},"maintainers":[{"name":"aduh95","email":"duhamelantoine1995@gmail.com"}],"_npmUser":{"name":"aduh95","email":"duhamelantoine1995@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/async-jsx_0.1.1_1568680088476_0.5947636154131972"},"_hasShrinkwrap":false},"0.1.2":{"name":"@aduh95/async-jsx","version":"0.1.2","description":"JSX syntax for vanilla JS, and async","module":"dist/index.js","types":"dist/index.d.ts","directories":{"lib":"lib"},"scripts":{"build":"tsc","prepack":"tsc"},"repository":{"type":"git","url":"git+https://github.com/aduh95/async-jsx.git"},"keywords":["jsx","react","typescript"],"author":{"name":"Antoine du Hamel","email":"duhamelantoine1995@gmail.com"},"license":"MIT","devDependencies":{"typescript":"^3.6.3"},"gitHead":"2ade62957f4e05623418bd5ecb2c4e8844070ef1","bugs":{"url":"https://github.com/aduh95/async-jsx/issues"},"homepage":"https://github.com/aduh95/async-jsx#readme","_id":"@aduh95/async-jsx@0.1.2","_nodeVersion":"12.9.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-KAAa8/rxJjINc9PEbieePoAwloOz7WDELNiV/PMU0mqCpLmdteF4QKqZwQvsPN8kAZ31W2PpwRqchPd/hPWZLA==","shasum":"f02a7174928c899efc1bb8513b95136fc0bf1a0b","tarball":"https://registry.npmjs.org/@aduh95/async-jsx/-/async-jsx-0.1.2.tgz","fileCount":71,"unpackedSize":56353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgC8VCRA9TVsSAnZWagAA7PwP/2pFRVJ5xwKs0uuLMUXn\nCAcLnNTWFnNhta83BEOS52x8F4WyEzX06WZyINoM/E0aegutyT7VGiSoYByG\ndsVfrURghGYKEsQMr+PCFGRU6X7D3YpL5eVuEbIK6IZObihpEfq2xOsJlxC3\nn4Of0EMA0d+gWrDqHqPaCGo7ghjpsRQ+YsMruR5XLvRW+WdNiC9//aJ74hlC\nSFTBDHFse8Cd13CNjfBAz4FgjzUjF6zZGtvV4COUr019Wj+Ch7/llXUBHpQO\nxZWcpDmeFMKdGTKAKcp8TaqQhIU2lQTLhQ09DNsPNvku45/uaGa7eGMbxXJg\n5x1vSAL+Nevc83HY733lM8xpvP+2tjOqUQB/mLtJqxNCT9vFZ7tHGqpAgEui\n5pnZUA/av15N0ff+vGbbsL9p3i4OGPQVxTqsQ8gFNp/UI0vfL14OfUl9UYJh\nvsdTMHAJgzN72KFXQwYQlkeJCfJm7pRc5VQ4E4iNcrjkzcHK2df/q1DzWVmj\nM9WPahfHGDwQSx2uHHglerKWAfEzV9EnHBldUSBWzRnXdUrQ4fviEy7/aUtT\n2G4Yrn4TNnbFigsYmbIttQ+svyPL+F5UqOXBMjvE+voVx6vdS75ToEcOwn8b\nanMJs6+82Ax3cmBjFypBmTRG7+E19sq31n6Wfupc9R7H/G8Jk8aZFDOI7C4K\ng+6g\r\n=s+Ir\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGGzsLfWzb9s90zdRXVZ4nHRZv2OQMIJzYWplEfp0Z0FAiEAkWZ2eB6fqjCwMg9dzt3LEF2kqDILTZixK6/w2FoPh/M="}]},"maintainers":[{"name":"aduh95","email":"duhamelantoine1995@gmail.com"}],"_npmUser":{"name":"aduh95","email":"duhamelantoine1995@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/async-jsx_0.1.2_1568681748488_0.3210590140206948"},"_hasShrinkwrap":false},"0.2.0-0":{"name":"@aduh95/async-jsx","version":"0.2.0-0","description":"JSX syntax for vanilla JS, and async","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","type":"module","scripts":{"build":"tsc","prepack":"tsc"},"repository":{"type":"git","url":"git+https://github.com/aduh95/async-jsx.git"},"keywords":["jsx","react","typescript"],"author":{"name":"Antoine du Hamel","email":"duhamelantoine1995@gmail.com"},"license":"MIT","devDependencies":{"typescript":"^3.6.3"},"gitHead":"50f7b02d02dcb1ced2824cbee5c5586c690e72b5","bugs":{"url":"https://github.com/aduh95/async-jsx/issues"},"homepage":"https://github.com/aduh95/async-jsx#readme","_id":"@aduh95/async-jsx@0.2.0-0","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-NHjxAKaPO0Qn+tVpvyBxjxZaky3onZbiIjK4eUk5RX6rqOiYz4RBmb+ACOmoOE9cgn9+V3apsumec/JOnTuPTA==","shasum":"168f7748dc571013504846d0bc1bf72eed362e5c","tarball":"https://registry.npmjs.org/@aduh95/async-jsx/-/async-jsx-0.2.0-0.tgz","fileCount":75,"unpackedSize":63045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdj4x7CRA9TVsSAnZWagAAa5oQAJzcIhKof7M8ocSwngsm\nNq0DFYUqfMkSILPpffl1W+3jldtL5GfVzGXUWCnbbXPv+em86sOmFblVEmKf\nc7NjGl0tZq2prJfGKCD+EL+oCLPn125BPBTH/j/1AvZGfBiz007QQIgTG7oB\n6P47yswzqQI49nsWcphKTN8pG6zdHhYJV0DjfWPHm1kRozpeq4loyoX+zGvA\nc4zmX8ddd2JkatKP4ev3GhDs5WVrJ0mH65gR5ExfcksGDfxNZ1W5XGZp7kmf\nNYaLVlW1RsXSBVRPQes051a85I4qZ0efLGSE/iL7UWPpPHby29WJh1QcVBP/\nUiN08cBjY5r3/rs/pnGKSNvLEd95zefW6mS0XptwgC0VpBWVSktgiaICWfTG\n+yGUsSsVTAEAdCTJWGR1BrE8oymCj/oytMDGh4GrGdcIUK95gkAVM4XFeEak\nQRGachUt7AqztkBRp0JCyIklcL5fgf6zTnEhC8WfNtH78tXjJxmjpfuYuR9f\nt6rmhLbpGpjBjSPDUYDlFBmir1/717KrmTUGhQ845Ug8XPYVRPNTfoXh8tdT\nnGJbpvqrnR+WxdUF6n0fGM093VQ+C0gUfNr9ewuhC1spzgxAC+sbBI2zv05P\ne8VrquWoMUThrlb7EuvLekPKmOUKTBenMzOa5caFfA7273fUUUDcZG7kmce4\njHJ5\r\n=xpn9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDR0BFbCAloDSweP2VADUsljicPo/qa4pDjiM66ufDU+QIgDQ5Hx5/h1Cr7jdWbeGf/nZUkMz4zpfFvqeCP1iq7Q1U="}]},"maintainers":[{"name":"aduh95","email":"duhamelantoine1995@gmail.com"}],"_npmUser":{"name":"aduh95","email":"duhamelantoine1995@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/async-jsx_0.2.0-0_1569688698803_0.535938100223446"},"_hasShrinkwrap":false},"0.2.0":{"name":"@aduh95/async-jsx","version":"0.2.0","description":"JSX syntax for vanilla JS, and async","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","type":"module","scripts":{"build":"tsc","prepack":"tsc"},"repository":{"type":"git","url":"git+https://github.com/aduh95/async-jsx.git"},"keywords":["jsx","react","typescript"],"author":{"name":"Antoine du Hamel","email":"duhamelantoine1995@gmail.com"},"license":"MIT","devDependencies":{"typescript":"^3.7.2"},"gitHead":"a4cee9ac750e2731f8840ab5e1aba86acafdd8c9","bugs":{"url":"https://github.com/aduh95/async-jsx/issues"},"homepage":"https://github.com/aduh95/async-jsx#readme","_id":"@aduh95/async-jsx@0.2.0","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-/o5O/gt1jCMNK7oPDhQRWXDtnPa2H6S+mUAUDi8D6riSKnsgcd1fGGYEnsj6ySqPjA5zcZRwvNs5wuRs22iKcA==","shasum":"cca8e77d42c911947366828f2df97df77244ccd2","tarball":"https://registry.npmjs.org/@aduh95/async-jsx/-/async-jsx-0.2.0.tgz","fileCount":75,"unpackedSize":63756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1p4/CRA9TVsSAnZWagAA6KQP/3Q06uDz8HFFzy8o71Ku\n362TIC48ALO9Zk0yLHcTwxLe5bz0TypGWl2Y+IJZ2VKMpk8ffqI1u+irneid\n5lmQBYrT5fKJlP/rgMMw1D06iOeLuHO5RJ6GL+D9QdbTm4VzPfQFUSrdbKgG\nuuP92TfeZclR0IEMoObpNf5TOEkCJFlvkZsRVDdQHjzXRDAUa8cehwkhT4h/\n3Tq46XxUuPbAcdjQjhfOhAmrdpjBeBYC/6c24kfo4joUzGz2QedXMNCo8U+j\n49skZVaHcmtIMcMz/RS6XJj9c6ZDyYtd1gpjYqPoq2oI3moU2iIia097JTNK\n62urZR/DfE8f7PsmMArq6yL+7+pT2G9L0OXK5Mv3apOfZXENMpGIN9j/Jm95\n4CKPxUKvvnzVVzOBkBAtwlT0plV1BVLEETybTMODqta+qL1m8RLxCsvVuXMS\nXWbbJZI/LTUJxmFz7Lpk5z24jatomEWKjM8OemABvJk6fool2IG65MnmWXsq\nvK2qMZJ4DJ3pdX6t8ZlT0g41xZUMXTT7fdPCmlFjcR42hvRyB+fkpbAFzIr8\nzm1Em+j9tk9kJ3T5dEpWrZaZYEHBjzJQgsnzKXHMGi26MF+I28tWl7WDUZJB\nTDP2cd8UW2+VO8nMskStMjb3EaREPeUhOEsm+MWOw9wcISjhHSMqHFstwVEq\n8lwD\r\n=ChBF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdgURqfcoPCpD0elnXh4EG5thuKaybth7I+jb2v/5e8gIgVyc9boH+vTH21cEKaPK7QWaS02naEMQYPGGbuOPIwnw="}]},"maintainers":[{"name":"aduh95","email":"duhamelantoine1995@gmail.com"}],"_npmUser":{"name":"aduh95","email":"duhamelantoine1995@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/async-jsx_0.2.0_1574346302802_0.24993785101852906"},"_hasShrinkwrap":false}},"time":{"created":"2019-09-15T15:31:16.577Z","0.1.0":"2019-09-15T15:31:16.933Z","modified":"2022-04-04T11:38:02.409Z","0.1.1":"2019-09-17T00:28:08.681Z","0.1.2":"2019-09-17T00:55:48.622Z","0.2.0-0":"2019-09-28T16:38:18.930Z","0.2.0":"2019-11-21T14:25:02.912Z"},"maintainers":[{"name":"aduh95","email":"duhamelantoine1995@gmail.com"}],"description":"JSX syntax for vanilla JS, and async","homepage":"https://github.com/aduh95/async-jsx#readme","keywords":["jsx","react","typescript"],"repository":{"type":"git","url":"git+https://github.com/aduh95/async-jsx.git"},"author":{"name":"Antoine du Hamel","email":"duhamelantoine1995@gmail.com"},"bugs":{"url":"https://github.com/aduh95/async-jsx/issues"},"license":"MIT","readme":"# Async-JSX\n\nThis package aims to give you the opportunity to use the JSX syntax introduced\nby React, without using React at all.\n\nKey differrences with React API:\n\n- No VirtualDOM (less overhead, but also less reactivity)\n- Everything is asynchronous\n- No Component life-cycle\n\n## Usage\n\n### Get Started\n\n```js\nimport { h } from \"@aduh95/async-jsx\";\n\nconst element =
Hello World
;\n\nconsole.log(element instanceof Promise); // true\n\nelement.then(domElement => console.log(domElement instanceof HTMLElement)); // true\n\ndocument.body.append(renderAsync(element));\n```\n\nIt is recommanded to add this CSS to your page to avoid custom elements leaking\ninto your design:\n\n```css\nasync-component,\nconditional-element {\n display: contents;\n}\ndom-portal {\n display: none;\n}\n```\n\n### Build tools\n\n#### With Babel\n\nYou can use the `@babel/plugin-transform-react-jsx` package:\n\n```json\n{\n \"plugins\": [\n [\n \"@babel/plugin-transform-react-jsx\",\n { \"pragma\": \"h\", \"pragmaFrag\": \"Fragment\" }\n ]\n ]\n}\n```\n\n#### With TypeScript\n\nIn the `tsconfig.json`:\n\n```json\n{\n \"compilerOptions\": {\n \"jsx\": \"react\",\n \"jsxFactory\": \"h\"\n }\n}\n```\n\n### With dynamic imports\n\nYou can define a component in a separate file and lazy-load it:\n\n```js\n/* Greetings.js */\nimport { h } from \"@aduh95/async-jsx\";\n\n// You can use an arrow function instead of a class\nexport default props => (\n
Hello {props.name}
\n);\n```\n\n```js\n/* App.js */\nimport {\n h,\n lazy,\n Component,\n Fragment,\n conditionalRendering,\n} from \"@aduh95/async-jsx\";\nconst Greetings = lazy(() => import(\"./Greetings.js\"));\n\nexport default class App extends Component {\n stateObservers = new Set();\n greetingName = \"\";\n\n _handleNewName = this.handleNewName.bind(this);\n\n handleNewName(ev) {\n const { target } = ev;\n this.greetingName = target.value;\n this.stateObservers.forEach(fn => fn(\"ready\"));\n }\n\n render() {\n return (\n <>\n

Welcome

\n {conidtionalRendering(\n {\n ready: ,\n askForName: (\n \n ),\n },\n this.stateObservers,\n ready,\n console.error\n )}\n \n );\n }\n}\n```\n\n### StatfulComponent\n\nI have added a React-compatible `StatefulComponent`, which can be used the same\nway as a `React.Component`. However, because of the lack of VirtualDOM, it can\nbe highly inneficient to use it. For example, let's take the Clocl example from\nReact docs:\n\n```js\nimport { h, StatefulComponent } from \"@aduh95/async-jsx\";\nclass Clock extends StatefulComponent {\n constructor(props) {\n super(props);\n this.state = { date: new Date() };\n }\n\n componentDidMount() {\n this.timerID = setInterval(() => this.tick(), 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.timerID);\n }\n\n tick() {\n this.setState({\n date: new Date(),\n });\n }\n\n render() {\n return (\n
\n

Hello, world!

\n

It is {this.state.date.toLocaleTimeString()}.

\n
\n );\n }\n}\n\ndocument\n .getElementById(\"root\")\n .append(renderAsync(, null, console.error));\n```\n\nThis will work apparently, but at each tick, 3 DOM elements are initiated. Perf\ndifference may not be visible on that small example, but you can imagine that\nhaving a whole site re-render everytime something change will put a lot of\npressure on small-CPU clients.\n\n### SVG Elements\n\nBecause SVG Elements cannot be created using `Document.prototype.createElement`,\nbut by `Document.prototype.createElementNS`, they cannot be created by the usual\n`h` p(or `createElement`) function. pIf you want to create SVG elements using\nJSX, you can put them in a separate module:\n\n```js\n// Logo.js\nimport { createSVGElement as h } from \"../utils/jsx.js\";\n\nexport default () => (\n \n \n \n);\n```\n\nThen you can import this module in another component:\n\n```js\nimport { Component, h } from \"../utils/jsx.js\";\nimport Logo from \"./Logo.js\";\n\nexport default class Header extends Component {\n render() {\n return (\n
\n \n

Title

\n
\n );\n }\n}\n```\n\n## API\n\nThis repo is using TypeScript, you can use it to have access to the\ndocumentation during development. The API is defined by the `.d.ts` files.\n","readmeFilename":"README.MD"}