npm - htmljs-parser - Versions diffs - 2.11.0 → 3.0.0 - Mend

htmljs-parser 2.11.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1031) hide show

package/LICENSE CHANGED Viewed

@@ -1,6 +1,6 @@
 MIT License
-Copyright (c) 2018 JS Foundation and contributors
+Copyright (c) 2022 JS Foundation and contributors and contributors
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md CHANGED Viewed

@@ -1,5 +1,4 @@
-htmljs-parser
-=============
+# htmljs-parser
 HTML parsers written according to the HTML spec will interpret all
 attribute values as strings which makes it challenging to properly
@@ -12,7 +11,6 @@ For example, consider a HTML-based template that wishes to
 support a custom tag named `<say-hello>` that supports an
 attribute named `message` that can be a string literal or a JavaScript expression.
 Ideally, the template compiler should be able to handle any of the following:
 ```html
@@ -24,28 +22,34 @@ Ideally, the template compiler should be able to handle any of the following:
 This parser extends the HTML grammar to add these important features:
 - JavaScript expressions as attribute values
 ```html
 <say-hello message=("Hello " + personName) count=2+2 large=true />
 ```
 - Placeholders in the content of an element
 ```html
-<div>
-    Hello ${personName}
-</div>
+<div>Hello ${personName}</div>
 ```
 - Placeholders within attribute value strings
 ```html
-<div data-message="Hello ${personName}!">
+<div data-message="Hello ${personName}!"></div>
 ```
 - JavaScript flow-control statements within HTML elements
 ```html
 <div for(a in b) />
 <div if(a === b) />
 ```
 - JavaScript flow-control statements as elements
 ```html
-<for (a in b)>
-<if (a in b)>
+<for (a in b)> <if (a in b)></if></for>
 ```
 # Installation
@@ -57,85 +61,82 @@ npm install htmljs-parser
 # Usage
 ```javascript
