From 9b62ab3724411042580bb5dc0c4d411e38c982ae Mon Sep 17 00:00:00 2001
From: Seyyed Morteza Moosavi <se.mo.moosavi@gmail.com>
Date: Sat, 16 Nov 2024 11:54:44 +0330
Subject: [PATCH] .

---
 index.ts                 |   1 +
 render.ts                |   1 +
 src/index.ts             |   5 -
 src/lib/CData.tsx        |   7 -
 src/lib/Comment.tsx      |   7 -
 src/lib/Fragment.tsx     |   7 -
 src/lib/Ins.tsx          |   6 -
 src/lib/builtin.ts       |  17 +-
 src/lib/react-builtin.ts |  14 ++
 src/lib/types.ts         |  29 +++
 src/react.ts             |  89 +---------
 src/react/CData.ts       |   7 +
 src/react/Comment.ts     |   7 +
 src/react/Fragment.ts    |   7 +
 src/react/Ins.ts         |   6 +
 src/render.test.tsx      | 369 ---------------------------------------
 src/render.ts            |  16 --
 17 files changed, 82 insertions(+), 513 deletions(-)
 create mode 100644 index.ts
 create mode 100644 render.ts
 delete mode 100644 src/index.ts
 delete mode 100644 src/lib/CData.tsx
 delete mode 100644 src/lib/Comment.tsx
 delete mode 100644 src/lib/Fragment.tsx
 delete mode 100644 src/lib/Ins.tsx
 create mode 100644 src/lib/react-builtin.ts
 create mode 100644 src/lib/types.ts
 create mode 100644 src/react/CData.ts
 create mode 100644 src/react/Comment.ts
 create mode 100644 src/react/Fragment.ts
 create mode 100644 src/react/Ins.ts
 delete mode 100644 src/render.test.tsx
 delete mode 100644 src/render.ts

diff --git a/index.ts b/index.ts
new file mode 100644
index 0000000..5392708
--- /dev/null
+++ b/index.ts
@@ -0,0 +1 @@
+export { render } from './render';
diff --git a/render.ts b/render.ts
new file mode 100644
index 0000000..63688bf
--- /dev/null
+++ b/render.ts
@@ -0,0 +1 @@
+export function render() {}
diff --git a/src/index.ts b/src/index.ts
deleted file mode 100644
index feb541e..0000000
--- a/src/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { render } from './render';
-export { Comment } from './lib/Comment';
-export { CData } from './lib/CData';
-export { Ins } from './lib/Ins';
-export { Fragment } from './lib/Fragment';
diff --git a/src/lib/CData.tsx b/src/lib/CData.tsx
deleted file mode 100644
index 8e0b8e4..0000000
--- a/src/lib/CData.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createJsxXmlBuiltinElement } from './builtin';
-import { joinTextChildren, TextChildren } from './join';
-
-export function CData(props: { children: TextChildren }) {
-  const children = joinTextChildren(props.children);
-  return createJsxXmlBuiltinElement('cdata', { children });
-}
diff --git a/src/lib/Comment.tsx b/src/lib/Comment.tsx
deleted file mode 100644
index 209b989..0000000
--- a/src/lib/Comment.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createJsxXmlBuiltinElement } from './builtin';
-import { joinTextChildren, TextChildren } from './join';
-
-export function Comment(props: { children: TextChildren }) {
-  const children = joinTextChildren(props.children);
-  return createJsxXmlBuiltinElement('comment', { children });
-}
diff --git a/src/lib/Fragment.tsx b/src/lib/Fragment.tsx
deleted file mode 100644
index 6801894..0000000
--- a/src/lib/Fragment.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-import { createJsxXmlBuiltinElement } from './builtin';
-
-export function Fragment(props: { children?: ReactNode }) {
-  const { children } = props;
-  return createJsxXmlBuiltinElement('fragment', { children });
-}
diff --git a/src/lib/Ins.tsx b/src/lib/Ins.tsx
deleted file mode 100644
index bd54eae..0000000
--- a/src/lib/Ins.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createJsxXmlBuiltinElement } from './builtin';
-
-export function Ins(props: { target: string; content?: string }) {
-  const { target, content = '' } = props;
-  return createJsxXmlBuiltinElement('ins', { target, content });
-}
diff --git a/src/lib/builtin.ts b/src/lib/builtin.ts
index a038aa9..165055c 100644
--- a/src/lib/builtin.ts
+++ b/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,
   };
 }
