feat: enables jsx fragments using pragmaFrag option and Fragment import

babel.config.json

@@ -1,5 +1,10 @@
 {
   "babelrcRoots": [".", "packages/*"],
-  "plugins": [["@babel/plugin-transform-react-jsx", { "pragma": "jsx" }]],
+  "plugins": [
+    [
+      "@babel/plugin-transform-react-jsx",
+      { "pragma": "jsx", "pragmaFrag": "Fragment" }
+    ]
+  ],
   "presets": ["@babel/preset-env"]
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "bulba",
+  "name": "bulba-web-components",
   "version": "0.14.0-alpha.1",
   "private": true,
   "type": "module",

packages/jsx/src/renderer.js

@@ -22,15 +22,19 @@ const createEmptyVNode = (element, Internal) =>
     },
   })
 
-const patch = init([
-  classModule,
-  propsModule,
-  styleModule,
-  eventListenersModule,
-  attributesModule,
-  datasetModule,
-  denyUnlessSigned,
-])
+const patch = init(
+  [
+    classModule,
+    propsModule,
+    styleModule,
+    eventListenersModule,
+    attributesModule,
+    datasetModule,
+    denyUnlessSigned,
+  ],
+  undefined,
+  { experimental: { fragments: true } }
+)
 
 function getRenderState(element) {
   return sign(transform(element[External.render]()))

preview/jsx/fixtures/render-schedule-test.js

@@ -1,5 +1,5 @@
 import { BulbaElement, register } from "@bulba/element"
-import { Renderer, jsx } from "@bulba/jsx"
+import { Renderer, jsx, Fragment } from "@bulba/jsx"
 
 export class RenderScheduleTest extends BulbaElement(Renderer) {
   static get properties() {
@@ -47,13 +47,15 @@ export class RenderScheduleTest extends BulbaElement(Renderer) {
           borderColor: this.borderColor,
         }}
       >
-        <p>Render count: {this.count}</p>
-        <p className="label" style={{ color: this.labelColor }}>
-          This is a scheduling test.
-          <br />
-          It should have one render per button press, despite having multiple
-          property updates.
-        </p>
+        <>
+          <p>Render count: {this.count}</p>
+          <p className="label" style={{ color: this.labelColor }}>
+            This is a scheduling test.
+            <br />
+            It should have one render per button press, despite having multiple
+            property updates.
+          </p>
+        </>
         <button on-click={this.handleClick}>Click to update</button>
       </div>
     )