XML3D, document.createElementNS, and Meteor

I posted this to the Meteor-Talk Google Group, but I figure that this is such an obscure question, it needs a signal boost.

I'm trying to create a plugin that let's you add XML-style elements to an HTML document, as is possible with HTML5, for use with XML3D. I think it'd be really awesome to render 3D content reactively with Blaze templates and XML3D.

I need to use the document.createElementNS method to add elements to the DOM in order to add them under an alternative namespace than SVG's, in order to experiment with the alternative specification.

Unfortunately, Meteor only supports that method for the SVG namespace, as per this code: https://github.com/meteor/meteor/blob/a81fbf483efa4f40ea2d382f0c7275d408536e96/packages/blaze/materializer.js#L41

I've considered two different approaches to doing this. I could either create a Template block helper, one that looks like this:

In Spacebars:

{{#xml ns="http://www.xml3d.org/2009/xml3d"}}
  <xml3d>...</xml3d>

In Jade:

+xml(ns='http://www.xml3d.org/2009/xml3d')
  xml3d ...

That piece is simple enough, but how could I deliver to Blaze-- and ultimately, the DOM-- the rendered contents, reactively, using the correct namespace?

Or, I could attempt to extend Blaze to support alternative namespaces somehow, perhaps by using a package. I'm not sure how to do this exactly either, since I don't think a package could extend Blaze. I did see BlazeTools, and maybe that could help? The documentation on what that did was rather sparse, and what the code actually did was not immediately obvious.

Or perhaps some combination of both approaches, say, using the block helper to signal to Blaze the XML namespace to render the contents of the block helper under.

Thoughts?

Solution

So, I'm not entirely positive this is a problem with Meteor, after all.

Meteor seems to be adding my elements effectively enough once I run the XML3D initialization code. I'm able to do quite a lot once XML3D is properly initialized, including making use of reactive templating.

I had to hack this bit of code together in my route controller, however...

Template.{insert-your-template-name-here}.rendered = ->
  window.initXML3DElement $('xml3d')[0]
  setTimeout ->
    $('canvas').attr
      width: 600
      height: 600
    $('canvas').parent().css
      display: 'block'
  , 1000

I hope that helps anyone stumbling upon this issue in the future. Additional comments and support is welcome, but I'm pretty happy with what I have at the moment.

I'll be writing a package that helps with this soon, and will upload it to Atmosphere.