Implant
🌱 asynchronous inline content replacement
Support the development of Implant.
Install
$ yarn add implant
Fetching Network Resources
Reference an Implant handler from your HTML:
{get: "https://f1lt3r.github.io/foobar/bazqux.html"}
Write the Implant handler:
const request = const handlers = { } const result = '
The content of bazqux.html is fetched from the web when implant handler is executed.
Checkout the result:
Hello, wombat!
Using JavaScript Objects
You can use plain JavaScript object within your HTML:
<!-- Implant reference object --> {article: { id: 8421, section: 3 }}
Your Implant handler can reference data using the properties you pass:
// Some store of dataconst articles = 8421: sections: 3: 'Foo. Or foo not. There is no bar.' // Implant handler returns data from storeconst handlers = { const id section = ref return articlesidsectionssection } const result =
Result:
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:
{foo: i.find.your.lack.of.qux.disturbing}
When an illegal value is encountered, Implant pass back a stringified version of the handler.
const handlers = consolelog // '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:
{article: programming-101.md}
Then you could fetch and render the article like this.
const handlers =
Recusion
You can recurse through the result of you implant like this:
const html = level1: '<div>1 {include: level2}</div>' level2: '<div>2 {include: level3}</div>' level3: '<div>3 {include: level4}</div>' const handlers = { return htmlref } const opts = maxRecursion: 3 ;async { const result = await }
Result:
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.