Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support tokenizing embedded languages in JS/TS tagged template literals #259

Merged
merged 6 commits into from Aug 6, 2019

Conversation

@rictic
Copy link
Contributor

commented Aug 4, 2019

Consider code like:

     html`<div>Hello ${'world'}</div>`

For a good editing experience, the contents of that template string should
be syntax highlighted as HTML.

In the limit, this is more difficult than it initially appears however, because arbitrary JS expressions are allowed inline, including nested templates. Perhaps surprisingly, this is used used in real world code like the following:

html`
  <style>
    ${css`
      li {
        color: green;
      }
    `}
  </style>
  <ul>
    ${items.map(item => html`<li>${item}</li>`)}
  </ul>
`;

Care was taken in this implementation to impose minimal cost on unrelated code, and to keep the implementation complexity for this feature silo'd away from the JS and TS parsers.

rictic added some commits Aug 4, 2019

Display context about the line of test failures.
For example, when displaying the error:

```
tagged_template.js: Error: Unexpected token "string-2" for "`" at 58:11. Expected "string"
```

It will follow it up with the line where the error occured, and a carrot indicating the place in the line:

```
    html`\${10}`;
               ^
```

Also import the html language, as the JS and TS tests now require it.
@rictic

This comment has been minimized.

Copy link
Contributor Author

commented Aug 4, 2019

Corresponding CL for upstream is cl/261587976

@rictic

This comment has been minimized.

Copy link
Contributor Author

commented Aug 4, 2019

Related feature requests on the main codemirror issue tracker:

Internal feature request: b/115932417

@marijnh

This comment has been minimized.

Copy link
Member

commented Aug 5, 2019

Wow. That's a bit of a kludge, but it does look like it should work well.

@mtaran-google This looks good to me—are you okay with having it merged?

@mtaran-google

This comment has been minimized.

Copy link
Contributor

commented Aug 5, 2019

Works for me :)

@marijnh marijnh merged commit 2793886 into codemirror:master Aug 6, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.