feat(fragment): Add Fragment function

Author: plusgut

package-lock.json

@@ -41,6 +41,6 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.3.3",
-    "typescript": "^5.6.2"
+    "typescript": "^5.7.0"
   }
 }

package.json

@@ -1,15 +1,15 @@
 import type { ShadowHostElement } from "./types.js";
 import { PLUSNEW_ELEMENT_TYPE } from "./types.js";
 
-export { PLUSNEW_FRAGMENT_TYPE as Fragment } from "./types.js"
+export { Fragment } from "./types.js";
 
 export function jsx(
   type: string,
   props: object,
   ...children: (() => ShadowHostElement)[]
 ): ShadowHostElement {
   return {
-    // This tag allows us to uniquely identify this as a React Element
+    // This tag allows us to uniquely identify this as a JSX Element
     $$typeof: PLUSNEW_ELEMENT_TYPE,
 
     // Built-in properties that belong on the element

src/jsx-runtime.ts

@@ -1,4 +1,4 @@
-import type { ShadowComponentElement, ShadowElement } from "../types.js";
+import { type ShadowComponentElement, type ShadowElement, PLUSNEW_ELEMENT_TYPE} from "../types.js";
 import type { Reconciler } from "./index.js";
 import { remove } from "./util.js";
 
@@ -8,6 +8,7 @@ export function isComponentElement(
   return (
     typeof shadowElement === "object" &&
     "$$typeof" in shadowElement &&
+    shadowElement.$$typeof === PLUSNEW_ELEMENT_TYPE &&
     typeof shadowElement.type === "function"
   );
 }

src/reconciler/component.ts

@@ -1,15 +1,16 @@
-import { PLUSNEW_FRAGMENT_TYPE, type ShadowFragmentElement, type ShadowElement } from "../types.js";
+import { PLUSNEW_ELEMENT_TYPE, Fragment, type ShadowElement, ShadowComponentElement, ShadowHostElement } from "../types.js";
 import type { Reconciler } from "./index.js";
 import { arrayReconcileWithoutSorting, remove } from "./util.js";
 
 
 export function isFragmentElement(
     shadowElement: ShadowElement,
-  ): shadowElement is ShadowFragmentElement {
+  ): shadowElement is ShadowHostElement {
     return (
       typeof shadowElement === "object" &&
       "$$typeof" in shadowElement &&
-       shadowElement.type === PLUSNEW_FRAGMENT_TYPE
+      shadowElement.$$typeof === PLUSNEW_ELEMENT_TYPE &&
+      shadowElement.type === Fragment
     );
   }
 

src/reconciler/fragment.ts

@@ -27,9 +27,9 @@ export function reconcile(
   shadowElement: ShadowElement,
 ): Node | null {
   for (const reconciler of [
+    fragmentReconcile,
     hostReconcile,
     componentReconcile,
-    fragmentReconcile,
     textReconcile,
     arrayReconcile,
     falseReconcile,

src/reconciler/index.ts

@@ -1,7 +1,10 @@
 import type { Reconciler } from "./reconciler/index.js";
 
 export const PLUSNEW_ELEMENT_TYPE = Symbol("plusnew-element-type");
-export const PLUSNEW_FRAGMENT_TYPE = Symbol("plusnew-fragment-type");
+
+export function Fragment(props: { children: ShadowElement }) {
+  return props.children
+}
 
 // type Expect<T extends true> = T;
 
@@ -123,8 +126,8 @@ export type ShadowComponentElement = {
 };
 
 export type ShadowFragmentElement = {
-  $$typeof: typeof PLUSNEW_ELEMENT_TYPE;
-  type: typeof PLUSNEW_FRAGMENT_TYPE;
+  $$typeof: typeof PLUSNEW_ELEMENT_TYPE
+  type: typeof Fragment;
   props: any;
   children: (() => ShadowElement)[];
 };