.

index.ts

@@ -0,0 +1 @@
+export { render } from './render';

render.ts

@@ -0,0 +1 @@
+export function render() {}

src/lib/builtin.ts

@@ -1,20 +1,15 @@
-import { type ReactElement } from 'react';
-
-export const JsxXmlBuiltin = Symbol('JSXXML.Builtin');
-
-export function isJsxXmlBuiltinElement(value: any) {
-  return value && value.$$typeof === JsxXmlBuiltin;
-}
+import { JsxXML, JsxXmlBuiltinElement } from './types';
 
 export function createJsxXmlBuiltinElement(
   type: string,
   props: any,
-): ReactElement {
+  children: any,
+): JsxXmlBuiltinElement {
   return {
-    // @ts-ignore
-    $$typeof: JsxXmlBuiltin,
+    $$typeof: JsxXML,
+    builtin: true,
     type,
     props,
-    key: null,
+    children,
   };
 }

src/lib/react-builtin.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { createJsxXmlBuiltinElement } from './builtin';
+
+export function createReactJsxXmlBuiltinElement(
+  type: string,
+  props: any,
+  children?: any,
+): ReactElement {
+  return createJsxXmlBuiltinElement(
+    type,
+    props,
+    children,
+  ) as any as ReactElement;
+}

src/lib/types.ts

@@ -0,0 +1,29 @@
+export const JsxXML = Symbol('JSXXML');
+export type JsxXMLElement =
+  | JsxXmlComponentElement
+  | JsxXmlTagElement
+  | JsxXmlBuiltinElement;
+
+export type JsxXmlBuiltinElement = {
+  $$typeof: typeof JsxXML;
+  builtin: true;
+  type: string;
+  props: any;
+  children: any;
+};
+
+export type JsxXmlTagElement = {
+  $$typeof: typeof JsxXML;
+  builtin: false;
+  type: string;
+  props: any;
+  children: any;
+};
+
+export type JsxXmlComponentElement = {
+  $$typeof: typeof JsxXML;
+  builtin: false;
+  type: (props: any) => JsxXMLElement;
+  props: any;
+  children: any;
+};

src/react.ts

@@ -1,85 +1,4 @@
-import type { ReactElement } from 'react';
-import { isFragment } from 'react-is';
-import type { XMLBuilder } from 'xmlbuilder2/lib/interfaces';
-import { isJsxXmlBuiltinElement } from './lib/builtin';
-
-export function renderReactElement(cur: XMLBuilder, element: ReactElement) {
-  renderTag(cur, element);
-  return cur;
-}
-
-function renderTag(cur: XMLBuilder, element: ReactElement) {
-  if (isJsxXmlBuiltinElement(element)) {
-    renderBuiltinElement(cur, element);
-    return;
-  }
-  if (typeof element?.type === 'string') {
-    let el = cur.ele(element.type);
-    const attrs = mergeAttrs(
-      element.props,
-      element.key,
-      // @ts-ignore
-      element.ref,
-    );
-    renderAttrs(el, attrs);
-    renderChildren(el, element.props.children);
-    return;
-  }
-  if (typeof element?.type === 'function') {
-    if (element.type.prototype?.isReactComponent) {
-      throw new Error('Class components are not supported');
-    }
-    const attrs = mergeAttrs(
-      element.props,
-      element.key,
-      // @ts-ignore
-      element.ref,
-    );
-    // @ts-ignore
-    renderTag(cur, element.type(attrs));
-  }
-  if (isFragment(element)) {
-    renderChildren(cur, element.props.children);
-  }
-}
-
-function mergeAttrs(attrs: any, key: string | null, ref: string | null) {
-  return { key, ref, ...attrs };
-}
-
-function renderAttrs(cur: XMLBuilder, attrs: any) {
-  for (let key in attrs) {
-    if (key === 'children') {
-      continue;
-    }
-    cur.att(key, attrs[key]);
-  }
-}
-
-function renderChildren(cur: XMLBuilder, children: any) {
-  if (typeof children === 'string') {
-    cur.txt(children);
-  } else if (typeof children === 'number') {
-    cur.txt(children.toString());
-  } else if (Array.isArray(children)) {
-    children.forEach((child) => renderChildren(cur, child));
-  } else if (children) {
-    renderTag(cur, children);
-  }
-}
-
-export function renderBuiltinElement(cur: XMLBuilder, element: any) {
-  if (element.type === 'cdata') {
-    cur.dat(element.props.children);
-  }
-  if (element.type === 'comment') {
-    cur.com(element.props.children);
-  }
-  if (element.type === 'ins') {
-    cur.ins(element.props.target, element.props.content);
-  }
-  if (element.type === 'fragment') {
-    return renderChildren(cur, element.props.children);
-  }
-  return cur;
-}
+export { CData } from './react/CData';
+export { Comment } from './react/Comment';
+export { Fragment } from './react/Fragment';
+export { Ins } from './react/Ins';

src/react/CData.ts

@@ -0,0 +1,7 @@
+import { joinTextChildren, TextChildren } from '../lib/join';
+import { createReactJsxXmlBuiltinElement } from '../lib/react-builtin';
+
+export function CData(props: { children: TextChildren }) {
+  const children = joinTextChildren(props.children);
+  return createReactJsxXmlBuiltinElement('cdata', {}, children);
+}

src/react/Comment.ts

@@ -0,0 +1,7 @@
+import { joinTextChildren, TextChildren } from '../lib/join';
+import { createReactJsxXmlBuiltinElement } from '../lib/react-builtin';
+
+export function Comment(props: { children: TextChildren }) {
+  const children = joinTextChildren(props.children);
+  return createReactJsxXmlBuiltinElement('comment', {}, children);
+}

src/react/Fragment.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { createReactJsxXmlBuiltinElement } from '../lib/react-builtin';
+
+export function Fragment(props: { children?: ReactNode }) {
+  const { children } = props;
+  return createReactJsxXmlBuiltinElement('fragment', {}, children);
+}

src/react/Ins.ts

@@ -0,0 +1,6 @@
+import { createReactJsxXmlBuiltinElement } from '../lib/react-builtin';
+
+export function Ins(props: { target: string; content?: string }) {
+  const { target, content = '' } = props;
+  return createReactJsxXmlBuiltinElement('ins', { target, content });
+}