prettier / angular-html-parser Goto Github PK

View Code? Open in Web Editor NEW

This project forked from angular/angular

42.0 5.0 13.0 313.11 MB

An HTML parser extracted from Angular with some modifications

Home Page: https://github.com/prettier/angular-html-parser/blob/dev/packages/angular-html-parser

License: MIT License

Shell 0.18% TypeScript 85.24% CSS 1.00% HTML 1.89% JavaScript 9.00% Starlark 2.20% SCSS 0.49% jq 0.01% Less 0.01%

angular-html-parser's Introduction

Angular - The modern web developer's platform

Angular is a development platform for building mobile and desktop web applications
using TypeScript/JavaScript and other languages.

www.angular.io

Contributing Guidelines · Submit an Issue · Blog

Documentation

Get started with Angular, learn the fundamentals and explore advanced topics on our documentation website.

Advanced

Development Setup

Prerequisites

Install Node.js which includes Node Package Manager

Setting Up a Project

Install the Angular CLI globally:

npm install -g @angular/cli

Create workspace:

ng new [PROJECT NAME]

Run the application:

cd [PROJECT NAME]
ng serve

Angular is cross-platform, fast, scalable, has incredible tooling, and is loved by millions.

Quickstart

Get started in 5 minutes.

Ecosystem

Changelog

Learn about the latest improvements.

Upgrading

Check out our upgrade guide to find out the best way to upgrade your project.

Contributing

Contributing Guidelines

Read through our contributing guidelines to learn about our submission process, coding rules, and more.

Want to Help?

Want to report a bug, contribute some code, or improve the documentation? Excellent! Read up on our guidelines for contributing and then check out one of our issues labeled as help wanted or good first issue.

Code of Conduct

Help us keep Angular open and inclusive. Please read and follow our Code of Conduct.

Community

Join the conversation and help the community.

Love Angular? Give our repo a star ⭐ ⬆️.

angular-html-parser's People

Contributors

Stargazers

Watchers

Forkers

benhowes fisker eiweiss kreo sosukesuzuki vac1911 pandu-crunchbase dhlolo thorn0 qpc-github neokidev jonathankingston rakhithjk

angular-html-parser's Issues

Pull changes from upstream to fix prettier#5810

prettier/prettier#5810 has been fixed upstream: angular@f2dc32e

Add option to parse a content of unknown tags in root as string

Context: prettier/prettier#8023 (comment)

