prettier / angular-html-parser Goto Github PK

View Code? Open in Web Editor NEW

This project forked from angular/angular

42.0 42.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

Opinionated Code Formatter

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular
GraphQL · Markdown · YAML
Your favorite language?

Intro

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Input

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

Output

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne(),
);

Prettier can be run in your editor on-save, in a pre-commit hook, or in CI environments to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code review ever again!

Documentation

Install · Options · CLI · API

Playground

Badge

Show the world you're using Prettier →

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

Contributing

See CONTRIBUTING.md.

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

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
}

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

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

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:

Use webparser

Hi, I think this package follows the same strategy as https://github.com/Prettyhtml/prettyhtml/tree/master/packages/webparser. Webparser is also a fork of the angular parser. Should we merge them?

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="">

Add attrs info for getTagContentType

Ref: vuejs/core#1120

It seems the lang attr is required for parsing Vue SFC.

cc @sosukesuzuki @fisker @thorn0

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'
}