foobar.ts

// セレクタビルダー、スペルミス回避のため、の？

class Foo {
    state: string;
    constructor(s: string) { this.state = s; }
    bar(s: string) { return new Bar(`${this.state}${s}`); }
    anyTag()    { return this.bar('*'       ); }
    button()    { return this.bar('button'  ); }
    header()    { return this.bar('header'  ); }
    img()       { return this.bar('img'     ); }
    li()        { return this.bar('li'      ); }
    nav()       { return this.bar('nav'     ); }
    noTag()     { return this.bar(''        ); }
    output()    { return this.bar('output'  ); }
    p()         { return this.bar('p'       ); }
    textarea()  { return this.bar('textarea'); }
    ul()        { return this.bar('ul'      ); }
}

class Bar {
    state: string;
    constructor(s: string) { this.state = s; }
    foo(s: string) {
        if (s === '') {
            return new Foo(`${this.state} `);
        } else {
            return new Foo(`${this.state} ${s} `);
        }
    }
    withClass(s: string) {
        if (s.startsWith('.') || s.startsWith(':')) {
            this.state += s;
        } else {
            this.state += '.' + s;
        }
        return this;
    }
    withId(s: string) {
        if (s.startsWith('#')) {
            this.state += s;
        } else {
            this.state += '#' + s;
        }
        return this;
    }
    and()        { return this.foo(','); }
    child()      { return this.foo('>'); }
    next()       { return this.foo('+'); }
    descendant() { return this.foo('' ); }
    active() { return this.withClass(':active'); }
    focus()  { return this.withClass(':focus' ); }
    hover()  { return this.withClass(':hover' ); }
    scope()  { return this.withClass(':scope' ); }
    toString() { return this.state; }
}

function fb() { return new Foo(''); }

/*
驚くほどに可読性悪い・・・(スペルミス回避のためだけに使うのは微妙ぽ)

selector:
    header > nav li button
builder:
    fb().header()
        .child().nav()
        .descendant().li()
        .descendant().button()
        .toString()


selector:
    header > nav > output
builder:
    fb().header()
        .child().nav()
        .child().output()
        .toString()


selector:
    .memo > ul
builder:
    const MEMO = 'memo';
    fb().noTag().withClass(MEMO)
        .child().ul()
        .toString()


selector:
    .timeline > ul
builder:
    const TIMELINE = 'timeline';
    fb().noTag().withClass(TIMELINE)
        .child().ul()
        .toString()


selector:
    #hoge > ul
builder:
    const HOGE = 'hoge';
    fb().noTag().withId(HOGE)
        .child().ul()
        .toString()

*/