astro-eslint-parser 0.0.2 → 0.0.5

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 the AST in 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/astro/index.d.ts

@@ -8,9 +8,9 @@ export declare function isTag(node: Node): node is Node & TagLikeNode;
  */
 export declare function isParent(node: Node): node is ParentNode;
 /** walk element nodes */
-export declare function walkElements(parent: ParentNode, cb: (n: Node, parent: ParentNode) => void): void;
+export declare function walkElements(parent: ParentNode, code: string, cb: (n: Node, parent: ParentNode) => void): void;
 /** walk nodes */
-export declare function walk(parent: ParentNode, enter: (n: Node | AttributeNode, parent: ParentNode) => void, leave?: (n: Node | AttributeNode, parent: ParentNode) => void): void;
+export declare function walk(parent: ParentNode, code: string, enter: (n: Node | AttributeNode, parent: ParentNode) => void, leave?: (n: Node | AttributeNode, parent: ParentNode) => void): void;
 /**
  * Get end offset of start tag
  */

package/lib/astro/index.js

@@ -19,27 +19,19 @@ function isParent(node) {
 }
 exports.isParent = isParent;
 /** walk element nodes */
-function walkElements(parent, cb) {
-    let children = parent.children;
-    if (parent.type === "root" && children.every((n) => n.position)) {
-        // The order of comments and frontmatter may be changed.
-        children = [...children].sort((a, b) => a.position.start.offset - b.position.start.offset);
-    }
+function walkElements(parent, code, cb) {
+    const children = getSortedChildren(parent, code);
     for (const node of children) {
         cb(node, parent);
         if (isParent(node)) {
-            walkElements(node, cb);
+            walkElements(node, code, cb);
         }
     }
 }
 exports.walkElements = walkElements;
 /** walk nodes */
-function walk(parent, enter, leave) {
-    let children = parent.children;
-    if (parent.type === "root" && children.every((n) => n.position)) {
-        // The order of comments and frontmatter may be changed.
-        children = [...children].sort((a, b) => a.position.start.offset - b.position.start.offset);
-    }
+function walk(parent, code, enter, leave) {
+    const children = getSortedChildren(parent, code);
     for (const node of children) {
         enter(node, parent);
         if (isTag(node)) {
@@ -49,7 +41,7 @@ function walk(parent, enter, leave) {
             }
         }
         if (isParent(node)) {
-            walk(node, enter, leave);
+            walk(node, code, enter, leave);
         }
         leave === null || leave === void 0 ? void 0 : leave(node, parent);
     }
@@ -186,3 +178,41 @@ function skipSpaces(string, position) {
     return position;
 }
 exports.skipSpaces = skipSpaces;
+/**
+ * Get children
+ */
+function getSortedChildren(parent, code) {
+    var _a;
+    if (parent.type === "root" && ((_a = parent.children[0]) === null || _a === void 0 ? void 0 : _a.type) === "frontmatter") {
+        // The order of comments and frontmatter may be changed.
+        const children = [...parent.children];
+        if (children.every((n) => n.position)) {
+            return children.sort((a, b) => a.position.start.offset - b.position.start.offset);
+        }
+        let start = skipSpaces(code, 0);
+        if (code.startsWith("<!", start)) {
+            const frontmatter = children.shift();
+            const before = [];
+            let first;
+            while ((first = children.shift())) {
+                start = skipSpaces(code, start);
+                if (first.type === "comment" &&
+                    code.startsWith("<!--", start)) {
+                    start = code.indexOf("-->", start + 4) + 3;
+                    before.push(first);
+                }
+                else if (first.type === "doctype" &&
+                    code.startsWith("<!", start)) {
+                    start = code.indexOf(">", start + 2) + 1;
+                    before.push(first);
+                }
+                else {
+                    children.unshift(first);
+                    break;
+                }
+            }
+            return [...before, frontmatter, ...children];
+        }
+    }
+    return parent.children;
+}

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,7 +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, (node) => {
+    (0, astro_1.walk)(node, code, (node) => {
         if (node.type === "frontmatter") {
             start = node.position.start.offset = tokenIndex(code, "---", start);
             start = node.position.end.offset =
@@ -81,6 +81,9 @@ function fixLocations(node, code) {
             if (!node.position) {
                 node.position = { start: {}, end: {} };
             }
+            if (!node.position.end) {
+                node.position.end = {};
+            }
             start = node.position.start.offset = tokenIndex(code, "<!", start);
             start += 2;
             start = node.position.end.offset =

package/lib/parser/process-template.js

@@ -16,7 +16,7 @@ function processTemplate(ctx, resultTemplate) {
         fragmentOpened = true;
     }
     // eslint-disable-next-line complexity -- X(
-    (0, astro_1.walkElements)(resultTemplate.ast, (node, parent) => {
+    (0, astro_1.walkElements)(resultTemplate.ast, ctx.code, (node, parent) => {
         if (node.type === "frontmatter") {
             const start = node.position.start.offset;
             script.appendOriginal(start);
@@ -147,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;

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.2",
+    "version": "0.0.5",
     "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",