jsx-xml

Generate xml string from jsx


Install

``bash
npm install jsx-xml


or

yarn add jsx-xml

or

pnpm add jsx-xml
`

Usage

`tsx
import { render } from 'jsx-xml';
import { expect } from 'vitest';

let xml = render().end({ headless: true });

expect(xml).toBe();
`

API

$3

- jsx: JSX.Element
- options: XMLBuilderCreateOptions

The render function returns an instance of XMLBuilder. You can call the end to get the XML string.

$3

You can define your own components by defining a function that returns a JSX.Element. Component name should start with a capital letter.

`tsx
import { render } from 'jsx-xml';

function MyComponent(props) {
return {props.children};
}

let xml = render().end({ headless: true });
`

$3

$3

`tsx
import { CData } from 'jsx-xml';

const value = 1;

let xml = render(

some text and {value}
,
).end({ headless: true });

expect(xml).toBe();
`

$3

`tsx
import { Comment } from 'jsx-xml';

let xml = render(

some comment
,
).end({ headless: true });

expect(xml).toBe();
`

$3

`tsx
import { Ins } from 'jsx-xml';

let xml = render(



,
).end({ headless: true });

expect(xml).toBe();
`

$3

`tsx
import { Fragment } from 'jsx-xml';

let xml = render(





,
).end({ headless: true });

expect(xml).toBe();
`

JSX Transformations

The jsx-xml supports multiple jsx transformations:

- React element
- automatic jsx transformation
- classic jsx transformation

$3

jsx-xml render function accepts any React element as jsx argument. It helps you to use the jsx-xml in React projects without extra config.

Pros:

- No extra config is required
- it can be used jsx-xml and React in the same file

Cons:

- Order of the key and ref attrs is not preserved

`tsx
let xml = render().end({
headless: true,
});

console.log(xml); //
`

- It is not possible to have the children attribute

`tsx
let xml2 = render(child).end({ headless: true });

console.log(xml2); // child
`

- It logs some warnings in the console that do not apply to jsx-xml

`tsx
const props = { key: '1', other: 'value' };
const xml = render().end({ headless: true });

// Warning: A props object containing a "key" prop is being spread into JSX:
`

$3

jsx-xml provides automatic jsx transformation. It can be configured in the vite or esbuild config.

To config the whole files in the project:

`tsx
export default defineConfig({
esbuild: {
jsxImportSource: 'jsx-xml',
},
});
`

Or to config a specific file:

`tsx
// @jsxImportSource jsx-xml
`

Pros:

- No unrelated warnings in the console

Cons:

- it can not be used jsx-xml and React in the same file
- it needs per file config
- it is not possible to have the children attribute
- order of the key attr is not preserved

`tsx
let xml = render().end({
headless: true,
});

console.log(xml); //
`

$3

jsx-xml provides classic jsx transformation. It can be configured in the vite or esbuild config.

To config the whole files in the project:

`tsx
export default defineConfig({
esbuild: {
jsx: 'transform',
jsxFactory: 'h',
jsxFragment: 'Fragment',
},
});
`

Or to config a specific file:

`tsx
// @jsxRuntime classic
// @jsxFrag Fragment
// @jsx h

import { h, Fragment } from 'jsx-xml';
`

Pros:

- Preserve the order of the key and ref attrs

`tsx
let xml = render().end({
headless: true,
});
console.log(xml); //
`

- It is possible to have the children attribute

`tsx
let xml = render(child).end({ headless: true });
console.log(xml); // child
`

Cons:

- It can not be used jsx-xml and React in the same file
- It needs per file config

$3

- If your project is not a React project, it is better to use the classic jsx transformation.
- If your project is a React project, it is better to split the jsx-xml and React code into different files and use the classic jsx transformation for jsx-xml files.
- If your project is a React project, you can use the React element transformation. if you need key, ref or children` attribute, you can use the classic jsx transformation per file.