JS injected into script tag vs JS expressions embedded in HTML

I'm working on a custom language plugin (Svelte). Folks on Svelte chatroom are getting excited about it so I want iron out inconsistencies.

It looks like in example

There is main script in script tag, control flow blocks, and islands of JS expressions in HTML text or in HTML tags - as attribute values, or standalone expressions, ie. {i} that implicitly expand to i={i}. Attributes are currently not implemented.

I managed to implement blocks as language templating over HTML.

Question: Is that the only way to gain advantage of built in coding assistance for HTML (zen coding, completions, inspections etc)?

JS expressions inside HTML text are also parsed as my language - as a single token. I then use LayeredLexer for syntax highlighting of this blend of HTML, JS and custom tokens.

Question: JS inside script tags seems to be handled internally by HtmlHighlightingLexer. Is that correct? Is it customisable?

I decided to treat inline {expressions} as custom language because I already had infrastructure from templating language for blocks. They can also contain spaces so it would trip HTML attribute parsing

Question: Could it be handled better?

I also need to provide references to identifiers - sometimes - inside parts of HTML attribute names after colon token - so called directives. eg <Box use:functionName={params} /> 

Question: Does that change previous things? Should I inject JS after colon or somehow link references.

To provide coding assistance for expressions i decided to use MultiHostInjector. I basically stitch together valid JS using prefixes and suffixes, and injecting into leaf  CODE_FRAGMENT elements visited by Visitor. This kind of works. For example name in each block is properly linked, whereas content is marked as unused. Only issue is that I'm getting phantom intentions that throw range errors because they want to modify prefixes or suffixes.
I was inspired by this: https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000572430-Custom-Template-Language-insert-outer-language-code-at-any-place-not-only-template-fragments-

Question: Is it a proper way in this situation? How can i fix intentions problem.
Question: How can I link together this multi injection with code in main script block.
Question: Injected code resolves JS identifiers outside of containing file. How to limit this.
Question: Can I reasonably include here aforementioned JS usages inside attribute names?

Bonus question:
Svelte treats $ as prefix unary operator, $ is disallowed inside identifiers. For example $store.name should be analysed as unwrap(store).name
This works not only in my custom expressions but also in script tag. Can I transform text before passing it to JS so that caret movement and highlighting will work as expected? PsiLanguageInjectionHost will suffice? How to replace script one?

Responses to at least one question will be highly appreciated! Thanks for your time

Please sign in to leave a comment.