From 39d45c009eeefc9599443d1f86c5f02f6f886823 Mon Sep 17 00:00:00 2001 From: Ika Date: Wed, 14 Nov 2018 11:53:04 +0800 Subject: [PATCH 1/7] refactor --- src/language-html/conditional-comment.js | 49 ++++++++++++++++++++++++ src/language-html/parser-html.js | 45 +--------------------- 2 files changed, 50 insertions(+), 44 deletions(-) create mode 100644 src/language-html/conditional-comment.js diff --git a/src/language-html/conditional-comment.js b/src/language-html/conditional-comment.js new file mode 100644 index 000000000000..f2fafff469dc --- /dev/null +++ b/src/language-html/conditional-comment.js @@ -0,0 +1,49 @@ +"use strict"; + +function parseIeConditionalComment(node, parseHtml) { + if (!node.value) { + return null; + } + + const match = node.value.match( + /^(\[if([^\]]*?)\]>)([\s\S]*?) { + try { + return [true, parseHtml(data, contentStartSpan).children]; + } catch (e) { + const text = { + type: "text", + value: data, + sourceSpan: new ParseSourceSpan(contentStartSpan, contentEndSpan) + }; + return [false, [text]]; + } + })(); + return { + type: "ieConditionalComment", + complete, + children, + condition: condition.trim().replace(/\s+/g, " "), + sourceSpan: node.sourceSpan, + startSourceSpan: new ParseSourceSpan( + node.sourceSpan.start, + contentStartSpan + ), + endSourceSpan: new ParseSourceSpan(contentEndSpan, node.sourceSpan.end) + }; +} + +module.exports = { + parseIeConditionalComment +}; diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js index 972088eb4954..cfdcf09ed488 100644 --- a/src/language-html/parser-html.js +++ b/src/language-html/parser-html.js @@ -5,6 +5,7 @@ const { HTML_ELEMENT_ATTRIBUTES, HTML_TAGS } = require("./utils"); const { hasPragma } = require("./pragma"); const createError = require("../common/parser-create-error"); const { Node } = require("./ast"); +const { parseIeConditionalComment } = require("./conditional-comment"); function ngHtmlParser(input, canSelfClose) { const parser = require("angular-html-parser"); @@ -240,50 +241,6 @@ function _parse( }); } -function parseIeConditionalComment(node, parseHtml) { - if (!node.value) { - return null; - } - - const match = node.value.match( - /^(\[if([^\]]*?)\]>)([\s\S]*?) { - try { - return [true, parseHtml(data, contentStartSpan).children]; - } catch (e) { - const text = { - type: "text", - value: data, - sourceSpan: new ParseSourceSpan(contentStartSpan, contentEndSpan) - }; - return [false, [text]]; - } - })(); - return { - type: "ieConditionalComment", - complete, - children, - condition: condition.trim().replace(/\s+/g, " "), - sourceSpan: node.sourceSpan, - startSourceSpan: new ParseSourceSpan( - node.sourceSpan.start, - contentStartSpan - ), - endSourceSpan: new ParseSourceSpan(contentEndSpan, node.sourceSpan.end) - }; -} - function locStart(node) { return node.sourceSpan.start.offset; } From 757010b2b25b95ce2e8dc74a1d43cd4f187bd135 Mon Sep 17 00:00:00 2001 From: Ika Date: Wed, 14 Nov 2018 12:31:05 +0800 Subject: [PATCH 2/7] test: add tests --- .../__snapshots__/jsfmt.spec.js.snap | 259 ++++++++++++++++++ tests/html_comments/conditional.html | 21 ++ 2 files changed, 280 insertions(+) diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap index 5e796d0c0f9c..3263ed0f4827 100644 --- a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap +++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap @@ -99,6 +99,27 @@ exports[`conditional.html - html-verify 1`] = ` + + + + + + + + + + + + + + + + + + + + + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -140,6 +161,34 @@ exports[`conditional.html - html-verify 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; exports[`conditional.html - html-verify 2`] = ` @@ -184,6 +233,27 @@ exports[`conditional.html - html-verify 2`] = ` + + + + + + + + + + + + + + + + + + + + + ~ @@ -259,6 +329,48 @@ exports[`conditional.html - html-verify 2`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; exports[`conditional.html - html-verify 3`] = ` @@ -303,6 +415,27 @@ exports[`conditional.html - html-verify 3`] = ` + + + + + + + + + + + + + + + + + + + + + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -344,6 +477,34 @@ exports[`conditional.html - html-verify 3`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; exports[`conditional.html - html-verify 4`] = ` @@ -388,6 +549,27 @@ exports[`conditional.html - html-verify 4`] = ` + + + + + + + + + + + + + + + + + + + + + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -429,6 +611,34 @@ exports[`conditional.html - html-verify 4`] = ` + + + + + + + + + + + + + + + + + + + + + `; exports[`conditional.html - html-verify 5`] = ` @@ -473,6 +683,27 @@ exports[`conditional.html - html-verify 5`] = ` + + + + + + + + + + + + + + + + + + + + + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -529,6 +760,34 @@ exports[`conditional.html - html-verify 5`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; exports[`for_debugging.html - html-verify 1`] = ` diff --git a/tests/html_comments/conditional.html b/tests/html_comments/conditional.html index 14ae802cc3c5..0b82b70feb77 100644 --- a/tests/html_comments/conditional.html +++ b/tests/html_comments/conditional.html @@ -39,3 +39,24 @@ + + + + + + + + + + + + + + + + + + + + + From 2840a0319457b1b038a8046a59554b75778e0596 Mon Sep 17 00:00:00 2001 From: Ika Date: Wed, 14 Nov 2018 12:31:22 +0800 Subject: [PATCH 3/7] fix: support ie conditional start/end comment --- src/language-html/conditional-comment.js | 49 +++++++++--- src/language-html/printer-html.js | 9 +++ .../__snapshots__/jsfmt.spec.js.snap | 78 ++++++++----------- 3 files changed, 82 insertions(+), 54 deletions(-) diff --git a/src/language-html/conditional-comment.js b/src/language-html/conditional-comment.js index f2fafff469dc..3071d310de28 100644 --- a/src/language-html/conditional-comment.js +++ b/src/language-html/conditional-comment.js @@ -1,18 +1,33 @@ "use strict"; -function parseIeConditionalComment(node, parseHtml) { - if (!node.value) { - return null; - } +// https://css-tricks.com/how-to-create-an-ie-only-stylesheet - const match = node.value.match( - /^(\[if([^\]]*?)\]>)([\s\S]*?) ... +const IE_CONDITIONAL_START_END_COMMENT_REGEX = /^(\[if([^\]]*?)\]>)([\s\S]*?) +const IE_CONDITIONAL_START_COMMENT_REGEX = /^\[if([^\]]*?)\]> +const IE_CONDITIONAL_END_COMMENT_REGEX = /^"; case "ieConditionalComment": + case "ieConditionalEndComment": return `[endif]-->`; + case "ieConditionalStartComment": + return `]>`; case "interpolation": return "}}"; case "element": diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap index 3263ed0f4827..629006863be3 100644 --- a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap +++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap @@ -163,28 +163,28 @@ exports[`conditional.html - html-verify 1`] = ` - + - + - + - + - + - + @@ -331,42 +331,30 @@ exports[`conditional.html - html-verify 2`] = ` - + - + - + - + - + - + @@ -479,28 +467,28 @@ exports[`conditional.html - html-verify 3`] = ` - + - + - + - + - + - + @@ -613,28 +601,28 @@ exports[`conditional.html - html-verify 4`] = ` - + - + - + > @@ -762,28 +750,28 @@ exports[`conditional.html - html-verify 5`] = ` - + - + - + - + - + - + From c4ab3a988b5c18605482e2dd73ed0366aeb60fcd Mon Sep 17 00:00:00 2001 From: Ika Date: Wed, 14 Nov 2018 13:16:28 +0800 Subject: [PATCH 4/7] feat: add a special case for opening tag surrounded by ie conditional start/end comment --- src/language-html/preprocess.js | 65 +++++++++++++++++++ src/language-html/printer-html.js | 10 +++ .../__snapshots__/jsfmt.spec.js.snap | 42 ++++-------- 3 files changed, 86 insertions(+), 31 deletions(-) diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js index d12c4d03cd15..aa48e0cbe327 100644 --- a/src/language-html/preprocess.js +++ b/src/language-html/preprocess.js @@ -12,6 +12,7 @@ const { const PREPROCESS_PIPELINE = [ removeIgnorableFirstLf, + mergeIeConditonalStartEndCommentIntoElementOpeningTag, mergeCdataIntoText, extractInterpolation, extractWhitespaces, @@ -52,6 +53,70 @@ function removeIgnorableFirstLf(ast /*, options */) { }); } +function mergeIeConditonalStartEndCommentIntoElementOpeningTag( + ast /*, options */ +) { + /** + * + */ + const isTarget = node => + node.type === "element" && + node.prev && + node.prev.type === "ieConditionalStartComment" && + node.prev.sourceSpan.end.offset === node.startSourceSpan.start.offset && + node.firstChild && + node.firstChild.type === "ieConditionalEndComment" && + node.firstChild.sourceSpan.start.offset === node.startSourceSpan.end.offset; + return ast.map(node => { + if (node.children) { + const isTargetResults = node.children.map(isTarget); + if (isTargetResults.some(Boolean)) { + const newChildren = []; + + for (let i = 0; i < node.children.length; i++) { + const child = node.children[i]; + + if (isTargetResults[i + 1]) { + // ieConditionalStartComment + continue; + } + + if (isTargetResults[i]) { + const ieConditionalStartComment = child.prev; + const ieConditionalEndComment = child.firstChild; + + const ParseSourceSpan = child.sourceSpan.constructor; + const startSourceSpan = new ParseSourceSpan( + ieConditionalEndComment.sourceSpan.start, + ieConditionalEndComment.sourceSpan.end + ); + const sourceSpan = new ParseSourceSpan( + startSourceSpan.start, + child.sourceSpan.end + ); + + newChildren.push( + child.clone({ + condition: ieConditionalStartComment.condition, + sourceSpan, + startSourceSpan, + children: child.children.slice(1) + }) + ); + + continue; + } + + newChildren.push(child); + } + + return node.clone({ children: newChildren }); + } + } + return node; + }); +} + function mergeNodeIntoText(ast, shouldMerge, getValue) { return ast.map(node => { if (node.children) { diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js index 60b4c4f09c8a..034522cdfb01 100644 --- a/src/language-html/printer-html.js +++ b/src/language-html/printer-html.js @@ -781,6 +781,11 @@ function printOpeningTagStartMarker(node) { return "{{"; case "docType": return "<${node.rawName}`; + } + // fall through default: return `<${node.rawName}`; } @@ -791,6 +796,11 @@ function printOpeningTagEndMarker(node) { switch (node.type) { case "ieConditionalComment": return "]>"; + case "element": + if (node.condition) { + return `>`; + } + // fall through default: return `>`; } diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap index 629006863be3..114f99521d1c 100644 --- a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap +++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap @@ -163,18 +163,14 @@ exports[`conditional.html - html-verify 1`] = ` - - - + - - - + @@ -331,20 +327,16 @@ exports[`conditional.html - html-verify 2`] = ` - - - + - - - +> @@ -467,18 +459,14 @@ exports[`conditional.html - html-verify 3`] = ` - - - + - - - + @@ -601,18 +589,14 @@ exports[`conditional.html - html-verify 4`] = ` - + - + @@ -750,18 +734,14 @@ exports[`conditional.html - html-verify 5`] = ` - - - + - - - + From d67cc351a2340923f90fa13adc0a7390fbca7d54 Mon Sep 17 00:00:00 2001 From: Ika Date: Thu, 15 Nov 2018 10:20:33 +0800 Subject: [PATCH 5/7] chore: trigger build From 2a7a1de515312b775992266d296c86303b7b1311 Mon Sep 17 00:00:00 2001 From: Ika Date: Thu, 15 Nov 2018 12:08:18 +0800 Subject: [PATCH 6/7] test: add tests --- .../__snapshots__/jsfmt.spec.js.snap | 80 +++++++++++++++++++ tests/html_comments/conditional.html | 8 ++ 2 files changed, 88 insertions(+) diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap index 114f99521d1c..a6c850aab6e7 100644 --- a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap +++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap @@ -120,6 +120,14 @@ exports[`conditional.html - html-verify 1`] = ` + + + + + + + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -185,6 +193,14 @@ exports[`conditional.html - html-verify 1`] = ` + + + + + + + + `; exports[`conditional.html - html-verify 2`] = ` @@ -250,6 +266,14 @@ exports[`conditional.html - html-verify 2`] = ` + + + + + + + ~ @@ -351,6 +375,14 @@ exports[`conditional.html - html-verify 2`] = ` + + + + + + + + `; exports[`conditional.html - html-verify 3`] = ` @@ -416,6 +448,14 @@ exports[`conditional.html - html-verify 3`] = ` + + + + + + + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -481,6 +521,14 @@ exports[`conditional.html - html-verify 3`] = ` + + + + + + + + `; exports[`conditional.html - html-verify 4`] = ` @@ -546,6 +594,14 @@ exports[`conditional.html - html-verify 4`] = ` + + + + + + + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -611,6 +667,14 @@ exports[`conditional.html - html-verify 4`] = ` + + + + + + + + `; exports[`conditional.html - html-verify 5`] = ` @@ -676,6 +740,14 @@ exports[`conditional.html - html-verify 5`] = ` + + + + + + + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -756,6 +828,14 @@ exports[`conditional.html - html-verify 5`] = ` + + + + + + + + `; exports[`for_debugging.html - html-verify 1`] = ` diff --git a/tests/html_comments/conditional.html b/tests/html_comments/conditional.html index 0b82b70feb77..315cff130a29 100644 --- a/tests/html_comments/conditional.html +++ b/tests/html_comments/conditional.html @@ -60,3 +60,11 @@ + + + + + + + From f55025480a53e4bed65ba8b045b3640f0a2fbecc Mon Sep 17 00:00:00 2001 From: Ika Date: Thu, 15 Nov 2018 12:08:28 +0800 Subject: [PATCH 7/7] fix: correct start span --- src/language-html/preprocess.js | 2 +- tests/html_comments/__snapshots__/jsfmt.spec.js.snap | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js index aa48e0cbe327..25d4360ba629 100644 --- a/src/language-html/preprocess.js +++ b/src/language-html/preprocess.js @@ -87,7 +87,7 @@ function mergeIeConditonalStartEndCommentIntoElementOpeningTag( const ParseSourceSpan = child.sourceSpan.constructor; const startSourceSpan = new ParseSourceSpan( - ieConditionalEndComment.sourceSpan.start, + ieConditionalStartComment.sourceSpan.start, ieConditionalEndComment.sourceSpan.end ); const sourceSpan = new ParseSourceSpan( diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap index a6c850aab6e7..5fb7e9745d84 100644 --- a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap +++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap @@ -195,7 +195,6 @@ exports[`conditional.html - html-verify 1`] = ` - @@ -377,7 +376,6 @@ exports[`conditional.html - html-verify 2`] = ` - @@ -523,7 +521,6 @@ exports[`conditional.html - html-verify 3`] = ` - @@ -669,7 +666,6 @@ exports[`conditional.html - html-verify 4`] = ` - @@ -830,7 +826,6 @@ exports[`conditional.html - html-verify 5`] = ` -