Merge pull request #137 from krispy1298/master

allow to pass an array of <script>-like tags to parse

Author: BenoitZugmeyer

README.md

@@ -6,21 +6,25 @@
     <p>A <a href="http://eslint.org">ESLint</a> plugin to lint and fix inline scripts contained in HTML files.</p>
 </div>
 
-* [Usage](#usage)
-* [Multiple scripts tags in a HTML file](#multiple-scripts-tags-in-a-html-file)
-* [XML Support](#xml-support)
-* [Settings](#settings)
-  * [`html/html-extensions`](#htmlhtml-extensions)
-  * [`html/xml-extensions`](#htmlxml-extensions)
-  * [`html/indent`](#htmlindent)
-  * [`html/report-bad-indent`](#htmlreport-bad-indent)
-  * [`html/javascript-mime-types`](#htmljavascript-mime-types)
-* [Troubleshooting](#troubleshooting)
-  * [No file linted when running `eslint` on a directory](#no-file-linted-when-running-eslint-on-a-directory)
-  * [Linting templates (or PHP)](#linting-templates-or-php)
-  * [Linting Vue files](#linting-vue-files)
-* [Migration from older versions](#migration-from-older-versions)
-* [Credits](#credits)
+- [Usage](#usage)
+- [Multiple scripts tags in a HTML file](#multiple-scripts-tags-in-a-html-file)
+  - [History](#history)
+- [XML support](#xml-support)
+- [Settings](#settings)
+  - [`html/html-extensions`](#htmlhtml-extensions)
+  - [`html/xml-extensions`](#htmlxml-extensions)
+  - [`html/indent`](#htmlindent)
+  - [`html/report-bad-indent`](#htmlreport-bad-indent)
+  - [`html/javascript-tag-names`](#htmljavascript-tag-names)
+  - [`html/javascript-mime-types`](#htmljavascript-mime-types)
+- [Troubleshooting](#troubleshooting)
+  - [No file linted when running `eslint` on a directory](#no-file-linted-when-running-eslint-on-a-directory)
+  - [Linting templates (or PHP)](#linting-templates-or-php)
+  - [Linting VUE files](#linting-vue-files)
+- [Migration from older versions](#migration-from-older-versions)
+  - [To v4](#to-v4)
+  - [To v3](#to-v3)
+- [Credits](#credits)
 
 ## Usage
 
@@ -158,6 +162,22 @@ display errors. Example:
 }
 ```
 
+### `html/javascript-tag-names`
+
+By default, the code between `<script>` tags is considered as JavaScript. You can customize which
+tags should be considered JavaScript by providing one or multiple tag names.
+
+Example:
+
+```javascript
+{
+    "plugins": [ "html" ],
+    "settings": {
+        "html/javascript-tag-names": ["script", "customscript"],
+    }
+}
+```
+
 ### `html/javascript-mime-types`
 
 By default, the code between `<script>` tags is considered as JavaScript code only if there is no

src/__tests__/__snapshots__/extract.js.snap

@@ -46,6 +46,15 @@ Array [
 ]
 `;
 
+exports[`extract multiple tags types 1`] = `
+Array [
+  "var foo = 1;
+",
+  "var bar = 1;
+",
+]
+`;
+
 exports[`extract script containing 'lower than' characters correctly (#1) 1`] = `
 Array [
   "if (a < b) { doit(); }

src/__tests__/extract.js

@@ -25,6 +25,7 @@ function test(params) {
     dedent(params.input),
     params.indent,
     params.xmlMode,
+    params.javaScriptTagNames || ["script"],
     params.isJavaScriptMIMEType
   )
   expect(infos.code.map((code) => code.toString())).toMatchSnapshot()
@@ -317,3 +318,19 @@ it("skips script with src attributes", () => {
     input: '<script src="foo"></script>',
   })
 })
+
+it("extract multiple tags types", () => {
+  test({
+    input: `
+      some html
+      <script>
+        var foo = 1;
+      </script>
+      other
+      <customscript>
+        var bar = 1;
+      </customscript>
+    `,
+    javaScriptTagNames: ["script", "customscript"],
+  })
+})

src/extract.js

@@ -8,6 +8,7 @@ function iterateScripts(code, options, onChunk) {
 
   const xmlMode = options.xmlMode
   const isJavaScriptMIMEType = options.isJavaScriptMIMEType || (() => true)
+  const javaScriptTagNames = options.javaScriptTagNames || ["script"]
   let index = 0
   let inScript = false
   let cdata = []
@@ -23,7 +24,7 @@ function iterateScripts(code, options, onChunk) {
     {
       onopentag(name, attrs) {
         // Test if current tag is a valid <script> tag.
-        if (name !== "script") {
+        if (!javaScriptTagNames.includes(name)) {
           return
         }
 
@@ -53,7 +54,7 @@ function iterateScripts(code, options, onChunk) {
       },
 
       onclosetag(name) {
-        if (name !== "script" || !inScript) {
+        if (!javaScriptTagNames.includes(name) || !inScript) {
           return
         }
 
@@ -179,47 +180,57 @@ function* dedent(indent, slice) {
   }
 }
 
-function extract(code, indentDescriptor, xmlMode, isJavaScriptMIMEType) {
+function extract(
+  code,
+  indentDescriptor,
+  xmlMode,
+  javaScriptTagNames,
+  isJavaScriptMIMEType
+) {
   const badIndentationLines = []
   const codeParts = []
   let lineNumber = 1
   let previousHTML = ""
 
-  iterateScripts(code, { xmlMode, isJavaScriptMIMEType }, (chunk) => {
-    const slice = code.slice(chunk.start, chunk.end)
-    if (chunk.type === "html") {
-      const match = slice.match(/\r\n|\n|\r/g)
-      if (match) lineNumber += match.length
-      previousHTML = slice
-    } else if (chunk.type === "script") {
-      const transformedCode = new TransformableString(code)
-      let indentSlice = slice
-      for (const cdata of chunk.cdata) {
-        transformedCode.replace(cdata.start, cdata.end, "")
-        if (cdata.end === chunk.end) {
-          indentSlice = code.slice(chunk.start, cdata.start)
+  iterateScripts(
+    code,
+    { xmlMode, javaScriptTagNames, isJavaScriptMIMEType },
+    (chunk) => {
+      const slice = code.slice(chunk.start, chunk.end)
+      if (chunk.type === "html") {
+        const match = slice.match(/\r\n|\n|\r/g)
+        if (match) lineNumber += match.length
+        previousHTML = slice
+      } else if (chunk.type === "script") {
+        const transformedCode = new TransformableString(code)
+        let indentSlice = slice
+        for (const cdata of chunk.cdata) {
+          transformedCode.replace(cdata.start, cdata.end, "")
+          if (cdata.end === chunk.end) {
+            indentSlice = code.slice(chunk.start, cdata.start)
+          }
         }
-      }
-      transformedCode.replace(0, chunk.start, "")
-      transformedCode.replace(chunk.end, code.length, "")
-      for (const action of dedent(
-        computeIndent(indentDescriptor, previousHTML, indentSlice),
-        indentSlice
-      )) {
-        lineNumber += 1
-        if (action.type === "dedent") {
-          transformedCode.replace(
-            chunk.start + action.from,
-            chunk.start + action.to,
-            ""
-          )
-        } else if (action.type === "bad-indent") {
-          badIndentationLines.push(lineNumber)
+        transformedCode.replace(0, chunk.start, "")
+        transformedCode.replace(chunk.end, code.length, "")
+        for (const action of dedent(
+          computeIndent(indentDescriptor, previousHTML, indentSlice),
+          indentSlice
+        )) {
+          lineNumber += 1
+          if (action.type === "dedent") {
+            transformedCode.replace(
+              chunk.start + action.from,
+              chunk.start + action.to,
+              ""
+            )
+          } else if (action.type === "bad-indent") {
+            badIndentationLines.push(lineNumber)
+          }
         }
+        codeParts.push(transformedCode)
       }
-      codeParts.push(transformedCode)
     }
-  })
+  )
 
   return {
     code: codeParts,

src/index.js

@@ -146,6 +146,7 @@ function patch(Linter) {
       textOrSourceCode,
       pluginSettings.indent,
       mode === "xml",
+      pluginSettings.javaScriptTagNames,
       pluginSettings.isJavaScriptMIMEType
     )
 

src/settings.js

@@ -50,6 +50,10 @@ function getSettings(settings) {
     getSetting(settings, "xml-extensions") ||
     filterOut(defaultXMLExtensions, getSetting(settings, "html-extensions"))
 
+  const javaScriptTagNames = getSetting(settings, "javascript-tag-names") || [
+    "script",
+  ]
+
   let reportBadIndent
   switch (getSetting(settings, "report-bad-indent")) {
     case undefined:
@@ -102,6 +106,7 @@ function getSettings(settings) {
   return {
     htmlExtensions,
     xmlExtensions,
+    javaScriptTagNames,
     indent,
     reportBadIndent,
     isJavaScriptMIMEType,