fix: fix html fragment support

html/deno.jsonc

@@ -5,6 +5,10 @@
     // JSDOM dependencies require env.
     "test": "deno test --allow-env"
   },
-  "imports": {
+  "imports": {},
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "h.fragment"
   }
 }

html/src/index.ts

@@ -1,3 +1,3 @@
 export { render, setEventSanitizer, setNodeSanitizer } from "./render.ts";
 export { debug, setDebug } from "./logger.ts";
-export { Fragment, h, type VNode } from "./jsx.ts";
+export { h, type VNode } from "./jsx.ts";

html/src/jsx.ts

@@ -1,15 +1,15 @@
 import type { Cell, Stream } from "@commontools/runner";
-// declare global {
-//   namespace JSX {
-//     interface IntrinsicElements {
-//       [elemName: string]: any;
-//     }
-//   }
-// }
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [elemName: string]: any;
+    }
+  }
+}
 
-export const Fragment = "Fragment";
+const FRAGMENT_ELEMENT = "common-fragment";
 
-export function h(
+export const h = Object.assign(function h(
   name: string | ((...args: any[]) => any),
   props: { [key: string]: any } | null,
   ...children: Child[]
@@ -27,7 +27,11 @@ export function h(
       children: children.flat(),
     };
   }
-}
+}, {
+  fragment({ children }: { children: Child[] }) {
+    return h(FRAGMENT_ELEMENT, null, children);
+  },
+});
 
 /**
  * Dynamic properties. Can either be string type (static) or a Mustache

html/test/jsx.tsx

@@ -0,0 +1,64 @@
+import { beforeEach, describe, it } from "@std/testing/bdd";
+import * as assert from "./assert.ts";
+import { h } from "../src/jsx.ts";
+
+describe("jsx dom fragments support", () => {
+  it("dom fragments should work", () => {
+    const fragment = (
+      <>
+        <p>Hello world</p>
+      </>
+    );
+
+    assert.matchObject(
+      fragment,
+      <common-fragment>
+        <p>Hello world</p>
+      </common-fragment>,
+    );
+  });
+
+  it("dom fragments with multiple children", () => {
+    const fragment = (
+      <>
+        <p>Grocery List</p>
+        <ul>
+          <li>Buy Milk</li>
+        </ul>
+      </>
+    );
+
+    assert.matchObject(
+      fragment,
+      <common-fragment>
+        <p>Grocery List</p>
+        <ul>
+          <li>Buy Milk</li>
+        </ul>
+      </common-fragment>,
+    );
+  });
+
+  it("fragments inside the element", () => {
+    const grocery = (
+      <>
+        <p>Grocery List</p>
+        <ul>
+          <li>Buy Milk</li>
+        </ul>
+      </>
+    );
+
+    assert.matchObject(
+      <div>{grocery}</div>,
+      <div>
+        <common-fragment>
+          <p>Grocery List</p>
+          <ul>
+            <li>Buy Milk</li>
+          </ul>
+        </common-fragment>
+      </div>,
+    );
+  });
+});

jumble/src/components/DitherCube.tsx

@@ -388,7 +388,6 @@ export const DitheredCube = ({
         <MorphingMesh animate={animate} animationSpeed={animationSpeed} />
         <OrbitControls enableZoom={false} />
         <Effects>
-          {/* @ts-expect-error DitheringPass is properly extended but TS doesn't recognize it */}
           <ditheringPass />
         </Effects>
       </Canvas>

recipes/counter.tsx

@@ -0,0 +1,46 @@
+// deno-lint-ignore-file jsx-no-useless-fragment
+import { h } from "@commontools/html";
+import {
+  derive,
+  handler,
+  NAME,
+  recipe,
+  schema,
+  str,
+  UI,
+} from "@commontools/builder";
+
+// Different way to define the same schema, using 'schema' helper function,
+// let's as leave off `as const satisfies JSONSchema`.
+const model = schema({
+  type: "object",
+  properties: {
+    value: { type: "number", default: 0, asCell: true },
+  },
+  default: { value: 0 },
+});
+
+const increment = handler({}, model, (_, state) => {
+  state.value.set(state.value.get() + 1);
+});
+
+const decrement = handler({}, model, (_, state) => {
+  state.value.set(state.value.get() - 1);
+});
+
+export default recipe(model, model, (cell) => {
+  return {
+    [NAME]: str`Simple counter: ${derive(cell.value, String)}`,
+    [UI]: (
+      <div>
+        <button type="button" onClick={increment(cell)}>+</button>
+        {/* use html fragment to test that it works  */}
+        <>
+          <b>{cell.value}</b>
+        </>
+        <button type="button" onClick={decrement(cell)}>-</button>
+      </div>
+    ),
+    value: cell.value,
+  };
+});

runner/src/runtime/local-build.ts

@@ -138,7 +138,7 @@ export const tsToExports = async (
       strict: true,
       jsx: ts.JsxEmit.React,
       jsxFactory: "h",
-      jsxFragmentFactory: "Fragment",
+      jsxFragmentFactory: "h.fragment",
       esModuleInterop: true,
       sourceMap: true, // Enable source map generation
       inlineSources: false, // Don't include original source in source maps

ui/src/components/common-fragment.ts

@@ -0,0 +1,13 @@
+export class CommonFragmentElement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" })
+      // Add a slot to display the children
+      .appendChild(document.createElement("slot"));
+
+    // Tell engine to ignore this element for layout purposes
+    this.style.display = 'contents';
+  }
+}
+
+customElements.define("common-fragment", CommonFragmentElement);

ui/src/components/index.ts

@@ -4,6 +4,7 @@ export * as CommonCharm from "./common-charm.ts";
 export * as CommonDatatable from "./common-datatable.ts";
 export * as CommonDict from "./common-dict.ts";
 export * as CommonForm from "./common-form.ts";
+export * as CommonFragment from "./common-fragment.ts";
 export * as CommonGoogleOauth from "./common-google-oauth.ts";
 export * as CommonGrid from "./common-grid.ts";
 export * as CommonHeroLayout from "./common-hero-layout.ts";