Skip to content

Commit

Permalink
Add expansion of variable in properties value for JSX
Browse files Browse the repository at this point in the history
  • Loading branch information
@15cm
15cm committed Sep 23, 2019
1 parent 33f5a77 commit 690c439
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 16 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ If you want to customize Self-closing tags style:
### 4. JSX Support
If current major-mode is in `emmet-jsx-major-modes`, then JSX features will be supported:
- Expand `.class` to `className="..."` instead of `class="..."`
- Expand value of properties as variables: `div[value={v}]` -> `<div value={v}></div>`

To enable the JSX support, add your major-mode to `emmet-jsx-major-modes`:

Expand Down
35 changes: 27 additions & 8 deletions emmet-mode.el
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,9 @@
(maphash #'(lambda (k v) (setq vs (cons v vs))) hash)
vs))

(defun emmet-jsx-prop-value-var? (prop-value)
(string-match "{.+}" prop-value))

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Generic parsing macros and utilities

Expand Down Expand Up @@ -3321,11 +3324,23 @@ tbl))
(input (elt it 2)))
`((,(read name) ,(emmet-split-numbering-expressions value)) . ,input)))
it
(emmet-parse "=\\([^\\,\\+\\>\\{\\}\\ )]*\\)" 2
"=property value"
(let ((value (elt it 1))
(input (elt it 2)))
`((,(read name) ,(emmet-split-numbering-expressions value)) . ,input)))))
(let ((emmet--prop-value-parse-any (lambda () (emmet-parse "=\\([^\\,\\+\\>\\{\\}\\ )]*\\)" 2
"=property value"
(let ((value (elt it 1))
(input (elt it 2)))
`((,(read name) ,(emmet-split-numbering-expressions value)) . ,input))))))
(if (memq major-mode emmet-jsx-major-modes)
(emmet-pif
(emmet-parse "=\\({.*?}\\)" 2
"=\"property value\""
(let ((value (elt it 1))
(input (elt it 2)))
`((,(read name) ,(emmet-split-numbering-expressions value)) . ,input)))
it
(funcall emmet--prop-value-parse-any))
(funcall emmet--prop-value-parse-any))
)
))

(defun emmet-tag-classes (tag input)
(let ((tag-data (cadr tag)))
Expand Down Expand Up @@ -3617,9 +3632,13 @@ tbl))
(emmet-mapconcat-or-empty
" " merged-tag-props " " nil
(lambda (prop)
(let ((key (car prop)))
(concat (if (symbolp key) (symbol-name key) key)
"=\"" (cadr prop) "\""))))))
(let* ((key (car prop))
(val (cadr prop))
(format-string (if
(and (memq major-mode emmet-jsx-major-modes) (emmet-jsx-prop-value-var? val)) "%s=%s"
"%s=\"%s\"")))
(format format-string (if (symbolp key) (symbol-name key) key) val)
)))))
(content-multiline? (and content (string-match "\n" content)))
(block-tag? (and settings (gethash "block" settings)))
(self-closing? (and (not (or tag-txt content))
Expand Down
32 changes: 24 additions & 8 deletions src/html-abbrev.el
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,11 +262,23 @@
(input (elt it 2)))
`((,(read name) ,(emmet-split-numbering-expressions value)) . ,input)))
it
(emmet-parse "=\\([^\\,\\+\\>\\{\\}\\ )]*\\)" 2
"=property value"
(let ((value (elt it 1))
(input (elt it 2)))
`((,(read name) ,(emmet-split-numbering-expressions value)) . ,input)))))
(let ((emmet--prop-value-parse-any (lambda () (emmet-parse "=\\([^\\,\\+\\>\\{\\}\\ )]*\\)" 2
"=property value"
(let ((value (elt it 1))
(input (elt it 2)))
`((,(read name) ,(emmet-split-numbering-expressions value)) . ,input))))))
(if (memq major-mode emmet-jsx-major-modes)
(emmet-pif
(emmet-parse "=\\({.*?}\\)" 2
"=\"property value\""
(let ((value (elt it 1))
(input (elt it 2)))
`((,(read name) ,(emmet-split-numbering-expressions value)) . ,input)))
it
(funcall emmet--prop-value-parse-any))
(funcall emmet--prop-value-parse-any))
)
))

(defun emmet-tag-classes (tag input)
(let ((tag-data (cadr tag)))
Expand Down Expand Up @@ -558,9 +570,13 @@
(emmet-mapconcat-or-empty
" " merged-tag-props " " nil
(lambda (prop)
(let ((key (car prop)))
(concat (if (symbolp key) (symbol-name key) key)
"=\"" (cadr prop) "\""))))))
(let* ((key (car prop))
(val (cadr prop))
(format-string (if
(and (memq major-mode emmet-jsx-major-modes) (emmet-jsx-prop-value-var? val)) "%s=%s"
"%s=\"%s\"")))
(format format-string (if (symbolp key) (symbol-name key) key) val)
)))))
(content-multiline? (and content (string-match "\n" content)))
(block-tag? (and settings (gethash "block" settings)))
(self-closing? (and (not (or tag-txt content))
Expand Down
3 changes: 3 additions & 0 deletions src/init.el
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@
(maphash #'(lambda (k v) (setq vs (cons v vs))) hash)
vs))

(defun emmet-jsx-prop-value-var? (prop-value)
(string-match "{.+}" prop-value))

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Generic parsing macros and utilities

Expand Down
17 changes: 17 additions & 0 deletions src/test.el
View file
Original file line number Diff line number Diff line change
Expand Up @@ -706,6 +706,23 @@
#'emmet-jsx-expand-className-test
'(((".jsx>ul.lis>li.itm{x}*2") . "<div className=\"jsx\">\n <ul className=\"lis\">\n <li className=\"itm\">x</li>\n <li className=\"itm\">x</li>\n </ul>\n</div>")))

(defun emmet-jsx-expand-prop-value-var-test (lis)
(let ((es (car lis))
(indent-tabs-mode nil)
(tab-width 2)
(standard-indent 2)
(emmet-jsx-major-modes '(sgml-mode)))
(with-temp-buffer
(emmet-mode 1)
(sgml-mode)
(insert es)
(emmet-expand-line nil)
(buffer-string))))

(emmet-run-test-case "JSX expand prop value variable 1"
#'emmet-jsx-expand-prop-value-var-test
'((("div[value={v}]") . "<div value={v}></div>")))

(defun emmet-self-closing-tag-style-test (lis)
(let ((es (car lis))
(emmet-preview-default nil))
Expand Down

0 comments on commit 690c439

Please sign in to comment.