# crelm

> The exceptionally small (< 3kb), super fast, independent, fully tested, and modular javascript library that simplifies and expedites page work flows.

Latest version **7.0.0** (published 2020-09-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install crelm
pnpm add crelm
yarn add crelm
bun add crelm
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 7.0.0 |
| Published | 2020-09-15 |
| First published | 2019-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Patrick Trester |
| Maintainers | uraikus |
| Keywords | createElement, modular, componentization, elements, virtual, DOM, zero-dependencies, simple |

## Links

- npm: https://www.npmjs.com/package/crelm
- Repository: https://github.com/uraikus/crelm
- Homepage: https://github.com/uraikus/crelm#readme
- Issues: https://github.com/uraikus/crelm/issues
- npm.io page: https://npm.io/package/crelm

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 7.0.0 (latest) — 2020-09-15
- 6.0.1 — 2020-08-19
- 6.0.0 — 2020-07-04
- 5.0.0 — 2020-04-28
- 4.0.0 — 2020-04-24
- 3.0.3 — 2020-03-26
- 3.0.2 — 2020-03-20
- 3.0.1 — 2020-01-30
- 3.0.0 — 2020-01-30
- 2.0.0 — 2020-01-23
- 1.0.5 — 2019-11-04
- 1.0.4 — 2019-11-04
- 1.0.3 — 2019-09-08
- 1.0.2 — 2019-09-08
- 1.0.1 — 2019-09-08
- … 1 more at https://npm.io/package/crelm/versions

## README

crelm (createElement)
==
The exceptionally small (3.9kb), super fast, independent, fully tested, and modular javascript library that simplifies and expedites page work flows.

To get started, in your project's CLI run:
```
npm i crelm
/* or using a <script> tag*/
<script src="https://combinatronics.com/uraikus/crelm/master/browser/v7.0.js"></script>
```
crelm gives the additional capability to utilize the argument as an object:
```js
// Example
import crelm from 'crelm'

let newLink = (name, href) => crelm({
  tag: 'A',
  parent: document.body, // a string === document.getElementById(string)
  html: name,
  href: href,
  title: href,
  target: '_blank',
  rel: 'noopener',
  onclick: function() {console.log(`Clicked: ${this.html}`)}
})

export default newLink
```
Easy DOM tree constructions:
```js
let div = crelm({innerText: 'Hello World!'})
crelm({
  children:[
    'a text node', // Creates a textNode
    {tag: 'span', text: 'Greetings'}, // <span>Greetings</span>
    div, // Appends child to element
    conditionalElement ? {tag: 'Hello!'} : false,
    {oncreate: element => {
      doSomethingToElement(element)
    }}
  ]
})
```
Easy to update components on data changes:
```js
import {state} from './state'

ondata = e => {
  // By default, this element will be updated to match or created if it doesn't exist
  crelm({id: 'test', style: {display: state.show}, parent: elem, text: e.data})
}
```
The second argument can pass options:
```js
// defaults
crelm({}, {
  deepClone: false, // Wether objects in the attribute argument will be stored as references or new objects. True === new Object()
  replaceElement: false, // Wether to remove the old and create a new reference.
  alwaysInsert: false, // Overides the update procedure.
  mergeChanges: false // When true, children, arguments, dataset, and style won't be reset on each update
})
```
You can create a document fragment by using an array for the first argument or using the fragment tagName:
```js
  document.body.appendChild(
    crelm([
      {tag: 'b', text: 'Hello World!'}
    ])
  )
  // or
  crelm({
    parent: document.body,
    tag: 'frag', // or 'fragment'
    children: [
      {tag: 'b', text: 'Hello World!'}
    ]
  })
  // also works for children elements
  crelm({children: [
    {tag: 'h1', text: 'Next sibling fragment:'},
    ['fragment','full','of','textNodes', {tag:'b', text: '!'}]
  ]})
```
You can utilize the shadow dom with the shadow attribute:
```js
  crelm({
    shadow: [
      {tag:'b', text: 'Shadow child.'}
    ]
  })
  // or
  crelm({
    shadow: {
      closed: true, // defaults to false
      children: [
        {tag: 'b', text: 'Shadow child.'}
      ]
    }
  })
```
Your elements can then be turned back into JSON with the toJSON method:
```js
let elem = crelm({
  tag: 'input',
  value: 'all the data',
  placeholder: 'enter the data',
  dataset: {
    test: true
  },
  style: {
    fontSize: 'large',
    color: 'blue'
  }
})
elem.toJSON() // would return the following:
{
  tagName: 'INPUT',
  value: 'all the data',
  placeholder: 'enter the data',
  dataset: {
    test: 'true' // dataset values are converted to strings
  },
  style: 'font-size: large; color: blue;' // notice type conversion here.
}
```
You can set attributes using the attr:Object key:
```js
let elem = crelm({
  tag: 'input',
  attr: {max: 5, min: 2}
})
elem.outerHTML // <input max=5 min=2 />
```
Abbreviations/aliases:
```js
  shadow === shadowRoot // Automatically attaches Shadow when an array of elements.
  tag === tagName
  parent === parentElement
  clss === className
  html === innerHTML
  text === innerText
```
If you like this package, also check out the following:
- [crelmstat](https://www.npmjs.com/package/crelmstat) for state management
- [crelm-popup](https://www.npmjs.com/package/crelm-popup) for a super simple popup
- [crease](https://www.npmjs.com/package/crease) for modular css
# Changelog

* V7.0.0
  - **Added:** Document fragments by using the 'frag' || 'fragment' tag or making the first argument an array.
  - **Added:** ShadowDOM can be utilized like the children argument.
* V6.0.1
  - **Added:** README.md with references to other products.
  - **Changed:** package description.
* V6.0.0
  - **Added:** if an element already exists with the id, it will instead modify the pre-existing one.
  - **Added:** options argument with alwaysInsert, replaceElement, mergeChanges, and deepClone.
  - **Changed:** deepClone is now in the options argument, not the attributes argument.
* V5.0.0
  - **Fixed:** Style attribute now converts when string.
  - **Added:** The ('attr': Object) attribute will now setAttributes via key/value.
* V4.0.0
  - Created changelog
  - Added the toJSON method
  - In crelm(attr) the attr must be an object or falsy.
  - The style attribute can now be a string.

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