Break from JSX-No-React + minor child code improvements

Author: JaredSartin

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 2.1.2
+We are now `jsx-standalone` - to continue the minimal approaches of `jsx-no-react` in the past. The previous repo has been archived and abandoned - so this is the new ongoing support.
+
 # 2.0.0
 
  Breaking changes introduced with rendering modes - `renderAndReplace` is now called `render` to follow common practice with SPA frameworks rendering mechanisms. Additionally, the render locations below are more explicit on where they will place the JSX output. Finally, prepend and append now support top-level JSX fragments (before and after render locations require a top-level container element still).
@@ -25,7 +28,7 @@ Sadly the previous release had old code in it, this release fixes it.
 
 This release needs extra care in the babel configuration to make Fragments work.
 You need to replace `babel-plugin-transform-react-jsx` with `@babel/preset-react`.
-Please check the [README](https://github.com/bitboxer/jsx-no-react/blob/main/README.md)
+Please check the [README](https://github.com/jaredsartin/jsx-standalone/blob/main/README.md)
 for details.
 
 # 0.5.0

README.md

@@ -1,26 +1,11 @@
-# jsx-no-react
+# jsx-standalone
 
-[![Build Status](https://github.com/jaredsartin/jsx-no-react/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/jaredsartin/jsx-no-react/actions/workflows/node.js.yml)
-
-`jsx-no-react` makes it possible to use React's JSX syntax outside of React projects. Using `renderBefore` and `renderAfter` requires a modern browser supporting `Element.insertAdjacentElement()` - all other render modes function in legacy browsers.
+`jsx-standalone` makes it possible to use React's JSX syntax outside of React projects. Using `renderBefore` and `renderAfter` requires a modern browser supporting `Element.insertAdjacentElement()` - all other render modes function in legacy browsers.
 
 ## Installation
 
 ```sh
-yarn add jsx-no-react
-```
-
-### Upgrading
-
-2.0.0 introduces breaking changes with rendering modes - `renderAndReplace` is now called `render` to follow common practice with SPA frameworks rendering mechanisms. Additionally, the render locations below are more explicit on where they will place the JSX output. Finally, prepend and append now support top-level JSX fragments (before and after render locations require a top-level container element still).
-
-New methods:
-```js
-renderBefore(<Hello name="world" />, targetElement);
-renderPrepend(<Hello name="world" />, targetElement);
-render(<Hello name="world" />, targetElement);
-renderAppend(<Hello name="world" />, targetElement);
-renderAfter(<Hello name="world" />, targetElement);
+yarn add jsx-standalone
 ```
 
 ### Usage in Babel
@@ -57,10 +42,10 @@ Details on how to inject jsxElem as builder can be found [in the esbuild documen
 
 ### Basic
 
-The `jsx-no-react` package just defines a function to replace the `React.createElement`, so as well as importing the relevant function into scope where you want to use JSX:
+The `jsx-standalone` package just defines a function to replace the `React.createElement`, so as well as importing the relevant function into scope where you want to use JSX:
 
 ```javascript
-import jsxElem, { render } from "jsx-no-react";
+import jsxElem, { render } from "jsx-standalone";
 
 function App(props) {
   return <div>Hello {props.name}</div>;
@@ -72,7 +57,7 @@ render(<App name="world" />, document.body);
 or
 
 ```javascript
-import jsxElem, { render } from "jsx-no-react";
+import jsxElem, { render } from "jsx-standalone";
 
 function App(name) {
   return <div>Hello {name}</div>;
@@ -117,7 +102,7 @@ When rendering a component JSX attributes will be passed as single object.
 For example:
 
 ```javascript
-import jsxElem, { render } from "jsx-no-react";
+import jsxElem, { render } from "jsx-standalone";
 
 function Hello(props) {
   return <h1>Hello {props.name}</h1>;
@@ -134,7 +119,7 @@ There are several ways to render an element:
 - `renderAfter`: this function renders the JSX element after after the target element - top level JSX element must not be a fragment.
 
 ```javascript
-import jsxElem, { render, renderAfterEnd, renderBeforeEnd, renderAndReplace } from "jsx-no-react";
+import jsxElem, { render, renderAfterEnd, renderBeforeEnd, renderAndReplace } from "jsx-standalone";
 
 function Hello(props) {
   return <h1>Hello {props.name}</h1>;
@@ -152,7 +137,7 @@ renderAfter(<Hello name="world" />, document.body);
 Components can be reused and combined together.
 
 ```javascript
-import jsxElem, { render } from "jsx-no-react";
+import jsxElem, { render } from "jsx-standalone";
 
 function Hello(props) {
   return <h1>Hello {props.name}</h1>;
@@ -293,7 +278,7 @@ function App() {
 Object can be passed to the `style` attribute with keys in camelCase.
 
 ```javascript
-import jsxElem, { render } from "jsx-no-react";
+import jsxElem, { render } from "jsx-standalone";
 
 function Hello(props) {
   return <h1>Hello {props.name}</h1>;

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "jsx-no-react",
-  "version": "2.1.0",
+  "name": "jsx-standalone",
+  "version": "2.1.2",
   "description": "Use JSX without React",
-  "repository": "https://github.com/bitboxer/jsx-no-react",
-  "author": "Terry Kerr <[email protected]>",
+  "repository": "https://github.com/jaredsartin/jsx-standalone",
+  "author": "Jared Sartin <[email protected]>",
   "contributors": [
     "Bodo Tasche <[email protected]>",
     "Matteo Barison <[email protected]>",
-    "Jared Sartin <[email protected]>"
+    "Terry Kerr <[email protected]>"
   ],
   "license": "MPL-2.0",
   "private": false,

src/module.js

@@ -116,16 +116,18 @@ function converter(tag, attrs, ...children) {
   }
 
   const handledAsFunc = typeof tag === 'function' && typeof tag?.name === 'string' && tag?.name !== 'Fragment';
+
   if (handledAsFunc) {
     attrs = attrs || {};
     attrs.children = children;
-    children = [];
   }
 
   const elem = createElement(tag, attrs);
 
-  for (const child of children) {
-    appendChild(elem, child);
+  if (!handledAsFunc) {
+    for (const child of children) {
+      appendChild(elem, child);
+    }
   }
 
   return elem;