1 Star 0 Fork 0

joylei / riot-typed

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

Why riot-typed

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

NPM version NPM downloads MIT License

How to use

install

support typescript@2.4.2.

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

About

a tiny wrapper layer for riotjs to write riot tags with benefits of typescipt expand collapse
TypeScript
MIT
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
TypeScript
1
https://git.oschina.net/wowin/riot-typed.git
git@git.oschina.net:wowin/riot-typed.git
wowin
riot-typed
riot-typed
master

Search