astro-eslint-parser 0.0.1 → 0.0.4

package/README.md

@@ -11,9 +11,14 @@ You can check it on [Online DEMO](https://ota-meshi.github.io/astro-eslint-parse
 [![NPM downloads](https://img.shields.io/npm/dy/astro-eslint-parser.svg)](http://www.npmtrends.com/astro-eslint-parser)
 [![NPM downloads](https://img.shields.io/npm/dt/astro-eslint-parser.svg)](http://www.npmtrends.com/astro-eslint-parser)
 [![Build Status](https://github.com/ota-meshi/astro-eslint-parser/workflows/CI/badge.svg?branch=main)](https://github.com/ota-meshi/astro-eslint-parser/actions?query=workflow%3ACI)
+[![Coverage Status](https://coveralls.io/repos/github/ota-meshi/astro-eslint-parser/badge.svg?branch=main)](https://coveralls.io/github/ota-meshi/astro-eslint-parser?branch=main)
 
 This parser is in the ***experimental stages*** of development.
 
+Currently this parser relies heavily on the internal API of [@astrojs/compiler]. It may stop working in a future update of [@astrojs/compiler].
+
+[@astrojs/compiler]: https://github.com/withastro/compiler
+
 <!--
 ### ESLint Plugins Using astro-eslint-parser
 
@@ -74,7 +79,7 @@ For example:
 
 ### parserOptions.parser
 
-You can use `parserOptions.parser` property to specify a custom parser to parse `<script>` tags.
+You can use `parserOptions.parser` property to specify a custom parser to parse scripts.
 Other properties than parser would be given to the specified parser.
 For example:
 
@@ -87,7 +92,7 @@ For example:
 }
 ```
 
-For example, if you are using the `"@typescript-eslint/parser"`, and if you want to use TypeScript in `<script>` of `.astro`, you need to add more `parserOptions` configuration.
+For example, if you are using the `"@typescript-eslint/parser"`, and if you want to use TypeScript in `.astro`, you need to add more `parserOptions` configuration.
 
 ```js
 module.exports = {
@@ -96,13 +101,13 @@ module.exports = {
   parserOptions: {
     // ...
     project: "path/to/your/tsconfig.json",
-    extraFileExtensions: [".astro"], // This is a required setting in `@typescript-eslint/parser` v4.24.0.
+    extraFileExtensions: [".astro"], // This is a required setting in `@typescript-eslint/parser` v5.
   },
   overrides: [
     {
       files: ["*.astro"],
       parser: "astro-eslint-parser",
-      // Parse the `<script>` in `.astro` as TypeScript by adding the following configuration.
+      // Parse the script in `.astro` as TypeScript by adding the following configuration.
       parserOptions: {
         parser: "@typescript-eslint/parser",
       },
@@ -133,9 +138,20 @@ Example **.vscode/settings.json**:
 }
 ```
 
+## Compatibility With Existing ESLint Rules
+
+Most of the rules in the ESLint core work for the script part, but some rules are incompatible.  
+This parser will generate a JSX compatible AST for most of the HTML part of the Astro component. Therefore, some rules of [eslint-plugin-react] may work.
+For example, the [react/jsx-no-target-blank] rule works fine.  
+
+[semi]: https://eslint.org/docs/rules/semi
+[eslint-plugin-react]: https://github.com/jsx-eslint/eslint-plugin-react/
+[react/jsx-no-target-blank]: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md
+
 ## Usage for Custom Rules / Plugins
 
 - TBA
+- You can check it on the [Online DEMO](https://ota-meshi.github.io/astro-eslint-parser/). However, AST is subject to major changes in the future.
 
 <!-- - [AST.md](./docs/AST.md) is AST specification. You can check it on the [Online DEMO](https://ota-meshi.github.io/astro-eslint-parser/). -->
 <!-- - I have already [implemented some rules] in the [`@ota-meshi/eslint-plugin-astro`]. The source code for these rules will be helpful to you. -->

package/lib/ast.d.ts

@@ -1,5 +1,5 @@
 import type { TSESTree } from "@typescript-eslint/types";
-export declare type AstroNode = AstroProgram | AstroRootFragment | AstroHTMLComment | AstroDoctype | AstroShorthandAttribute | AstroTemplateLiteralAttribute;
+export declare type AstroNode = AstroProgram | AstroRootFragment | AstroHTMLComment | AstroDoctype | AstroShorthandAttribute | AstroTemplateLiteralAttribute | AstroRawText;
 /** Node of Astro program root */
 export interface AstroProgram extends Omit<TSESTree.Program, "type" | "body"> {
     type: "Program";
@@ -40,3 +40,8 @@ export interface AstroTemplateLiteralAttribute extends Omit<TSESTree.JSXAttribut
     };
     parent: TSESTree.JSXElement | TSESTree.JSXFragment;
 }
+/** Node of Astro raw text */
+export interface AstroRawText extends Omit<TSESTree.JSXText, "type" | "parent"> {
+    type: "AstroRawText";
+    parent: AstroRootFragment | TSESTree.JSXElement | TSESTree.JSXFragment;
+}

package/lib/context/script.js

@@ -46,6 +46,11 @@ class ScriptContext {
         if (last.expression.type !== "JSXFragment") {
             throw new errors_1.ParseError("Unknown state error: Expected JSXFragment", last.expression.range[0], this.ctx);
         }
+        // Process for Astro
+        const rootFragment = (result.ast.body[result.ast.body.length - 1] = last.expression);
+        delete rootFragment.closingFragment;
+        delete rootFragment.openingFragment;
+        rootFragment.type = "AstroRootFragment";
         // remap locations
         const traversed = new Set();
         (0, traverse_1.traverseNodes)(result.ast, {
@@ -72,11 +77,6 @@ class ScriptContext {
         for (const token of result.ast.comments || []) {
             this.remapLocation(token);
         }
-        // Process for Astro
-        delete last.expression.closingFragment;
-        delete last.expression.openingFragment;
-        last.expression.type =
-            "AstroRootFragment";
         let restoreNodeProcesses = this.restoreNodeProcesses;
         for (const node of traversed) {
             restoreNodeProcesses = restoreNodeProcesses.filter((proc) => !proc(node, result));

package/lib/parser/astro-parser/parse.js

@@ -41,9 +41,7 @@ exports.parse = parse;
 function fixLocations(node, code) {
     // FIXME: Adjust because the parser does not return the correct location.
     let start = 0;
-    (0, astro_1.walk)(node, 
-    // eslint-disable-next-line complexity -- ignore
-    (node) => {
+    (0, astro_1.walk)(node, (node) => {
         if (node.type === "frontmatter") {
             start = node.position.start.offset = tokenIndex(code, "---", start);
             start = node.position.end.offset =
@@ -58,11 +56,7 @@ function fixLocations(node, code) {
             }
             start = node.position.start.offset = tokenIndex(code, "<", start);
             start += 1;
-            if (node.type === "element" ||
-                node.type === "component" ||
-                node.type === "custom-element") {
-                start += node.name.length;
-            }
+            start += node.name.length;
             if (!node.attributes.length) {
                 start = (0, astro_1.getStartTagEndOffset)(node, code);
             }
@@ -106,20 +100,18 @@ function fixLocations(node, code) {
         if (node.type === "expression") {
             start = tokenIndex(code, "}", start) + 1;
         }
-        else if (node.type === "fragment") {
-            start = tokenIndex(code, "</>", start) + 3;
-        }
-        else if (node.type === "element" ||
+        else if (node.type === "fragment" ||
+            node.type === "element" ||
             node.type === "component" ||
             node.type === "custom-element") {
             if (!node.position.end) {
                 return;
             }
-            start =
-                tokenIndex(code, `</${node.name}`, start) +
-                    2 +
-                    node.name.length;
-            start = tokenIndex(code, ">", start) + 1;
+            const closeTagStart = tokenIndexSafe(code, `</${node.name}`, start);
+            if (closeTagStart != null) {
+                start = closeTagStart + 2 + node.name.length;
+                start = tokenIndex(code, ">", start) + 1;
+            }
         }
         else {
             return;
@@ -159,9 +151,20 @@ function fixLocationForAttr(node, code, start) {
  * Get token index
  */
 function tokenIndex(string, token, position) {
+    const index = tokenIndexSafe(string, token, position);
+    if (index == null) {
+        const start = token.trim() === token ? (0, astro_1.skipSpaces)(string, position) : position;
+        throw new Error(`Unknown token at ${start}, expected: ${JSON.stringify(token)}, actual: ${JSON.stringify(string.slice(start, start + 10))}`);
+    }
+    return index;
+}
+/**
+ * Get token index
+ */
+function tokenIndexSafe(string, token, position) {
     const index = token.trim() === token ? (0, astro_1.skipSpaces)(string, position) : position;
     if (string.startsWith(token, index)) {
         return index;
     }
-    throw new Error(`Unknown token at ${index}, expected: ${JSON.stringify(token)}, actual: ${JSON.stringify(string.slice(index, index + 10))}`);
+    return null;
 }

package/lib/parser/process-template.js

@@ -15,6 +15,7 @@ function processTemplate(ctx, resultTemplate) {
         script.appendScript("<>");
         fragmentOpened = true;
     }
+    // eslint-disable-next-line complexity -- X(
     (0, astro_1.walkElements)(resultTemplate.ast, (node, parent) => {
         if (node.type === "frontmatter") {
             const start = node.position.start.offset;
@@ -45,6 +46,56 @@ function processTemplate(ctx, resultTemplate) {
         }
         else if ((0, astro_1.isTag)(node)) {
             for (const attr of node.attributes) {
+                if ((node.type === "component" || node.type === "fragment") &&
+                    (attr.kind === "quoted" ||
+                        attr.kind === "empty" ||
+                        attr.kind === "expression" ||
+                        attr.kind === "template-literal")) {
+                    const colonIndex = attr.name.indexOf(":");
+                    if (colonIndex >= 0) {
+                        const start = attr.position.start.offset;
+                        script.appendOriginal(start + colonIndex);
+                        script.skipOriginalOffset(1);
+                        script.appendScript(`_`);
+                        script.addToken(types_1.AST_TOKEN_TYPES.JSXIdentifier, [
+                            start,
+                            start + colonIndex,
+                        ]);
+                        script.addToken(types_1.AST_TOKEN_TYPES.Punctuator, [
+                            start + colonIndex,
+                            start + colonIndex + 1,
+                        ]);
+                        script.addToken(types_1.AST_TOKEN_TYPES.JSXIdentifier, [
+                            start + colonIndex + 1,
+                            start + attr.name.length,
+                        ]);
+                        script.addRestoreNodeProcess((scriptNode, result) => {
+                            if (scriptNode.type ===
+                                types_1.AST_NODE_TYPES.JSXAttribute &&
+                                scriptNode.range[0] === start) {
+                                const baseNameNode = scriptNode.name;
+                                const nsn = Object.assign(Object.assign({}, baseNameNode), { type: types_1.AST_NODE_TYPES.JSXNamespacedName, namespace: Object.assign({ type: types_1.AST_NODE_TYPES.JSXIdentifier, name: attr.name.slice(0, colonIndex) }, ctx.getLocations(baseNameNode.range[0], baseNameNode.range[0] + colonIndex)), name: Object.assign({ type: types_1.AST_NODE_TYPES.JSXIdentifier, name: attr.name.slice(colonIndex + 1) }, ctx.getLocations(baseNameNode.range[0] +
+                                        colonIndex +
+                                        1, baseNameNode.range[1])) });
+                                scriptNode.name = nsn;
+                                nsn.namespace.parent = nsn;
+                                nsn.name.parent = nsn;
+                                const tokens = result.ast.tokens || [];
+                                for (let index = 0; index < tokens.length; index++) {
+                                    const token = tokens[index];
+                                    if (token.range[0] ===
+                                        baseNameNode.range[0] &&
+                                        token.range[1] === baseNameNode.range[1]) {
+                                        tokens.splice(index, 1);
+                                        break;
+                                    }
+                                }
+                                return true;
+                            }
+                            return false;
+                        });
+                    }
+                }
                 if (attr.kind === "shorthand") {
                     const start = attr.position.start.offset;
                     script.appendOriginal(start);
@@ -96,8 +147,10 @@ function processTemplate(ctx, resultTemplate) {
                     script.addRestoreNodeProcess((scriptNode) => {
                         if (scriptNode.type === types_1.AST_NODE_TYPES.JSXElement &&
                             scriptNode.range[0] === styleNodeStart) {
-                            const textNode = Object.assign({ type: types_1.AST_NODE_TYPES.JSXText, value: text.value, raw: text.value, parent: scriptNode }, ctx.getLocations(start, start + text.value.length));
-                            scriptNode.children = [textNode];
+                            const textNode = Object.assign({ type: "AstroRawText", value: text.value, raw: text.value, parent: scriptNode }, ctx.getLocations(start, start + text.value.length));
+                            scriptNode.children = [
+                                textNode,
+                            ];
                             return true;
                         }
                         return false;
@@ -181,10 +234,9 @@ exports.processTemplate = processTemplate;
  * If the given tag is a void tag, get the self-closing tag.
  */
 function getVoidSelfClosingTag(node, parent, ctx) {
-    if (node.type === "fragment") {
-        return false;
-    }
-    if (node.children.length > 0) {
+    var _a;
+    const children = node.children.filter((c) => c.type !== "text" || c.value.trim());
+    if (children.length > 0) {
         return false;
     }
     const code = ctx.code;
@@ -192,8 +244,10 @@ function getVoidSelfClosingTag(node, parent, ctx) {
     const childIndex = parent.children.indexOf(node);
     if (childIndex === parent.children.length - 1) {
         // last
-        nextElementIndex = parent.position.end.offset;
-        nextElementIndex = code.lastIndexOf("</", nextElementIndex);
+        if ((_a = parent.position) === null || _a === void 0 ? void 0 : _a.end) {
+            nextElementIndex = parent.position.end.offset;
+            nextElementIndex = code.lastIndexOf("</", nextElementIndex);
+        }
     }
     else {
         const next = parent.children[childIndex + 1];

package/lib/visitor-keys.js

@@ -9,5 +9,6 @@ const astroKeys = {
     AstroDoctype: [],
     AstroShorthandAttribute: ["name", "value"],
     AstroTemplateLiteralAttribute: ["name", "value"],
+    AstroRawText: [],
 };
 exports.KEYS = (0, eslint_visitor_keys_1.unionWith)(astroKeys);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "astro-eslint-parser",
-    "version": "0.0.1",
+    "version": "0.0.4",
     "description": "Astro parser for ESLint",
     "main": "lib/index.js",
     "files": [
@@ -62,7 +62,7 @@
         "benchmark": "^2.1.4",
         "chai": "^4.3.4",
         "code-red": "^0.2.3",
-        "eslint": "^8.2.0",
+        "eslint": "^8.14.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-formatter-codeframe": "^7.32.1",
         "eslint-plugin-eslint-comments": "^3.2.0",
@@ -71,12 +71,13 @@
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-node-dependencies": "^0.8.0",
         "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-react": "^7.29.4",
         "eslint-plugin-regexp": "^1.5.0",
         "eslint-plugin-vue": "^8.0.3",
         "estree-walker": "^3.0.0",
         "locate-character": "^2.0.5",
         "magic-string": "^0.26.0",
-        "mocha": "^9.1.3",
+        "mocha": "^10.0.0",
         "mocha-chai-jest-snapshot": "^1.1.3",
         "nyc": "^15.1.0",
         "prettier": "^2.0.5",