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: 10 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 7 years ago)
- Default Branch: master
- Last Pushed: 2021-09-09T05:08:00.000Z (over 4 years ago)
- Last Synced: 2025-03-18T15:27:37.078Z (11 months ago)
- Topics: jsx, tsx, typescript, typescript-tsx
- Language: TypeScript
- Size: 1020 KB
- Stars: 13
- Watchers: 1
- 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