Capture regex for new injection method is too strict

[ehoogeveen-medweb]

As of version v0.3.2 the syntax highlighting no longer triggers for me because my templates don't match the pattern template: `.

My vue components are defined as something like the following:

const componentName = "myVueComponent";
Vue.component(componentName, {
  template: Vue.trimTemplate(`
    <div class="${componentName}">
      <!-- other stuff -->
    </div>`),
});

Here Vue.trimTemplate() is a function that trims whitespace from the template (I put it on the Vue global object for convenience). Unfortunately this no longer triggers the syntax highlighting as of version v0.3.2. Similarly, we sometimes do the following:

const componentName = "myVueComponent";
const componentTemplate = `
  <div class="${componentName}">
    <!-- other stuff -->
  </div>`;
Vue.component(componentName, {
  template: componentTemplate,
});

This also no longer triggers the syntax. Now I have to use the following workaround which isn't ideal:

const componentName = "myVueComponent";
const componentTemplate = {
  template: `
    <div class="${componentName}">
      <!-- other stuff -->
    </div>`
};
Vue.component(componentName, {
  template: Vue.trimTemplate(componentTemplate),
});

Could the capture pattern be loosened or extended in some way to enable syntax highlighting in more cases?

[Betanu701]

Can you provide me with a test file and place comments where coloring should start and end?

I will see what I can do to make it work.

On Mon, Jan 27, 2020, 9:49 AM ehoogeveen-medweb notifications@github.com wrote:

As of version v0.3.2 the syntax highlighting no longer triggers for me because my templates don't match the pattern template: ` .

My vue components are defined as something like the following:

const componentName = "myVueComponent";Vue.component(myVueComponent, { template: Vue.trimTemplate(<div class="${myVueComponent}"> <!-- other stuff --> </div>), });

Here Vue.trimTemplate() is a function that trims whitespace from the template (I put it on the Vue global object for convenience). Unfortunately this no longer triggers the syntax highlighting as of version v0.3.2. Similarly, we sometimes do the following:

const componentName = "myVueComponent";const componentTemplate = <div class="${myVueComponent}"> <!-- other stuff --> </div>;Vue.component(myVueComponent, { template: componentTemplate, });

This also no longer triggers the syntax. Now I have to use the following workaround which isn't ideal:

const componentName = "myVueComponent";const componentTemplate = { template: <div class="${myVueComponent}"> <!-- other stuff --> </div> };Vue.component(myVueComponent, { template: Vue.trimTemplate(componentTemplate), });

Could the capture pattern be loosened or extended in some way to enable syntax highlighting in more cases?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Digitalbrainstem/Javascript-Vue/issues/6?email_source=notifications&email_token=ABMHQ7FTA343E3JK2DRGF2TQ73YANA5CNFSM4KMCRHOKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4II6FKNA, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABMHQ7B476XWJZGTM6RDQ23Q73YANANCNFSM4KMCRHOA .

[ehoogeveen-medweb]

Thanks for the quick response! I'd basically like the examples above to work, I've attached a self-contained example with comments. Edit: Oops, messed up the 2nd one. Reuploaded.

example2.zip

[Betanu701]

Thank you for that file. So if I am correct. I can still use ticks "`" to be the start and end for you. If that is the case I think I can make this happen pretty easily.

end up looking something like? If that works I can push up my fix.

[ehoogeveen-medweb]

Yes, I still use a backtick (`) to start and end the block. I'm not too worried about the 2nd example (using a separate variable), but I need to be able to wrap the block in my function call for some post-processing before I pass it to the Vue component definition.

In your screenshot the 2nd example looks a bit odd. I don't know if that's due to your change or due to VSCode - I've been having some odd issues with highlighting myself recently.

[Betanu701]

Let me work on a bit more. It might take me a couple hours. But I will have something today.

[Betanu701]

So working on this, The issue I am running into is escaping the function for the tick character.

I think I may have gotten it. How does this look?

[Betanu701]

Ok, that ended up a little too liberal. I checked some other files and it completely broke.

Think this would work? I am unable to make the stuff in blue work. So work around would be only spaces are allowed before the tick and after the opening function.

[Betanu701]

If you can test this for me. I will use it in my day-to-day see if I see anything odd.

branch

Find your extensions folder. navigate to digitalbrainstem.javascript-vue-* then replace the javascript-vue.json file in syntaxes folder. Then reload your VSCode windows.

[ehoogeveen-medweb]

So far so good! For my purposes not being able to have anything other than whitespace after the opening bracket of the function is fine, I only added those comments for reference in the first place. The one case that doesn't work is

const template = Vue.trimTemplate(`<div><!-- etc. --></div>`);

and variations on having an external variable like that. Would it be possible to also match [tT]emplate = and similar? I don't know if that's too general, but just matching on things ending in "template" or "Template" is probably enough to match all our existing uses.

[ehoogeveen-medweb]

I noticed that the extension seems to cause a syntax highlighting issue: With the extension enabled (right side), the data() method property becomes teal instead of yellow and "this.props" in the method() property becomes entirely white. Here's the testcase:

(function() {
  let myObject = {
    props: { },
    data() { },
    method() {
      this.props;
    },
  };
})();

I'm not sure what's causing the issue but the syntax highlighting works if I 1) remove the outer function, 2) move the myObject definition to a separate line from the myObject declaration, 3) introduce any uppercase letters into the properties or 4) use the long form syntax method: function() {}.

[ehoogeveen-medweb]

Actually, the syntax highlighting issue appears to be caused by this change: Fix naming for top level objects

Should I file a separate issue for it? Some files are affected pretty badly (worse than the example above).

[ehoogeveen-medweb]

FWIW, I started looking into this due to the syntax highlighting issue. Are the keywords-functions and keywords-object parts really needed? I can't figure out what function they serve.

By the way, I think it should be possible to greatly simplify things by inheriting the regular javascript syntax highlighting, but I wasn't able to figure out how to get it to apply to the begin and end matches. I must say I really hate this grammar syntax and the almost complete lack of documentation about the json variant of it. It's all well and good to mention embeddedLanguages in the Syntax Highlighting Guide, but how do they expect people to use it without any examples for the grammar?

[ehoogeveen-medweb]

I managed to get it working and created a pull request. Hopefully I did it correctly, I'm still not used to using Github!