https://github.com/dragon-fish/dom-plus

Very simple DOM generator with types declaration.
https://github.com/dragon-fish/dom-plus

create-element dom element generator html-generator

Last synced: 26 days ago
JSON representation

Very simple DOM generator with types declaration.

• Host: GitHub
• URL: https://github.com/dragon-fish/dom-plus
• Owner: dragon-fish
• License: mit
• Created: 2023-02-15T10:41:37.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-04-26T20:34:07.000Z (7 months ago)
• Last Synced: 2024-10-11T19:31:27.400Z (about 1 month ago)
• Topics: create-element, dom, element, generator, html-generator
• Language: TypeScript
• Homepage: https://npm.im/dom-plus
• Size: 52.7 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


![dom-plus](https://socialify.git.ci/dragon-fish/dom-plus/image?description=1&font=Inter&forks=1&issues=1&language=1&name=1&pulls=1&stargazers=1&theme=Auto)

# PRO DOM Generator

Very simple DOM generator with types declaration.



## Why?

- [x] 🤯 Vanilla JS, no framework required!

- [x] 😏 No more `document.createElement` and `element.appendChild`!

- [x] 🤫 Even no `element.addEventListener`!

- [x] 🤩 Modify existing Element instance!

- [x] 😍 Fricking tiny size: 0 dependencies, 0 configuration, 0 problems! `dist/index.js  2.46 kB │ gzip: 0.96 kB │ map: 13.62 kB`

## Installation

### From NPM

```sh

# Via npm

npm install dom-plus

# Or pnpm

pnpm add dom-plus

# Yarn? sure

yarn add dom-plus

```

Then import it to your project.

```ts

// ESM

import { h } from 'dom-plus'

// CJS

const { h } = require('dom-plus')

```

### In browser

```html

  const { h } = window.DOMPlus

  // ...

```

Or... Why not ESM?

```ts

import { h } from 'https://unpkg.com/dom-plus?module'

// ...

```

## Usage

### General usage

```ts

// step-1  - create element

const block = h('div', { class: 'foo', style: 'color: red' }, [

  h('span', 'bar'),

  'baz',

])

// step-2? - no more steps! It works as you expect!

console.info(block.outerHTML) // 


barbaz

```


### CSS styles

Why not use CSS styles as an object?

```ts

const redBlock = h('div', { style: { color: 'red' } }, 'Hey, I am red!')

  .$css({

    backgroundColor: 'black',

  })

  .$css('font-size', '2em')

```

It's working! Even with the types!

### Class names

```ts

const block = h('div', { class: ['foo', 'bar'] }, 'Hey, I have classes!')

  .$addClass('baz')

  .$removeClass('foo')

```

Needless to say, it's working too!!

### Event listeners

```ts

const button = h(

  'button',

  {

    onClick: () => {

      alert('Hello, world!')

    },

  },

  'Click me!'

)

const stop = button.$on('click', (e) => {

  e.preventDefault()

  e.stopPropagation()

  alert('This alert will be shown only once!')

  stop()

})

```

**IT JUST WORKS!!!**

### Pass through Element as first argument

So you can modify the element.

```ts

// From: 
Blah

const block = h(

  document.querySelector('#some-element'),

  { class: 'foo' },

  'Hey, I am a block!'

)

block.$css('color', 'red').$addClass('bar')

// To: 
Hey, I am a block!

```


Why are you still reading this?!! **Just try it!!!!!**

---

> MIT License

>

> Copyright (c) 2023-present dragon-fish