stefanhoelzl/vue.py

Mixin pattern use case

meteozond opened this issue · 7 comments

meteozond commented

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 commented

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 commented

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 commented

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 commented

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 commented

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.

  • 👍1
meteozond commented

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.

  • 👍1
stefanhoelzl commented

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.

  • 👍1