https://github.com/danmarshall/tsx-create-element

Use TypeScript TSX without React
https://github.com/danmarshall/tsx-create-element

jsx tsx typescript typescript-tsx

Last synced: about 2 months ago
JSON representation

Use TypeScript TSX without React

• Host: GitHub
• URL: https://github.com/danmarshall/tsx-create-element
• Owner: danmarshall
• License: mit
• Created: 2018-08-30T18:05:26.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-09-09T05:08:00.000Z (over 3 years ago)
• Last Synced: 2024-09-19T23:12:40.706Z (3 months ago)
• Topics: jsx, tsx, typescript, typescript-tsx
• Language: TypeScript
• Size: 1020 KB
• Stars: 13
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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:

```json

{

    "compilerOptions": {

        "jsx": "react",

        "jsxFactory": "createElement"

    }

}

```

Then create a file with the .tsx extension:

```js

//yourcomponent.tsx

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

interface YourProps {

    yourText: string;

}

export const YourComponent = (props: StatelessProps) => {

    return 
{props.yourText}
;

}

```


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

This is analogous to [ReactDOM.render](https://reactjs.org/docs/react-dom.html#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.

```js

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](https://github.com/danmarshall/tsx-create-element/tree/master/test) for an example of component composition.

## Caveats

1. This will only render stateless components. No React = no React lifecycle.

1. 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`.

1. You may also lose focus when `mount` is called. There is a [simplistic heuristic](https://github.com/danmarshall/tsx-create-element/blob/master/src/index.ts#L119) which tries to map the position of the [activeElement](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement).

1. A technique for maintaining stateful textboxes is found in [test/index.tsx](https://github.com/danmarshall/tsx-create-element/blob/master/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