Initial support for JSX tags

Resolves #148 Fixes #218
SublimeText · Aug 26, 2024 · 4556045 · 4556045
1 parent 52392b3
commit 4556045
Show file tree

Hide file tree

Showing 3 changed files with 252 additions and 0 deletions.
diff --git a/CoffeeScript.sublime-syntax b/CoffeeScript.sublime-syntax
@@ -32,6 +32,7 @@ contexts:
  - include: classes
  - include: keywords
  - include: functions
+ - include: jsx-tags
  - include: expressions
 
  expressions:
@@ -573,6 +574,171 @@ contexts:
  pop: 1
  - include: script
 
+###[ JSX TAGS ]################################################################
+
+ jsx-tags:
+ - match: (<)(?:({{component_names}})|({{tag_names}}))(?=\s|/?>)
+ captures:
+ 1: punctuation.definition.tag.begin.coffee
+ 2: entity.name.tag.component.coffee
+ 3: entity.name.tag.coffee
+ push:
+ - jsx-meta
+ - jsx-tag-open-body
+
+ jsx-meta:
+ - meta_include_prototype: false
+ - meta_scope: meta.jsx.coffee
+ - include: immediately-pop
+
+ jsx-body:
+ - match: (</)(?:({{component_names}})|({{tag_names}}))(?=\s|/?>)
+ captures:
+ 1: punctuation.definition.tag.begin.coffee
+ 2: entity.name.tag.component.coffee
+ 3: entity.name.tag.coffee
+ set: jsx-tag-close-body
+ - match: (<)(?:({{component_names}})|({{tag_names}}))(?=\s|/?>)
+ captures:
+ 1: punctuation.definition.tag.begin.coffee
+ 2: entity.name.tag.component.coffee
+ 3: entity.name.tag.coffee
+ push: jsx-tag-open-body
+ - include: jsx-text-interpolations
+
+ jsx-tag-close-body:
+ - meta_include_prototype: false
+ - meta_scope: meta.tag.coffee
+ - match: /?>
+ scope: punctuation.definition.tag.end.coffee
+ pop: 1
+
+ jsx-tag-open-body:
+ - meta_include_prototype: false
+ - meta_scope: meta.tag.coffee
+ - match: />
+ scope: punctuation.definition.tag.end.coffee
+ pop: 1
+ - match: \>
+ scope: punctuation.definition.tag.end.coffee
+ set: jsx-body
+ - match: '{{attribute_name_start}}'
+ push:
+ - jsx-tag-attribute-meta
+ - jsx-tag-attribute-assignment
+ - jsx-tag-attribute-name
+
+ jsx-tag-attribute-name:
+ - meta_scope: entity.other.attribute-name.coffee
+ - include: jsx-string-interpolations
+ - match: '{{attribute_name_break}}'
+ pop: 1
+ - match: '["''`<]'
+ scope: invalid.illegal.attribute-name.coffee
+
+ jsx-tag-attribute-meta:
+ - meta_include_prototype: false
+ - meta_scope: meta.attribute-with-value.coffee
+ - include: immediately-pop
+
+ jsx-tag-attribute-assignment:
+ - meta_include_prototype: false
+ - match: =
+ scope: punctuation.separator.key-value.coffee
+ set: jsx-tag-attribute-value
+ - include: else-pop
+
+ jsx-tag-attribute-value:
+ - meta_include_prototype: false
+ - match: \"
+ scope: punctuation.definition.string.begin.coffee
+ set: jsx-tag-attribute-value-double-quoted-content
+ - match: \'
+ scope: punctuation.definition.string.begin.coffee
+ set: jsx-tag-attribute-value-single-quoted-content
+ - match: '{{unquoted_attribute_start}}'
+ set: jsx-tag-attribute-value-unquoted-content
+ - include: else-pop
+
+ jsx-tag-attribute-value-double-quoted-content:
+ # See the top of this file for why prototype is excluded
+ - meta_include_prototype: false
+ - meta_scope: meta.string.coffee string.quoted.double.coffee
+ - match: \"
+ scope: punctuation.definition.string.end.coffee
+ pop: 1
+ - include: jsx-string-interpolations
+
+ jsx-tag-attribute-value-single-quoted-content:
+ # See the top of this file for why prototype is excluded
+ - meta_include_prototype: false
+ - meta_scope: meta.string.coffee string.quoted.single.coffee
+ - match: \'
+ scope: punctuation.definition.string.end.coffee
+ pop: 1
+ - include: jsx-string-interpolations
+
+ jsx-tag-attribute-value-unquoted-content:
+ # See the top of this file for why prototype is excluded
+ - meta_include_prototype: false
+ - meta_content_scope: meta.string.coffee string.unquoted.coffee
+ - include: jsx-string-interpolations
+ - match: '{{unquoted_attribute_break}}'
+ pop: 1
+ - match: '["''`<]'
+ scope: invalid.illegal.attribute-value.coffee
+
+ jsx-string-interpolations:
+ - match: \{#
+ scope: punctuation.definition.comment.begin.coffee
+ push: jsx-string-comment-body
+ - match: \{
+ scope: punctuation.section.interpolation.begin.coffee
+ push: jsx-string-interpolation-body
+
+ jsx-string-comment-body:
+ # required to support "toggle_comment"
+ - clear_scopes: 1
+ - meta_scope: meta.interpolation.coffee comment.block.coffee
+ - include: jsx-text-comment-body
+
+ jsx-string-interpolation-body:
+ - clear_scopes: 1
+ - meta_scope: meta.interpolation.coffee
+ - meta_content_scope: source.coffee.embedded.jsx
+ - include: jsx-text-interpolation-body
+
+ jsx-text-interpolations:
+ - match: \{#
+ scope: punctuation.definition.comment.begin.coffee
+ push: jsx-text-comment-body
+ - match: \{
+ scope: punctuation.section.interpolation.begin.coffee
+ push: jsx-text-interpolation-body
+
+ jsx-text-comment-body:
+ # required to support "toggle_comment"
+ - meta_scope: meta.interpolation.coffee comment.block.coffee
+ - match: \}
+ scope: punctuation.definition.comment.end.coffee
+ pop: 1
+
+ jsx-text-interpolation-body:
+ - meta_scope: meta.interpolation.coffee
+ - meta_content_scope: source.coffee.embedded.jsx
+ - match: \}
+ scope: punctuation.section.interpolation.end.coffee
+ pop: 1
+ - match: \#
+ scope: punctuation.definition.comment.coffee
+ push: jsx-line-comment-body
+ - include: script
+
+ jsx-line-comment-body:
+ - meta_scope: comment.line.number-sign.coffee
+ - match: $\n?|(?=})
+ pop: 1
+
 ###[ VARIABLES ]###############################################################
 
  instance-variables:
@@ -596,4 +762,18 @@ contexts:
 
 variables:
 
+ ascii_space: '\t\n\f '
+
  identifier: '[a-zA-Z\$_]\w*'
+
+ component_names: '[A-Z][[:alnum:]_.-]*'
+ tag_names: '[[:alpha:]][[:alnum:]_.-]*'
+
+ # https://html.spec.whatwg.org/multipage/syntax.coffee#attributes-2
+ attribute_name_break_char: '[{{ascii_space}}=/>]'
+ attribute_name_break: (?={{attribute_name_break_char}})
+ attribute_name_start: (?=[^{{attribute_name_break_char}}])
+
+ # https://html.spec.whatwg.org/multipage/syntax.coffee#syntax-attribute-value
+ unquoted_attribute_break: (?=[{{ascii_space}}]|/?>)
+ unquoted_attribute_start: (?=[^{{ascii_space}}=>])
diff --git a/Comments JSX.tmPreferences b/Comments JSX.tmPreferences
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+ <key>scope</key>
+ <string>source.coffee meta.jsx, source.coffee meta.jsx meta.interpolation comment.line</string>
+ <key>settings</key>
+ <dict>
+ <key>shellVariables</key>
+ <array>
+ <dict>
+ <key>name</key>
+ <string>TM_COMMENT_START</string>
+ <key>value</key>
+ <string>{# </string>
+ </dict>
+ <dict>
+ <key>name</key>
+ <string>TM_COMMENT_END</string>
+ <key>value</key>
+ <string> }</string>
+ </dict>
+ </array>
+ </dict>
+</dict>
+</plist>
diff --git a/tests/syntax_test_scope.coffee b/tests/syntax_test_scope.coffee
@@ -561,3 +561,49 @@ class App.Router extends Snakeskin.Router
  @variable
 # ^^^^^^^^^ variable.other.readwrite.instance.coffee
 # ^ punctuation.definition.variable.coffee
+
+###[ JSX ]#####################################################################
+
+ <Component attrib="va{@lue}">
+# ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.jsx.coffee meta.tag.coffee
+# ^ punctuation.definition.tag.begin.coffee
+# ^^^^^^^^^ entity.name.tag.component.coffee
+# ^^^^^^^^^^^^^^^^^ meta.attribute-with-value.coffee
+# ^^^^^^ entity.other.attribute-name.coffee
+# ^ punctuation.separator.key-value.coffee
+# ^^^ meta.string.coffee string.quoted.double.coffee
+# ^^^^^^ meta.string.coffee meta.interpolation.coffee
+# ^ punctuation.section.interpolation.begin.coffee
+# ^^^^ source.coffee.embedded.jsx variable.other.readwrite.instance.coffee
+# ^ punctuation.section.interpolation.end.coffee
+# ^ meta.string.coffee string.quoted.double.coffee punctuation.definition.string.end.coffee
+# ^ punctuation.definition.tag.end.coffee
+ <h1>Text {# comment}!</h1>
+# ^^^^ meta.jsx.coffee meta.tag.coffee
+# ^ punctuation.definition.tag.begin.coffee
+# ^^ entity.name.tag.coffee
+# ^ punctuation.definition.tag.end.coffee
+# ^^^^^ meta.jsx.coffee - meta.interpolation
+# ^^^^^^^^^^^ meta.jsx.coffee meta.interpolation.coffee comment.block.coffee
+# ^^ punctuation.definition.comment.begin.coffee
+# ^ punctuation.definition.comment.end.coffee
+# ^ meta.jsx.coffee - meta.interpolation
+# ^^^^^ meta.jsx.coffee meta.tag.coffee
+# ^^ punctuation.definition.tag.begin.coffee
+# ^^ entity.name.tag.coffee
+# ^ punctuation.definition.tag.end.coffee
+ </Component>
+# ^^^^^^^^^^^^ meta.jsx.coffee meta.tag.coffee
+# ^^ punctuation.definition.tag.begin.coffee
+# ^^^^^^^^^ entity.name.tag.component.coffee
+# ^ punctuation.definition.tag.end.coffee
+# ^ - meta.jsx - meta.tag
+
+ <EmailInput
+ {# THIS IS A GOOD COMMENT }
+# ^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.jsx.coffee meta.tag.coffee meta.attribute-with-value.coffee meta.interpolation.coffee comment.block.coffee
+ {...@props}
+# ^^^^^^^^^^^ meta.jsx.coffee meta.tag.coffee meta.attribute-with-value.coffee meta.interpolation.coffee
+ />
+# ^^ meta.jsx.coffee meta.tag.coffee punctuation.definition.tag.end.coffee
+# ^ - meta.jsx - meta.tag