Prototyping library for JSON-driven web pages
npm install fill-me-in
A prototyping library for JSON-driven web pages.
Let's say you keep a list of things you like in a file called favorites.json.
It looks like this.
``json`
[
"Raindrops on roses",
"Whiskers on kittens",
"Bright copper kettles",
"Warm woolen mittens",
"Brown paper packages tied up with strings"
]
And, you want to display this list on a website. HTML has a
<template>
tag, so let's use that.
`html`My favorite things
The data-src attribute specifies the data source for this template. Theembed attribute tells the library to render the template in place.
So, the HTML above produces
> # My favorite things
> - Raindrops on roses
> - Whiskers on kittens
> - Bright copper kettles
> - Warm woolen mittens
> - Brown paper packages tied up with strings
Ready to try it out for yourself? Have a look at the demos in the next section.
- My Favorite Things
- Bingo Book
- Tests
The class Render is a builder API for customizing the render operation.
For example, this expression,
`javascript`
render("#album-template")
.filter(album => album.rating >= 4.5)
.into("#content");
When executed (via into), does the following:
- Finds the DOM element by the ID album-template
- Fetches JSON from the URL specified in its data-src attribute
- Removes albums that have a rating lower than 4.5
- Renders the remaining albums with the #album-template and inserts it into #content
#### render(template: string | HTMLTemplateElement): Render
Initialize the Render API with a selector string or HTMLTemplateElement.
#### .map(f: T => U): Render
Map over content, transforming it with f.
#### .mapList(this: Render, f: (u: U) => V): Render
Map over a list, transforming each item into something else.
#### .reduce(this: Render, f: (accumulator: V, next: U) => V, initial: V): Render
Fold over the content to transform it into something else.
#### .filter(this: Render, predicate: (value: U) => boolean): Render
Remove content, keeping only that which matches the predicate.
#### .withValue
Specify values statically, instead of from data-src.
#### .asFragment(): Promise
Runs the render process with the customizations.
#### .into(target: string | HTMLElement): Promise
Runs asFragment and inserts the document fragment into the target, replacing its contents.
#### .cache(): Promise
Runs the renderer, and creates a save point for its state.
Some common scenarios follow.
A list of albums
`javascript`
{
albums: [
{ name: "Dr. Feelgood", year: 1989, artist: "Mötley Crüe" },
{ name: "Appetite For Destruction", year: 1987, artist: "Guns N' Roses" }
]
}
applied to this template
`html`
produces
`html`
Dr. Feelgood
1989
Mötley Crüe
Appetite For Destruction
1987
Guns N' Roses
The attribute onempty is a Javascript callback that is run when the indexed{ albums: [] }
list is empty (i.e. ).
`html
`
becomes
`htmlNo albums found.
$3
The indexed value sets the
src attribute.`javascript
{
pic: "https://example.com/example.jpg"
}
`applied to
`html
![]()
`produces
`html

`Mods (short for modifiers)
HTML has a nested structure that maps to JSON, but sometimes we need more
flexibility. For
, we want to set the value of the src attribute. For
we want to set the value of href and textContent. The render
function knows how to do all of this because of mods. Mods describe
how to transform a target element by a value.The default mod sets the
textContent of the target.`javascript
function(e) { e.target.textContent = e.value }
`You can define your own custom mods. This is a nonsense modifier to set
every target element to "hello", ignoring the passed in value.
`javascript
function nonsense(e) { e.target.textContent = "hello" }
`Pass it to render via
withMods.`javascript
renderFragment.withMods(function(mods) { return [nonsense]; });
``