@posthtml/esm

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

npm i -D @posthtml/esm

Usage

const posthtml = require('posthtml')
const { urls, imports } = require('@posthtml/esm')

const html = `
<img src="path/to/url.png">
<import src="path/to/import.html"></import>
`
posthtml([ urls(), imports() ])
  .process(html, { from: './src/index.html' })
  .then((result) => {
    result.html
    result.messages
  })

result.html

<img src="${HTML__URL__0}">
${HTML__IMPORT__0}

result.messages

[
  {
    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	{RegExp|Function}	''	Filter URL's

{RegExp}

urls({
  url: /filter/
})

{Function<{String} -> {Boolean}>}

urls({
  url (url) {
    return /filter/.test(url)
  }
})

imports

Name	Type	Default	Description
import	{RegExp|Function}	''	Filter Import URL's
template	{String}	''	Placeholder for HTML Templates

{RegExp}

imports({
  import: /filter/
})

{Function<{String} -> {Boolean}>}

imports({
  import (url) {
    return /filter/.test(url)
  }
})

Maintainer

Michael Ciniawsky

Contributors