Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/stagas/html-jsx

Extensible JSX type definitions for standard HTML interfaces.
https://github.com/stagas/html-jsx

dom html jsx types typings

Last synced: 5 days ago
JSON representation

Extensible JSX type definitions for standard HTML interfaces.

Host: GitHub
URL: https://github.com/stagas/html-jsx
Owner: stagas
License: mit
Created: 2021-12-05T09:57:21.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2022-12-07T15:58:24.000Z (almost 2 years ago)
Last Synced: 2024-10-24T11:26:01.182Z (12 days ago)
Topics: dom, html, jsx, types, typings
Language: TypeScript
Homepage:
Size: 640 KB
Stars: 6
Watchers: 2
Forks: 0
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

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