diff --git a/src/lib/react-builtin.ts b/src/lib/react-builtin.ts
new file mode 100644
index 0000000..29edb6a
--- /dev/null
+++ b/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;
+}
diff --git a/src/lib/types.ts b/src/lib/types.ts
new file mode 100644
index 0000000..c7ba65b
--- /dev/null
+++ b/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;
+};
diff --git a/src/react.ts b/src/react.ts
index fbbbe45..ff983ec 100644
--- a/src/react.ts
+++ b/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';
diff --git a/src/react/CData.ts b/src/react/CData.ts
new file mode 100644
index 0000000..4486592
--- /dev/null
+++ b/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);
+}
diff --git a/src/react/Comment.ts b/src/react/Comment.ts
new file mode 100644
index 0000000..c809b16
--- /dev/null
+++ b/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);
+}
diff --git a/src/react/Fragment.ts b/src/react/Fragment.ts
new file mode 100644
index 0000000..e71442f
--- /dev/null
+++ b/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);
+}
diff --git a/src/react/Ins.ts b/src/react/Ins.ts
new file mode 100644
index 0000000..ad1b37f
--- /dev/null
+++ b/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 });
+}
diff --git a/src/render.test.tsx b/src/render.test.tsx
deleted file mode 100644
index 77f0ba9..0000000
--- a/src/render.test.tsx
+++ /dev/null
@@ -1,369 +0,0 @@
-import React from 'react';
-import { describe, expect, test } from 'vitest';
-import { CData, Comment, Fragment, Ins } from './index';
-import { render } from './render';
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      test: any;
-      item: any;
-      root: any;
-      'h:test': any;
-      'h:item': any;
-      'x:test': any;
-      'x:item': any;
-    }
-  }
-}
-
-describe('render', () => {
-  describe('errors', () => {
-    test('string as element', () => {
-      expect(() => render('other')).throws();
-    });
-    test('class component', () => {
-      class MyComponent extends React.Component<any, any> {
-        render() {
-          return <test />;
-        }
-      }
-      expect(() => render(<MyComponent />)).throws(
-        'Class components are not supported',
-      );
-    });
-  });
-  describe('tag', () => {
-    test('render self-closing tag', () => {
-      expect(render(<test />).end({ headless: true })).toBe('<test/>');
-    });
-    test('render tag', () => {
-      expect(render(<test>item</test>).end({ headless: true })).toBe(
-        '<test>item</test>',
-      );
-    });
-    test('render multiple child', () => {
-      expect(render(<test>item {2}</test>).end({ headless: true })).toBe(
-        '<test>item 2</test>',
-      );
-    });
-    test('render nested tags', () => {
-      expect(
-        render(
-          <test>
-            <item />
-          </test>,
-        ).end({ headless: true }),
-      ).toBe('<test><item/></test>');
-    });
-    test('render nested tags with text', () => {
-      expect(
-        render(
-          <test>
-            <item>text</item>
-          </test>,
-        ).end({ headless: true }),
-      ).toBe('<test><item>text</item></test>');
-    });
-    test('render nested tags mixed with text', () => {
-      expect(
-        render(
-          <test>
-            the <item>2</item>.
-          </test>,
-        ).end({ headless: true }),
-      ).toBe('<test>the <item>2</item>.</test>');
-    });
-    test('render with children array', () => {
-      expect(
-        render(<test>{['item', <item />]}</test>).end({ headless: true }),
-      ).toBe('<test>item<item/></test>');
-    });
-    test('render with nested children array', () => {
-      expect(
-        render(<test>{['item', <item />, ['nested', <item />]]}</test>).end({
-          headless: true,
-        }),
-      ).toBe('<test>item<item/>nested<item/></test>');
-    });
-  });
-  describe('render attrs', () => {
-    test('render with attr', () => {
-      expect(render(<test id="1" />).end({ headless: true })).toBe(
-        '<test id="1"/>',
-      );
-    });
-
-    test('render with attr number', () => {
-      expect(render(<test id={1} />).end({ headless: true })).toBe(
-        '<test id="1"/>',
-      );
-    });
-
-    test('render with children', () => {
-      expect(render(<test id="1">item</test>).end({ headless: true })).toBe(
-        '<test id="1">item</test>',
-      );
-    });
-
-    test('render with multiple attr', () => {
-      expect(render(<test id="1" other="2" />).end({ headless: true })).toBe(
-        '<test id="1" other="2"/>',
-      );
-      expect(render(<test other="2" id="1" />).end({ headless: true })).toBe(
-        '<test other="2" id="1"/>',
-      );
-    });
-
-    test('render with key', () => {
-      expect(render(<test key="1" />).end({ headless: true })).toBe(
-        '<test key="1"/>',
-      );
-    });
-    test('render with ref', () => {
-      expect(render(<test ref="1" />).end({ headless: true })).toBe(
-        '<test ref="1"/>',
-      );
-    });
-    test.skip('render with key and attr', () => {
-      expect(
-        render(<test key="1" ref="3" id="2" />).end({ headless: true }),
-      ).toBe('<test key="1" ref="3" id="2"/>');
-      expect(
-        render(<test id="2" ref="3" key="1" />).end({ headless: true }),
-      ).toBe('<test id="2" ref="3" key="1"/>');
-    });
-    test('render with attr in children', () => {
-      expect(
-        render(
-          <test>
-            <item id="1" />
-          </test>,
-        ).end({ headless: true }),
-      ).toBe('<test><item id="1"/></test>');
-    });
-  });
-  describe('component', () => {
-    test('render component', () => {
-      const Test = ({ id }: { id: string }) => <test id={id} />;
-      expect(render(<Test id="1" />).end({ headless: true })).toBe(
-        '<test id="1"/>',
-      );
-    });
-
-    test('render component with children', () => {
-      const Test = ({ id }: { id: string }) => <test id={id}>item</test>;
-      expect(render(<Test id="1" />).end({ headless: true })).toBe(
-        '<test id="1">item</test>',
-      );
-    });
-    test('render component with children array', () => {
-      const Test = ({ id }: { id: string }) => (
-        <test id={id}>{['item', 'item2']}</test>
-      );
-      expect(render(<Test id="1" />).end({ headless: true })).toBe(
-        '<test id="1">itemitem2</test>',
-      );
-    });
-
-    test('render component with nested tags', () => {
-      const Item = () => <item />;
-      const Test = ({ id }: { id: string }) => (
-        <test id={id}>
-          <Item />
-        </test>
-      );
-      expect(render(<Test id="1" />).end({ headless: true })).toBe(
-        '<test id="1"><item/></test>',
-      );
-    });
-    test('render component with nested component', () => {
-      const Item = () => <item />;
-      const Test = ({ id }: { id: string }) => (
-        <test id={id}>
-          <Item />
-        </test>
-      );
-      const Outer = () => <Test id="1" />;
-      expect(render(<Outer />).end({ headless: true })).toBe(
-        '<test id="1"><item/></test>',
-      );
-    });
-  });
-  describe('fragment', () => {
-    test('render fragment', () => {
-      expect(
-        render(
-          <>
-            <test />
-          </>,
-        ).end({ headless: true }),
-      ).toBe('<test/>');
-    });
-    test('render fragment with children', () => {
-      expect(
-        render(
-          <test>
-            <>
-              test
-              <item />
-            </>
-          </test>,
-        ).end({ headless: true }),
-      ).toBe('<test>test<item/></test>');
-    });
-  });
-  describe('namespace', () => {
-    test('render with namespace', () => {
-      expect(
-        render(
-          <root
-            xmlns:h="http://example.com/TR/html4/"
-            xmlns:x="http://example.com/TR/xml"
-          >
-            <h:test>
-              <h:item />
-            </h:test>
-            <x:test>
-              <x:item />
-            </x:test>
-          </root>,
-        ).end({ headless: true }),
-      ).toBe(
-        '<root xmlns:h="http://example.com/TR/html4/" xmlns:x="http://example.com/TR/xml"><h:test><h:item/></h:test><x:test><x:item/></x:test></root>',
-      );
-    });
-    test('render attr whith namespace', () => {
-      expect(
-        render(
-          <root>
-            <h:test h:width={4}>
-              <h:item h:name="test" />
-            </h:test>
-          </root>,
-        ).end({ headless: true }),
-      ).toBe(
-        '<root><h:test h:width="4"><h:item h:name="test"/></h:test></root>',
-      );
-    });
-  });
-  describe('builtin fragment', () => {
-    test('empty', () => {
-      expect(
-        render(
-          <test>
-            <Fragment />
-          </test>,
-        ).end({ headless: true }),
-      ).toBe('<test/>');
-    });
-    test('one child', () => {
-      expect(
-        render(
-          <test>
-            <Fragment>
-              <item />
-            </Fragment>
-          </test>,
-        ).end({ headless: true }),
-      ).toBe('<test><item/></test>');
-    });
-    test('multiple children', () => {
-      expect(
-        render(
-          <test>
-            <Fragment>
-              test
-              <item />
-            </Fragment>
-          </test>,
-        ).end({ headless: true }),
-      ).toBe('<test>test<item/></test>');
-    });
-    test('at root', () => {
-      expect(
-        render(
-          <Fragment>
-            <Ins target="bold" />
-            <test>
-              test
-              <item />
-            </test>
-          </Fragment>,
-        ).end({ headless: true }),
-      ).toBe('<?bold?><test>test<item/></test>');
-    });
-  });
-  describe('builtin', () => {
-    test('render cdata', () => {
-      const data = '<test>item</test>';
-      expect(
-        render(
-          <test>
-            <CData>{data}</CData>
-          </test>,
-        ).end({ headless: true }),
-      ).toBe('<test><![CDATA[<test>item</test>]]></test>');
-    });
-    test('render cdata multiple children', () => {
-      const data = '<test>item</test>';
-      expect(
-        render(
-          <test>
-            <CData>data is: {data}</CData>
-          </test>,
-        ).end({ headless: true }),
-      ).toBe('<test><![CDATA[data is: <test>item</test>]]></test>');
-    });
-    test('render comment', () => {
-      const data = 'comment';
-      expect(
-        render(
-          <test>
-            <Comment>{data}</Comment>
-          </test>,
-        ).end({ headless: true }),
-      ).toBe('<test><!--comment--></test>');
-    });
-    test('render comment multiple children', () => {
-      const data = 'the comment';
-      expect(
-        render(
-          <test>
-            <Comment>comment is: {data}</Comment>
-          </test>,
-        ).end({ headless: true }),
-      ).toBe('<test><!--comment is: the comment--></test>');
-    });
-    test('render ins', () => {
-      expect(
-        render(
-          <test>
-            <Ins target="color" content="red" />
-            <Ins target="bold" />
-            text
-          </test>,
-        ).end({ headless: true }),
-      ).toBe('<test><?color red?><?bold?>text</test>');
-    });
-  });
-  describe('customize', () => {
-    test('default', () => {
-      expect(render(<test />).end()).toBe('<?xml version="1.0"?><test/>');
-    });
-    test('doctype', () => {
-      expect(
-        render(<test />)
-          .dtd()
-          .end(),
-      ).toBe('<?xml version="1.0"?><!DOCTYPE test><test/>');
-    });
-    test('declaration', () => {
-      expect(
-        render(<test />)
-          .dec({ standalone: true })
-          .end(),
-      ).toBe('<?xml version="1.0" standalone="yes"?><test/>');
-    });
-  });
-});
diff --git a/src/render.ts b/src/render.ts
deleted file mode 100644
index 1cae092..0000000
--- a/src/render.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ReactElement } from 'react';
-import { create } from 'xmlbuilder2';
-import { isElement } from 'react-is';
-
-import type { XMLBuilderCreateOptions } from 'xmlbuilder2/lib/interfaces';
-import { renderReactElement } from './react';
-export type { XMLBuilderCreateOptions, ReactElement };
-
-export function render(element: any, options?: XMLBuilderCreateOptions) {
-  let cur = create(options ?? {});
-
-  if (isElement(element)) {
-    return renderReactElement(cur, element);
-  }
-  throw new Error('Not implemented');
-}