Interpret `<script type="x-magento-init">` as JSON syntax

[lbajsarowicz]

Is your feature request related to a problem? Please describe.

I would like to get the validation of the <script type="x-magento-init"> as JSON in PHPStorm

Describe the solution you'd like (*)

When I create node <script type="x-magento-init"> I would like to get this validated as a JSON syntax, as well as have hints provided.

Describe alternatives you've considered

Manual configuration of PHPStorm.

Additional context

We can also cover data-mage-init too

[m2-assistant]

Hi @lbajsarowicz. Thank you for your report.
To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[ihor-sviziev]

@coderimus any progress on this? Really waiting for it

[dkorpar]

PHPStorm preferences / editor / language injections / (import icon) and add content:

<LanguageInjectionConfiguration>
  <injection language="JSON" injector-id="xml">
    <display-name>Magento JS Components</display-name>
    <place><![CDATA[xmlTag().withLocalName(string().equalTo("script"))]]></place>
    <xpath-condition>@type=&quot;text/x-magento-init&quot;</xpath-condition>
  </injection>
</LanguageInjectionConfiguration>

This will parse it as JSON, but I ran into problems with not recognizing PHP code inside it.

[DmitryFurs]

@coderimus any updates?

By default now it looks like this

But if we configure the inspection that @dkorpar described, then if there is php code inside, we get the following situation

In case where the php expression is wrapped in double quotes these errors disappear

Also, ctrl+click to jump to the reference only works in the case of wrapped quotes. But quotation marks are not always necessary, for example, if we want to pass a strictly numeric value, or a boolean value true or false.

[bohdan-harniuk]

Hello, @coderimus, @DmitryFurs, @ihor-sviziev, @dkorpar, @lbajsarowicz.

I've implemented this feature.
You can check description of the related PR if it is what you expected for.

This feature will be delivered in the upcoming release: 4.2.2.

Regards,

[andrewbess]

Hello @bohdan-harniuk
It looks great.
However I think it would be better to have a possibility to disable this feature.
How do you think can we add checkbox for it in next release (>=4.2.3)?

[bohdan-harniuk]

Hello, @andrewbess!

It is possible. I guess we can add it in the 4.3.0 release.
So let's keep this issue opened.

Regards,

[bohdan-harniuk]

Hello, @DmitryFurs, @ihor-sviziev, @dkorpar, @VitaliyBoyko, @andrewbess, @coderimus, @Iamwade!

We have added missed check if the Magento 2 integration is enabled (it will be included in the next release, 4.3.0. For now with plugin installed highlighting will work even if Magento 2 integration is disabled for a project).

Please, help us to decide, if we need to add separate ability to enable/disable uiComponent script highlighting if magento integration is enabled.

Please, use 👍 to approve this idea and 👎 to leave highlighting enabled just if integration is enabled.

Regards,