Support for elements with namespaceURI added

Author: vyatkin0

README.md

@@ -38,11 +38,37 @@ or `tsconfig.json`
 
 then coding js or ts with jsx.
 
+## context
+
+Some JSX elements require context from their parents to be rendered correctly. Examples are children of an SVG element that require a namespaceURI from the parent.
+The setContext method is designed to resolve this issue.
+
+```tsx
+const SvgContext = (props: OptionsChildren, ctx: any) => (props.children as ContextFunc)(ctx);
+
+export default (props: OptionsChildren) => {
+    setContext(SvgContext, {})
+    return <SvgContext><svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'>
+        <path d={props.children}></path>
+    </svg></SvgContext>;
+}
+```
+or even simpler
+
+```jsx
+export default props => {
+    setContext('svg', {})
+    return <svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'>
+        <path d={props.children}></path>
+    </svg>;
+}
+```
+
 ## examples
 
 The source codes are in the repository https://github.com/only-jsx/examples.
 
-```js
+```jsx
 //index.jsx
 import APP from './app';
 
@@ -76,7 +102,7 @@ export default ({props, children}) => {
         <span>{props.a + props.b}</span>
         <button onclick={onClick}>Button</button>
         <div ref={result}></div>
-        <div id='counter' style="color: blue;"></div>
+        <div id='counter' style='color: blue;'></div>
         {children}
     </div>;
 

index.test.ts

@@ -9,9 +9,13 @@ import {
     TagFunc,
     JsxRef,
     Options,
+    OptionsChildren,
+    ContextFunc,
 } from './index';
 
 describe('Test Runtime', () => {
+    beforeEach(clearContext);
+
     test('context', () => {
         const ctx = 1;
         setContext('div', ctx);
@@ -20,6 +24,11 @@ describe('Test Runtime', () => {
         expect(getContext()).toBeNull();
     });
 
+    test('wrong context', () => {
+        const ctx = { namespaceURI: '' };
+        expect(() => setContext('div', ctx)).toThrowError('namespaceURI context property is reserved for internal use');
+    });
+
     test('jsx children', () => {
         const testDivOptions = (options: Options, html: string) => {
             let r1 = jsx('div', options);
@@ -112,8 +121,6 @@ describe('Test Runtime', () => {
 
     test('jsx with event', () => {
         const onclick = jest.fn();
-
-        let r: JsxRef = {};
         const r1 = jsx('div', { id: 1, children: true, onclick });
         expect(r1 instanceof HTMLDivElement).toBeTruthy();
         const e1 = r1 as HTMLElement;
@@ -126,7 +133,6 @@ describe('Test Runtime', () => {
     });
 
     test('jsx with attribute', () => {
-        let r: JsxRef = {};
         const r1 = jsx('div', { id: 1, children: true, style: 'display: block' });
         expect(r1 instanceof HTMLDivElement).toBeTruthy();
         const e1 = r1 as HTMLElement;
@@ -135,7 +141,6 @@ describe('Test Runtime', () => {
     });
 
     test('jsx with null attribute', () => {
-        let r: JsxRef = {};
         const r1 = jsx('div', { id: 1, children: true, style: null });
         expect(r1 instanceof HTMLDivElement).toBeTruthy();
         const e1 = r1 as HTMLElement;
@@ -144,42 +149,129 @@ describe('Test Runtime', () => {
     });
 
     test('jsx with undefined attribute', () => {
-        let r: JsxRef = {};
         const r1 = jsx('div', { id: 1, children: true, style: undefined });
         expect(r1 instanceof HTMLDivElement).toBeTruthy();
         const e1 = r1 as HTMLElement;
         expect(e1.outerHTML).toBe('<div id="1">true</div>');
         expect(e1.style.display).toBe('')
     });
 
+    test('jsx with namespace', () => {
+        const fc: TagFunc = (o: Options, ctx?: any) => (o.children as Function)(ctx);
+
+        setContext(fc, {});
+        const r1 = jsx(fc, { children: jsx('svg', { id: 1, children: jsx('path', { id: 1, d: 'MZ', fill: 'white' }), xmlns: 'http://www.w3.org/2000/svg' }) });
+
+        expect(r1 instanceof SVGElement).toBeTruthy();
+        const e1 = r1 as SVGElement;
+        expect(e1.outerHTML).toBe('<svg id="1" xmlns="http://www.w3.org/2000/svg"><path id="1" d="MZ" fill="white"></path></svg>');
+        expect(e1.namespaceURI).toBe('http://www.w3.org/2000/svg');
+        expect(e1.firstChild instanceof Element).toBeTruthy();
+        const e2 = e1.firstChild as Element;
+        expect(e2.namespaceURI).toBe('http://www.w3.org/2000/svg');
+    });
+
+    test('jsx with nested namespaces', () => {
+        const fc = (o: OptionsChildren, ctx?: any) => (o.children as ContextFunc)(ctx);
+
+        setContext(fc, {});
+
+        const nested = jsx('h1', { id: 31, children: jsx('h2', { id: 32, children: jsx('h3', {}), xmlns: null }), xmlns: '3' });
+        const nested1 = jsx('h1', { id: 21, children: jsx('h2', { id: 22, children: jsx('h3', { children: nested }), xmlns: null }), xmlns: '' });
+        const nested2 = jsx('h1', { id: 11, children: jsx('h2', { id: 12, children: jsx('h3', { children: nested1 }) }), xmlns: '2' });
+        const r1 = jsx(fc, { children: jsx('h1', { id: 1, children: jsx('h2', { id: 2, children: jsx('h3', { children: nested2 }) }), xmlns: '1' }) });
+
+        expect(r1 instanceof Element).toBeTruthy();
+        const e1 = r1 as Element;
+        expect(e1.outerHTML).toBe('<h1 id="1" xmlns="1"><h2 id="2"><h3><h1 id="11" xmlns="2"><h2 id="12"><h3><h1 id="21" xmlns=""><h2 id="22"><h3><h1 id="31" xmlns="3"><h2 id="32"><h3></h3></h2></h1></h3></h2></h1></h3></h2></h1></h3></h2></h1>');
+        expect(e1.namespaceURI).toBe('1');
+        expect(e1.firstChild instanceof Element).toBeTruthy();
+        const e2 = e1.firstChild as Element;
+        expect(e2.namespaceURI).toBe('1');
+        expect(e2.firstChild instanceof Element).toBeTruthy();
+        const e3 = e2.firstChild as Element;
+        expect(e3.namespaceURI).toBe('1');
+
+        const e11 = e3.firstChild as Element;
+        expect(e11.namespaceURI).toBe('2');
+        expect(e11.firstChild instanceof Element).toBeTruthy();
+        const e12 = e11.firstChild as Element;
+        expect(e12.namespaceURI).toBe('2');
+        expect(e12.firstChild instanceof Element).toBeTruthy();
+        const e13 = e12.firstChild as Element;
+        expect(e13.namespaceURI).toBe('2');
+
+        const e21 = e13.firstChild as Element;
+        expect(e21.namespaceURI).toBeNull();
+        expect(e21.firstChild instanceof Element).toBeTruthy();
+        const e22 = e21.firstChild as Element;
+        expect(e22.namespaceURI).toBeNull();
+        expect(e22.firstChild instanceof Element).toBeTruthy();
+        const e23 = e22.firstChild as Element;
+        expect(e23.namespaceURI).toBeNull();
+
+        const e31 = e23.firstChild as Element;
+        expect(e31.namespaceURI).toBe('3');
+        expect(e31.firstChild instanceof Element).toBeTruthy();
+        const e32 = e31.firstChild as Element;
+        expect(e32.namespaceURI).toBe('3');
+        expect(e32.firstChild instanceof Element).toBeTruthy();
+        const e33 = e32.firstChild as Element;
+        expect(e33.namespaceURI).toBe('3');
+    });
+
+    test('exception without context', () => {
+        expect(() => jsx('svg', { xmlns: '1' })).toThrowError('Declaring a namespace on an element using xmlns: attribute requires context');
+    });
+
     test('jsx with context', () => {
         const r1 = jsx('div', { id: 1, children: null });
         expect(r1 instanceof HTMLDivElement).toBeTruthy();
         const e1 = r1 as HTMLElement;
         expect(e1.outerHTML).toBe('<div id="1"></div>');
 
-        const fc: TagFunc = () => e1;
+        const fc: TagFunc = (options, ctx) => ((e1.innerHTML = ctx?.content || ''), e1);
 
         const r2 = jsx(fc, { id: 2 });
         expect(r2 instanceof HTMLDivElement).toBeTruthy();
         const e2 = r2 as HTMLElement;
         expect(e2.outerHTML).toBe('<div id="1"></div>');
 
-        setContext('div', undefined);
+        setContext('div', true);
         const r3 = jsx(fc, { id: 3 });
         expect(r3 instanceof Function).toBeTruthy();
-        const rr3 = (r3 as TagFunc)({}, undefined);
+        const rr3 = (r3 as ContextFunc)({ content: 'test' });
+        expect(getContext()).not.toBe(null);
+        clearContext();
+
         expect(rr3 instanceof HTMLDivElement).toBeTruthy();
         const e3 = rr3 as HTMLElement;
-        expect(e3.outerHTML).toBe('<div id="1"></div>');
-        clearContext();
+        expect(e3.outerHTML).toBe('<div id="1">test</div>');
 
         setContext(fc, {});
         const r4 = jsx(fc, { id: 4 });
         expect(r4 instanceof HTMLDivElement).toBeTruthy();
         const e4 = r4 as HTMLElement;
         expect(e4.outerHTML).toBe('<div id="1"></div>');
         expect(getContext()).toBe(null);
+
+        setContext(fc, { content: 'test' });
+        const r5 = jsx(fc, { id: 5 });
+        expect(r5 instanceof HTMLDivElement).toBeTruthy();
+        expect(getContext()).toBe(null);
+        const e5 = r5 as HTMLElement;
+        expect(e5.outerHTML).toBe('<div id="1">test</div>');
+
+        setContext(fc, undefined);
+        const r6 = jsx(fc, { id: 5 });
+        expect(r6 instanceof Function).toBeTruthy();
+        const rr6 = (r6 as ContextFunc)({ content: 'test' });
+        expect(getContext()).not.toBe(null);
+        clearContext();
+        expect(getContext()).toBe(null);
+        expect(rr6 instanceof HTMLDivElement).toBeTruthy();
+        const e6 = rr3 as HTMLElement;
+        expect(e6.outerHTML).toBe('<div id="1">test</div>');
     });
 
     test('Comment', () => {
@@ -205,9 +297,9 @@ describe('Test Runtime', () => {
         const f2 = Fragment({ children: 'fragment2' });
         expect(f2 instanceof Function).toBeTruthy();
         const rf = (f2 as TagFunc)({}, undefined);
+        clearContext();
 
         expect(rf instanceof DocumentFragment).toBeTruthy();
         expect((rf as DocumentFragment).firstChild?.textContent).toBe('fragment2');
-        clearContext();
     });
 });

index.ts

@@ -1,4 +1,4 @@
-export type JsxNode = TagFunc | Node | NodeList | string | number | boolean | null | undefined;
+export type JsxNode = ContextFunc | TagFunc | Node | NodeList | string | number | boolean | null | undefined;
 
 export type JsxRef = { current?: Node };
 
@@ -9,13 +9,15 @@ export type OptionsRef = {
 };
 
 export type OptionsChildren = {
-    children: JsxNode | JsxNode[];
+    children?: JsxNode | JsxNode[];
 };
 
 export type Options = Partial<OptionsAttributes & OptionsChildren & OptionsRef>;
 
 export type TagFunc = (o: Options, ctx?: any) => Node | null;
 
+export type ContextFunc = (ctx?: any) => Node | null;
+
 export namespace JSX {
     export interface IntrinsicElements {
         // HTML
@@ -214,7 +216,7 @@ function renderChildren(fragment: DocumentFragment, children: JsxNode | JsxNode[
     }
 }
 
-function render(element: HTMLElement | DocumentFragment, options: Options, ctx: any) {
+function render(element: Element | DocumentFragment, options: Options, ctx: any) {
     if (options instanceof Object) {
         for (const o in options) {
             switch (o) {
@@ -233,7 +235,7 @@ function render(element: HTMLElement | DocumentFragment, options: Options, ctx:
                     }
                     break;
                 default:
-                    if (element instanceof HTMLElement) {
+                    if (element instanceof Element) {
                         if (typeof options[o] === 'function') {
                             (element as any)[o] = options[o];
                         } else if (options[o] != null) {
@@ -248,16 +250,32 @@ function render(element: HTMLElement | DocumentFragment, options: Options, ctx:
     return element;
 }
 
-let context: any = null;
+let context: { tag: keyof JSX.IntrinsicElements | TagFunc, ctx: any } | null;
 
 function jsx(tag: keyof JSX.IntrinsicElements | TagFunc, options: Options) {
-    const f = typeof tag === 'function' ? (ctx: any) => tag(options, ctx) : (ctx: any) => render(document.createElement(tag), options, ctx);
+    const f: ContextFunc = typeof tag === 'function' ? (ctx: any) => tag(options, ctx) : (ctx: any) => {
+
+        if (options.xmlns != null) {
+            if (!ctx) {
+                throw new Error('Declaring a namespace on an element using xmlns: attribute requires context');
+            }
+
+            if (ctx.namespaceURI !== options.xmlns) {
+                ctx = { ...ctx };
+                ctx.namespaceURI = options.xmlns;
+            }
+        }
+
+        const element = ctx?.namespaceURI == null ? document.createElement(tag) : document.createElementNS(ctx.namespaceURI, tag);
+
+        return render(element, options, ctx);
+    };
 
     if (!context) {
         return f(undefined);
     }
 
-    if (context.tag === tag) {
+    if (context.tag === tag && context.ctx) {
         const result = f(context.ctx);
         context = null;
         return result;
@@ -267,7 +285,7 @@ function jsx(tag: keyof JSX.IntrinsicElements | TagFunc, options: Options) {
 }
 
 function Fragment(options: Options) {
-    const f = (ctx: any) => render(document.createDocumentFragment(), options, ctx);
+    const f = (ctx: any) => render(document.createDocumentFragment(), options, ctx) as DocumentFragment;
 
     if (!context) {
         return f(undefined);
@@ -291,6 +309,10 @@ function Comment(options: Options) {
 }
 
 function setContext(tag: keyof JSX.IntrinsicElements | TagFunc, ctx: any) {
+    if (ctx?.namespaceURI != null) {
+        throw new Error('namespaceURI context property is reserved for internal use');
+    }
+
     context = { tag, ctx };
 }
 

jsx-runtime.commonjs/index.d.ts

@@ -1,4 +1,4 @@
-export type JsxNode = TagFunc | Node | NodeList | string | number | boolean | null | undefined;
+export type JsxNode = ContextFunc | TagFunc | Node | NodeList | string | number | boolean | null | undefined;
 export type JsxRef = {
     current?: Node;
 };
@@ -9,10 +9,11 @@ export type OptionsRef = {
     ref: JsxRef;
 };
 export type OptionsChildren = {
-    children: JsxNode | JsxNode[];
+    children?: JsxNode | JsxNode[];
 };
 export type Options = Partial<OptionsAttributes & OptionsChildren & OptionsRef>;
 export type TagFunc = (o: Options, ctx?: any) => Node | null;
+export type ContextFunc = (ctx?: any) => Node | null;
 export declare namespace JSX {
     interface IntrinsicElements {
         a: any;
@@ -192,10 +193,13 @@ export declare namespace JSX {
         view: any;
     }
 }
-declare function jsx(tag: keyof JSX.IntrinsicElements | TagFunc, options: Options): Node | ((ctx: any) => Node | null) | null;
-declare function Fragment(options: Options): HTMLElement | DocumentFragment | ((ctx: any) => HTMLElement | DocumentFragment);
+declare function jsx(tag: keyof JSX.IntrinsicElements | TagFunc, options: Options): Node | ContextFunc | null;
+declare function Fragment(options: Options): DocumentFragment | ((ctx: any) => DocumentFragment);
 declare function Comment(options: Options): Comment;
 declare function setContext(tag: keyof JSX.IntrinsicElements | TagFunc, ctx: any): void;
 declare function clearContext(): void;
-declare function getContext(): any;
+declare function getContext(): {
+    tag: TagFunc | keyof JSX.IntrinsicElements;
+    ctx: any;
+} | null;
 export { jsx, jsx as jsxs, Fragment, Comment, setContext, clearContext, getContext, };