tsx-create-element

Use TypeScript TSX without React

Love the efficiency of TypeScript TSX syntax, but you have a small project that doesn't use React? This library may help.

Usage

createElement

First, set your tsconfig.json file with these settings:

{
    "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "createElement"
    }
}

Then create a file with the .tsx extension:

//yourcomponent.tsx
import { createElement, StatelessProps } from 'tsx-create-element';

interface YourProps {
    yourText: string;
}

export const YourComponent = (props: StatelessProps<YourProps>) => {
    return <div>{props.yourText}</div>;
}

mount ( jsxElement: JSX.Element, container: HTMLElement )

This is analogous to ReactDOM.render. Typically your app will only mount one component which contains your entire tree. You will need to call mount anytime your props change. No React = no virtual DOM.

import { createElement, mount } from 'tsx-create-element';
import { YourComponent } from './yourcomponent';
mount(YourComponent({yourText:"hello world"}), document.getElementById('your-div-ID'));

Example code

See the test folder for an example of component composition.

Caveats

1. This will only render stateless components. No React = no React lifecycle.
2. Everytime mount is called, the DOM subtree is obliterated. You may lose state in stateful elements such as textboxes. You will need to manage this yourself, prior to calling mount.
3. You may also lose focus when mount is called. There is a simplistic heuristic which tries to map the position of the activeElement.
4. A technique for maintaining stateful textboxes is found in test/index.tsx.

Test

To see the test page, run:

npm start

Similar work

• https://yetawf.com/BlogEntry/Title/TypeScript%20and%20JSX%20without%20React/?BlogEntry=1034
• https://holtwick.de/blog/jsx-without-react
• https://www.meziantou.net/2018/05/28/write-your-own-dom-element-factory-for-typescript
• https://github.com/dtkerr/jsx-no-react