fix: properly highlight svelte 5 <component.dot.notation /> (#2552)

#2525
sveltejs · Oct 31, 2024 · 8e7d7ef · 8e7d7ef
1 parent 39f3d04
commit 8e7d7ef
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 9 deletions.
diff --git a/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml b/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml
@@ -224,7 +224,7 @@ repository:
          { match: if|else\s+if|else, name: keyword.control.conditional.svelte },
          { match: each|key,          name: keyword.control.svelte             },
          { match: await|then|catch,  name: keyword.control.flow.svelte        },
-         { match: snippet,           name: keyword.control.svelte        },
+         { match: snippet,           name: keyword.control.svelte             },
          { match: html,              name: keyword.other.svelte               },
          { match: render,            name: keyword.other.svelte               },
          { match: debug,             name: keyword.other.debugger.svelte      },
@@ -509,16 +509,22 @@ repository:
   # Scopes the `name` part in `<name>`.
   tags-name:
     patterns:
-    # Svelte (`svelte:<type>`) elements.
-    - match: '(svelte)(:)([a-z][\w0-9:-]*)'
+    # Svelte built-in elements (e.g., svelte:self, svelte:component).
+    - match: '(svelte)(:)([a-z][\w:-]*)'
       captures:
         1: { name: keyword.control.svelte }
         2: { name: punctuation.definition.keyword.svelte }
         3: { name: entity.name.tag.svelte }
     # Slot.
     - { match: 'slot', name: keyword.control.svelte }
-    # Components.
-    - { match: '[A-Z][a-zA-Z0-9_]*', name: support.class.component.svelte }
+    # Components (either Namespaced.Component, namespaced.component or PascalCase).
+    - match: '([\w]+(?:\.[\w]+)+)|([A-Z][\w]+)'
+      captures:
+        1: { patterns: [
+           { match: '\w+', name: support.class.component.svelte },
+           { match: '\.', name: punctuation.definition.keyword.svelte },
+         ]}
+        2: { name: support.class.component.svelte }
     # Custom elements. (has a dash, but otherwise is a valid HTML element)
     - { match: '[a-z][\w0-9:]*-[\w0-9:-]*', name: meta.tag.custom.svelte entity.name.tag.svelte }
     # HTML elements.

diff --git a/packages/svelte-vscode/test/grammar/samples/namespaced-component/input.svelte b/packages/svelte-vscode/test/grammar/samples/namespaced-component/input.svelte
@@ -1 +1,6 @@
-<Hi.Input></Hi.Input>
+<Hi.Input></Hi.Input>
+<Hello.World.Input></Hello.World.Input>
+<Hello._World123.Input></Hello._World123.Input>
+<hi.input></hi.input>
+<hello.world.input></hello.world.input>
+<hello._world123.input></hello._world123.input>
diff --git a/packages/svelte-vscode/test/grammar/samples/namespaced-component/input.svelte.snap b/packages/svelte-vscode/test/grammar/samples/namespaced-component/input.svelte.snap
@@ -1,11 +1,82 @@
 ><Hi.Input></Hi.Input>
 #^ source.svelte meta.scope.tag.Hi.Input.svelte meta.tag.start.svelte punctuation.definition.tag.begin.svelte
 # ^^ source.svelte meta.scope.tag.Hi.Input.svelte meta.tag.start.svelte support.class.component.svelte
-#   ^ source.svelte meta.scope.tag.Hi.Input.svelte meta.tag.start.svelte
+#   ^ source.svelte meta.scope.tag.Hi.Input.svelte meta.tag.start.svelte punctuation.definition.keyword.svelte
 #    ^^^^^ source.svelte meta.scope.tag.Hi.Input.svelte meta.tag.start.svelte support.class.component.svelte
 #         ^ source.svelte meta.scope.tag.Hi.Input.svelte meta.tag.start.svelte punctuation.definition.tag.end.svelte
 #          ^^ source.svelte meta.scope.tag.Hi.Input.svelte meta.tag.end.svelte punctuation.definition.tag.begin.svelte
 #            ^^ source.svelte meta.scope.tag.Hi.Input.svelte meta.tag.end.svelte support.class.component.svelte
-#              ^ source.svelte meta.scope.tag.Hi.Input.svelte meta.tag.end.svelte
+#              ^ source.svelte meta.scope.tag.Hi.Input.svelte meta.tag.end.svelte punctuation.definition.keyword.svelte
 #               ^^^^^ source.svelte meta.scope.tag.Hi.Input.svelte meta.tag.end.svelte support.class.component.svelte
-#                    ^ source.svelte meta.scope.tag.Hi.Input.svelte meta.tag.end.svelte punctuation.definition.tag.end.svelte
+#                    ^ source.svelte meta.scope.tag.Hi.Input.svelte meta.tag.end.svelte punctuation.definition.tag.end.svelte
+><Hello.World.Input></Hello.World.Input>
+#^ source.svelte meta.scope.tag.Hello.World.Input.svelte meta.tag.start.svelte punctuation.definition.tag.begin.svelte
+# ^^^^^ source.svelte meta.scope.tag.Hello.World.Input.svelte meta.tag.start.svelte support.class.component.svelte
+#      ^ source.svelte meta.scope.tag.Hello.World.Input.svelte meta.tag.start.svelte punctuation.definition.keyword.svelte
+#       ^^^^^ source.svelte meta.scope.tag.Hello.World.Input.svelte meta.tag.start.svelte support.class.component.svelte
+#            ^ source.svelte meta.scope.tag.Hello.World.Input.svelte meta.tag.start.svelte punctuation.definition.keyword.svelte
+#             ^^^^^ source.svelte meta.scope.tag.Hello.World.Input.svelte meta.tag.start.svelte support.class.component.svelte
+#                  ^ source.svelte meta.scope.tag.Hello.World.Input.svelte meta.tag.start.svelte punctuation.definition.tag.end.svelte
+#                   ^^ source.svelte meta.scope.tag.Hello.World.Input.svelte meta.tag.end.svelte punctuation.definition.tag.begin.svelte
+#                     ^^^^^ source.svelte meta.scope.tag.Hello.World.Input.svelte meta.tag.end.svelte support.class.component.svelte
+#                          ^ source.svelte meta.scope.tag.Hello.World.Input.svelte meta.tag.end.svelte punctuation.definition.keyword.svelte
+#                           ^^^^^ source.svelte meta.scope.tag.Hello.World.Input.svelte meta.tag.end.svelte support.class.component.svelte
+#                                ^ source.svelte meta.scope.tag.Hello.World.Input.svelte meta.tag.end.svelte punctuation.definition.keyword.svelte
+#                                 ^^^^^ source.svelte meta.scope.tag.Hello.World.Input.svelte meta.tag.end.svelte support.class.component.svelte
+#                                      ^ source.svelte meta.scope.tag.Hello.World.Input.svelte meta.tag.end.svelte punctuation.definition.tag.end.svelte
+><Hello._World123.Input></Hello._World123.Input>
+#^ source.svelte meta.scope.tag.Hello._World123.Input.svelte meta.tag.start.svelte punctuation.definition.tag.begin.svelte
+# ^^^^^ source.svelte meta.scope.tag.Hello._World123.Input.svelte meta.tag.start.svelte support.class.component.svelte
+#      ^ source.svelte meta.scope.tag.Hello._World123.Input.svelte meta.tag.start.svelte punctuation.definition.keyword.svelte
+#       ^^^^^^^^^ source.svelte meta.scope.tag.Hello._World123.Input.svelte meta.tag.start.svelte support.class.component.svelte
+#                ^ source.svelte meta.scope.tag.Hello._World123.Input.svelte meta.tag.start.svelte punctuation.definition.keyword.svelte
+#                 ^^^^^ source.svelte meta.scope.tag.Hello._World123.Input.svelte meta.tag.start.svelte support.class.component.svelte
+#                      ^ source.svelte meta.scope.tag.Hello._World123.Input.svelte meta.tag.start.svelte punctuation.definition.tag.end.svelte
+#                       ^^ source.svelte meta.scope.tag.Hello._World123.Input.svelte meta.tag.end.svelte punctuation.definition.tag.begin.svelte
+#                         ^^^^^ source.svelte meta.scope.tag.Hello._World123.Input.svelte meta.tag.end.svelte support.class.component.svelte
+#                              ^ source.svelte meta.scope.tag.Hello._World123.Input.svelte meta.tag.end.svelte punctuation.definition.keyword.svelte
+#                               ^^^^^^^^^ source.svelte meta.scope.tag.Hello._World123.Input.svelte meta.tag.end.svelte support.class.component.svelte
+#                                        ^ source.svelte meta.scope.tag.Hello._World123.Input.svelte meta.tag.end.svelte punctuation.definition.keyword.svelte
+#                                         ^^^^^ source.svelte meta.scope.tag.Hello._World123.Input.svelte meta.tag.end.svelte support.class.component.svelte
+#                                              ^ source.svelte meta.scope.tag.Hello._World123.Input.svelte meta.tag.end.svelte punctuation.definition.tag.end.svelte
+><hi.input></hi.input>
+#^ source.svelte meta.scope.tag.hi.input.svelte meta.tag.start.svelte punctuation.definition.tag.begin.svelte
+# ^^ source.svelte meta.scope.tag.hi.input.svelte meta.tag.start.svelte support.class.component.svelte
+#   ^ source.svelte meta.scope.tag.hi.input.svelte meta.tag.start.svelte punctuation.definition.keyword.svelte
+#    ^^^^^ source.svelte meta.scope.tag.hi.input.svelte meta.tag.start.svelte support.class.component.svelte
+#         ^ source.svelte meta.scope.tag.hi.input.svelte meta.tag.start.svelte punctuation.definition.tag.end.svelte
+#          ^^ source.svelte meta.scope.tag.hi.input.svelte meta.tag.end.svelte punctuation.definition.tag.begin.svelte
+#            ^^ source.svelte meta.scope.tag.hi.input.svelte meta.tag.end.svelte support.class.component.svelte
+#              ^ source.svelte meta.scope.tag.hi.input.svelte meta.tag.end.svelte punctuation.definition.keyword.svelte
+#               ^^^^^ source.svelte meta.scope.tag.hi.input.svelte meta.tag.end.svelte support.class.component.svelte
+#                    ^ source.svelte meta.scope.tag.hi.input.svelte meta.tag.end.svelte punctuation.definition.tag.end.svelte
+><hello.world.input></hello.world.input>
+#^ source.svelte meta.scope.tag.hello.world.input.svelte meta.tag.start.svelte punctuation.definition.tag.begin.svelte
+# ^^^^^ source.svelte meta.scope.tag.hello.world.input.svelte meta.tag.start.svelte support.class.component.svelte
+#      ^ source.svelte meta.scope.tag.hello.world.input.svelte meta.tag.start.svelte punctuation.definition.keyword.svelte
+#       ^^^^^ source.svelte meta.scope.tag.hello.world.input.svelte meta.tag.start.svelte support.class.component.svelte
+#            ^ source.svelte meta.scope.tag.hello.world.input.svelte meta.tag.start.svelte punctuation.definition.keyword.svelte
+#             ^^^^^ source.svelte meta.scope.tag.hello.world.input.svelte meta.tag.start.svelte support.class.component.svelte
+#                  ^ source.svelte meta.scope.tag.hello.world.input.svelte meta.tag.start.svelte punctuation.definition.tag.end.svelte
+#                   ^^ source.svelte meta.scope.tag.hello.world.input.svelte meta.tag.end.svelte punctuation.definition.tag.begin.svelte
+#                     ^^^^^ source.svelte meta.scope.tag.hello.world.input.svelte meta.tag.end.svelte support.class.component.svelte
+#                          ^ source.svelte meta.scope.tag.hello.world.input.svelte meta.tag.end.svelte punctuation.definition.keyword.svelte
+#                           ^^^^^ source.svelte meta.scope.tag.hello.world.input.svelte meta.tag.end.svelte support.class.component.svelte
+#                                ^ source.svelte meta.scope.tag.hello.world.input.svelte meta.tag.end.svelte punctuation.definition.keyword.svelte
+#                                 ^^^^^ source.svelte meta.scope.tag.hello.world.input.svelte meta.tag.end.svelte support.class.component.svelte
+#                                      ^ source.svelte meta.scope.tag.hello.world.input.svelte meta.tag.end.svelte punctuation.definition.tag.end.svelte
+><hello._world123.input></hello._world123.input>
+#^ source.svelte meta.scope.tag.hello._world123.input.svelte meta.tag.start.svelte punctuation.definition.tag.begin.svelte
+# ^^^^^ source.svelte meta.scope.tag.hello._world123.input.svelte meta.tag.start.svelte support.class.component.svelte
+#      ^ source.svelte meta.scope.tag.hello._world123.input.svelte meta.tag.start.svelte punctuation.definition.keyword.svelte
+#       ^^^^^^^^^ source.svelte meta.scope.tag.hello._world123.input.svelte meta.tag.start.svelte support.class.component.svelte
+#                ^ source.svelte meta.scope.tag.hello._world123.input.svelte meta.tag.start.svelte punctuation.definition.keyword.svelte
+#                 ^^^^^ source.svelte meta.scope.tag.hello._world123.input.svelte meta.tag.start.svelte support.class.component.svelte
+#                      ^ source.svelte meta.scope.tag.hello._world123.input.svelte meta.tag.start.svelte punctuation.definition.tag.end.svelte
+#                       ^^ source.svelte meta.scope.tag.hello._world123.input.svelte meta.tag.end.svelte punctuation.definition.tag.begin.svelte
+#                         ^^^^^ source.svelte meta.scope.tag.hello._world123.input.svelte meta.tag.end.svelte support.class.component.svelte
+#                              ^ source.svelte meta.scope.tag.hello._world123.input.svelte meta.tag.end.svelte punctuation.definition.keyword.svelte
+#                               ^^^^^^^^^ source.svelte meta.scope.tag.hello._world123.input.svelte meta.tag.end.svelte support.class.component.svelte
+#                                        ^ source.svelte meta.scope.tag.hello._world123.input.svelte meta.tag.end.svelte punctuation.definition.keyword.svelte
+#                                         ^^^^^ source.svelte meta.scope.tag.hello._world123.input.svelte meta.tag.end.svelte support.class.component.svelte
+#                                              ^ source.svelte meta.scope.tag.hello._world123.input.svelte meta.tag.end.svelte punctuation.definition.tag.end.svelte