Mixins. This could be an easy thing to implement #536

emehrkay · 2015-03-25T04:40:21Z

I was playing around with the idea of having mixins with the tags because I found myself need that kind of functionality. I took a look at the compiler and it would only take a few changes to make it happen.

In the compiler we simply return this in the mktag function

      function mktag(name, html, css, js) {
        return 'riot.tag(\''
          + name + '\', \''
          + html + '\''
          + (css ? ', \'' + css + '\'' : '')
          + ', function(opts) {' + js + '\n return this \n});'
      }

Then in the Tag constructor, you'd simply set that return to a temp variable when mounting

    // initialiation
    //fn && fn.call(self, opts) // existing code
if (fn){
  var func = fn.call(self, opts)
  if('mixins' in func){
    each(func.mixins, function(mix){
      extend(self, mix)
    })
    delete func['mixins']
  }
}

And finally in you define your mixin (object literal) and tag and finally mount it all

    <test></test>
    <script>
    var Mixin = {
        'some_member': 'some mixin value',

        alertFromMixin: function(){
            alert(' alert from mixin')
            console.log(this)
        }
    }
    riot.mount('test')
    </script>

<test>
    <div>
        <a href="#" onclick={ alertFromMixin }>should trigger mixin</a> 
        <a href="#" onclick={ otherFunc }>interal</a>
    </div>

    <script>
        this.mixins = [Mixin]

        otherFunc(){
            alert('from definition '+ this.some_member)
        }
    </script>
</test>

This approach allows for multiple mixins

    <test></test>
    <script>
    var Mixin = {
        'some_member': 'some mixin value',

        alertFromMixin: function(){
            alert(' alert from mixin')
            console.log(this)
        }
    }

    var SecondMixin = {
        fromSecond: function(){
            alert('alert from second mixin')
        }
    }
    riot.mount('test')
    </script>

<test>
    <div>
        <a href="#" onclick={ alertFromMixin }>should trigger mixin</a> 
        <a href="#" onclick={ otherFunc }>interal</a> 
        <a href="#" onclick={ fromSecond }>second mixin</a>
    </div>

    <script>
        this.mixins = [Mixin, SecondMixin]

        otherFunc(){
            alert('from definition '+ this.some_member)
        }
    </script>
</test>

What do you all think?

GianlucaGuarini · 2015-03-25T07:11:31Z

You have access ti the window properties inside your tags so you can just use it to share your mixins accross several views

<script>
window.myMixins = {
  hello: function() { return 'hello'; }
}
</script>
<test>
    <div>
        <a href="#" onclick={ window.myMixins.hello }>should trigger mixin</a> 
        <a href="#" onclick={ otherFunc }>interal</a> 
        <a href="#" onclick={ fromSecond }>second mixin</a>
    </div>
</test>

emehrkay · 2015-03-25T10:35:22Z

That doesn't solve the problem. In my example the mixin's members becomes members of the Tag instance.

I modified the source and put it up as an example. If you click "second mixin" you'll see that it has access to the tag's methods. Those methods are also passed around with the tag instance, whereas the global ones are not.

http://jsfiddle.net/8tqfn0rn/1/

You'll get an alert right away and an error. The error is from trying to call the global mixin on the tag instance. The alert is from calling the mixed in method on the instance.

emehrkay · 2015-03-26T02:47:35Z

Here is a better example:

http://jsfiddle.net/8tqfn0rn/4/

eyy · 2015-03-26T11:19:42Z

What about Object.assign(this, mixin, mixin)?

EDIT: Or event better, give the mixin access to the tag events

function myMixin (tag) {
  tag.on('unmount', ...)
  tag.msg = 'hi there'
}
function anotherMixin (tag) {
  tag.on('update', ...)
}
riot.tag('timer', '<span>{ msg }</span>', function(opts) {
  myMixin(this)
  aontherMixin(this)
  // or
  [ myMixin, anotherMixin ].map(m => m(this))
})

emehrkay · 2015-03-26T18:16:40Z

Object.assign isnt widely supported, you'd need a shim. Whereas what I did to Tag.mount is clone the mixin and add its members to the Tag instance.

Your second approach would require a lot from the developer. Im not saying that is a bad thing, but Riot is simple, which is what I love about it, but your approach has given me an idea. What if the tag simply supplies a mixin method that takes an array of objects to fold in

//inside Tag

this.mixin = function( mixins ){
  each(mixins, function(mix){
      extend(self, mix)
    })
}

Then in your tag definition, you simply call it (just like your map example)

<tag>
    <html><some html ...></html>

    this.mixin([FirstMixin, SeconMixin, ...])
</tag>

I like this new approach more. Existing tag definitions wouldn't need to be updated and we still get the mixin behavior

I like the Tag constructor providing a mixin member. Same example as above

http://jsfiddle.net/8tqfn0rn/5/

GianlucaGuarini · 2015-04-24T20:40:13Z

@emehrkay why don't you make a pull request with some tests?

emehrkay · 2015-04-24T21:11:45Z

I'll do it this weekend

Sent from my iPhone

On Apr 24, 2015, at 4:40 PM, Gianluca Guarini notifications@github.com wrote:

@emehrkay why don't you make a pull request with some tests?

—
Reply to this email directly or view it on GitHub.

cognitom · 2015-05-08T10:01:50Z

I've started to use mixin in riot-bootstrap and realized it's useful 👍
https://github.com/cognitom/riot-bootstrap/tree/dev

It seems more convenient if Riot.js has the way to share the mixins in the application. For example:

// my-mixin.js
riot.mixin('myMixin', {
  message: 'Hello!'
})

// my-tag.tag
<my-tag>
  <p>{ message }</p>
  this.mixin('myMixin')
</my-tag>

@tipiirai How about?

UPDATE: slightly changed the code and made PR about this.

emehrkay mentioned this issue Apr 14, 2015

Plugin system #416

Closed

GianlucaGuarini mentioned this issue Apr 26, 2015

Riot next #648

Closed

15 tasks

emehrkay mentioned this issue Apr 27, 2015

I may be wrong here, but riot.mount doesn't work with riot+compiler.js when manually defining tags via riot.tag #653

Closed

cognitom mentioned this issue May 8, 2015

Provide the standard way to share mixins over files #694

Merged

GianlucaGuarini added enhancement fixed feature request labels May 13, 2015

GianlucaGuarini closed this as completed May 21, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mixins. This could be an easy thing to implement #536

Mixins. This could be an easy thing to implement #536

emehrkay commented Mar 25, 2015

GianlucaGuarini commented Mar 25, 2015

emehrkay commented Mar 25, 2015

emehrkay commented Mar 26, 2015

eyy commented Mar 26, 2015

emehrkay commented Mar 26, 2015

GianlucaGuarini commented Apr 24, 2015

emehrkay commented Apr 24, 2015

cognitom commented May 8, 2015

Mixins. This could be an easy thing to implement #536

Mixins. This could be an easy thing to implement #536

Comments

emehrkay commented Mar 25, 2015

GianlucaGuarini commented Mar 25, 2015

emehrkay commented Mar 25, 2015

emehrkay commented Mar 26, 2015

eyy commented Mar 26, 2015

emehrkay commented Mar 26, 2015

GianlucaGuarini commented Apr 24, 2015

emehrkay commented Apr 24, 2015

cognitom commented May 8, 2015