https://github.com/k-yle/jsx-to-xml
Tiny package to stringify a JSX tree into XML/HTML
https://github.com/k-yle/jsx-to-xml
Last synced: 4 months ago
JSON representation
Tiny package to stringify a JSX tree into XML/HTML
- Host: GitHub
- URL: https://github.com/k-yle/jsx-to-xml
- Owner: k-yle
- License: mit
- Created: 2024-10-21T10:51:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-22T07:41:07.000Z (over 1 year ago)
- Last Synced: 2025-09-05T16:42:25.642Z (9 months ago)
- Language: TypeScript
- Homepage: https://npm.im/jsx-to-xml
- Size: 104 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# jsx-to-xml
[](https://github.com/k-yle/jsx-to-xml/actions)
[](https://npm.im/jsx-to-xml)
[](https://npm.im/jsx-to-xml)
Tiny package to stringify a JSX tree into XML/HTML. 0.6kB and no dependencies.
## Example
```jsx
const feedTitle = 'My RSS Feed';
const Item = ({ name }) => <>Hi {name}>;
const xml = (
{feedTitle}
);
console.log(xml);
// prints: 'My RSS FeedHi bob'
```
## Install
```sh
npm install -S jsx-to-xml
```
## Setup
If you want to use this library to transform every `.jsx`/`.tsx` file in your repository, then you can add the following to your [tsconfig.json](./tsconfig.json) file:
```diff
{
"compilerOptions": {
+ "jsx": "react-jsx",
}
}
```
Alternatively, you can apply this library to specific `.jsx`/`.tsx` files only, by adding the following comment to the top of the file:
```diff
+ /* @jsxImportSource jsx-to-xml */
```
## Special Cases
- You can use [JSX fragments](https://react.dev/reference/react/Fragment), they will not appear in the output
- You can import `Comment` and use `…`, which will get converted into ``
- You can import `CData` and use `…`, which will get converted into ``
## Type Safety
To create TypeScript definitons for every component that you use, create a new file (for example `global.def.ts`), and include the following content:
```ts
/** @internal */
declare global {
namespace JSX {
interface IntrinsicElements {
// list your components and their propsx here:
example: { a?: string; b?: number; c?: boolean };
rect: { width: number; height: number };
}
}
}
export {};
```
The example above defines two components: `` and ``, with a mix of optional and required props.
If you're creating a library, you should normally include `/** @internal */` above the `declare global { … }` block, and enable [`stripInternal`](https://typescriptlang.org/tsconfig/#stripInternal) in [tsconfig.json](./tsconfig.json), so that these global types are not available to anyone consuming your library.