Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/domchristie/composite
A hybrid client-side/server-side approach to generating dynamic HTML
https://github.com/domchristie/composite
Last synced: 12 days ago
JSON representation
A hybrid client-side/server-side approach to generating dynamic HTML
- Host: GitHub
- URL: https://github.com/domchristie/composite
- Owner: domchristie
- License: mit
- Created: 2024-06-10T21:14:49.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-06-16T09:44:52.000Z (5 months ago)
- Last Synced: 2024-06-16T10:54:40.049Z (5 months ago)
- Language: JavaScript
- Homepage: https://domchristie.github.io/composite/
- Size: 260 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🦷 Composite
A tiny web template system for the browser.
Compose your HTML in `` elements. Use placeholders (`${…}`) to mark dynamic content. Call `fill` to generate a new HTML string which interpolates the template's content with the given properties.
## Usage
```sh
npm install @domchristie/composite
```
```html
/* rendered somewhere in the DOM */
${greeting}, ${name}!
```
```js
import { fill } from '@domchristie/composite'
const Hello = document.getElementById('hello')
fill(Hello, { greeting: 'Hello', name: 'World' }) // '
Hello, World!
'
```
## API Docs
#### Table of Contents
* [fill](#fill)
* [Parameters](#parameters)
* [html](#html)
* [Parameters](#parameters-1)
* [escape](#escape)
* [Parameters](#parameters-2)
* [unescape](#unescape)
* [Parameters](#parameters-3)
* [raw](#raw)
* [Parameters](#parameters-4)
### fill
[composite.js:8-15](https://github.com/domchristie/composite/blob/47ceebce8126d3ea0fadfa8f7b21ee5db81d3a0d/composite.js#L8-L15 "Source code on GitHub")
Renders a template with given properties.
#### Parameters
* `template` **(HTMLTemplateElement | [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String))** The HTML template to be rendered.
* `props` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** An object containing properties to be interpolated into the template.
Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The rendered HTML string with properties interpolated.
### html
[composite.js:25-32](https://github.com/domchristie/composite/blob/47ceebce8126d3ea0fadfa8f7b21ee5db81d3a0d/composite.js#L25-L32 "Source code on GitHub")
A tag function for template literals that escapes HTML special characters in
values unless they are marked as raw.
#### Parameters
* `strings` **TemplateStringsArray** An array of string literals.
* `values` **...any** The values to be interpolated into the template.
Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The final string with values safely interpolated.
### escape
[composite.js:41-43](https://github.com/domchristie/composite/blob/47ceebce8126d3ea0fadfa8f7b21ee5db81d3a0d/composite.js#L41-L43 "Source code on GitHub")
Escapes special characters in a string for use in HTML.
The characters escaped are: & < > " ' \` = /
#### Parameters
* `string` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The input string to escape.
Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The escaped string.
### unescape
[composite.js:61-65](https://github.com/domchristie/composite/blob/47ceebce8126d3ea0fadfa8f7b21ee5db81d3a0d/composite.js#L61-L65 "Source code on GitHub")
Unescapes a given HTML-encoded string.
#### Parameters
* `string` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The HTML-encoded string to unescape.
Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The unescaped string.
### raw
[composite.js:74-76](https://github.com/domchristie/composite/blob/47ceebce8126d3ea0fadfa8f7b21ee5db81d3a0d/composite.js#L74-L76 "Source code on GitHub")
Marks a string as raw HTML to prevent escaping of special characters.
#### Parameters
* `html` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The HTML string to wrap.
Returns **RawString** The wrapped HTML string as a RawString object.
## unsafe-eval
Composite uses `new Function` to generate HTML from templates. This approach can fail when using strict Content Security Policies (CSPs).
## License
Copyright © 2024+ Dom Christie and released under the MIT license.