feat(html): update angular-html-parser (#5565)
- support [`htm`](https://github.com/developit/htm) (`<${Component}>content<//>`, `<div />`) - preserve [bogus comments](https://www.w3.org/TR/html5/syntax.html#bogus-comment-state) (`<! ... >`, `<? ... >`)master
parent
d124bbaacb
commit
28b938da97
|
@ -20,7 +20,7 @@
|
||||||
"@glimmer/syntax": "0.30.3",
|
"@glimmer/syntax": "0.30.3",
|
||||||
"@iarna/toml": "2.0.0",
|
"@iarna/toml": "2.0.0",
|
||||||
"angular-estree-parser": "1.1.5",
|
"angular-estree-parser": "1.1.5",
|
||||||
"angular-html-parser": "1.0.0",
|
"angular-html-parser": "1.1.0",
|
||||||
"camelcase": "4.1.0",
|
"camelcase": "4.1.0",
|
||||||
"chalk": "2.1.0",
|
"chalk": "2.1.0",
|
||||||
"cjk-regex": "2.0.0",
|
"cjk-regex": "2.0.0",
|
||||||
|
|
|
@ -9,7 +9,12 @@ const { parseIeConditionalComment } = require("./conditional-comment");
|
||||||
|
|
||||||
function ngHtmlParser(
|
function ngHtmlParser(
|
||||||
input,
|
input,
|
||||||
{ recognizeSelfClosing, normalizeTagName, normalizeAttributeName }
|
{
|
||||||
|
recognizeSelfClosing,
|
||||||
|
normalizeTagName,
|
||||||
|
normalizeAttributeName,
|
||||||
|
allowHtmComponentClosingTags
|
||||||
|
}
|
||||||
) {
|
) {
|
||||||
const parser = require("angular-html-parser");
|
const parser = require("angular-html-parser");
|
||||||
const {
|
const {
|
||||||
|
@ -30,7 +35,8 @@ function ngHtmlParser(
|
||||||
} = require("angular-html-parser/lib/compiler/src/ml_parser/html_tags");
|
} = require("angular-html-parser/lib/compiler/src/ml_parser/html_tags");
|
||||||
|
|
||||||
const { rootNodes, errors } = parser.parse(input, {
|
const { rootNodes, errors } = parser.parse(input, {
|
||||||
canSelfClose: recognizeSelfClosing
|
canSelfClose: recognizeSelfClosing,
|
||||||
|
allowHtmComponentClosingTags
|
||||||
});
|
});
|
||||||
|
|
||||||
if (errors.length !== 0) {
|
if (errors.length !== 0) {
|
||||||
|
@ -255,7 +261,8 @@ function locEnd(node) {
|
||||||
function createParser({
|
function createParser({
|
||||||
recognizeSelfClosing = false,
|
recognizeSelfClosing = false,
|
||||||
normalizeTagName = false,
|
normalizeTagName = false,
|
||||||
normalizeAttributeName = false
|
normalizeAttributeName = false,
|
||||||
|
allowHtmComponentClosingTags = false
|
||||||
} = {}) {
|
} = {}) {
|
||||||
return {
|
return {
|
||||||
preprocess: text => text.replace(/\r\n?/g, "\n"),
|
preprocess: text => text.replace(/\r\n?/g, "\n"),
|
||||||
|
@ -263,7 +270,8 @@ function createParser({
|
||||||
_parse(text, options, {
|
_parse(text, options, {
|
||||||
recognizeSelfClosing,
|
recognizeSelfClosing,
|
||||||
normalizeTagName,
|
normalizeTagName,
|
||||||
normalizeAttributeName
|
normalizeAttributeName,
|
||||||
|
allowHtmComponentClosingTags
|
||||||
}),
|
}),
|
||||||
hasPragma,
|
hasPragma,
|
||||||
astFormat: "html",
|
astFormat: "html",
|
||||||
|
@ -275,8 +283,10 @@ function createParser({
|
||||||
module.exports = {
|
module.exports = {
|
||||||
parsers: {
|
parsers: {
|
||||||
html: createParser({
|
html: createParser({
|
||||||
|
recognizeSelfClosing: true,
|
||||||
normalizeTagName: true,
|
normalizeTagName: true,
|
||||||
normalizeAttributeName: true
|
normalizeAttributeName: true,
|
||||||
|
allowHtmComponentClosingTags: true
|
||||||
}),
|
}),
|
||||||
angular: createParser(),
|
angular: createParser(),
|
||||||
vue: createParser({ recognizeSelfClosing: true })
|
vue: createParser({ recognizeSelfClosing: true })
|
||||||
|
|
|
@ -18,6 +18,7 @@ const PREPROCESS_PIPELINE = [
|
||||||
extractWhitespaces,
|
extractWhitespaces,
|
||||||
addCssDisplay,
|
addCssDisplay,
|
||||||
addIsSelfClosing,
|
addIsSelfClosing,
|
||||||
|
addHasHtmComponentClosingTag,
|
||||||
addIsSpaceSensitive,
|
addIsSpaceSensitive,
|
||||||
mergeSimpleElementIntoText
|
mergeSimpleElementIntoText
|
||||||
];
|
];
|
||||||
|
@ -401,6 +402,23 @@ function addIsSelfClosing(ast /*, options */) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addHasHtmComponentClosingTag(ast, options) {
|
||||||
|
return ast.map(node =>
|
||||||
|
node.type !== "element"
|
||||||
|
? node
|
||||||
|
: Object.assign(node, {
|
||||||
|
hasHtmComponentClosingTag:
|
||||||
|
node.endSourceSpan &&
|
||||||
|
/^<\s*\/\s*\/\s*>$/.test(
|
||||||
|
options.originalText.slice(
|
||||||
|
node.endSourceSpan.start.offset,
|
||||||
|
node.endSourceSpan.end.offset
|
||||||
|
)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function addCssDisplay(ast, options) {
|
function addCssDisplay(ast, options) {
|
||||||
return ast.map(node =>
|
return ast.map(node =>
|
||||||
Object.assign(node, { cssDisplay: getNodeCssStyleDisplay(node, options) })
|
Object.assign(node, { cssDisplay: getNodeCssStyleDisplay(node, options) })
|
||||||
|
|
|
@ -313,9 +313,15 @@ function genericPrint(path, options, print) {
|
||||||
case "comment": {
|
case "comment": {
|
||||||
return concat([
|
return concat([
|
||||||
printOpeningTagPrefix(node, options),
|
printOpeningTagPrefix(node, options),
|
||||||
"<!--",
|
concat(
|
||||||
concat(replaceNewlines(node.value, literalline)),
|
replaceNewlines(
|
||||||
"-->",
|
options.originalText.slice(
|
||||||
|
options.locStart(node),
|
||||||
|
options.locEnd(node)
|
||||||
|
),
|
||||||
|
literalline
|
||||||
|
)
|
||||||
|
),
|
||||||
printClosingTagSuffix(node, options)
|
printClosingTagSuffix(node, options)
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
@ -839,6 +845,11 @@ function printClosingTagStartMarker(node, options) {
|
||||||
switch (node.type) {
|
switch (node.type) {
|
||||||
case "ieConditionalComment":
|
case "ieConditionalComment":
|
||||||
return "<!";
|
return "<!";
|
||||||
|
case "element":
|
||||||
|
if (node.hasHtmComponentClosingTag) {
|
||||||
|
return "<//";
|
||||||
|
}
|
||||||
|
// fall through
|
||||||
default:
|
default:
|
||||||
return `</${node.rawName}`;
|
return `</${node.rawName}`;
|
||||||
}
|
}
|
||||||
|
|
|
@ -91,6 +91,87 @@ printWidth: 80
|
||||||
================================================================================
|
================================================================================
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`bogus.html 1`] = `
|
||||||
|
====================================options=====================================
|
||||||
|
parsers: ["html"]
|
||||||
|
printWidth: 80
|
||||||
|
| printWidth
|
||||||
|
=====================================input======================================
|
||||||
|
<? hello ?>
|
||||||
|
<!- world ->
|
||||||
|
|
||||||
|
=====================================output=====================================
|
||||||
|
<? hello ?>
|
||||||
|
<!- world ->
|
||||||
|
|
||||||
|
================================================================================
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`bogus.html 2`] = `
|
||||||
|
====================================options=====================================
|
||||||
|
parsers: ["html"]
|
||||||
|
printWidth: 1
|
||||||
|
| printWidth
|
||||||
|
=====================================input======================================
|
||||||
|
<? hello ?>
|
||||||
|
<!- world ->
|
||||||
|
|
||||||
|
=====================================output=====================================
|
||||||
|
<? hello ?>
|
||||||
|
<!- world ->
|
||||||
|
|
||||||
|
================================================================================
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`bogus.html 3`] = `
|
||||||
|
====================================options=====================================
|
||||||
|
parsers: ["html"]
|
||||||
|
printWidth: Infinity
|
||||||
|
=====================================input======================================
|
||||||
|
<? hello ?>
|
||||||
|
<!- world ->
|
||||||
|
|
||||||
|
=====================================output=====================================
|
||||||
|
<? hello ?>
|
||||||
|
<!- world ->
|
||||||
|
|
||||||
|
================================================================================
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`bogus.html 4`] = `
|
||||||
|
====================================options=====================================
|
||||||
|
htmlWhitespaceSensitivity: "strict"
|
||||||
|
parsers: ["html"]
|
||||||
|
printWidth: 80
|
||||||
|
| printWidth
|
||||||
|
=====================================input======================================
|
||||||
|
<? hello ?>
|
||||||
|
<!- world ->
|
||||||
|
|
||||||
|
=====================================output=====================================
|
||||||
|
<? hello ?>
|
||||||
|
<!- world ->
|
||||||
|
|
||||||
|
================================================================================
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`bogus.html 5`] = `
|
||||||
|
====================================options=====================================
|
||||||
|
htmlWhitespaceSensitivity: "ignore"
|
||||||
|
parsers: ["html"]
|
||||||
|
printWidth: 80
|
||||||
|
| printWidth
|
||||||
|
=====================================input======================================
|
||||||
|
<? hello ?>
|
||||||
|
<!- world ->
|
||||||
|
|
||||||
|
=====================================output=====================================
|
||||||
|
<? hello ?>
|
||||||
|
<!- world ->
|
||||||
|
|
||||||
|
================================================================================
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`conditional.html 1`] = `
|
exports[`conditional.html 1`] = `
|
||||||
====================================options=====================================
|
====================================options=====================================
|
||||||
parsers: ["html"]
|
parsers: ["html"]
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
<? hello ?>
|
||||||
|
<!- world ->
|
|
@ -55,6 +55,10 @@ html\`\`
|
||||||
|
|
||||||
html\`<my-element obj=\${obj}></my-element>\`;
|
html\`<my-element obj=\${obj}></my-element>\`;
|
||||||
|
|
||||||
|
html\` <\${Footer} >footer content<// > \`
|
||||||
|
|
||||||
|
html\` <div /> \`
|
||||||
|
|
||||||
=====================================output=====================================
|
=====================================output=====================================
|
||||||
import { LitElement, html } from "@polymer/lit-element";
|
import { LitElement, html } from "@polymer/lit-element";
|
||||||
|
|
||||||
|
@ -98,5 +102,13 @@ html\`
|
||||||
<my-element obj=\${obj}></my-element>
|
<my-element obj=\${obj}></my-element>
|
||||||
\`;
|
\`;
|
||||||
|
|
||||||
|
html\`
|
||||||
|
<\${Footer}>footer content<//>
|
||||||
|
\`;
|
||||||
|
|
||||||
|
html\`
|
||||||
|
<div />
|
||||||
|
\`;
|
||||||
|
|
||||||
================================================================================
|
================================================================================
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -46,3 +46,7 @@ const someHtml2 = /* HTML */ `<div > hello ${world} </div >`;
|
||||||
html``
|
html``
|
||||||
|
|
||||||
html`<my-element obj=${obj}></my-element>`;
|
html`<my-element obj=${obj}></my-element>`;
|
||||||
|
|
||||||
|
html` <${Footer} >footer content<// > `
|
||||||
|
|
||||||
|
html` <div /> `
|
||||||
|
|
|
@ -675,9 +675,9 @@ angular-estree-parser@1.1.5:
|
||||||
lines-and-columns "^1.1.6"
|
lines-and-columns "^1.1.6"
|
||||||
tslib "^1.9.3"
|
tslib "^1.9.3"
|
||||||
|
|
||||||
angular-html-parser@1.0.0:
|
angular-html-parser@1.1.0:
|
||||||
version "1.0.0"
|
version "1.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/angular-html-parser/-/angular-html-parser-1.0.0.tgz#57feed04674c170fa56bfcd556cf7b2cd677e170"
|
resolved "https://registry.yarnpkg.com/angular-html-parser/-/angular-html-parser-1.1.0.tgz#0199c3c675c6bc9e1c7df9b41569c9df99b53f8c"
|
||||||
dependencies:
|
dependencies:
|
||||||
tslib "^1.9.3"
|
tslib "^1.9.3"
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue