Process child custom tag

[Kiho]

Can you explain how I can convert the code below to typescript?

    riot.tag('raw', '<span></span>', function(opts) {
        this.root.innerHTML = opts.r;
    });

[nippur72]

it should be something like this:

@template("<raw><span></span></raw>")
class RawElement extends Riot.Element {
   constructor(opts) {
      super();
      this.root.innerHTML = opts.r;
   }
}
RawElement.register();

[Kiho]

I think it's correct if it is stand alone. But I like to convert code in this page to typescript - https://github.com/vinnyroundfoot/Riot-Table

@template("elements/rtable.html") class Rtable extends Riot.Element { // ............ constructor(opts) { super(); this.on("mount", () => { this.init(); }); }

init = function () {
    // ............
    riot.tag('raw', '<span></span>', function (opts) {
        this.root.innerHTML = opts.r;
    });
    // .............
    return this;
};

// .............

};

Rtable.register();

[nippur72]

in other words Rtable defines another element called "raw". Just define/register it before Rtable, e.g.:

class RawElement ....
RawElement.register(); //

class RTable ...
RTable.register();

and you can drop it from the init function.

[Kiho]

That's working for me, actual problem was caused by Visual Studio IDE. When I pasting HTML template, some variables were lowercased. VS does not like RiotJS's loop syntax.

Thanks.

[Kiho]

I am done converting here - https://github.com/Kiho/Riot-Table# Thanks again.

[nippur72]

Regarding the VS IDE, it's a shame, the TypeScript editor setting has a lot of bugs, I used to open issues on the typescript repo, but they fixed only one.

Regarding Riot-Table, very nice work. BTW, RiotTS has helper functions for lifecycle methods, so if you want you can write it this way:

/* instead of
constructor(opts) {
        super();
        this.on("mount", () => {
            this.init();
        });
    }
*/

// just this
mounted() {
   this.init();
}