# vanilla-element

> 拥有完整 TS 提示的 document.createElement 简化函数.

Latest version **0.6.0** (published 2021-05-03) · 0 weekly downloads

## Install

```sh
npm install vanilla-element
pnpm add vanilla-element
yarn add vanilla-element
bun add vanilla-element
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.0 |
| Published | 2021-05-03 |
| First published | 2020-03-16 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | ymblender |

## Links

- npm: https://www.npmjs.com/package/vanilla-element
- Repository: https://github.com/ymzuiku/vanilla-element
- Homepage: git+https://github.com/ymzuiku/vanilla-element.git
- Issues: git+https://github.com/ymzuiku/vanilla-element.git
- npm.io page: https://npm.io/package/vanilla-element

## Recent versions

- 0.6.0 (latest) — 2021-05-03
- 0.5.6 — 2020-03-19
- 0.5.5 — 2020-03-16

## README

# vanilla-element

拥有完整 TS 提示的 document.createElement 简化函数.

此库源码仅仅是以下几行：

```js
export const Ele = (tag, obj, children) => {
  const el = document.createElement(tag);
  if (obj) {
    Ele.set(el, obj);
  }
  if (children && children.length) {
    el.append(...children);
  }
  return el;
};

Ele.set = (target, obj) => {
  const { style, ...rest } = obj;
  if (style) {
    Object.assign(target.style, style);
  }

  Object.assign(target, rest);

  return target;
};
```

## Example:

Easy create HTMLElement:

```js
import Ele from "vanilla-element";

// 可以创建类似树形的代码
const view = Ele("div", { className: "page", style: { fontSize: "3em" } }, [
  Ele("div", null, [
    Ele("h1", { textContent: "hello" }),
    Ele("p", { textContent: "world" }),
  ]),
]);

// 可以设置 Element 属性，其中 style 内容会进行覆盖合并
Ele.set(view, {
  id: "the-id",
  style: {
    backgroundColor: "#f77",
  },
});

document.body.append(view);
```

仅此而已

---
_Source: https://npm.io/package/vanilla-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._