Using Hype with Meteor.js


Has anyone here been able to use Hype with Meteor.js? I keep getting a null reference error when I add the javascript to the client/lib file.



For now, I’ve encapsulated it in an iframe, but am still curious if anyone has got any further with this.


I’m interested in using Hype to create the UI for my MeteorJS web app, where the idea is to generate the layout in MeteorJS and then manually edit in Sublime Text to add the template code to the document. It’s not working out the way I thought, however, as I can’t get the Hype page to load in my MeteorJS project.

Has anyone else attempted to use Hype and MeteorJS? I can find only one other post mentioning MeteorJS, and it’s unanswered. Any help is appreciated!


It looks like not many have gone down this route.

But if you post a project someone may be curious to look at it…

In general Hype has a garbage collection problem. This must be kept in mind when developing with reactive (shadow DOM) approaches and embedding Hype. Hype is currently not built for multiple reloads/rebuilds on a page without a hard refresh.

I did a garbage collection test here

The result is that the browser accumulates memory, listeners etc. and dynamic style sheets in the header.

When I was coding HypeTwineStage

I wrote at least a brute force routine to remove the duplicated stylesheets (jQuery version) attached:

    /* remove div's (css) from head */
    $("head").find("div").each(function() {
    /* "forget" Hype-documents */
    if (window.hasOwnProperty('HYPE')) {
        for (var n in window.HYPE.documents) delete window.HYPE.documents[n];

But this is only a temporary measure and works for limited amount of reloads relying on the browsers garbage collection. For Hype to work in dynamic views one would need a “real” native unload function to truly support reactive JS.

I am not seeing this appear soon but I am hoping on it for version 4.5 or 5.

@MaxZieb Do you know if this problem still exists (Hype’s garbage collection problem)? If I have a main hype document, and then set the inner html of an element in that main hype document to another hype document using an iFrame and then later set that element with the iFrame to empty; and repeat that a number of times loading other hype documents into the main one in a similar way, does that solve the problem? I’ve been doing that without problems so far, but I haven’t noticed, or even known how to see if it’s being removed from memory as you describe. Thank you Max for any insight you can provide around this.

Yes, it is still a problem. If you don’t run the action to many times the browser can handle it but using Hype in React or a Vue.js view might not be recommended.

You can do some rudimentary garbage collection (like removing thae dynamic CSS that is added to the head) as a hack but that is just the tip of the iceberg.

As a iFrame it might not do as much damage as the browser takes care of destroying all the content in there if it is detached.

Thanks @MaxZieb. So you’re saying that it should be fine if I load and remove iFrames that have Hype Documents inside of them. How do you test that the memory has been cleared?