npm package: @sanatanai/create
Description: Create HTML elements with a simple syntax.
Author: Sanatan AI
Latest version: 1.0.3

<img style="max-width: 300px; margin-left: auto; margin-right: auto" src="https://raw.githubusercontent.com/ShivamSharma999/Sanatan-AI-Welcome/refs/heads/master/logo.png" alt="Sanatan AI logo" />

# Sanatan AI - Create

A modern, minimal, and efficient JavaScript utility for creating HTML elements with a simple, expressive syntax. Inspired by the need to reduce boilerplate and make DOM manipulation more declarative and readable.

---

## Features

- **Declarative Element Creation:** Create elements with tag, classes, IDs, properties, children, event listeners, and parent in a single call.
- **Flexible API:** Supports text, HTML, or nested elements as children.
- **Event Listener Helper:** Add multiple event listeners easily.
- **Lightweight & Dependency-Free:** No external dependencies, pure JavaScript.

---

## Installation

```bash
npm install @sanatanai/create
```

Or use directly in your browser via CDN:

```html
<script type="module">
	import { Create } from 'https://unpkg.com/@sanatanai/create/index.js';
</script>
```

---

## Usage

### Classic vs. Create

```js
// Classic way
const div = document.createElement('div');
div.className = 'mydiv';
div.hidden = true;
div.appendChild(document.createElement('p'));
div.addEventListener('click', myFn);
div.addEventListener('mousemove', myFn2);
divParent.appendChild(div);

// With Create
import { Create } from '@sanatanai/create';
const div = Create('div.mydiv', {hidden: true},Create('p'), [['click', myFn], ['mousemove', myFn2]], divParent);
```

---

## API Reference

### `Create(selector, properties, childs, events, parentElement)`

| Parameter      | Type                                             | Description                                                                                 |
|--------------- |--------------------------------------------------|---------------------------------------------------------------------------------------------|
| `selector`     | `string`                             | Selector-like string (e.g., `div.main#hero`)                                                |
| `properties`        | `object`                        | Properties/attributes to set on the element (e.g., `{hidden: true, style: {color: 'red'}}`) |
| `childs`       | `Element[] \| Element \| string`     | Child node, Array of child nodes or text content                                              |
| `events`       | `[string, fn] \| Array<[string, fn]>`| Event listeners (single or array of `[event, handler]`)                                     |
| `parentElement`| `Element`                            | Parent to append the created element to                                                     |

Returns the created `Element`.

#### Example

```js
const btn = Create('button.btn#main', { type: 'button', style: { color: 'white', background: 'blue' } }, 'Click Me', ['click', () => alert('Clicked!')], document.body);
```

---

### `evListener(events, element, listener)`

Add one or more event listeners to an element.

- `events`: Comma-separated string of event names (e.g., `'click,mouseover'`)
- `element`: Target element
- `listener`: Event handler function

---

## Advanced Usage

- **Multiple Classes/IDs:**
	- `Create('div.class1.class2#id1#id2')` will add all classes and IDs.
- **Style Object:**
	- Pass a `style` object in `properties` for inline styles.
- **HTML Content:**
	- If `childs` contains `<`, it will be set as `innerHTML`.

---

## License

MIT © Sanatan AI

---

## Links

- [GitHub Repository](https://github.com/ShivamSharma999/create)
- [NPM Package](https://www.npmjs.com/package/@sanatanai/create)