joylei/riot-typed

a tiny wrapper layer for riotjs to write riot tags with benefits of typescipt

Why riot-typed

Write riotjs tags in a more oo-way with benefits of typescript

How to use

install

support [email protected].

npm install -g typescript
npm install -g typings

npm install --save-dev riot-typed

install riot typed definitions

typings install -DG github:Joylei/riot-typed/src/riot.d.ts#2ca54b484694b133cbe6f58347242f6a1e273e17

install riot-typed typed definitions

typings install -DG github:Joylei/riot-typed/src/riot-typed.d.ts#2ca54b484694b133cbe6f58347242f6a1e273e17

usage

let's define a tag

//file: tags/app.ts
import {tag, Tag} from 'riot-typed';
@tag('app', '<h1>{title}</h1>')
class App extends Tag<any>{
  title:string;
  constructor(){
    this.title = 'Hello riot-typed!'
  }
}

let's mount the tag

//file: main.ts
import 'tags/app';
riot.mount('app');

override

It's possible to override definition properties: tmpl|attrs|css.

//file: logger.ts
import {tag, Tag} from 'riot-typed';

@tag('logger',{ tmpl: '<p class="color" each="{ item in logs }">{ item }</p>', css: '.color{color:gray;}' })
export default class Logger extends Tag<any>{
    logs: string[];

    constructor(){
        super();

        this.logs = ['line 1', 'line 2'];
    }
}

override css definition only:

//file: error-logger.ts
@tag('error-logger',{ css: 'error-logger .color{color:red;}' })
export default class ErrorLogger extends Logger{
    constructor(){
        super();

        this.logs.push('!!!Error!!!');
    }
}

examples

please see examples for more information.

tag() decorator

tag(tagName: string, tmpl?: string | { tmpl?: string, css?: string, attrs?: string })

restrictions

please see riot.tag() for restrictions.

License

MIT

riot-typed's Issues

Event.preventUpdate (suggestion)

Hello, thank you for this project :)

I am using the riot-typed package that is currently published on the NPM repository ( https://www.npmjs.com/package/riot-typed ), but instead of using Typings I simply reference your main Riot type definitions from my top-level declarations.d.ts:

/// <reference path="../node_modules/riot-typed/src/riot.d.ts" />

I added this simple extension so that the preventUpdate property (which RiotJS attaches to DOM events) is typed properly:

declare interface RiotEvent extends Event {
    preventUpdate: boolean;
}

Say I have the following Riot Tag specification:

<riot-mytag>
  <button onclick="{ onclickButton }">butt</button>
</riot-mytag>

...I can then use the RiotEvent in place of MouseEvent (or more generally, lib.dom.Event):

    // 'this' type is RiotTag
    this.onclickButton = (ev: RiotEvent) => {
        console.log("CLICK button");

        ev.preventUpdate = true;
    };