anstarovoyt / intellij-riot.js

WebStorm Riot.js plugin

The plugin can be installed in WebStorm, IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, GoLand and RubyMine v2019.1 and above.

Installation

To install the plugin open the IDE Preferences | Plugins, then click Browse repositories... and search for Riot.js.

Plugin repository link

Features

• Support for ".riot" and ".tag" extension
• Parsing expressions inside xml-tags
• Navigation based on component names
• TypeScript
• SASS and SCSS

Known issues

• Riot 1,2,3 optional script tags are not supported
• Expression parsing uses pure stategy and doesn't allow nested braces "{" and "}"

intellij-riot.js's Issues

Riot 3 Optional script tag support

<Tag>
console.log("hello")
</Tag>

"this" context in expressions is not provided

https://riot.js.org/documentation/#syntax

The this keyword is optional:

{ name }

is valid as

{ this.name }

1. This context must be related to the exported default object
2. This context must be provided without "this" keyword

incompatible with IDEA 2023.1

incompatible with IDEA 2023.1

Escaping is not supported

<my-component>
  <input type='text' pattern="\d\{2}"> //here {2} is not a riot expression
</my-component>

does this work with coffeescript, pug, and stylus?

If it's possible, it would be an absolute dream

Navigation of basic HTML

Hi, thanks for your Webstorm Riot plugin!

This might be more of a question than an actual issue, sorry if it's in the wrong spot.

I'm using Riot 3 and navigation between components works quite well, the issue I'm seeing is that I lose basic HTML and CSS navigation. Do you know of a way that I can make sure both work correctly?

Sass support in style tag

This is in a similar vein to the TypeScript issue I reported (thanks for fixing that, it's been a huge help!). Would it be possible to do something similar when using Sass inside the Riot tag? You can use Sass via Riot's pre-processor hooks, and then marking up your template with something like <style type="sass"> or <style type="scss">.

Would this be possible? It's yet another case of WS just flipping out about things like this:

  <style type="sass">
    :host {
      display: block;
      height: 100vh;
      box-sizing: border-box;
      margin: 0;
      padding: 0;

      & * {
        box-sizing: border-box;
        }
    }
  </style>

Intelij distraction free view does not center the code for files using this plugin

PyCharm 2020.1.1
intelij-riot 1.0.11

Current behavior:

When a file extension is assigned to Riot Framework file type (3 or 4), then the editor will not center the file content in distraction free mode:

Expected behavior:

Riot Framework file types are centered in distraction free mode:
(screenshot is the same tag without a file type assigned)

Поддержка версии PS > 203

После обновления PHPStorm плагин отвалился:
Plugin "Riot.js" is incompatible (since build 203.5784.10 > PS-202.7660.42).

I want to use it with v2022.3

thanks for the great plugin
I'm using IntelliJ IDEA 2022.3 Beta now.
Could you please make it available in v2022.3

Typescript function overload issues

It seems that the Intellij Typescript compiler doesn't work properly in Riot.js files, the withTypes function overload confuses the IDE.
Moving this code in a .ts file doesn't seem to generate the same issues.

Notice that the above example passes also through the webpack ts loader without issues.

I am not sure it's a Plugin issue though, can we inform intellij about the problem?

Thank you

Incompatible with WebStorm EAP 2019.3

I am receiving a message talking about incompatible version of this plugin.

https://ibb.co/yRmc9S4

There are something that I can do to solve this ?

Ps: I did try to import your project, but I have never done Intellij plugins and don't know what to do about this.

Autocomplete props

Hi there!
Great plugin btw!
May I have a question? Or maybe feature request.
I've just discovered how to define props with TypeScript, but there's no autocomplete with the plugin. Using component in another component and component template.
State seems working.

Thanks in advance!

Completion inside component tags

<Test>
 <{caret}
</Test>

async riot methods are not recognized

I have problem in <script> in file.tag, when I use async function.

async removeFile(id) {
       await this.action({
           id: id
       });
}

Plugin added ';' after keyword 'async', when I changed file in other place.

Riot.js 3 support

Currently we support only Riot.js 4 syntax. Actually the difference between 3 and 4 is not so terrible and we can support some Riot.js 3 syntax

Syntax highlighting and other features do not work in Webstorm

All text remains white, and none of the features work in Webstorm. It works beautifully in IntelliJ though.

Nested literals are not allowed

<my-component>
  <p class={
    classNames({
      active: isActive,
      disabled: isDisabled
    })
  }>hello</p>
</my-component>

this code produces parser error because of pure parsing strategy

Enable Breakpoints

When setting .riot to the JS File-Type it is possible to set breakpoints and use the build in JS Debugger.
Any chance this could work for .riot files with this plugin?

TypeScript support

First and most importantly, thank you for this plugin!

I was wondering how possible it would be to TypeScript support for Riot 4, or at least in some way make WebStorm chill out about it.

TypeScript can be used as a pre-processor by registering it with the Riot compiler and then marking up the script block like this: <script type="ts">.