https://github.com/venkatperi/js.html
A domain specific language (DSL) to build HTML with pure javascript code.
https://github.com/venkatperi/js.html
dsl html javascript
Last synced: about 2 months ago
JSON representation
A domain specific language (DSL) to build HTML with pure javascript code.
- Host: GitHub
- URL: https://github.com/venkatperi/js.html
- Owner: venkatperi
- License: mit
- Created: 2019-08-30T04:13:53.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T18:31:20.000Z (over 2 years ago)
- Last Synced: 2025-03-24T13:17:24.539Z (2 months ago)
- Topics: dsl, html, javascript
- Language: TypeScript
- Homepage:
- Size: 116 KB
- Stars: 12
- Watchers: 3
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# js.html-builder
The `js.html-builder` library provides a domain specific language (DSL) to build HTML with
pure javascript code.
## Installation
Install with `npm`:
```sh
$ npm install --save js.html-builder
```
## Examples
See [complex example](https://github.com/venkatperi/js.html/wiki/Complex-Example) for additional example(s).
### Hello World
This javascript code:
```typescript
import { htmlBuilder } from "js.html-builder"
const code = () =>
html(() => {
head(() => title('Hello World'))
body(() => {
h1('Hello')
p('World')
})
})
console.log(htmlBuilder(code).toHtml())
```
Generates the following HTML:
```HTML
Hello World
Hello
World
```
### HTML snippet
The following HTML snippet mirrors Bootstrap's [alert](https://getbootstrap.com/docs/4.3/components/alerts/) example:
```javascript
import { blockBuilder } from "js.html-builder"
let markup = () => div(() =>
['primary', 'secondary', 'success', 'danger', 'warning',
'info', 'light', 'dark'].forEach(alert =>
div({class: `alert alert-${alert}`, role: "alert"},
`A simple ${alert} alert—check it out!`))
)
console.log(blockBuilder(markup).toHtml())
```
Generates the following
```HTML
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
```
### DIV with Link
In this example, a the text content of a div is mixed with a `link` element. So we need
to explicitly call out the text nodes:
```javascript
import { blockBuilder } from "js.html-builder"
let markup = () => div({class: "alert alert-primary", role: "alert"},
() => {
text("A simple primary ")
a({href: "http://example.com"}, "alert with a link")
text("Click if you like it.")
})
console.log(blockBuilder(markup).toHtml())
```
HTML:
```HTML
```
## Usage
Both `htmlBuilder` and `snippetBuilder` accept a `configuration closure` which configures
and the markup as desired. To emit a html tag, call a function with the same
name (except for `var`), e.g.: to emit a `div`, call `div()`. Each tag function
accepts (syntax permitting) up to three parameters which configure the tag's
attributes, value and child tags, in that order:
* **Attributes**: Tag attributes can be set by passing an object to the tag call, e.g.:
`span({class: 'special', role="alert"})` will emit ``.
* **Content**: Tag content (value) is set by passing as string (or number | boolean), e.g.:
`p('para contents')` will emit `
para contents
`.
* **Child tags**: To emit child tags for the current tag, pass a configuration closure as the last argument. e.g.:
```javascript
div( () =>
span('span contents')
)
```
will emit:
```html
span contents
```
Note that the configuration closure passed as the root must have a single child element.