Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Parser
✓ import { Parser } from 'htmlparser2-svelte';
✗ const htmlparser2 = require('htmlparser2-svelte'); const parser = new htmlparser2.Parser(...);
For modern ESM projects, import `Parser` as a named export. The CommonJS pattern `htmlparser2.Parser` is shown in older examples but can lead to issues in ESM environments.
WritableStream
✓ import { WritableStream } from 'htmlparser2-svelte';
✗ const htmlparser2 = require('htmlparser2-svelte'); const stream = new htmlparser2.WritableStream(...);
Use `WritableStream` for processing streaming HTML content, similar to Node.js streams. Ensure it's imported as a named export.
parseFeed
✓ import { parseFeed } from 'htmlparser2-svelte';
✗ const htmlparser2 = require('htmlparser2-svelte'); const feed = htmlparser2.parseFeed(content);
Directly import `parseFeed` for RSS/Atom/RDF feed parsing. While convenient, consider dedicated libraries like `node-feedparser` for more robust feed handling.
ParserOptions
✓ import type { ParserOptions } from 'htmlparser2-svelte';
Import types explicitly when working with TypeScript for better type safety and autocompletion for parser options and handlers.
Demonstrates parsing a Svelte component template, including JavaScript expressions in attributes, using the callback API to log parsing events to the console.
import { Parser } from 'htmlparser2-svelte';
const svelteCode = `
<script lang="ts">
let count = 0;
function handleClick() {
count += 1;
console.log('Button clicked:', count);
}
</script>
<div class="app">
<h1>Svelte Parser Example</h1>
<button type="button" on:click={() => handleClick()} title={"Click count is " + count}>
Click me {count} times!
</button>
<p>This paragraph has some <span>inline</span> text.</p>
</div>
`;
const parser = new Parser(
{
onopentag(name, attribs) {
console.log(`Opened tag: <${name}> with attributes:`, attribs);
},
ontext(text) {
const trimmedText = text.trim();
if (trimmedText.length > 0) {
console.log(`Text content: "${trimmedText}"`);
}
},
onclosetag(tagname) {
console.log(`Closed tag: </${tagname}>`);
},
onprocessinginstruction(name, data) {
console.log(`Processing instruction: ${name} -> ${data}`);
}
},
{
decodeEntities: true,
curlyBracesInAttributes: true, // Crucial for Svelte support
xmlMode: false // Parse as HTML
}
);
parser.write(svelteCode);
parser.end();
Errors
Common errors & fixes
TypeError: htmlparser2.Parser is not a constructor
Attempting to instantiate `Parser` using a CommonJS `require` that doesn't correctly export named members, or in an ESM context where `htmlparser2` is imported as a default object.
fixFor CommonJS, use `const { Parser } = require('htmlparser2-svelte');`. For ESM, use `import { Parser } from 'htmlparser2-svelte';`. Error: Unknown option: curlyBracesInAttributes
This error occurs when the `curlyBracesInAttributes` option is passed to the original `htmlparser2` package, which does not support Svelte-specific syntax, instead of `htmlparser2-svelte`.
fixEnsure `htmlparser2-svelte` is correctly installed and imported, not `htmlparser2`, when using Svelte-specific parsing options.
Svelte component attributes with `{@expression}` or `{expression}` are not correctly parsed.
The `curlyBracesInAttributes` option, essential for Svelte syntax, was not enabled when initializing the parser.
fixInclude `{ curlyBracesInAttributes: true }` in the options object when creating a `Parser` or `WritableStream` instance for Svelte content. TypeError: Cannot read properties of undefined (reading 'pipe')
This typically happens when trying to use Node.js `Stream.pipe()` functionality on a `Parser` instance, which is for direct string input, rather than a `WritableStream` instance, or if `WritableStream` was not imported correctly.
fixEnsure you are importing and instantiating `WritableStream` for streaming operations (`import { WritableStream } from 'htmlparser2-svelte'; new WritableStream(...)`), as `Parser` does not directly support `pipe()`. Audit
Dependencies
domhandleroptionalUsed to construct a DOM tree from the parsed HTML events. While historically bundled, it's recommended to install and use it separately for the latest features and maintenance.
domutilsrequiredProvides utility functions for manipulating the DOM tree generated by `domhandler`. Recommended alongside `domhandler`.