You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

posthtml-modules

Package Overview
Dependencies
Maintainers
2
Versions
28
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

posthtml-modules

Posthtml modules processing

0.9.1
latest
Source
npmnpm
Version published
Weekly downloads
2.9K
-20.04%
Maintainers
2
Weekly downloads
 
Created
Source

NPM Deps Tests Coverage XO Code Style

Modules Plugin

Import and process HTML Modules with PostHTML

Install

npm i -D posthtml-modules

Example

<!-- index.html -->
<html>
<body>
  <module href="./module.html">
    title
  </module>
</body>
</html>
<!-- module.html -->
<header>
  <h1>
    Test <content></content>
  </h1>
</header>
const { readFileSync } = require('fs')
const posthtml = require('posthtml')
const options = { /* see available options below */ }

posthtml()
  .use(require('posthtml-modules')(options))
  .process(readFileSync('index.html', 'utf8'))
  .then((result) => result)
  });
<html>
 <body>
   <header>
     <h1>Test title</h1>
   </header>
  </body>
</html>

Options

root

Type: string
Default: ./

Root path for modules lookup.

plugins

Type: array | function
Default: []

PostHTML plugins to apply for every parsed module.

If a function provided, it will be called with module's file path.

from

Type: string
Default: ''

Root filename for processing apply, needed for path resolving (it's better to always provide it).

initial

Type: boolean
Default: false

Apply plugins to root file after modules processing.

tag

Type: string
Default: module

Use a custom tag name.

attribute

Type: string
Default: href

Use a custom attribute name.

locals

Type: object
Default: {}

Pass data to the module.

If present, the JSON object from the locals="" attribute will be merged on top of this, overwriting any existing values.

attributeAsLocals

Type: boolean
Default: false

All attributes on <module></module> will be added to locals

parser

Type: object
Default: {}

Options for the PostHTML parser.

By default, posthtml-parser is used.

expressions

Type: object
Default: {}

Options to forward to posthtml-expressions, like custom delimiters for example. Available options can be found here.

Component options

locals

You can pass data to a module using a locals="" attribute.

Must be a valid JSON object.

Example:

<!-- module.html -->
<p>The foo is {{ foo }} in this one.</p>
<content></content>
<!-- index.html -->
<module href="./module.html" locals='{"foo": "strong"}'>
  <p>Or so they say...</p>
</module>

Result

<p>The foo is strong in this one.</p>
<p>Or so they say...</p>

attributeAsLocals

All attributes on <module></module> will be added to locals

Example:

<!-- module.html -->
<div class="{{ class }}" id="{{ id }}" style="{{ style }}">
  <content></content>
</div>
<!-- index.html -->
<module 
  href="module.html" 
  class="text-center uppercase" 
  id="example"
  style="display: flex; gap: 2;"
>
  Module content
</module>

Result

<div class="text-center uppercase" id="example" style="display: flex; gap: 2;">
  Module content
</div>

Keywords

posthtml

FAQs

Package last updated on 02 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts