https://github.com/posthtml/esm
webpack HTML Module Helpers
https://github.com/posthtml/esm
Last synced: 4 months ago
JSON representation
webpack HTML Module Helpers
- Host: GitHub
- URL: https://github.com/posthtml/esm
- Owner: posthtml
- License: other
- Created: 2018-01-23T22:40:27.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-23T23:09:19.000Z (about 8 years ago)
- Last Synced: 2024-10-29T21:06:05.744Z (over 1 year ago)
- Language: JavaScript
- Size: 12.7 KB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]
[![code style][style]][style-url]
[![chat][chat]][chat-url]
ESM Plugin
> ⚠️ These plugins are **helpers** mainly for `html-loader` to extract URL's and make them separate module request as ES2015 Module Imports and are not intended for general usage with `posthtml`. Other bundlers targeting ES2015 Modules (e.g Parcel, Rollup) may utilize them aswell, but usage besides `webpack` is currently untested. Feel free to open an issue if your integration
requires changes
Install
```bash
npm i -D @posthtml/esm
```
Usage
```js
const posthtml = require('posthtml')
const { urls, imports } = require('@posthtml/esm')
const html = `
`
posthtml([ urls(), imports() ])
.process(html, { from: './src/index.html' })
.then((result) => {
result.html
result.messages
})
```
**result.html**
```html
${HTML__IMPORT__0}
```
**result.messages**
```js
[
{
type: 'import',
plugin: '@posthtml/esm',
url: 'path/to/url.png',
name: `HTML__URL__0`,
import () {
return `import ${this.name} from '${this.url}';\n`
}
},
{
type: 'import',
plugin: '@posthtml/esm',
url: 'path/to/import.html',
name: `HTML__IMPORT__0`,
import () {
return `import ${this.name} from '${this.url}';\n`
}
}
]
```
Options
### `urls`
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**[`url`](#urls)**|`{RegExp\|Function}`|`''`|Filter URL's|
#### `{RegExp}`
```js
urls({
url: /filter/
})
```
#### `{Function<{String} -> {Boolean}>}`
```js
urls({
url (url) {
return /filter/.test(url)
}
})
```
### `imports`
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**[`import`](#imports)**|`{RegExp\|Function}`|`''`|Filter Import URL's|
|**[`template`](#imports)**|`{String}`|`''`|Placeholder for HTML Templates|
#### `{RegExp}`
```js
imports({
import: /filter/
})
```
#### `{Function<{String} -> {Boolean}>}`
```js
imports({
import (url) {
return /filter/.test(url)
}
})
```
Maintainer
Contributors
[npm]: https://img.shields.io/npm/v/@posthtml/esm.svg
[npm-url]: https://npmjs.com/package/@posthtml/esm
[node]: https://img.shields.io/node/v/@posthtml/esm.svg
[node-url]: https://nodejs.org/
[deps]: https://david-dm.org/posthtml/esm.svg
[deps-url]: https://david-dm.org/posthtml/esm
[tests]: http://img.shields.io/travis/posthtml/esm.svg
[tests-url]: https://travis-ci.org/posthtml/esm
[cover]: https://coveralls.io/repos/github/posthtml/esm/badge.svg
[cover-url]: https://coveralls.io/github/posthtml/esm
[style]: https://img.shields.io/badge/code%20style-standard-yellow.svg
[style-url]: http://standardjs.com/
[chat]: https://badges.gitter.im/posthtml/posthtml.svg
[chat-url]: https://gitter.im/posthtml/posthtml
