npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

compile-include-html

v2.2.13

Published

Small parser that allows including multiple html files in one using an `<include>` tag and a `<for>` tag.

Downloads

32

Readme

compile-include-html

Small parser that allows including multiple html files in one using an <include> tag and a <for> tag.

Installation

npm i compile-include-html

Example

Simple include

<!-- main.html -->

<div class="container">
  <include src="card.html" with="text: hello world" />
</div>
<!-- card.html -->

<div class="card">{text}</div>
<!-- main.html after compilation -->

<div class="container">
  <div class="card">hello world</div>
</div>

Simple for loop

// javascript file where the context is defined
import { HtmlParser } from "compile-include-html";
const source = `
<div class="container">
    <for condition="const user of array">
        <span>Firstname: {user.firstName}, lastname: {user.lastName}</span>
    </for>
</div>`;

const context = {
  array: [
    { firstName: "john", lastName: "doe" },
    { firstName: "jannet", lastName: "foe" },
  ],
};
const htmlParser = new HtmlParser({
  globalContext: context,
});
const output = htmlParser.transform(source);
<!-- output -->
<div class="container">
  <span>Firstname: john, lastname: doe</span>
  <span>Firstname: jannet, lastname: foe</span>
</div>

Context replacement

// javascript file where the context is defined
import { HtmlParser } from "compile-include-html";
const source = `<a href="{link.href}">{link.name}</a>`;

const parser = new HtmlParser({
  globalContext: {
    link: {
      href: "https://example.com",
      name: "link to example",
    },
  },
});
const output = htmlParser.transform(source);
<!-- output -->
<a href="https://example.com">link to example</a>

Usage

Create a new HtmlParser with:

import { HtmlParser } from "compile-include-html";
const htmlParser = new HtmlParser();

Options

You can pass an option object to your parser.

type options = {
  indent?: number;
  inputIsDocument?: boolean;
  globalContext?: TContext;
  basePath?: string;
};
  • indent: You can set the indentation of your generated html with the indent property.
  • inputIsDocument: determines whether the input is an entire document with <DOCTYPE>, <head> and <body> tags or just a fragment. It will allow the parser to correctly manage both cases.
  • globalContext: allows you to pass a context object to the parser. It will be used to replace values wrapped in { and }. Brackets values only work on attributes values and text nodes, for example:
<!-- will work -->
<p class="{className}">{paragraph}</p>

<!-- will not work -->
<p {classAttr}="px-4">{paragraph}</p>
  • basePath: allows you to pass a basePath to your parser, for example you can do
import { HtmlParser } from "compile-include-html";
const htmlParser = new HtmlParser({ basePath: "pages/about" });
<!-- main.html -->

<div class="container">
  <include src="card.html" with="text: hello world" />
</div>

instead of

<!-- main.html -->

<div class="container">
  <include src="pages/about/card.html" with="text: hello world" />
</div>

Methods

readFile(path: string): string

Use it to read a file and retrieve a string of the file's content.

transform(source: string): string

Use it to transform a string using the include or for tag into its compiled version.

outputNewFile(inputPath: string, outputPath: string): void

Use it to compile an input file located at inputPath and create an output file located at outputPath.