JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3031
  • Score
    100M100P100Q122077F
  • License MIT

Autoload Config for PostHTML

Package Exports

  • posthtml-load-config

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (posthtml-load-config) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm node deps tests coverage code style chat

Load Config

Autoload Config for PostHTML

Install

npm i -D posthtml-load-config

Usage

npm i -S|-D posthtml-plugin posthtml-plugin ...

Install plugins and save them to your package.json

package.json

Create a posthtml section in package.json.

Root
  |– client
  |– public
  |
  |- package.json
{
  "posthtml": {
    "parser": "posthtml-sugarml",
    "from": "/path/to/src/file.sml",
    "to": "/path/to/dest/file.html",
    "plugins": {
      "posthtml-plugin": {}
    }
  }
}

.posthtmlrc

Create a .posthtmlrc file.

Root
  |– client
  |– public
  |
  |-.posthtmlrc
  |- package.json
{
  "parser": "posthtml-sugarml",
  "from": "/path/to/src/file.sml",
  "to": "/path/to/dest/file.html",
  "plugins": {
    "posthtml-plugin": {}
  }
}

posthtml.config.js

Create a posthtml.config.js file.

Root
  |– client
  |– public
  |
  |- posthtml.config.js
  |- package.json
module.exports = (ctx) => {
  return {
    parser: ctx.ext === '.sml' ? 'posthtml-sugarml' : false,
    from: ctx.from,
    to: ctx.to,
    plugins: {
      'posthtml-plugin': ctx.plugin
    }
  }
}

Plugins can be loaded either using an {Object} or an {Array} in config.plugins.

{Object}
module.exports = (ctx) => {
  return {
    ...options,
    plugins: {
      'posthtml-plugin': ctx.plugin
    }
  }
}
{Array}
module.exports = (ctx) => {
  return {
    ...options,
    plugins: [
      require('posthtml-plugin')(ctx.plugin)
    ]
  }
}

⚠️ When using an Array, make sure to require() them.

Options

parser:

parser: 'posthtml-sugarml'

from:

from: 'path/to/src/file.sml'

to:

to: 'path/to/dest/file.html'

render:

render: 'posthtml-jsx'

Plugins

Options

{} || null: Plugin loads with defaults.

'posthtml-plugin': {} || null

⚠️ {} must be an empty object

[Object]: Plugin loads with given options.

'posthtml-plugin': { option: '', option: '' }

false: Plugin will not be loaded.

'posthtml-plugin': false

Order

Plugin order is determined by declaration in the plugins section.

{
  plugins: {
    'posthtml-plugin': {}, // plugins[0]
    'posthtml-plugin': {}, // plugins[1]
    'posthtml-plugin': {}  // plugins[2]
  }
}

Context

When using a function (posthtml.config.js), it is possible to pass context to posthtml-load-config, which will be evaluated while loading your config. By default ctx.env (process.env.NODE_ENV) and ctx.cwd (process.cwd()) are available.

Examples

posthtml.config.js

module.exports = (ctx) => ({
  parser: ctx.ext === '.sml' ? 'posthtml-sugarml' : false,
  from: ctx.from,
  to: ctx.to,
  plugins: {
    posthtml-include: {},
    posthtml-expressions: { locals: ctx.locals },
    htmlnano: ctx.env === 'production' ? {} : false
  }
})

"scripts": {
  "build": "NODE_ENV=production node posthtml",
  "start": "NODE_ENV=development node posthtml"
}
import { readFileSync } = require('fs')

const posthtml = require('posthtml')
const posthtmlrc = require('posthtml-load-config')

const sml = readFileSync('index.sml', 'utf8')

const ctx = { ext: '.sml' }

posthtmlrc(ctx).then(({ plugins, options }) => {
  posthtml(plugins)
    .process(sml, options)
    .then((result) => console.log(result.html))
})

npm i -D gulp-posthtml

package.json

"scripts": {
  "build": "NODE_ENV=production gulp",
  "start": "NODE_ENV=development gulp"
}

gulpfile.js

import { task, src, dest } from 'gulp'
import plugins from 'gulp-load-plugins'

task('pug', () => {
  const ctx = { locals: {} }

  return src('src/*.pug')
    .pipe(posthtml(ctx))
    .pipe(rename({ ext: '.html' }))
    .pipe(dest('dest'))
})

task('sml', () => {
  return src('src/*.sml')
    .pipe(posthtml())
    .pipe(rename({ ext: '.html' }))
    .pipe(dest('dest'))
})

task('html', () => {
  return src('src/*.html')
    .pipe(posthtml())
    .pipe(dest('dest'))
})

npm i -D html-loader posthtml-loader

package.json

"scripts": {
  "build": "NODE_ENV=production webpack",
  "start": "NODE_ENV=development webpack-dev-server"
}

webpack.config.js

module.exports = (env) => {
  module: {
    rules: [
      {
        test: /\.html$/
        use: [
          'html-loader',
          'posthtml-loader'
        ]
      }
    ]
  }
}

Maintainer


Michael Ciniawsky

Contributors