# @hugov/inhtml

> small and simple in-html templates, factories and dynamic lists

Latest version **1.0.0** (published 2023-06-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hugov/inhtml
pnpm add @hugov/inhtml
yarn add @hugov/inhtml
bun add @hugov/inhtml
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-06-13 |
| First published | 2021-05-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 11.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Hugo Villeneuve |
| Maintainers | hugov |
| Keywords | html, template, dom, browser, dynamic, keyed, list |

## Links

- npm: https://www.npmjs.com/package/@hugov/inhtml
- Repository: https://github.com/hville/inHTML
- Homepage: https://github.com/hville/inHTML#readme
- Issues: https://github.com/hville/inHTML/issues
- npm.io page: https://npm.io/package/@hugov/inhtml

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-06-13
- 0.11.0 — 2023-05-20
- 0.10.3 — 2023-03-25
- 0.9.3 — 2023-03-23
- 0.9.2 — 2023-03-22
- 0.9.1 — 2023-03-22
- 0.9.0 — 2023-03-22
- 0.8.0 — 2022-04-11
- 0.7.0 — 2022-04-11
- 0.6.1 — 2022-04-09
- 0.6.0 — 2022-04-09
- 0.5.0 — 2022-04-04
- 0.4.1 — 2021-06-21
- 0.4.0 — 2021-05-05
- 0.3.0 — 2021-05-05
- … 4 more at https://npm.io/package/@hugov/inhtml/versions

## README

<!-- markdownlint-disable MD004 MD007 MD010 MD041 MD022 MD024 MD032 MD036 -->
# inHTML

*small and simple in-html templates, factories and dynamic lists*

• [Features](#features) • [Limitations](#limitations) • [API](#api) • [License](#license)

```html
<table><tbody></tbody></table>
<template>
	<tr id=row>
		<td id=cell></td>
		<td><a id=label></a></td>
	</tr>
</template>
<script type=module>
	import {cast, list} from '@hugov/inhtml'
	const makeRow = cast('template', ({row, cell, label},v,k) => {
		label.textContent = v.ms
		cell.textContent = v.id
		row.update = v => label.textContent = v.ms
		return row
	})
	const tbody = list($('tbody'), makeRow)
	const data = [ {id:'1', ms:'one'} ]
	tbody.update(data)
	data.push( {id:'2', ms:'two'} )
	tbody.update(data)
</script>
```

## Features

* template inside html markup
* no new html constructs. `id` attributes inside the template are stripped and passed on as reference to the decorator function
* template can be a `<template>` element or any other node
* template is cloned, never modified, id attributes are used as references
* multiple dynamic lists within the same parent

## Limitations

* strictly DOM element creation and manipulations (no router, no store)
* browsers only

## API

* `cast( source, decorator ) => nodeFactory`
  * source: node or selector
  * decorator: (ids, ...args) => node|void, ids are striped from the clone's :id attribute
  * nodeFactory: (,,,args) => decorated clone
* `list( parent, childFactory, options) => parent`
  * adds parent.update(value, key) method to the parent

## Helper functions and utils

* tag`text` => `text`
* $(selector, parent=document) | $`selector` : `querySelector` shortcut
* $$(selector, parent=document) | $$`selector` : `querySelectorAll` shortcut
* html(markup) | html`markup` => DocumentFragment
* load(path) => DocumentFragment
* frame(lambda, {context}) => sandboxed AsyncFunction
* worker(code) => Worker

## License

[MIT](http://www.opensource.org/licenses/MIT) © [Hugo Villeneuve](https://github.com/hville)

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