https://github.com/unlight/h-document-element

Create html elements from jsx (tsx) syntax
https://github.com/unlight/h-document-element

create-element html-element html-elements jsx jsx-renderer tsx

Last synced: about 5 hours ago
JSON representation

Create html elements from jsx (tsx) syntax

• Host: GitHub
• URL: https://github.com/unlight/h-document-element
• Owner: unlight
• License: mit
• Created: 2019-07-09T21:27:41.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-02-13T18:23:49.000Z (over 4 years ago)
• Last Synced: 2024-10-14T04:36:32.084Z (24 days ago)
• Topics: create-element, html-element, html-elements, jsx, jsx-renderer, tsx
• Language: TypeScript
• Homepage:
• Size: 18.6 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# h-document-element

Create html elements from jsx/tsx syntax

## Usage

```json

// tsconfig.json

{

  "compilerOptions": {

    "jsx": "react",

    "jsxFactory": "createElement"

  }

}

```

JSX/TSX code:

```ts

import { createElement } from 'h-document-element';

document.body.appendChild(

  


    


     alert('Hi!')}>Say

  

);

```


Equivalent plain JavaScript code

```js

const divGreetElement = document.createElement('div');

divGreetElement.id = 'greet';

const buttonElement = document.createElement('button');

buttonElement.onclick = () => alert('Hi!');

buttonElement.append('Say');

const divElement = document.createElement('div');

divElement.append(divGreetElement, buttonElement);

document.body.appendChild(divElement);

```

## Browser Support

Only modern browsers are supported:

* Chrome 69

* Edge 76

* Firefox 62

* Opera 56

* Safari 12

If you need IE, you need polyfill for:

* [Object.entries()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#Polyfill)

* [ParentNode.append()](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append#Polyfill)

* [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)

* [Array.flat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)

## Similar Projects

- https://github.com/LeDDGroup/tsx-create-html-element

- https://github.com/Lusito/tsx-dom