Why is embedding so hard?

[jonathan (Jonathan Deutsch)]

Embedding in React is hard because we made focused embedding in normal HTML documents easy . It only requiring pasting 3 lines of code. Hype predates React, so the real question is why did React make it so hard to embed pre-existing libraries?

Ribbing aside, the easiest way to embed a Hype animation inside a React document is to include it as an <iframe>. If you tried this and it does not meet your needs I'd love to hear more on why and what the project requires?

@MaxZieb's comments strike at the heart of the matter; Hype's runtime manages its own DOM and doesn't like its elements being taken away from it. I would of course like Hype's runtime to interoperate better with React/Vue in a future release without using the iframe method.

However I'd like to give a few technical details/corrections:

@wmertens

The generated script executes immediately without a way to call it again, this breaks single-page applications with animations only on part of the site

It is correct that you cannot call it again, but it does not need to execute immediately. The only requirement is that the *_hype_generated_script.js file must be loaded after the *_hype_container div is created.

@wmertens

The generated script tries to load the hype library from where it was loaded itself, this breaks bundling

If the runtime is already loaded the *_hype_generated_script.js loader will not attempt to reload it. So it is okay for this to be in your head/be preloaded.

@wmertens

The hype library (version 674 at least) breaks in strict mode (it rewrites the argument list), this breaks minifying via Babel

I'd have to see the specific error, but I suspect the rewriting the argument list is probably part of our efforts in manual tuning of the minified code itself when we know a missing argument will be safe. Hype runtime is highly optimized for minification and already uses the Google Closure Compiler's highest setting which I would guess is still vastly superior to Babel's minifier. You shouldn't re-minify the code.

Should you ever want to export with unminified code (for the runtime and data+loader), you can use this terminal command:

defaults write com.tumult.Hype4 UseFullHypeJSTemplate -bool YES

and reset back via:

defaults delete com.tumult.Hype4 UseFullHypeJSTemplate

We won't be open-sourcing the runtime since managing open source contributions competing with goals of the application will lead to too much conflict, but I have no problem if folks want to look under-the-hood. While I enjoy a good hack, please note that modifications are entirely unsupported by Tumult.

Hopefully that gives a bit more of a peek; you will likely find that being able to do state preservation/restoration isn't something that would be a small change in the Runtime. We definitely know of the popularity of React/Vue and have your feedback on our Radar. Thanks!