PR(prettier/prettier#8023) which supports vue custom blocks has been merged into Prettier. But, there is a bug. A syntax error occurs when parsing < or > in a custom block as an HTML tag.

Input:

<custom lang="babel">
const foo = "</";
</custom>

Output:

SyntaxError: Unexpected character """ (2:16)
  1 | <custom lang="babel">
> 2 | const foo = "</";
    |                ^
  3 | </custom>

So I propose to add the option to parse a content of unknown tags in root as string.

How do you think? @ikatyang

/cc @fisker @thorn0

Add an option to allow `htm` component closing tags

Context: prettier/prettier#5552

tags with namespace are parsed incorrectly

const ngHtmlParser = require('angular-html-parser')

const { rootNodes } = ngHtmlParser.parse(
  /* HTML */ `
  <svg:defs>
    <svg:linearGradient></svg:linearGradient>
  </svg:defs>
`.trim(),
)

console.log('rootNodes:', ...rootNodes)

rootNodes: Element {
name: ':svg:defs', // <--  why?
attrs: [],
children: [
  Text {
    value: '\n      ',
    sourceSpan: [ParseSourceSpan],
    i18n: undefined,
    type: 'text'
  },
  Element {
    name: ':svg:linearGradient',
    attrs: [],
    children: [],
    sourceSpan: [ParseSourceSpan],
    startSourceSpan: [ParseSourceSpan],
    endSourceSpan: [ParseSourceSpan],
    nameSpan: [ParseSourceSpan],
    i18n: null,
    type: 'element'
  },
  Text {
    value: '\n    ',
    sourceSpan: [ParseSourceSpan],
    i18n: undefined,
    type: 'text'
  }
],
sourceSpan: ParseSourceSpan {
  start: ParseLocation {
    file: [ParseSourceFile],
    offset: 0,
    line: 0,
    col: 0
  },
  end: ParseLocation {
    file: [ParseSourceFile],
    offset: 10,
    line: 0,
    col: 10
  },
  details: null
},
startSourceSpan: ParseSourceSpan {
  start: ParseLocation {
    file: [ParseSourceFile],
    offset: 0,
    line: 0,
    col: 0
  },
  end: ParseLocation {
    file: [ParseSourceFile],
    offset: 10,
    line: 0,
    col: 10
  },
  details: null
},
endSourceSpan: ParseSourceSpan {
  start: ParseLocation {
    file: [ParseSourceFile],
    offset: 63,
    line: 2,
    col: 4
  },
  end: ParseLocation {
    file: [ParseSourceFile],
    offset: 74,
    line: 2,
    col: 15
  },
  details: null
},
nameSpan: ParseSourceSpan {
  start: ParseLocation {
    file: [ParseSourceFile],
    offset: 1,
    line: 0,
    col: 1
  },
  end: ParseLocation {
    file: [ParseSourceFile],
    offset: 9,
    line: 0,
    col: 9
  },
  details: null
},
i18n: null,
type: 'element'
}

Add full named entities support

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report 
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

For now, a parser is not supporting all list of named entities, so we have errors in parsing completely correct (by WHATWG specification) data. Just because the parser side is not a complete list.

Expected behavior

Anyway, there should be no mistake. There may be two solutions. We can update the list and bring it into line with the specification (for example, from here). Or we can allow any sequence of characters between & and ;.

Minimal reproduction of the problem

Input:

<!DOCTYPE html>
<html>
<head>
<title>EXCL Entity Test</title>
</head>
<body>
<p>This is an exclamation entity: &excl;</p>
</body>
</html>

Error:

[
  {
    "span": {
      "start": {
        "file": {
          "content": "<!DOCTYPE html> <html> <head> <title>EXCL Entity Test</title> </head> <body> <p>This is an exclamation entity: &excl;</p> </body> </html>\n\n",
          "url": "angular-html-parser"
        },
        "offset": 111,
        "line": 0,
        "col": 111
      },
      "end": {
        "file": {
          "content": "<!DOCTYPE html> <html> <head> <title>EXCL Entity Test</title> </head> <body> <p>This is an exclamation entity: &excl;</p> </body> </html>\n\n",
          "url": "angular-html-parser"
        },
        "offset": 117,
        "line": 0,
        "col": 117
      },
      "details": null
    },
    "msg": "Unknown entity \"excl\" - use the \"&#<decimal>;\" or  \"&#x<hex>;\" syntax",
    "level": 1,
    "tokenType": 4
  }
]

Environment


Browser: all
 
For Tooling issues:
- Node version: all
- Platform:  all

Others:

Support unquoted attribute value contains `/`

Related Prettier issue

This line https://github.com/ikatyang/angular-html-parser/blob/9bee4f7da8d94aee6f2a24d806dd9713b52b5a85/packages/compiler/src/ml_parser/lexer.ts#L609 ?

Unquoted attributes that contain slashes can't be parsed

see prettier/prettier#8210

Location error

require("angular-html-parser").parse('<a><br\n></a>').rootNodes[0].sourceSpan

Result

ParseSourceSpan {
  start: ParseLocation {
    file: ParseSourceFile {
      content: '<a><br\n></a>',
      url: 'angular-html-parser'
    },
    offset: 0,
    line: 0,
    col: 0
  },
  end: ParseLocation {
    file: ParseSourceFile {
      content: '<a><br\n></a>',
      url: 'angular-html-parser'
    },
    offset: 3,
    line: 0, // <---  This seems not right. Should be 1
    col: 3
  },
  details: null
}

HTML with Unicode - SyntaxError: Unexpected character """

Steps to reproduce:

Playground with my case: https://prettier.io/playground/#N4Igxg9gdgLgprEAuEAeAhAEQPIGEAqAmgAoCiABABYwC2ANgHwA6UqAEvgLIAyzU55VACMIAEwCefAdMEBLKAAcArjHIK6AQzBxKEOqLgAnALxMQAMgDEADgBMABgDMZqYID0IiX1RuOPBiAANCAQCjCy0ADOyKAahoYQAO7EcQjRKBp0iRri0cFChloA1nAwAMoaNHDc8nDIAGaZkXD5hWAl5Qpa8gDmyDCGSi0gcDRCcKIGotwaUD1KGj1wAGIQhjQaMOFzyCAaKhBBINT0AOqUsvCRXdplaZeyAG6X4rtgkXkg8s2GMMSFPQ2DSawwAVpEAB5lXp0OAARSUEHgwLozWCXUMP12JzoRwUhnkMFOslEMEoyGs9nRCWap0KCl2+LgP0edWCAEdEfB-qF0ntIgBaKBwCYTI6GOCc2QS-6LIFIRqo4bNGiyfqDZUw+FcuoKkHBGAaITE0nkpC2A2FWR0Xq4CA0eUjSIAViOSma+CN6UVaJAjyGAEkoAZYGUwASwgBBYNlGDiWEo5oAXyTQA

it also happens this way: https://prettier.io/playground/#N4Igxg9gdgLgprEAuEAeAhAEQPIGEAqAmgAoCiABABYwC2ANgHwA6UqAEvgLIAyzU55VACMIAEwCefAdMEBLKAAcArjHIK6AQzBxKEOqLgAnALxMQAMgDEZqYID0IiX1R2OPBiAA0ICApizoAGdkUA1DQwgAd2IwhGCUDTpIjXFg7yFDLQBrOBgAZQ0aOG55OGQAM0TAuHTMsBz8hS15AHNkGEMlGpA4GiE4UQNRbg0oFqUNFrgAMQhDGg0YfzHkEA0VCC8QanoAdUpZeECm7Ty4w9kAN0PxVbBAtJB5asMYYkyWhYqq7oArQIAHnlWnQ4ABFJQQeDfOjVbxNQwvVY7OhbBSGeQwXayUQwSjIAAcAAZ4RFqrtMgpVui4C9LmVvABHSHwd6+eJrQIAWigcAGAy2hjgzNkQveky+SEqsO61RosnanVlIPBLLKUp+3hgGiE2Nx+KQACYtZlZHRWrgIDRJT1AgBWLZKar4HXxaVwkCXLoASSgBlgeTAGL8AEE-XkYOJQTDqgBfWNAA

Expected behavior:
the code gets prettified and no error is thrown
the example line should be printed as-is

Actual behavior:
SyntaxError: Unexpected character """
at the last " of placeholder="&angular#8203"

see: prettier/prettier#11822

workaround: add semikolon to the end
<input placeholder="">

cc @sosukesuzuki @fisker @thorn0

Arrow function syntax error in IE11

In IE11 this syntax error results from the use of an arrow function in the getParser function of the index.js file.

Angular Version:


Angular CLI: 8.3.19
Node: 10.16.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.6
@angular-devkit/build-angular     0.800.6
@angular-devkit/build-optimizer   0.800.6
@angular-devkit/build-webpack     0.800.6
@angular-devkit/core              8.0.6
@angular-devkit/schematics        8.3.19
@angular/cli                      8.3.19
@ngtools/webpack                  8.0.6
@nguniversal/express-engine       7.1.1
@schematics/angular               8.3.19
@schematics/update                0.803.19
rxjs                              6.5.3
typescript                        3.4.5
webpack                           4.30.0