# html-jsx
> Extensible jsx type definitions for standard html interfaces.
Latest version **1.0.0** (published 2022-12-07) · MIT license · 0 weekly downloads
## Install
```sh
npm install html-jsx
pnpm add html-jsx
yarn add html-jsx
bun add html-jsx
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-12-07 |
| First published | 2021-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 389.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 6 |
| Author | stagas |
| Maintainers | stagas |
| Keywords | jsx, html, dom, types, typings |
## Links
- npm: https://www.npmjs.com/package/html-jsx
- Repository: https://git@github.com/stagas/html-jsx
- Homepage: https://github.com/stagas/html-jsx#readme
- Issues: https://github.com/stagas/html-jsx/issues
- npm.io page: https://npm.io/package/html-jsx
## Dependencies (3)
- [csstype](https://npm.io/package/csstype.md) ^3.0.11
- [esbuild](https://npm.io/package/esbuild.md) ^0.15.14
- [esbuild-register](https://npm.io/package/esbuild-register.md) ^3.4.1
## Alternatives
- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads
## Recent versions
- 1.0.0 (latest) — 2022-12-07
- 0.4.0 — 2022-12-07
- 0.3.7 — 2022-08-01
- 0.3.6 — 2022-07-29
- 0.3.5 — 2022-07-29
- 0.3.4 — 2022-04-13
- 0.3.3 — 2022-04-12
- 0.3.2 — 2022-04-09
- 0.3.1 — 2022-04-09
- 0.3.0 — 2022-04-09
- 0.2.3 — 2022-01-19
- 0.2.2 — 2021-12-27
- 0.2.1 — 2021-12-07
- 0.2.0 — 2021-12-07
- 0.1.2 — 2021-12-07
- … 2 more at https://npm.io/package/html-jsx/versions
## README
html-jsx
extensible jsx type definitions for standard html interfaces
🔧 Install
· 🧩 Usage
· 🔥 Releases
· 💪🏼 Contribute
· 🖐️ Help
---
## Install
```sh
$ npm i html-jsx
```
## Usage
Because of the way TypeScript and JSX work, we have to insert this
piece of code where the `createElement` (or `h`) factory lives in
order for the types to be picked up correctly by the compiler:
```ts
import type * as jsx from 'html-jsx'
// this declaration allows us to augment JSX interfaces
declare module 'html-jsx' {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface DOMAttributes extends JSX.IntrinsicAttributes {
// here we could add attributes specific only to DOM elements (HTML+SVG)
}
}
// this introduces our JSX definitions into the global scope
declare global {
namespace JSX {
/** The type returned by our `createElement` factory. */
type Element = string
interface IntrinsicElements extends jsx.IntrinsicElements {
/** This allows for any tag to be used. */
[k: string]: unknown
}
// here we can add attributes for all the elements
interface IntrinsicAttributes {
/** List index key - each item's `key` must be unique. */
key?: string | number
}
/**
* These are exported to the global JSX namespace to allow
* declaring custom elements types.
* @see `playground/app.tsx`
*/
interface HTMLAttributes extends jsx.HTMLAttributes {}
interface SVGAttributes extends jsx.SVGAttributes {}
interface DOMAttributes extends jsx.DOMAttributes {}
}
}
```
After this, html JSX tags in our application(or library) plus anything else that depends on it, should be properly picking up the types, with intellisense, documentation and lint working.
See [playground](playground/) for more usage details.
## Extras
An [eslint](https://github.com/eslint/eslint) configuration based on [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react)
that only enables JSX rules that would possibly cause problems is available [here](https://github.com/stagas/eslint-config-html-jsx). No stylistic rules are applied (use [Prettier](https://github.com/prettier/prettier) for this). It also sets up the JSX pragma to `h` and the fragment to `Fragment` which is probably what you need. All these can be configured again, or you can use the react plugin directly. This is only for convenience for my own projects basically but distributing it to save someone's time potentially.
To use it, just install it and add to your eslint config:
```sh
$ npm i eslint-config-html-jsx
```
eslintrc.js:
```js
...
extends: ['html-jsx'],
...
```
## Credits
- [markuplint](https://github.com/markuplint/markuplint/) for the [html-spec](https://github.com/markuplint/markuplint/tree/main/packages/%40markuplint/html-spec) data which are used to generate _most_ of the HTML types and documentation.
- [ko-jsx](https://github.com/ryansolid/ko-jsx/blob/master/src/jsx.d.ts) which this was based on, which was
itself based on [Surplus](https://github.com/adamhaile/surplus/blob/master/index.d.ts) and [Inferno](https://github.com/infernojs/inferno/blob/master/packages/inferno/src/core/types.ts) which were themselves based off React's.
- [CSSType](https://github.com/frenic/csstype/) for the rules that are used in the `style` attributes.
- Of course, [Mozilla MDN](https://developer.mozilla.org/en-US/docs/Web) which all of the previous are based on.
- Many thanks to everyone who contributed.
## Contribute
[Fork](https://github.com/stagas/html-jsx/fork) or
[edit](https://github.dev/stagas/html-jsx) and submit a PR.
All contributions are welcome!
## License
MIT © 2021
[stagas](https://github.com/stagas)
---
_Source: https://npm.io/package/html-jsx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._