postxml-import

PostXML to import html files.

Installation

npm i postxml-import --save-dev

Usage

Usage

Options

selector

Query selector.
Type: String
Default: import[src]

attr

Attribute that contains path.
Type: String
Default: src

path

Function that get value of attr and returns absolute path to file.
Type: Function
Default:

function (attr) {
    return attr;
}

Examples

Example 1 (Base syntas)

Input

<import src="block.htm"></import>

block.htm (block.htm)

<div class="b-block">
    <div class="b-block__element"></div>
</div>

Output

<div class="b-block">
    <div class="b-block__element"></div>
</div>

Example 2 (import width content)

Input

<import src="block.htm">
    <p>Content</p>
</import>

block.htm (block.htm)

<div class="b-block">
    <div class="b-block__element"></div>
    <content></content>
</div>

Output

<div class="b-block">
    <div class="b-block__element"></div>
    <p>Content</p>
</div>

Example 3 (Import component)

<import component="componentName"></import>

Options

{
    selector: 'import[component]',
    attr: 'component',
    path: function (componentName) {
        return 'blocks/' + componentName + '/' + componentName + '.htm'
    }
}

Example 4 (Inline svg)

Input

<img src="image.svg">

Options

{
    selector: 'img[src$=".svg"]',
    path: function (src) {
        return 'cwd/' + src
    }
}

Output

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Licence

MIT