Nicely Pruned Marigolds

    @softmotions/riot-typed
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    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

    Install

    npm i @softmotions/riot-typed

    DownloadsWeekly Downloads

    3

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    12.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • adamansky