fix: properly highlight <component.dot.notation />

sveltejs · Oct 31, 2024 · ae56165 · ae56165
1 parent 02847e0
commit ae56165
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 6 deletions.
diff --git a/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml b/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml
@@ -509,16 +509,20 @@ 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: '([A-Z][\w]+)|(?<=\.)([\w]+)(?<!\.)|(?!\.)([\w]+)(?=\.)'
+      captures:
+        1: { name: support.class.component.svelte }
+        2: { name: support.class.component.svelte }
+        3: { 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
@@ -8,4 +8,75 @@
 #            ^^ 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 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
+#       ^^^^^ 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
+#             ^^^^^ 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
+#                           ^^^^^ 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
+#                                 ^^^^^ 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
+#       ^^^^^^^^^ 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
+#                 ^^^^^ 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
+#                               ^^^^^^^^^ 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
+#                                         ^^^^^ 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
+#    ^^^^^ 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 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
+#       ^^^^^ 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
+#             ^^^^^ 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
+#                           ^^^^^ 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
+#                                 ^^^^^ 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
+#       ^^^^^^^^^ 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
+#                 ^^^^^ 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
+#                               ^^^^^^^^^ 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
+#                                         ^^^^^ 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