-var parser = require('htmljs-parser').createParser({
-    onText: function(event) {
-        // Text within an HTML element
-        var value = event.value;
-    },
-    onPlaceholder: function(event) {
-        //  ${<value>]} // escape = true
-        // $!{<value>]} // escape = false
-        var value = event.value; // String
-        var escaped = event.escaped; // boolean
-        var withinBody = event.withinBody; // boolean
-        var withinAttribute = event.withinAttribute; // boolean
-        var withinString = event.withinString; // boolean
-        var withinOpenTag = event.withinOpenTag; // boolean
-        var pos = event.pos; // Integer
-    },
-    onString: function(event) {
-        // Text within ""
-        var value = event.value; // String
-        var stringParts = event.stringParts; // Array
-        var isStringLiteral = event.isStringLiteral // Boolean
-        var pos = event.pos; // Integer
-    },
-    onCDATA: function(event) {
-        // <![CDATA[<value>]]>
-        var value = event.value; // String
-        var pos = event.pos; // Integer
-    },
-    onOpenTag: function(event) {
-        var tagName = event.tagName; // String
-        var attributes = event.attributes; // Array
-        var argument = event.argument; // Object
-        var pos = event.pos; // Integer
-    },
-    onCloseTag: function(event) {
-        // close tag
-        var tagName = event.tagName; // String
-        var pos = event.pos; // Integer
-    },
-    onDocumentType: function(event) {
-        // Document Type/DTD
-        // <!<value>>
-        // Example: <!DOCTYPE html>
-        var value = event.value; // String
-        var pos = event.pos; // Integer
-    },
-    onDeclaration: function(event) {
-        // Declaration
-        // <?<value>?>
-        // Example: <?xml version="1.0" encoding="UTF-8" ?>
-        var value = event.value; // String
-        var pos = event.pos; // Integer
-    },
-    onComment: function(event) {
-        // Text within XML comment
-        var value = event.value; // String
-        var pos = event.pos; // Integer
-    },
-    onScriptlet: function(event) {
-        // Text within <% %>
-        var value = event.value; // String
-        var pos = event.pos; // Integer
-    },
-    onError: function(event) {
-        // Error
-        var message = event.message; // String
-        var code = event.code; // String
-        var pos = event.pos; // Integer
-    }
+var parser = require("htmljs-parser").createParser({
+  onText: function (event) {
+    // Text within an HTML element
+    var value = event.value;
+  },
+  onPlaceholder: function (event) {
+    //  ${<value>]} // escape = true
+    // $!{<value>]} // escape = false
+    var value = event.value; // String
+    var escaped = event.escaped; // boolean
+    var withinBody = event.withinBody; // boolean
+    var withinAttribute = event.withinAttribute; // boolean
+    var withinOpenTag = event.withinOpenTag; // boolean
+    var pos = event.pos; // Integer
+  },
+  onString: function (event) {
+    // Text within ""
+    var value = event.value; // String
+    var pos = event.pos; // Integer
+  },
+  onCDATA: function (event) {
+    // <![CDATA[<value>]]>
+    var value = event.value; // String
+    var pos = event.pos; // Integer
+  },
+  onOpenTag: function (event) {
+    var tagName = event.tagName; // String
+    var attributes = event.attributes; // Array
+    var argument = event.argument; // Object
+    var pos = event.pos; // Integer
+  },
+  onCloseTag: function (event) {
+    // close tag
+    var tagName = event.tagName; // String
+    var pos = event.pos; // Integer
+  },
+  onDocumentType: function (event) {
+    // Document Type/DTD
+    // <!<value>>
+    // Example: <!DOCTYPE html>
+    var value = event.value; // String
+    var pos = event.pos; // Integer
+  },
+  onDeclaration: function (event) {
+    // Declaration
+    // <?<value>?>
+    // Example: <?xml version="1.0" encoding="UTF-8" ?>
+    var value = event.value; // String
+    var pos = event.pos; // Integer
+  },
+  onComment: function (event) {
+    // Text within XML comment
+    var value = event.value; // String
+    var pos = event.pos; // Integer
+  },
+  onScriptlet: function (event) {
+    // Text within <% %>
+    var value = event.value; // String
+    var pos = event.pos; // Integer
+  },
+  onError: function (event) {
+    // Error
+    var message = event.message; // String
+    var code = event.code; // String
+    var pos = event.pos; // Integer
+  },
 });
 parser.parse(str);
@@ -150,15 +151,15 @@ to be changed (usually in response to an `onOpenTag` event).
 There are three content parsing modes:
 - **HTML Content (DEFAULT):**
-    The parser will look for any HTML tag and content placeholders while in
-    this mode and parse opening and closing tags accordingly.
+  The parser will look for any HTML tag and content placeholders while in
+  this mode and parse opening and closing tags accordingly.
 - **Parsed Text Content**: The parser will look for the closing tag that matches
-    the current open tag as well as content placeholders but all other content
-    will be interpreted as text.
+  the current open tag as well as content placeholders but all other content
+  will be interpreted as text.
 - **Static Text Content**: The parser will look for the closing tag that matches
-    the current open tag but all other content will be interpreted as raw text.
+  the current open tag but all other content will be interpreted as raw text.
 ```javascript
 var htmljs = require('htmljs-parser');
@@ -208,7 +209,7 @@ encountered.
 INPUT:
 ```html
-<div>
+<div></div>
 ```
 OUTPUT EVENT:
@@ -226,7 +227,7 @@ OUTPUT EVENT:
 INPUT:
 ```html
-<div class="demo" disabled=false data-number=123>
+<div class="demo" disabled="false" data-number="123"></div>
 ```
 OUTPUT EVENT:
@@ -238,18 +239,15 @@ OUTPUT EVENT:
     attributes: [
         {
             name: 'class',
-            value: '"demo"',
-            literalValue: 'demo'
+            value: '"demo"'
         },
         {
             name: 'disabled',
-            value: 'false',
-            literalValue: false
+            value: 'false'
         },
         {
             name: 'data-number',
-            value: '123',
-            literalValue: 123
+            value: '123'
         }
     ]
 }
@@ -283,7 +281,7 @@ OUTPUT EVENT:
 INPUT:
 ```html
-<for(var i = 0; i < 10; i++)>
+<for(var i="0;" i < 10; i++)></for(var>
 ```
 OUTPUT EVENT:
@@ -305,7 +303,7 @@ OUTPUT EVENT:
 INPUT:
 ```html
-<div if(x > y)>
+<div if(x>y)></div>
 ```
 OUTPUT EVENT:
@@ -417,8 +415,7 @@ cannot use placeholders for these blocks of code.
 INPUT:
 ```html
-${"This is an escaped placeholder"}
-$!{"This is a non-escaped placeholder"}
+${"This is an escaped placeholder"} $!{"This is a non-escaped placeholder"}
 ```
 OUTPUT EVENTS
@@ -435,7 +432,7 @@ ${name}
 }
 ```
---------
+---
 ```html
 $!{name}

package/dist/core/Parser.d.ts ADDED Viewed

@@ -0,0 +1,67 @@
+import { STATE, Range, Handlers } from "../internal";
+export interface Meta extends Range {
+    parent: Meta;
+    state: StateDefinition;
+}
+export interface StateDefinition<P extends Meta = Meta> {
+    name: string;
+    enter: (this: Parser, parent: Meta, pos: number) => Partial<P & {
+        state: unknown;
+    }>;
+    exit: (this: Parser, activeRange: P) => void;
+    char: (this: Parser, code: number, activeRange: P) => void;
+    eol: (this: Parser, length: number, activeRange: P) => void;
+    eof: (this: Parser, activeRange: P) => void;
+    return: (this: Parser, child: Meta, activeRange: P) => void;
+}
+export declare class Parser {
+    handlers: Handlers;
+    pos: number;
+    maxPos: number;
+    data: string;
+    activeState: StateDefinition;
+    activeRange: Meta;
+    forward: number;
+    activeTag: STATE.OpenTagMeta | undefined;
+    activeAttr: STATE.AttrMeta | undefined;
+    indent: string;
+    isConcise: boolean;
+    beginMixedMode?: boolean;
+    endingMixedModeAtEOL?: boolean;
+    textPos: number;
+    lines: undefined | number[];
+    constructor(handlers: Handlers);
+    read(range: Range): string;
+    positionAt(index: number): import("../internal").Position;
+    locationAt(range: Range): import("../internal").Location;
+    enterState<P extends Meta>(state: StateDefinition<P>): P;
+    exitState(): void;
+    /**
+     * Compare a position in the source to either another position, or a string.
+     */
+    matchAtPos(a: Range, b: Range | string): boolean;
+    matchAnyAtPos(a: Range, list: (Range | string)[]): boolean;
+    /**
+     * Look ahead to see if the given str matches the substring sequence
+     * beyond
+     */
+    lookAheadFor(str: string, startPos?: number): string | undefined;
+    lookAtCharCodeAhead(offset: number, startPos?: number): number;
+    startText(): void;
+    endText(): void;
+    /**
+     * This is used to enter into "HTML" parsing mode instead
+     * of concise HTML. We push a block on to the stack so that we know when
+     * return back to the previous parsing mode and to ensure that all
+     * tags within a block are properly closed.
+     */
+    beginHtmlBlock(delimiter: string | undefined, singleLine: boolean): void;
+    emitError(range: number | Range, code: string, message: string): void;
+    closeTag(start: number, end: number, value: Range | undefined): void;
+    consumeWhitespaceIfBefore(str: string, start?: number): boolean;
+    getPreviousNonWhitespaceCharCode(start?: number): number;
+    onlyWhitespaceRemainsOnLine(start?: number): boolean;
+    consumeWhitespaceOnLine(start?: number): boolean;
+    consumeWhitespace(): void;
+    parse(data: string): void;
+}

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { type Handlers, type Range } from "./internal";
+export { OpenTagEnding, type Handlers, type Position, type Location, type Ranges, type Range, } from "./internal";
+/**
+ * Creates a new Marko parser.
+ */
+export declare function createParser(handlers: Handlers): {
+    /**
+     * Parses code and calls the provided handlers.
+     */
+    parse(code: string): void;
+    /**
+     * Given an offset range in the current source code, reads and returns the substring in the input code.
+     */
+    read(range: Range): string;
+    /**
+     * Given a offset in the current source code, returns a Position object with line & character information.
+     */
+    positionAt(index: number): import("./internal").Position;
+    /**
+     * Given a offset range in the current source code, returns a Location object with a start & end position information.
+     */
+    locationAt(range: Range): import("./internal").Location;
+};