Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vue.js: browser.html: expose attribute name mapper #1187

Closed
Andrei-Pozolotin opened this issue Aug 11, 2019 · 8 comments
Closed

Vue.js: browser.html: expose attribute name mapper #1187

Andrei-Pozolotin opened this issue Aug 11, 2019 · 8 comments

Comments

@Andrei-Pozolotin
Copy link

  1. see BUG: works only once: If the attribute contains a hyphen (-) it must be replaced by an underscore (_)  #1186

  2. vue.js likes crazy html attribute names:
    https://vuejs.org/v2/guide/events.html

  3. please expose attribute name generator:
    https://github.com/brython-dev/brython/blob/master/www/src/builtin_modules.js#L225

  4. so that the following convention
    v_on_click -> v-on:click
    can be implemented:

from browser.html import BUTTON
button = BUTTON('hello-kitty', v_on_click='count++')
  1. such than final html becomes:
<button v-on:click="count++">hello-kitty</button>
@PierreQuentel
Copy link
Contributor

For this issue, as well as for #1186, you can use

button = BUTTON("hello-kitty", **{"v-on:click": "count++"})

Instead of the replacement of underscore by hyphen, which is questionable because it doesn't allow names with underscores as attribute names, it would probably be better to remove it, and mention the syntax above for attribute names that are not valid Python names. What do you think ?

@Andrei-Pozolotin
Copy link
Author

re: **{"v-on:click": "count++"}
yes, already using this now, just feels ugly, and looking for a better way

@PierreQuentel
Copy link
Contributor

I don't think it's so ugly and I will document it, but what do you mean by "exposing attribute name generator" ? Can you give an example of the API you would like for that ?

@PierreQuentel PierreQuentel mentioned this issue Aug 13, 2019
Closed
@Andrei-Pozolotin
Copy link
Author

the api would be direct regex mapper:

regex pattern -> regex replacement

for example, for v_on_click -> v-on:click, which covers most vue.js directives:

<body onload="brython({ 
   debug : 1, 
   html_attr_mapper : {
      'v_([a-z]+)' : 'v-$1',
      'v_([a-z]+)_([a-z]+)' : 'v-$1:$2',
      'v_([a-z]+)_([a-z]+)_([a-z]+)' : 'v-$1:$2.$3'
   }
})">

@PierreQuentel
Copy link
Contributor

I don't agree with this suggestion :

  • it would mean adding a new parameter to the function brython(), just for one module (browser.html), and for a use case which is not so current and can be handled by the **{} syntax
  • developers would have to use the Javascript regular expression syntax, which is not the same as Python's ($1 instead of \1 for reference to matched groups)

Another solution would be to define a function attribute_mapper in module html, used to transform keyword parameters passed to the classes defined in this module. By default it would only replace underscores by hyphens, but it could be set to another function:

import re
import browser.html

def vue_attr(attr):
    return re.sub("^v_(.*)_(.*)$", "v-\1:\2", attr)

browser.html.attribute_mapper = vue_attr

html.BUTTON(v_on_click="count++")

Would that be ok ?

@Andrei-Pozolotin Andrei-Pozolotin mentioned this issue Aug 13, 2019
Closed
@Andrei-Pozolotin
Copy link
Author

re: browser.html.attribute_mapper = vue_attr
yes, this is a very good idea, thank you:

PierreQuentel pushed a commit that referenced this issue Aug 13, 2019
In module browser.html, add function attribute_mapper (cf. issue #1187)
3c24b36
@PierreQuentel
Copy link
Contributor

I think the commit above fixes the issue, it not feel free to reopen it.

Thanks for the report !

@Andrei-Pozolotin
Copy link
Author

yes, that should fix it. please release? :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Andrei-Pozolotin @PierreQuentel