Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/f1lt3r/implant
🌱 asynchronous inline content replacement
https://github.com/f1lt3r/implant
async content dynamic handler implant insert module node object promise replace string
Last synced: 9 days ago
JSON representation
🌱 asynchronous inline content replacement
- Host: GitHub
- URL: https://github.com/f1lt3r/implant
- Owner: F1LT3R
- License: mit
- Created: 2018-03-21T21:33:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-04-25T21:22:26.000Z (over 6 years ago)
- Last Synced: 2024-10-22T01:27:08.524Z (15 days ago)
- Topics: async, content, dynamic, handler, implant, insert, module, node, object, promise, replace, string
- Language: JavaScript
- Homepage: http://f1lt3r.io
- Size: 85 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Implant
> 🌱 asynchronous inline content replacement
[](https://travis-ci.org/F1LT3R/implant)
[](https://coveralls.io/github/F1LT3R/implant?branch=master)
[](https://www.npmjs.com/package/implant)
[](https://github.com/sindresorhus/xo)
Support the development of Implant.
## Install
```
$ yarn add implant
```
## Fetching Network Resources
Reference an Implant handler from your HTML:
```html
{get: "https://f1lt3r.github.io/foobar/bazqux.html"}
```
Write the Implant handler:
```js
const request = require('request')
const handlers = {
get: url => new Promise((resolve, reject) => {
request(url, (err, res, body) => {
if (err) {
return reject(err)
}
resolve(body)
})
})
}
const result = implant(html, handlers)'
```
The content of [bazqux.html](https://f1lt3r.github.io/foobar/bazqux.html) is fetched from the web when implant handler is executed.
Checkout the result:
```html
Hello, wombat!
```
## Using JavaScript Objects
You can use plain JavaScript object within your HTML:
```html
{article: {
id: 8421,
section: 3
}}
```
Your Implant handler can reference data using the properties you pass:
```js
// Some store of data
const articles = {
8421: {
sections: {
3: 'Foo. Or foo not. There is no bar.'
}
}
}
// Implant handler returns data from store
const handlers = {
article: ref => {
const {id, section} = ref
return articles[id].sections[section]
}
}
const result = implant(html, handlers)
```
Result:
```html
Foo. Or foo not. There is no bar.
```
## Using Illegal JavaScript Values
It is also possible to use illegal JavaScript values, such as references to objects that do not exist. For example:
```html
{foo: i.find.your.lack.of.qux.disturbing}
```
When an illegal value is encountered, Implant pass back a stringified version of the handler.
```js
const handlers = {
foo: uri => console.log
// 'i.find.your.lack.of.qux.disturbing'
}
```
Handling values this way allows you to write cleaner syntax in your content templates by excluding quotes; or designing your own custom syntax.
You might use this feature to reference filenames without quotes:
```html
{article: programming-101.md}
```
Then you could fetch and render the article like this.
```js
const handlers = {
foo: uri => fetchPost(uri)
}
```
## Recusion
You can recurse through the result of you implant like this:
```js
const html = {
level1: '
1 {include: level2}',
level2: '2 {include: level3}',
level3: '3 {include: level4}'
}
const handlers = {
include: ref => {
return html[ref]
}
}
const opts = {
maxRecursion: 3
}
;(async () => {
const result = await implant(html.level1, handlers, opts)
})()
```
Result:
```html
1 2 3 {include: level4}
```
### Why Recusion?
You may want to use recursion if you are building a just-in-time dependancy tree. For example: if your implant fetched a dependency that contained a reference to another depdendancy.
Note: if you do not specify the `maxRecusion` option, implant will only run once.
## Credits
Thanks to the following designers from the Noun Project for the vectors used in the lead graphic.
- [Sarah Rudkin](https://thenounproject.com/sarahdrudkin/)
- [Alex Tai](https://thenounproject.com/sandorsz/)