Compile RiotJS tags

[justintaddei]

I am using RiotJS is my app and would like to pre-compile the .tag files.

Below is an example of my code, and the error that is thrown.

I have been searching all day for an answer to this with no luck. If anyone can point me in the right direction that would be excellent.

import riot from './riot+compiler.js';

import '../riot/app-bar.tag';

Uncaught Error: Couldn't find a compiler for C:\Users\justi\Desktop\Projects\jMenu\src\riot\app-bar.tag
    at CompilerHost.fullCompileSync (C:\Users\justi\Desktop\Projects\jMenu\node_modules\electron-compile\lib\compiler-host.js:641:13)
    at CompilerHost.compileSync (C:\Users\justi\Desktop\Projects\jMenu\node_modules\electron-compile\lib\compiler-host.js:484:77)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Users\justi\Desktop\Projects\jMenu\node_modules\electron-compile\lib\require-hook.js:68:48)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\justi\Desktop\Projects\jMenu\src\js\main.js:7:1)
    at Object.<anonymous> (C:\Users\justi\Desktop\Projects\jMenu\src\js\main.js:16:3)

[malept]

You'd have to add RiotJS support to electron-compilers and electron-compile.

[justintaddei]

@malept buy "add RiotJS support" do mean fork the project, or does electron-compile have a way to add custom compilers that I'm not aware of?

[malept]

I meant, submit a PR.

[justintaddei]

Okay, that's what I meant too.

Thank you

[gshegosh]

Hi, I'm struggling to make riot work with electron-compile. I've copied and modified the vue compiler and also added entry to rig-mime-types, but tags are not compiled. Have you ever made it work?

[justintaddei]

I did get it to work after a really long time. Not really sure what I did though 😂

Here's everything I know:

.compilerc looks like this

{
  "env": {
    "development": {
      "application/javascript": {
        "presets": [
          [
            "env",
            {
              "targets": {
                "electron": "1.7.0"
              }
            }
          ],
          "es2015-riot"
        ],
        "plugins": [
          "transform-async-to-generator"
        ],
        "sourceMaps": "inline"
      }
    },
    "production": {
      "application/javascript": {
        "presets": [
          [
            "env",
            {
              "targets": {
                "electron": "1.7.0"
              }
            }
          ],
          "es2015-riot"
        ],
        "plugins": [
          "transform-async-to-generator"
        ],
        "sourceMaps": "none"
      }
    }
  }
}

.babelrc

{
    "presets": [
        "es2015-riot"
    ]
}

I can't remember what else I did. But I must warn you, getting the compiler to work will be the least of your troubles. That's why I've switched to hyperHTML... it just works. (And the switch is pretty easy too because it uses a very similar syntax to RiotJS.)

[gshegosh]

It turned out that Riot already has a solution for this. They use require.extensions to register .tag files so they can just be require()d. THAT'S what was preventing my electron-compiler plugin from working :) And that's what I use now.

So, I have index.js file such as this:

import * as riot from 'riot';
import requireAll from 'require-all';

requireAll({
  dirname: `${__dirname}/tags`,
  filter: /.tag$/,
  recursive: true
});

riot.mount('*');

And it just works. I don't like crippled JS syntax available in Riot's single-file tags, so for each of my tags I have two files - my.tag and my.js. The former contains HTML markup and local styles. The latter contains all of the tag code, in proper ES6. To include it, at the end of each .tag file I'm putting this line:

    require(__filename.replace('.tag', '.js')).default.bind(this)();

I haven't found a way to automate it (yet) - any suggestions are welcome.

Then I just put into my.js:

export default function() {
  // here "this" is the tag instance, so things like this.on('mount'), etc. can be used
};

Overall it works well. I love Riot so I'm happy I can keep on using it with Electron.