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.

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

Ember doesn't support SVG #5021

Closed
benlesh opened this Issue Jun 13, 2014 · 11 comments

Comments

Projects
None yet
6 participants
@benlesh
Contributor

benlesh commented Jun 13, 2014

The problem(s)

  1. Ember creates DOM elements from HTML partials by wrapping them in a <div></div>, and getting the firstChildElement. The problem with this is all SVG nodes must be created in an <svg></svg> to function properly, as they are from a different name space.
  2. Ember relies on JQuery for class name changes and binding. JQuery uses className to set classes internally. This doesn't work for SVG elements, because the className property is an SVGAnimationString and behaves differently.

Proposed solution

  1. Expose wrapMap in main.js to allow external scripts to add all of the appropriate mappings for SVG elements.
  2. Create a third or second party script that then adds the appropriate mappings and patches JQuery to properly support SVG.

Current workarounds

Manually updating ember.js wrapMap to support the proper SVG element mappings, using jquery.svg.js and jquery.svgdom.js plugins to support SVG in jquery.

NOTE: jquery.svg.js and jquery.svgdom.js seemed to break when jquery was updated recently. So it seems to be a sub-optimal fix.

@machty

This comment has been minimized.

Show comment
Hide comment
@machty

machty Jun 13, 2014

Member

paging @mixonic

Member

machty commented Jun 13, 2014

paging @mixonic

@stefanpenner

This comment has been minimized.

Show comment
Hide comment
@stefanpenner

stefanpenner Jun 13, 2014

Member

I believe this is something we wont consider supporting until HTMLBars lands..

Member

stefanpenner commented Jun 13, 2014

I believe this is something we wont consider supporting until HTMLBars lands..

@benlesh

This comment has been minimized.

Show comment
Hide comment
@benlesh

benlesh Jun 13, 2014

Contributor

@stefanpenner you won't consider supporting SVG in HTMLBars?

Either way, I need to do this, because Netflix needs reusable Ember components that rely on SVG. So if we must maintain forks, we must, I guess.

Contributor

benlesh commented Jun 13, 2014

@stefanpenner you won't consider supporting SVG in HTMLBars?

Either way, I need to do this, because Netflix needs reusable Ember components that rely on SVG. So if we must maintain forks, we must, I guess.

@rwjblue

This comment has been minimized.

Show comment
Hide comment
@rwjblue

rwjblue Jun 13, 2014

Member

I believe he meant until.

Member

rwjblue commented Jun 13, 2014

I believe he meant until.

@stefanpenner

This comment has been minimized.

Show comment
Hide comment
@stefanpenner

stefanpenner Jun 13, 2014

Member

@blesh bug erik to get HTMLBars to land: https://github.com/ebryn?tab=contributions&period=weekly <-- lots of availability i see :trollface:

Member

stefanpenner commented Jun 13, 2014

@blesh bug erik to get HTMLBars to land: https://github.com/ebryn?tab=contributions&period=weekly <-- lots of availability i see :trollface:

@benlesh

This comment has been minimized.

Show comment
Hide comment
@benlesh

benlesh Jun 13, 2014

Contributor

Well, until then, the world keeps turning. :) I don't want to add all of the svg nodes to the wrapMap in Ember directly, I think that's invasive bloat. I'd like to just have a way to extend the wrapMappings somehow.

Either by exposing the wrapMap on a global like Ember.wrapMappings, or having Metamorph look for a configuration object on the window to mixin to the existing wrapMap.

Contributor

benlesh commented Jun 13, 2014

Well, until then, the world keeps turning. :) I don't want to add all of the svg nodes to the wrapMap in Ember directly, I think that's invasive bloat. I'd like to just have a way to extend the wrapMappings somehow.

Either by exposing the wrapMap on a global like Ember.wrapMappings, or having Metamorph look for a configuration object on the window to mixin to the existing wrapMap.

@stefanpenner

This comment has been minimized.

Show comment
Hide comment
@stefanpenner

stefanpenner Jun 13, 2014

Member

@blesh i believe that path will result in improvements, I would hate to see duplicate efforts hence my above stance. If a community member has time/energy and isn't interested in helping push htmlbars over the finish line. They are welcome to persue it.

Member

stefanpenner commented Jun 13, 2014

@blesh i believe that path will result in improvements, I would hate to see duplicate efforts hence my above stance. If a community member has time/energy and isn't interested in helping push htmlbars over the finish line. They are welcome to persue it.

@mixonic

This comment has been minimized.

Show comment
Hide comment
@mixonic

mixonic Jun 13, 2014

Member

@blesh I've got SVG working in HTMLBars with this PR tildeio/htmlbars#41 but we're holding off on a merge until I take a stab at some issues to support compile("{{{someSVGElements}}}");. Similar to some of the same issues covered by wrapMap.

I can confidently say we will support SVG in HTMLBars. I don't see how you can have great, flexible support for SVG with just Handlebars, but there is surely a way to hack it. I do not think it is worth turning wrapMap into a public API to support it in the interim.

Member

mixonic commented Jun 13, 2014

@blesh I've got SVG working in HTMLBars with this PR tildeio/htmlbars#41 but we're holding off on a merge until I take a stab at some issues to support compile("{{{someSVGElements}}}");. Similar to some of the same issues covered by wrapMap.

I can confidently say we will support SVG in HTMLBars. I don't see how you can have great, flexible support for SVG with just Handlebars, but there is surely a way to hack it. I do not think it is worth turning wrapMap into a public API to support it in the interim.

@stefanpenner

This comment has been minimized.

Show comment
Hide comment
@stefanpenner

stefanpenner Jun 13, 2014

Member

@mixonic we can make it a private api, but expose it for hacking. This will provide an interim solution for those who are adventurous and need the feature.

we can throw many underscores at it.

Member

stefanpenner commented Jun 13, 2014

@mixonic we can make it a private api, but expose it for hacking. This will provide an interim solution for those who are adventurous and need the feature.

we can throw many underscores at it.

@wagenet

This comment has been minimized.

Show comment
Hide comment
@wagenet

wagenet Aug 1, 2014

Member

Closing since this will be fixed with HTMLBars.

Member

wagenet commented Aug 1, 2014

Closing since this will be fixed with HTMLBars.

@wagenet wagenet closed this Aug 1, 2014

@benlesh

This comment has been minimized.

Show comment
Hide comment
@benlesh

benlesh Aug 1, 2014

Contributor

"HTMLBars"

html bars

Contributor

benlesh commented Aug 1, 2014

"HTMLBars"

html bars

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment