From: Jackson Ray Hamilton <jackson@jacksonrayhamilton.com>
To: Dmitry Gutov <dgutov@yandex.ru>
Cc: monnier@iro.umontreal.ca, emacs-devel@gnu.org
Subject: Re: Comprehensive JSX support in Emacs
Date: Sat, 6 Apr 2019 08:55:30 -0700 [thread overview]
Message-ID: <58f55351-67b9-a016-1a00-829c11395ffe@jacksonrayhamilton.com> (raw)
In-Reply-To: <f30ac596-2023-1c8f-481e-c0b6797d21d2@yandex.ru>
[-- Attachment #1: Type: text/plain, Size: 2315 bytes --]
Hi Dmitry,
First of all, thanks for taking the time to review my work. Regarding
your comments/questions…
> It's probably still worth it to get the feature into master soon.
I agree. I’ll see if I can tackle the performance issue first, then
I’ll rebase/merge the branch into master.
> Do you have commit access?
I’m not sure. If not, will someone please grant it to me?
> The colors are very nice to have. Do you think this approach is
> portable to js2-mode?
Possibly… js-mode is using font-lock keywords to add the colors, but
js2-mode apparently isn’t. js2-mode would need to pay attention to the
js-jsx-* text properties like in js-jsx--font-lock-keywords and apply
colors like in the associated matcher functions (js-jsx--match-tag-name,
js-jsx--match-attribute-name, et al).
I get the feeling from looking at the js2-mode code that it colors
solely according to the AST structure. Perhaps in the long run, the
best solution for that mode will be to extend or replace the ESX parsing
with JSX parsing, adding JSXElement nodes to the AST and coloring them
along the way, and suppressing JS coloring in the JSXText nodes.
Until someone steps up to add proper JSX parsing to the JS2 AST… perhaps
a fusion of the keywords-style and AST-style colorings could provide JSX
and JS coloring (respectively) in JS2.
>> However, there is a noticeable delay when editing some lines in my
>> 1000-line monolith.jsx file,
> This sounds a bit worrisome. Slow font-lock rules?
I’ll check for that. I’m also planning on analyzing the results of
elp-instrument-package and doing some step-debugging to deduce where and
why it’s lagging.
I’ve already found that it’s lagging when I’m editing a large chunk of
JSX code or the code before it. However, if I edit code in the buffer
following the chunk of JSX, then the lag noticeably drops. You can see
this by opening the attached “Slow JSX.jsx” file and editing it. This
might be related to how I extended syntax propertization and
font-locking to the boundaries of a root enclosing JSXElement; if a root
is hundreds of lines long, there could be negative consequences. Maybe
we can be more conservative with the parsing/coloring, somehow.
Jackson
[-- Attachment #2: Slow JSX.jsx --]
[-- Type: text/plain, Size: 13735 bytes --]
class Component {
render () {
return (
<div>Is it slow to edit this node? Very much for me.</div>
)
}
render () {
return (
<div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div>That was {5} things. Can we add more? {'Yes I think so.'}</div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div>That was {10} things. Can we add more? {'Yes I think so.'}</div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div>That was {15} things. Can we add more? {'Yes I think so.'}</div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div>That was {20} things. Can we add more? {'Yes I think so.'}</div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div>That was {25} things. Can we add more? {'Yes I think so.'}</div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div>That was {30} things. Can we add more? {'Yes I think so.'}</div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div>That was {35} things. Can we add more? {'Yes I think so.'}</div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div>That was {40} things. Can we add more? {'Yes I think so.'}</div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div>That was {45} things. Can we add more? {'Yes I think so.'}</div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div>That was {50} things. Can we add more? {'Yes I think so.'}</div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div>That was {55} things. Can we add more? {'Yes I think so.'}</div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div>That was {60} things. Can we add more? {'Yes I think so.'}</div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div>That was {65} things. Can we add more? {'Yes I think so.'}</div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div class="class" expr={funcall(() => {
stuff: 'more stuff',
lotsOfStuff: 'stuff is good, more stuff is better'
})}></div>
<div>That was {70} things. Can we add more? {'That’s enough for now.'}</div>
<div>Is it slow to edit this node? Very much for me.</div>
</div>
)
}
render () {
return (
<div>Is it slow to edit this node? Not at all for me.</div>
)
}
}
next prev parent reply other threads:[~2019-04-06 15:55 UTC|newest]
Thread overview: 33+ messages / expand[flat|nested] mbox.gz Atom feed top
2019-02-14 5:06 Comprehensive JSX support in Emacs Jackson Ray Hamilton
2019-02-14 8:03 ` Marcin Borkowski
2019-02-14 14:10 ` Stefan Monnier
2019-02-14 15:04 ` Clément Pit-Claudel
2019-02-15 8:21 ` Jackson Ray Hamilton
2019-02-15 13:25 ` Stefan Monnier
2019-02-15 13:54 ` Dmitry Gutov
2019-02-15 14:39 ` Dmitry Gutov
2019-02-16 20:50 ` Jostein Kjønigsen
2019-02-18 7:17 ` Jackson Ray Hamilton
2019-03-27 8:03 ` Jackson Ray Hamilton
2019-03-27 9:36 ` Marcin Borkowski
2019-03-30 2:18 ` Jackson Ray Hamilton
2019-04-02 1:12 ` Dmitry Gutov
2019-04-06 16:09 ` Jackson Ray Hamilton
2019-03-30 2:08 ` Jackson Ray Hamilton
2019-04-02 1:07 ` Dmitry Gutov
2019-04-02 11:23 ` Stefan Monnier
2019-04-06 16:02 ` Jackson Ray Hamilton
2019-04-07 23:19 ` Jackson Ray Hamilton
2019-04-09 6:06 ` Jackson Ray Hamilton
2019-04-09 8:12 ` Eli Zaretskii
2019-04-10 1:56 ` Jackson Ray Hamilton
2019-04-10 15:43 ` Eli Zaretskii
2019-04-06 15:55 ` Jackson Ray Hamilton [this message]
2019-04-07 0:31 ` Dmitry Gutov
2019-04-09 6:16 ` Jackson Ray Hamilton
2019-04-09 7:10 ` Marcin Borkowski
2019-04-09 8:00 ` Jackson Ray Hamilton
2019-04-11 19:51 ` Marcin Borkowski
2019-10-20 16:57 ` Steinar Bang
-- strict thread matches above, loose matches on Subject: below --
2019-02-15 6:38 Jackson Ray Hamilton
2019-02-17 6:10 ` Marcin Borkowski
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=58f55351-67b9-a016-1a00-829c11395ffe@jacksonrayhamilton.com \
--to=jackson@jacksonrayhamilton.com \
--cc=dgutov@yandex.ru \
--cc=emacs-devel@gnu.org \
--cc=monnier@iro.umontreal.ca \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
Code repositories for project(s) associated with this external index
https://git.savannah.gnu.org/cgit/emacs.git
https://git.savannah.gnu.org/cgit/emacs/org-mode.git
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.