⚠️ 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

npm i -D @posthtml/esm

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`
    }
  }
]

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)
  }
})