feat(jwc-runtime): <Fragment /> support

packages/jwc-runtime/dom/elements.ts

@@ -12,15 +12,19 @@ import { updateDOM } from "./dom";
  * @param node the vnode
  */
 export function createElement(node: VNode): Node {
+
   // create a dom node according to the tag name of the vnode
-  const el = document.createElement(node.tagName);
+  const el = node.tagName === "Fragment" ? document.createDocumentFragment() : document.createElement(node.tagName);
 
   // set the attributes of the dom node
-  for (const key in node.attributes) {
+  const attributes = node.attributes;
+  for (const key in attributes) {
     if (key.startsWith("on")) {
-      el.addEventListener(key.slice(2).toLowerCase(), node.attributes[key]);
+      const eventName = key.slice(2).toLowerCase()
+      el.addEventListener(eventName, attributes[key])
     } else {
-      el.setAttribute(key, node.attributes[key]);
+      // @ts-ignore
+      node.tagName === "Fragment" ? null : el.setAttribute(camelToDash(key), attributes[key]);
     }
   }
 

packages/jwc-runtime/v-dom/fragment.ts

@@ -0,0 +1 @@
+export const Fragment = "Fragment";

packages/jwc-runtime/v-dom/index.ts

@@ -1,5 +1,5 @@
 export * from './diff';
 export * from './h';
-// export * from './fragment';
+export * from './fragment';
 export * from './vnode';
 export * from './patch';

packages/jwc-starter-vite-ts/src/App.tsx

@@ -1,4 +1,4 @@
-import { JwcComponent, Component, Prop, h } from "jwcjs";
+import { JwcComponent, Component, Prop, h, Fragment } from "jwcjs";
 import styles from './App.css?inline';
 
 @Component({
@@ -41,7 +41,7 @@ export class App extends JwcComponent {
 
   public override render() {
     return (
-      <div>
+      <>
         <div>
           <a href="https://vitejs.dev" target="_blank">
             <img src="/vite.svg" class="logo" alt="Vite logo" />
@@ -58,7 +58,7 @@ export class App extends JwcComponent {
         <p class="read-the-docs">
           Click on the Vite and Jwc logos to learn more
         </p>
-      </div>
+      </>
     )
   }
 }