Mixin pattern use case

[meteozond]

I've tested latest master changes with Mixin pattern (Regular Python mixins). Looks like only VueComponent children could be used as Mixins. Is it expected behaviour?

class FatherMixIn:
    @computed
    def my_computed(self):
        return 'Father'


class TemplateMixIn:
    template = '<div>Hello {{ my_computed }}!</div>'


class Child(FatherMixIn, TemplateMixIn, VueComponent):
    pass


Child('#app')

Error:

Error for module app
vuepy.js:9262 module {__class__: {…}, __name__: 'app', __doc__: {…}, __package__: '', __loader__: {…}, …}
vuepy.js:9263 $B.parser.$Node {type: 'module', children: Array(5), yield_atoms: Array(0), add: ƒ, insert: ƒ, …}
vuepy.js:9264 Error
    at _b_.AttributeError.$factory (eval at $make_exc (vuepy.js:7929:5), <anonymous>:41:354)
    at attr_error (vuepy.js:6844:26)
    at $B.$getattr (vuepy.js:6960:1)
    at get_wrapper_base21 (eval at run_py (vuepy.js:9261:14), <anonymous>:497:94)
    at f (vuepy.js:6598:30)
    at method (vuepy.js:6602:58)
    at get_wrapper_base21 (eval at run_py (vuepy.js:9261:14), <anonymous>:507:84)
    at f (vuepy.js:6598:30)
    at method (vuepy.js:6602:58)
    at __init__22 (eval at run_py (vuepy.js:9261:14), <anonymous>:582:374)
vuepy.js:9266 args ["'FatherMixIn' object has no attribute '__base__'", __class__: {…}, __brython__: true, __dict__: {…}]
vuepy.js:9266 __class__ {__class__: {…}, __mro__: Array(3), $is_class: true, $infos: {…}, $factory: ƒ, …}
vuepy.js:9266 $py_error true
vuepy.js:9266 $stack (8) [Array(4), Array(4), Array(5), Array(5), Array(5), Array(5), Array(5), Array(5)]
vuepy.js:9266 $line_info 63,vue.factory
vuepy.js:9266 __cause__ {__class__: {…}, __hashvalue__: 0}
vuepy.js:9266 __context__ {__class__: {…}, __hashvalue__: 0}
vuepy.js:9266 __suppress_context__ false
vuepy.js:9267 Traceback (most recent call last):
  File http://127.0.0.1:5000/__main__ line 1, in <module>
    import app
  File http://127.0.0.1:5000/app.py line 38, in <module>
    Child('#app')
  File http://127.0.0.1:5000/vue/vue.py line 64, in __new__
    init_dict = cls.init_dict()
  File http://127.0.0.1:5000/vue/vue.py line 61, in init_dict
    return VueComponentFactory.get_item(cls)
  File http://127.0.0.1:5000/vue/factory.py line 58, in get_item
    return cls(wrapper).generate_item()
  File http://127.0.0.1:5000/vue/factory.py line 70, in __init__
    self.base = self.get_wrapper_base(wrapper)
  File http://127.0.0.1:5000/vue/factory.py line 66, in get_wrapper_base
    return cls.get_wrapper_base(base)
  File http://127.0.0.1:5000/vue/factory.py line 63, in get_wrapper_base
    base = wrapper.__base__
vuepy.js:9268 message: undefined
vuepy.js:9269 filename: undefined
vuepy.js:9270 linenum: undefined
vuepy.js:9271 line info undefined
vuepy.js:5380 handle error {__class__: {…}, __mro__: Array(3), $is_class: true, $infos: {…}, $factory: ƒ, …} ["'FatherMixIn' object has no attribute '__base__'", __class__: {…}, __brython__: true, __dict__: {…}]
vuepy.js:6254 Traceback (most recent call last):
  File http://127.0.0.1:5000/__main__ line 1, in <module>
    import app
  File http://127.0.0.1:5000/app.py line 38, in <module>
    Child('#app')
  File http://127.0.0.1:5000/vue/vue.py line 64, in __new__
    init_dict = cls.init_dict()
  File http://127.0.0.1:5000/vue/vue.py line 61, in init_dict
    return VueComponentFactory.get_item(cls)
  File http://127.0.0.1:5000/vue/factory.py line 58, in get_item
    return cls(wrapper).generate_item()
  File http://127.0.0.1:5000/vue/factory.py line 70, in __init__
    self.base = self.get_wrapper_base(wrapper)
  File http://127.0.0.1:5000/vue/factory.py line 66, in get_wrapper_base
    return cls.get_wrapper_base(base)
  File http://127.0.0.1:5000/vue/factory.py line 63, in get_wrapper_base
    base = wrapper.__base__
