feat(parse5): update parse5, usage, tests (#707)

## Details Update parse5 to 5.1.0, usage and ts, tests Using parse5 to handle template issues now. Previous validation is gone until we can contribute validation back into parse5. W-5494357 ## Does this PR introduce a breaking change? * [ ] Yes * [x] No
salesforce · Oct 5, 2018 · 64206dc · 64206dc
1 parent 2b3b28d
commit 64206dc
Show file tree

Hide file tree

Showing 22 changed files with 258 additions and 282 deletions.
diff --git a/packages/lwc-compiler/package.json b/packages/lwc-compiler/package.json
@@ -21,7 +21,6 @@
     "babel-preset-minify": "0.5.0-alpha.5a128fd5",
     "cssnano": "^3.10.0",
     "lwc-template-compiler": "0.29.13",
-    "parse5": "^3.0.3",
     "postcss": "~6.0.19",
     "postcss-plugin-lwc": "0.29.13",
     "postcss-selector-parser": "^3.1.1",

diff --git a/packages/lwc-compiler/src/compiler/__tests__/result.spec.ts b/packages/lwc-compiler/src/compiler/__tests__/result.spec.ts
@@ -178,30 +178,6 @@ describe("compiler result", () => {
         expect(diagnostics[2].message).toContain('Unclosed block');
     });
 
-    test('compiler returns diagnostic errors when transformation encounters an error in html', async () => {
-        const config = {
-            name: "foo",
-            namespace: "x",
-            files: {
-                "foo.js": `import { LightningElement } from 'lwc';
-                export default class Test extends LightningElement {}
-                `,
-                "foo.html": `<template>`,
-            },
-        };
-        const { success, diagnostics }  = await compile(config);
-        expect(success).toBe(false);
-        expect(diagnostics.length).toBe(2);
-
-        // check warning
-        expect(diagnostics[0].level).toBe(DiagnosticLevel.Warning);
-        expect(diagnostics[0].message).toBe('\'lwc\' is imported by foo.js, but could not be resolved – treating it as an external dependency');
-
-        // check error
-        expect(diagnostics[1].level).toBe(DiagnosticLevel.Fatal);
-        expect(diagnostics[1].message).toContain('foo.html: <template> has no matching closing tag.');
-    });
-
     test("sourcemaps correctness", async () => {
         const tplCode = '<template></template>';
         const cmpCode = `import { LightningElement } from 'lwc';

diff --git a/packages/lwc-compiler/src/transformers/__tests__/transform.spec.ts b/packages/lwc-compiler/src/transformers/__tests__/transform.spec.ts
@@ -161,7 +161,7 @@ describe('HTML transform', () => {
             })
         ).rejects.toMatchObject({
             filename: 'foo.html',
-            message: expect.stringContaining('foo.html: Invalid HTML syntax: eof-in-tag.')
+            message: expect.stringContaining('foo.html: Missing root template tag')
         });
     });
 

diff --git a/packages/lwc-template-compiler/package.json b/packages/lwc-template-compiler/package.json
@@ -10,24 +10,25 @@
     "build": "tsc",
     "test": "jest"
   },
+  "dependencies": {
+    "babel-generator": "^6.26.1",
+    "babel-template": "^6.26.0",
+    "babel-traverse": "^6.26.0",
+    "babel-types": "^6.26.0",
+    "babylon": "^6.17.0",
+    "camelcase": "~5.0.0",
+    "he": "^1.1.1",
+    "parse5": "^5.1.0"
+  },
   "devDependencies": {
     "@types/babel-generator": "^6.25.1",
     "@types/babel-template": "^6.25.0",
     "@types/babel-traverse": "^6.25.3",
     "@types/babylon": "^6.16.2",
     "@types/he": "^0.5.29",
+    "@types/parse5": "^5.0.0",
     "ast-pretty-print": "^1.1.5",
     "esutils": "^2.0.2",
     "glob": "^7.1.2"
-  },
-  "dependencies": {
-    "babel-generator": "^6.26.1",
-    "babel-template": "^6.26.0",
-    "babel-traverse": "^6.26.0",
-    "babel-types": "^6.26.0",
-    "babylon": "^6.17.0",
-    "camelcase": "~5.0.0",
-    "he": "^1.1.1",
-    "parse5-with-errors": "^4.0.1"
   }
 }
diff --git a/...lwc-template-compiler/src/__tests__/fixtures/parsing-errors/invalid-empty-tag/actual.html b/...lwc-template-compiler/src/__tests__/fixtures/parsing-errors/invalid-empty-tag/actual.html
diff --git a/...lwc-template-compiler/src/__tests__/fixtures/parsing-errors/invalid-empty-tag/expected.js b/...lwc-template-compiler/src/__tests__/fixtures/parsing-errors/invalid-empty-tag/expected.js
diff --git a/...c-template-compiler/src/__tests__/fixtures/parsing-errors/invalid-empty-tag/metadata.json b/...c-template-compiler/src/__tests__/fixtures/parsing-errors/invalid-empty-tag/metadata.json
diff --git a/...es/lwc-template-compiler/src/__tests__/fixtures/parsing-errors/no-closing-tag/actual.html b/...es/lwc-template-compiler/src/__tests__/fixtures/parsing-errors/no-closing-tag/actual.html
diff --git a/...es/lwc-template-compiler/src/__tests__/fixtures/parsing-errors/no-closing-tag/expected.js b/...es/lwc-template-compiler/src/__tests__/fixtures/parsing-errors/no-closing-tag/expected.js
diff --git a/.../lwc-template-compiler/src/__tests__/fixtures/parsing-errors/no-closing-tag/metadata.json b/.../lwc-template-compiler/src/__tests__/fixtures/parsing-errors/no-closing-tag/metadata.json
diff --git a/packages/lwc-template-compiler/src/__tests__/fixtures/svg/invalid-svg/actual.html b/packages/lwc-template-compiler/src/__tests__/fixtures/svg/invalid-svg/actual.html
@@ -1,12 +1,12 @@
 <template>
     <svg>
-        <!-- <altGlyph></altGlyph> -->
-        <!-- <altGlyphDef></altGlyphDef> -->
-        <!-- <altGlyphItem></altGlyphItem> -->
+        <altGlyph></altGlyph>
+        <altGlyphDef></altGlyphDef>
+        <altGlyphItem></altGlyphItem>
         <animate></animate>
-        <!-- <animateColor></animateColor> -->
-        <!-- <animateMotion></animateMotion> -->
-        <!-- <animateTransform></animateTransform> -->
+        <animateColor></animateColor>
+        <animateMotion></animateMotion>
+        <animateTransform></animateTransform>
         <cursor></cursor>
         <discard></discard>
         <font></font>
@@ -15,9 +15,9 @@
         <font-face-name></font-face-name>
         <font-face-src></font-face-src>
         <font-face-uri></font-face-uri>
-        <!-- <foreignObject></foreignObject> -->
+        <foreignObject></foreignObject>
         <glyph></glyph>
-        <!-- <glyphRef></glyphRef> -->
+        <glyphRef></glyphRef>
         <hatch></hatch>
         <hatchpath></hatchpath>
         <hkern></hkern>
@@ -30,13 +30,11 @@
         <style></style>
         <switch></switch>
         <tref></tref>
-        <!-- <view> -->
-        <!-- <vkern> -->
 
         <!-- ALLOWED -->
         <a></a>
         <circle></circle>
-        <!-- <clipPath></clipPath> -->
+        <clipPath></clipPath>
         <defs></defs>
         <desc></desc>
         <ellipse></ellipse>
@@ -53,7 +51,7 @@
         <stop></stop>
         <symbol></symbol>
         <text></text>
-        <!-- <textPath></textPath> -->
+        <textPath></textPath>
         <title></title>
         <tspan></tspan>
         <use></use>

diff --git a/packages/lwc-template-compiler/src/__tests__/fixtures/svg/invalid-svg/metadata.json b/packages/lwc-template-compiler/src/__tests__/fixtures/svg/invalid-svg/metadata.json
@@ -1,134 +1,182 @@
 {
     "warnings": [
+        {
+            "message": "Forbidden svg namespace tag found in template: '<altGlyph>' tag is not allowed within <svg>",
+            "start": 29,
+            "length": 10,
+            "level": "error"
+        },
+        {
+            "message": "Forbidden svg namespace tag found in template: '<altGlyphDef>' tag is not allowed within <svg>",
+            "start": 59,
+            "length": 13,
+            "level": "error"
+        },
+        {
+            "message": "Forbidden svg namespace tag found in template: '<altGlyphItem>' tag is not allowed within <svg>",
+            "start": 95,
+            "length": 14,
+            "level": "error"
+        },
         {
             "message": "Forbidden svg namespace tag found in template: '<animate>' tag is not allowed within <svg>",
-            "start": 160,
+            "start": 133,
             "length": 19,
             "level": "error"
         },
+        {
+            "message": "Forbidden svg namespace tag found in template: '<animateColor>' tag is not allowed within <svg>",
+            "start": 161,
+            "length": 14,
+            "level": "error"
+        },
+        {
+            "message": "Forbidden svg namespace tag found in template: '<animateMotion>' tag is not allowed within <svg>",
+            "start": 199,
+            "length": 15,
+            "level": "error"
+        },
+        {
+            "message": "Forbidden svg namespace tag found in template: '<animateTransform>' tag is not allowed within <svg>",
+            "start": 239,
+            "length": 18,
+            "level": "error"
+        },
         {
             "message": "Forbidden svg namespace tag found in template: '<cursor>' tag is not allowed within <svg>",
-            "start": 339,
+            "start": 285,
             "length": 17,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<discard>' tag is not allowed within <svg>",
-            "start": 365,
+            "start": 311,
             "length": 19,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<font>' tag is not allowed within <svg>",
-            "start": 393,
+            "start": 339,
             "length": 13,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<font-face>' tag is not allowed within <svg>",
-            "start": 415,
+            "start": 361,
             "length": 23,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<font-face-format>' tag is not allowed within <svg>",
-            "start": 447,
+            "start": 393,
             "length": 37,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<font-face-name>' tag is not allowed within <svg>",
-            "start": 493,
+            "start": 439,
             "length": 33,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<font-face-src>' tag is not allowed within <svg>",
-            "start": 535,
+            "start": 481,
             "length": 31,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<font-face-uri>' tag is not allowed within <svg>",
-            "start": 575,
+            "start": 521,
             "length": 31,
             "level": "error"
         },
+        {
+            "message": "Forbidden svg namespace tag found in template: '<foreignObject>' tag is not allowed within <svg>",
+            "start": 561,
+            "length": 15,
+            "level": "error"
+        },
         {
             "message": "Forbidden svg namespace tag found in template: '<glyph>' tag is not allowed within <svg>",
-            "start": 664,
+            "start": 601,
             "length": 15,
             "level": "error"
         },
+        {
+            "message": "Forbidden svg namespace tag found in template: '<glyphRef>' tag is not allowed within <svg>",
+            "start": 625,
+            "length": 10,
+            "level": "error"
+        },
         {
             "message": "Forbidden svg namespace tag found in template: '<hatch>' tag is not allowed within <svg>",
-            "start": 727,
+            "start": 655,
             "length": 15,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<hatchpath>' tag is not allowed within <svg>",
-            "start": 751,
+            "start": 679,
             "length": 23,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<hkern>' tag is not allowed within <svg>",
-            "start": 783,
+            "start": 711,
             "length": 15,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<metadata>' tag is not allowed within <svg>",
-            "start": 807,
+            "start": 735,
             "length": 21,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<missing-glyph>' tag is not allowed within <svg>",
-            "start": 837,
+            "start": 765,
             "length": 31,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<mpath>' tag is not allowed within <svg>",
-            "start": 877,
+            "start": 805,
             "length": 15,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<script>' tag is not allowed within <svg>",
-            "start": 901,
+            "start": 829,
             "length": 17,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<set>' tag is not allowed within <svg>",
-            "start": 927,
+            "start": 855,
             "length": 11,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<solidcolor>' tag is not allowed within <svg>",
-            "start": 947,
+            "start": 875,
             "length": 25,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<style>' tag is not allowed within <svg>",
-            "start": 981,
+            "start": 909,
             "length": 15,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<switch>' tag is not allowed within <svg>",
-            "start": 1005,
+            "start": 933,
             "length": 17,
             "level": "error"
         },
         {
             "message": "Forbidden svg namespace tag found in template: '<tref>' tag is not allowed within <svg>",
-            "start": 1031,
+            "start": 959,
             "length": 13,
             "level": "error"
         }

diff --git a/packages/lwc-template-compiler/src/__tests__/fixtures/svg/valid-svg/actual.html b/packages/lwc-template-compiler/src/__tests__/fixtures/svg/valid-svg/actual.html
@@ -2,7 +2,7 @@
     <svg>
         <a></a>
         <circle></circle>
-        <!-- <clipPath></clipPath> -->
+        <clipPath></clipPath>
         <defs></defs>
         <desc></desc>
         <ellipse></ellipse>
@@ -19,7 +19,7 @@
         <stop></stop>
         <symbol></symbol>
         <text></text>
-        <!-- <textPath></textPath> -->
+        <textPath></textPath>
         <title></title>
         <tspan></tspan>
         <use></use>