Monday, January 6, 2014

Too Many Parts

I think I have done all I can to ready <ice-code-editor>, the Polymer version of the ICE Code Editor, for deployment. Despite best efforts, I cannot generate minified JavaScript, though the regular dart2js output works just fine. There is still a trick or two I would like to try.

First, I tried rebasing my polymer branch back onto my master branch, hoping some of the more recent changes might help with the minified output. It doesn't. I also tried minifying the dart2js output with both the YUI Compressor and Closure. Neither is able to parse the dart2js output. So again, I am stuck with the non-minified dart2js from yesterday.

At least I tried.

I have been working on the configuration chapter in Patterns in Polymer and, at the risk of treating that like a golden hammer, I am curious if I might be able to use that technique in this Polymer. It is not quite a direct application because that chapter works with configuration in the Polymer definition itself. Here, I would like to configure individual <ice-code-editor> elements. Specifically, I want to specify the data to be included in the in-page editor.

Currently, this is accomplished with a src attribute:
<ice-code-editor src="embed_a.html" line_number="21"></ice-code-editor>
Here, the emdeb_a.html is a separate resource that contains the content that is ready to edit and creates the preview:

This is currently retrieved via an HttpRequest, but perhaps something like a <link> import would work:
<ice-code-editor line_number="21">
  <link rel="import" href="embed_a.html">

But ultimately, I run into too many problems that are likely related to the underlying ICE Code Editor. The ICE Code Editor is meant to manipulate the DOM of the containing page. Placing the code in a document fragment like the one created by Polymer seems to be an effective way of keeping the ICE code from trying to manipulate the main document. But this <link> import gives the code access to the main document.

The result is that ICE puts the imported Three.js simulation directly on the page rather than in the editor:

This still seems like it might be a worthwhile approach. The import seems to be working—a little too good in this case—but it does seem as though data is imported. For now, I will stick with the src + HttpRequest import. But I will try the <link> import another day with a smaller Polymer.

Update: Added a live demo.

Day #988

No comments:

Post a Comment