This plugin allows you to fetch remote or local content and display it in your HTML.
Input:
Output:
Leanne Graham's username is Bretnpm i posthtml posthtml-fetch
const posthtml = require('posthtml')
const posthtmlFetch = require('posthtml-fetch')
posthtml()
.use(posthtmlFetch())
.process('<fetch url="https://example.test">{{ response }}</fetch>')
.then(result => console.log(result.html))
// => interpolated response bodyThe response body will be available under the response local variable.
The plugin supports json and text responses.
Only the response body is returned.
The plugin uses posthtml-expressions, so you can use any of its tags to work with the response.
For example, you can iterate over items in a JSON response:
You may configure the plugin with the following options.
Type: String[]
Default: ['fetch', 'remote']
Array of supported tag names.
Only tags from this array will be processed by the plugin.
Example:
const posthtml = require('posthtml')
const posthtmlFetch = require('posthtml-fetch')
posthtml()
.use(posthtmlFetch({
tags: ['get']
}))
.process('<get url="https://example.test">{{ response }}</get>')
.then(result => console.log(result.html))Type: String
Default: 'url'
String representing attribute name containing the URL to fetch.
Example:
const posthtml = require('posthtml')
const posthtmlFetch = require('posthtml-fetch')
posthtml()
.use(posthtmlFetch({
attribute: 'from'
}))
.process('<fetch from="https://example.test">{{ response }}</fetch>')
.then(result => {
console.log(result.html) // interpolated response body
})The plugin uses ofetch to fetch data. You can pass options directly to it, inside the ofetch object.
Example:
const posthtml = require('posthtml')
const posthtmlFetch = require('posthtml-fetch')
posthtml()
.use(posthtmlFetch({
ofetch: {
// pass options to ofetch...
}
}))
.process('<fetch url="https://example.test">{{ response }}</fetch>')
.then(result => {
console.log(result.html) // interpolated response body
})Type: Boolean
Default: false
When set to true, this option will preserve the tag around the response body.
Example:
const posthtml = require('posthtml')
const posthtmlFetch = require('posthtml-fetch')
posthtml()
.use(posthtmlFetch({
preserveTag: true
}))
.process('<fetch url="https://example.test">{{ response }}</fetch>')
.then(result => {
console.log(result.html)
// => <fetch url="https://example.test">interpolated response body</fetch>
})Type: Object
Default: {}
You can pass options to posthtml-expressions.
Example:
const posthtml = require('posthtml')
const posthtmlFetch = require('posthtml-fetch')
posthtml()
.use(posthtmlFetch({
expressions: {
delimiters: ['[[', ']]'],
}
}))
.process('<fetch url="https://example.test">[[ response ]]</fetch>')
.then(result => {
console.log(result.html) // interpolated response body
})List of plugins that will be called after/before receiving and processing locals
Example:
const posthtml = require('posthtml')
const posthtmlFetch = require('posthtml-fetch')
posthtml()
.use(posthtmlFetch({
plugins: {
before: [
tree => {
// Your plugin implementation
},
tree => {
// Your plugin implementation
}
],
after: [
tree => {
// Your plugin implementation
},
tree => {
// Your plugin implementation
}
]
}
}))
.process('<fetch url="https://example.test">{{ response }}</fetch>')
.then(result => {
console.log(result.html) // interpolated response body
})