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 🙏

© 2025 – Pkg Stats / Ryan Hefner

ngx-html-bridge-markuplint

v0.0.29

Published

This library serves as a bridge between [Markuplint](https://markuplint.dev/) and Angular templates. It uses [ngx-html-bridge](https://github.com/nagashimam/ngx-html-bridge) to reverse-compile Angular templates into plain HTML, allowing Markuplint to anal

Readme

ngx-html-bridge-markuplint

This library serves as a bridge between Markuplint and Angular templates. It uses ngx-html-bridge to reverse-compile Angular templates into plain HTML, allowing Markuplint to analyze them effectively.

It's designed to be a core component for building tools like CLI linters or editor extensions for Angular projects. The library correctly maps Markuplint violation locations back to the original Angular template source code.

Installation

npm install ngx-html-bridge-markuplint markuplint ngx-html-bridge

Usage

This library provides two main functions to run Markuplint against Angular templates.

runMarkuplintAgainstTemplate(template, templatePath)

Analyzes a string containing an Angular template. You must provide the template content and a file path for context.

import { runMarkuplintAgainstTemplate } from "ngx-html-bridge-markuplint";

const template = `
  <div [id]="'user-profile'">
    <p>Hello, {{ userName }}!</p>
  </div>
`;

const templatePath = "/path/to/your/project/src/app/app.component.html";

runMarkuplintAgainstTemplate(template, templatePath).then((results) => {
  results.forEach((result) => {
    console.log(`File: ${result.filePath}`);
    result.violations.forEach((violation) => {
      console.log(
        `[${violation.severity}] ${violation.message} ` +
          `(line: ${violation.line}, col: ${violation.col}, ` +
          `startOffset: ${violation.startOffset}, endOffset: ${violation.endOffset})`,
      );
    });
  });
});

runMarkuplintAgainstTemplateFile(templatePath)

Analyzes an Angular template file directly from the file system.

import { runMarkuplintAgainstTemplateFile } from "ngx-html-bridge-markuplint";

const templatePath = "/path/to/your/project/src/app/app.component.html";

runMarkuplintAgainstTemplateFile(templatePath).then((results) => {
  // Process results as shown in the example above
  console.log(results);
});

API

runMarkuplintAgainstTemplate(template: string, templatePath: string): Promise<BridgeMLResultInfo[]>

  • template: The Angular template content as a string.
  • templatePath: The absolute path to the template file (used by Markuplint for context and configuration resolution).
  • Returns: A promise that resolves to an array of BridgeMLResultInfo objects.

runMarkuplintAgainstTemplateFile(templatePath: string): Promise<BridgeMLResultInfo[]>

  • templatePath: The absolute path to the template file.
  • Returns: A promise that resolves to an array of BridgeMLResultInfo objects.

BridgeMLResultInfo

The result object extends the standard Markuplint MLResultInfo with an added variation property from ngx-html-bridge and modified violations that include startOffset and endOffset for precise location mapping in the original source file.

Note that col and line are the ones for reverse-compiled HTML, not original source file. If you want to know location in the original source file, use startOffset and endOffset.

export type BridgeMLResultInfo = Omit<MLResultInfo, "violations"> & {
  violations: BridgeMLViolation[];
} & { variation: HtmlVariation };

interface BridgeMLViolation extends Violation {
  startOffset: number;
  endOffset: number;
}

License

MIT