Hype Data Magic - maxziebell

This is Hype Data Magic (actually was planned as Hype Data Fill 2) but since I started working on it again duo to client tasks and it just feels like Magic using it… I renamed it. It helps you connect data sources to Hype projects and adds a live preview. I moved the stable code to GitHub but if you want to see a development version (including some fancy stuff like indexes and fetchData) then visit the version that resides on Gumroad. I can’t make any promises on how or if these feature will make it into the stable release but your welcome to try and use them.

I decided to release the core version for free so donations (look at my profile) or GitHub sponsoring is very welcome! Specially if you use it commercially and want to return the favor.

Check out the trailer:

Examples:

https://gum.co/yvjKd

GitHub:

The official place to download and use this extension from is now GitHub:

https://github.com/worldoptimizer/HypeDataMagic

Create your own data handlers

HypeDataMagic.addDataType could also be nicely used to fetch some external data …

Data types are more to be thought of like a decorator pattern. They are applied and receive the endpoint of data assignment. Hence, you can use them to animate a chart or assign data according to your needs (or load a video etc.) but they need an initial dataload to be triggered in the first place. The types will probably be chainable using the pipe symbol to further add to the decorator aspect. If the data also becomes chainable (not sure about that yet) the data would have to be made immutable (deep copy) before each refresh cycle to avoid weird behaviors. Still, not implemented.

One open question: should data types be called data types or data handler. Internally I call them handler and that would be more in the spirit of chainable entities. Types feel more like an 1:1 assignment.

Things that need to be done in the next drop is to debounce mutations as Hype has a very generous and frequent update policy on them but Hype Data Magic uses them as triggers and hence the bare minimum would be more desirable.

The final thing will be the mentioned immutable aspect of data on each update. Meaning that we always fetch a fresh deep copy before passing it to the handlers. Changing data would then be a deliberate act through setData or an additional interface.

For most cases, one wants to use the handler at the HypeScenePrepareForDisplay level. In some cases involving the full Hype API (like triggering animations) one would want the handler to fire using HypeSceneLoad. So, at least two triggers will be needed. Either with the one handler and the event.type or two handlers for each circumstance. I’ll investigate.

There was also some code refactoring done and some custom behavior commands have been added for your convenience. Happy exploring and do let me know what you think.

Example loading data through JSON

This is possible and is even easier with the auto-refresh (v1.3.3) when setting data. See the following example:
simple_fetch_example_with_hype_data_magic.hype.zip (41,6 KB)

This example is with a simple fetch that loads from resources without any preloader or error handling (easy to add, though). Nothing fancy, but it should demonstrate the case. The code snippet used is:

// element - DOMHTMLElement that triggered this function being called
// event - event that triggered this function being called
function fetch(hypeDocument, element, event) {
    // load data using fetch 
    fetch('${resourcesFolderName}/test.json')
        .then(response => response.json())
        .then(data => {
            HypeDataMagic.setData(data);
        });
}

PS: You can also directly include data (head) or use JSONP to avoid any Cross-Origin-Policies.