Breaking change the AST. (#21)

* Breaking change the AST.

- Make some ASTs similar to JSX ASTs.
  - SvelteSpreadAttribute
- Accept MemberExpression as the name of the component element.

* fix

Author: ota-meshi

src/ast.ts

@@ -141,7 +141,7 @@ export interface SvelteHTMLElement extends BaseSvelteElement {
 export interface SvelteComponentElement extends BaseSvelteElement {
     type: "SvelteElement"
     kind: "component"
-    name: ESTree.Identifier
+    name: ESTree.Identifier | SvelteMemberExpressionName
     attributes: (
         | SvelteAttribute
         | SvelteShorthandAttribute
@@ -194,6 +194,15 @@ export interface SvelteName extends BaseNode {
         | SvelteScriptElement
         | SvelteStyleElement
         | SvelteAttribute
+        | SvelteMemberExpressionName
+}
+
+/** Nodes that may be used in component names. The component names separated by dots. */
+export interface SvelteMemberExpressionName extends BaseNode {
+    type: "SvelteMemberExpressionName"
+    object: SvelteMemberExpressionName | ESTree.Identifier
+    property: SvelteName
+    parent: SvelteComponentElement
 }
 
 type Child =
@@ -237,7 +246,7 @@ interface BaseSvelteMustacheTag extends BaseNode {
         | SvelteKeyBlock
         | SvelteAttribute
 }
-/** Node of mustache tag. e.g. `{...}`, `{@html ...}` */
+/** Node of mustache tag. e.g. `{...}`, `{@html ...}`. Like JSXExpressionContainer */
 export interface SvelteMustacheTag extends BaseSvelteMustacheTag {
     type: "SvelteMustacheTag"
     kind: "text" | "raw"
@@ -376,10 +385,10 @@ export interface SvelteShorthandAttribute extends BaseNode {
     value: ESTree.Identifier
     parent: SvelteElement | SvelteScriptElement | SvelteStyleElement
 }
-/** Node of spread attribute. e.g. `<Info {...pkg}/>` */
+/** Node of spread attribute. e.g. `<Info {...pkg}/>`. Like JSXSpreadAttribute */
 export interface SvelteSpreadAttribute extends BaseNode {
     type: "SvelteSpreadAttribute"
-    expression: ESTree.Expression
+    argument: ESTree.Expression
     parent: SvelteElement | SvelteScriptElement | SvelteStyleElement
 }
 

src/parser/converts/attr.ts

@@ -161,7 +161,7 @@ function convertSpreadAttribute(
 ): SvelteSpreadAttribute {
     const attribute: SvelteSpreadAttribute = {
         type: "SvelteSpreadAttribute",
-        expression: null as any,
+        argument: null as any,
         parent,
         ...ctx.getConvertLocation(node),
     }
@@ -174,7 +174,7 @@ function convertSpreadAttribute(
 
     const es = convertESNode(node.expression, attribute, ctx)!
     analyzeExpressionScope(es, ctx)
-    attribute.expression = es
+    attribute.argument = es
 
     return attribute
 }

src/parser/converts/element.ts

@@ -12,6 +12,7 @@ import type {
     SvelteHTMLElement,
     SvelteIfBlock,
     SvelteKeyBlock,
+    SvelteMemberExpressionName,
     SvelteMustacheTag,
     SvelteName,
     SvelteProgram,
@@ -188,6 +189,7 @@ function convertHTMLElement(
 
     extractElementTokens(element, ctx, {
         buildNameNode: (openTokenRange) => {
+            ctx.addToken("HTMLIdentifier", openTokenRange)
             const name: SvelteName = {
                 type: "SvelteName",
                 name: node.name,
@@ -263,6 +265,7 @@ function convertSpecialElement(
 
     extractElementTokens(element, ctx, {
         buildNameNode: (openTokenRange) => {
+            ctx.addToken("HTMLIdentifier", openTokenRange)
             const name: SvelteName = {
                 type: "SvelteName",
                 name: node.name,
@@ -296,17 +299,51 @@ function convertComponentElement(
 
     extractElementTokens(element, ctx, {
         buildNameNode: (openTokenRange) => {
-            const name: ESTree.Identifier = {
+            const chains = node.name.split(".")
+            const id = chains.shift()!
+            const idRange = {
+                start: openTokenRange.start,
+                end: openTokenRange.start + id.length,
+            }
+            ctx.addToken("Identifier", idRange)
+            const identifier: ESTree.Identifier = {
                 type: "Identifier",
-                name: node.name,
+                name: id,
                 // @ts-expect-error -- ignore
                 parent: element,
-                ...ctx.getConvertLocation(openTokenRange),
+                ...ctx.getConvertLocation(idRange),
             }
-            return name
+            let object: SvelteComponentElement["name"] = identifier
+
+            let start = idRange.end + 1
+            for (const name of chains) {
+                const range = { start, end: start + name.length }
+                ctx.addToken("HTMLIdentifier", range)
+                const men: SvelteMemberExpressionName = {
+                    type: "SvelteMemberExpressionName",
+                    object,
+                    property: {
+                        type: "SvelteName",
+                        name,
+                        parent: null as any,
+                        ...ctx.getConvertLocation(range),
+                    },
+                    parent: element,
+                    ...ctx.getConvertLocation({
+                        start: openTokenRange.start,
+                        end: range.end,
+                    }),
+                }
+                men.property.parent = men
+                ;(object as any).parent = men
+                object = men
+                start = range.end + 1
+            }
+
+            analyzeExpressionScope(identifier, ctx)
+            return object
         },
     })
-    analyzeExpressionScope(element.name, ctx)
     return element
 }
 
@@ -388,7 +425,7 @@ export function extractElementTokens<
         start: element.range[0] + 1,
         end: startTagNameEnd,
     }
-    const openToken = ctx.addToken("HTMLIdentifier", openTokenRange)
+
     element.name = options.buildNameNode(openTokenRange)
 
     if (ctx.code[element.range[1] - 1] !== ">") {
@@ -402,7 +439,7 @@ export function extractElementTokens<
 
     const attrEnd = element.attributes.length
         ? element.attributes[element.attributes.length - 1].range[1]
-        : openToken.range[1]
+        : openTokenRange.end
 
     const endTagOpen = ctx.code.lastIndexOf("<", element.range[1] - 1)
     if (endTagOpen <= attrEnd) {

src/parser/converts/root.ts

@@ -46,6 +46,7 @@ export function convertSvelteRoot(
         extractAttributes(script, ctx)
         extractElementTokens(script, ctx, {
             buildNameNode: (openTokenRange) => {
+                ctx.addToken("HTMLIdentifier", openTokenRange)
                 const name: SvelteName = {
                     type: "SvelteName",
                     name: "script",
@@ -70,6 +71,7 @@ export function convertSvelteRoot(
         extractAttributes(script, ctx)
         extractElementTokens(script, ctx, {
             buildNameNode: (openTokenRange) => {
+                ctx.addToken("HTMLIdentifier", openTokenRange)
                 const name: SvelteName = {
                     type: "SvelteName",
                     name: "script",
@@ -94,6 +96,7 @@ export function convertSvelteRoot(
         extractAttributes(style, ctx)
         extractElementTokens(style, ctx, {
             buildNameNode: (openTokenRange) => {
+                ctx.addToken("HTMLIdentifier", openTokenRange)
                 const name: SvelteName = {
                     type: "SvelteName",
                     name: "script",

src/visitor-keys.ts

@@ -34,7 +34,7 @@ const svelteKeys: SvelteKeysType = {
     SvelteKeyBlock: ["expression", "children"],
     SvelteAttribute: ["key", "value"],
     SvelteShorthandAttribute: ["key", "value"],
-    SvelteSpreadAttribute: ["expression"],
+    SvelteSpreadAttribute: ["argument"],
     SvelteDirective: ["expression"],
     SvelteReactiveStatement: ["label", "body"],
     SvelteText: [],

tests/fixtures/parser/ast/components01-output.json

@@ -443,7 +443,7 @@
       }
     },
     {
-      "type": "HTMLIdentifier",
+      "type": "Identifier",
       "value": "MyComponent",
       "range": [
         70,

tests/fixtures/parser/ast/components02-output.json

@@ -518,7 +518,7 @@
       }
     },
     {
-      "type": "HTMLIdentifier",
+      "type": "Identifier",
       "value": "MyComponent",
       "range": [
         70,

tests/fixtures/parser/ast/components03-input.svelte

@@ -0,0 +1,10 @@
+<script>
+	import * as MyComponents from './MyComponents';
+</script>
+
+<MyComponents.MyComponent>
+	contents<div></div>
+</MyComponents.MyComponent>
+<OtherComponents.OtherComponent>
+	contents<div></div>
+</OtherComponents.OtherComponent>

tests/fixtures/parser/ast/components03-no-undef-result.json

@@ -0,0 +1,8 @@
+[
+  {
+    "ruleId": "no-undef",
+    "code": "OtherComponents",
+    "line": 8,
+    "column": 2
+  }
+]