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.

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
Closed

Ember doesn't support SVG #5021

benlesh opened this issue Jun 13, 2014 · 11 comments

Comments

@benlesh
Copy link
Contributor

@benlesh 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
Copy link
Member

@machty machty commented Jun 13, 2014

paging @mixonic

@stefanpenner
Copy link
Member

@stefanpenner stefanpenner commented Jun 13, 2014

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

@benlesh
Copy link
Contributor Author

@benlesh 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
Copy link
Member

@rwjblue rwjblue commented Jun 13, 2014

I believe he meant until.

@stefanpenner
Copy link
Member

@stefanpenner 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
Copy link
Contributor Author

@benlesh 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
Copy link
Member

@stefanpenner 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
Copy link
Member

@mixonic 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
Copy link
Member

@stefanpenner 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
Copy link
Member

@wagenet wagenet commented Aug 1, 2014

Closing since this will be fixed with HTMLBars.

@wagenet wagenet closed this Aug 1, 2014
@benlesh
Copy link
Contributor Author

@benlesh 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants
You can’t perform that action at this time.