https://github.com/posthtml/posthtml-fetch
PostHTML plugin for fetching and displaying remote content.
https://github.com/posthtml/posthtml-fetch
api fetch get got posthtml posthtml-plugin remote-content
Last synced: 10 months ago
JSON representation
PostHTML plugin for fetching and displaying remote content.
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-fetch
- Owner: posthtml
- License: mit
- Created: 2020-03-31T18:55:49.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-11T15:43:29.000Z (10 months ago)
- Last Synced: 2025-04-11T20:52:27.987Z (10 months ago)
- Topics: api, fetch, get, got, posthtml, posthtml-plugin, remote-content
- Language: JavaScript
- Homepage:
- Size: 1.33 MB
- Stars: 12
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Fetch Content
A plugin for fetching and working with remote and local content
[![Version][npm-version-shield]][npm]
[![Build][github-ci-shield]][github-ci]
[![License][license-shield]][license]
[![Downloads][npm-stats-shield]][npm-stats]
## 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`](https://github.com/posthtml/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.
### `tags`
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))
```
### `attribute`
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
})
```
### `ofetch`
The plugin uses [`ofetch`](https://unjs.io/packages/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
})
```
### `preserveTag`
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
})
```
### `expressions`
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
### `after/before`
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