About

This plugin allows you to fetch remote or local content and display it in your HTML.

Input:

``hbs

{{ response.name }}'s username is {{ response.username }}

`

Output:

`html
Leanne Graham's username is Bret
`

Install

`
npm i posthtml posthtml-fetch
`

Usage

`js
const posthtml = require('posthtml')
const posthtmlFetch = require('posthtml-fetch')

posthtml()
.use(posthtmlFetch())
.process('{{ response }}')
.then(result => console.log(result.html))

// => interpolated response body
`

The response body will be available under the response local variable.

Response types

The plugin supports json and text responses.

Only the response body is returned.

Expressions

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:

`hbs


{{ user.name }}


`

Options

You may configure the plugin with the following options.

$3

Type: String[]\
Default: ['fetch', 'remote']

Array of supported tag names.

Only tags from this array will be processed by the plugin.

Example:

`js
const posthtml = require('posthtml')
const posthtmlFetch = require('posthtml-fetch')

posthtml()
.use(posthtmlFetch({
tags: ['get']
}))
.process('{{ response }}')
.then(result => console.log(result.html))
`

$3

Type: String\
Default: 'url'

String representing attribute name containing the URL to fetch.

Example:

`js
const posthtml = require('posthtml')
const posthtmlFetch = require('posthtml-fetch')

posthtml()
.use(posthtmlFetch({
attribute: 'from'
}))
.process('{{ response }}')
.then(result => {
console.log(result.html) // interpolated response body
})
`

$3

The plugin uses ofetch to fetch data. You can pass options directly to it, inside the ofetch object.

Example:

`js
const posthtml = require('posthtml')
const posthtmlFetch = require('posthtml-fetch')

posthtml()
.use(posthtmlFetch({
ofetch: {
// pass options to ofetch...
}
}))
.process('{{ response }}')
.then(result => {
console.log(result.html) // interpolated response body
})
`

$3

Type: Boolean\
Default: false

When set to true, this option will preserve the tag around the response body.

Example:

`js
const posthtml = require('posthtml')
const posthtmlFetch = require('posthtml-fetch')

posthtml()
.use(posthtmlFetch({
preserveTag: true
}))
.process('{{ response }}')
.then(result => {
console.log(result.html)
// => interpolated response body
})
`

$3

Type: Object\
Default: {}

You can pass options to posthtml-expressions.

Example:

`js
const posthtml = require('posthtml')
const posthtmlFetch = require('posthtml-fetch')

posthtml()
.use(posthtmlFetch({
expressions: {
delimiters: ['[[', ']]'],
}
}))
.process('[[ response ]]')
.then(result => {
console.log(result.html) // interpolated response body
})
`

Plugins

$3

List of plugins that will be called after/before receiving and processing locals

Example:

`js
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('{{ response }}')
.then(result => {
console.log(result.html) // interpolated response body
})
``

[npm]: https://www.npmjs.com/package/posthtml-fetch
[npm-version-shield]: https://img.shields.io/npm/v/posthtml-fetch.svg
[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-fetch
[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-fetch.svg
[github-ci]: https://github.com/posthtml/posthtml-fetch/actions
[github-ci-shield]: https://github.com/posthtml/posthtml-fetch/actions/workflows/nodejs.yml/badge.svg
[license]: ./license
[license-shield]: https://img.shields.io/npm/l/posthtml-fetch.svg