AttributeError: 'FatherMixIn' object has no attribute '__base__'
vuepy.js:5380 handle error {__class__: {…}, __mro__: Array(3), $is_class: true, $infos: {…}, $factory: ƒ, …} ["'FatherMixIn' object has no attribute '__base__'", __class__: {…}, __brython__: true, __dict__: {…}]
vuepy.js:6254 Traceback (most recent call last):
  File http://127.0.0.1:5000/__main__ line 1, in <module>
    import app
  File http://127.0.0.1:5000/app.py line 38, in <module>
    Child('#app')
  File http://127.0.0.1:5000/vue/vue.py line 64, in __new__
    init_dict = cls.init_dict()
  File http://127.0.0.1:5000/vue/vue.py line 61, in init_dict
    return VueComponentFactory.get_item(cls)
  File http://127.0.0.1:5000/vue/factory.py line 58, in get_item
    return cls(wrapper).generate_item()
  File http://127.0.0.1:5000/vue/factory.py line 70, in __init__
    self.base = self.get_wrapper_base(wrapper)
  File http://127.0.0.1:5000/vue/factory.py line 66, in get_wrapper_base
    return cls.get_wrapper_base(base)
  File http://127.0.0.1:5000/vue/factory.py line 63, in get_wrapper_base
    base = wrapper.__base__
AttributeError: 'FatherMixIn' object has no attribute '__base__'
vuepy.js:5389 Uncaught Error
    at _b_.AttributeError.$factory (eval at $make_exc (vuepy.js:7929:5), <anonymous>:41:354)
    at attr_error (vuepy.js:6844:26)
    at $B.$getattr (vuepy.js:6960:1)
    at get_wrapper_base21 (eval at run_py (vuepy.js:9261:14), <anonymous>:497:94)
    at f (vuepy.js:6598:30)
    at method (vuepy.js:6602:58)
    at get_wrapper_base21 (eval at run_py (vuepy.js:9261:14), <anonymous>:507:84)
    at f (vuepy.js:6598:30)
    at method (vuepy.js:6602:58)
    at __init__22 (eval at run_py (vuepy.js:9261:14), <anonymous>:582:374)

[meteozond]

Look like there are some other failing MRO use cases. @stefanhoelzl, is interesting for you? or may be you don't plan to make vue.py MRO compatible like vue.js does? I'm asking because MRO is a very powerful code reuse concept and could make front-end development much more easier.

[stefanhoelzl]

Please refer to the Mixins section in the documentation.

It re-assembles the vue.js style of Mixins instead of the pythonic way. It may be a nice to have, to detect Mixins also in the list of base classes, to have a more pythonic experience.

[stefanhoelzl]

In general:

• inheritance from a single class is possible using Vue.extend (see docs)
• inheritance from multiple classes is possible with VueMixin (as mentioned above see docs)
• currently other uses of inheritance from multiple classes may break vue.py

[meteozond]

Unfortunately both Vue.extend and Vue.Mixin functionalities are very limited and require huge time and brain contribution to use it. It won't make any difference with regular JS front-end development.
That's why I was so excited with ability of using Python with its MRO in browser.
And that's why I'm wondering weather you have any plans to make vue.py MRO compatible. If so - I can collect more cases and may be write some tests. If not - I'l stop bugging you :)

[stefanhoelzl]

There are no plans, in fact I do not work actively on vue.py anymore. Only take care of small bugs, if someone reports, like you did.

I guess adding MRO might not be so easy, if not impossible.
vue.py may look like Python but in the end is is only a pythonic-layer to create vue.js objects.
vue.py takes the python classes apart, and re-assembles them as vue.js objects. So in the end, it can only achieve what vue.js can do/offer.

Feel free to open tickets for issues you find, or even try to fix them. But I can't spend too much time digging into them.

[meteozond]

Thanks, looks like VueMixins are definitely MRO compatible. There was a sad typo in example preventing their usage.

I am going to play around with it.
This case is ok at first glance, and it is awesome.

class MyMixin1(VueMixin):
    @computed
    def value1(self):
        return 'value1'


class MyMixin2(VueMixin):
    @computed
    def value2(self):
        return 'value3 ' + super().value2()


class MyMixin3(MyMixin2):
    @computed
    def value3(self):
        return 'value3 ' + super().value2()


class MyMixin4(MyMixin1, MyMixin3):
    template = '<b>{{value1}}, {{value2}}, {{value3}}</b>'


class SomeComponent(VueComponent):
    mixins = [MyMixin4]

BTW. I've tried to dive into your code but, but unfortunately couldn't figure out the logic of bunch of factories and decorators. It would be nice to have some design describing docstrings.

[stefanhoelzl]

FYI: just pushed some changes to master, renaming factory.py to transformers.py, refactored it and added a bit of docstrings. Not much yet, but it may help a bit to understand the logic.