Hype Data Magic

MaxZieb · September 6, 2020, 9:47pm

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.

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

h_classen · August 1, 2020, 6:44am

even with preview

MaxZieb · August 1, 2020, 6:58pm

I just realized I forgot to expose the refresh handler to the external API. Just add refresh: refresh, to it and call it with the document.documentElement when needed. If you would do that you can even load external data with the live preview if you trigger a refresh after loading is complete with HypeDataMagic.refresh(document.documentElement). In the next update I will add this. Also, the data magic keys are reactive. So, resetting them with a new value refreshes the sub tree and the node with the new values even in the published version. Like the data-magic-branch. So, sliders, here we come.

Update: This makes me think that I will implement full loading capability into the extension taking the need out of figuring out how to connect to external data providers.

h_classen · August 1, 2020, 12:54pm

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

MaxZieb · August 1, 2020, 6:55pm

Data types are more to be thought of like an 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.

h_classen · August 2, 2020, 8:20am

noticed that too ... had three executions of the dataType-callback where to expect one.

MaxZieb · August 2, 2020, 8:17pm

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.

Update: So, I am in the process of refactoring the code a bit. The main difference being that the mutation-based updates become optional for the exported version. This removes the asynchronous nature and allows me to fire them much more precise. The handlers will now be fired twice but there will be a way to distinguish between scene prepare and load events.

Update2: If you are wondering why I am observing contenteditable in the IDE version. I discovered last fall that you can inject HTML and a double click makes the new content permanent in the current document. I even coded an extension called HypeClickEmbed and another HypeTemplateVars. I never released them as this would depend too much on an unsupported hack/quirk to be used in production even though it offered some neat possibilities. In this case I am actively avoiding this behavior. Meaning, that preview text becomes part of the save file by deleting any content when you double-click a linked rectangle.

h_classen · August 5, 2020, 6:52am

good catch

MaxZieb · August 5, 2020, 8:20am

Yes, if your interested I can DM you that code but no warranty.

Concerning the extension Hype Data Magic... I fixed most issues and will be releasing the new version ASAP (probably today). I’ll post a ping here and all people that downloaded it on Gumroad will also be notified.

MaxZieb · August 5, 2020, 10:29pm

↑ look at project
1.1 Uncoupled refreshes from mutations
1.2 Refactored data handler and IDE preview

I was hard at work updating Hype Data Magic to become more stable. I still consider it "unfinished" but it is slowly getting there. That said, please play around with the update and send me feedback on the forum if you feel like it.

I was still contemplating if I integrate a built-in data loader for external files. Also, I want to add more examples in the near future like a slider, chart or the mentioned example for consuming external JSON with a live preview.

MaxZieb · August 7, 2020, 11:35am

↑ look at project
1.3 added data-magic support for innerHTML and lots of preview fixes

This release concerns mainly the broken live preview and adds a new option to add data-magic-keys into innerHTML instead of in the attribute panel.

Hint: to check if the export contains any static text portions (user imputed and not dynamic) you can always just make a regular test export and enable the inclusion of text in the document for search engines. Then inspect the file to see what text is actually found by Hype in the document. You will see that most of the text in the current test files is really not in the Hype file and actually only a preview directly from you data source. When using the new innerHTML feature only a placeholder is kept for readability. Open for suggestions on the later.

MaxZieb · August 14, 2020, 2:59am

↑ look at project
1.4 Improved previews, added index helper, fetchData

Some of the new things that are included are improved previews, added index helper and the ability to fetch data from online sources. Make sure to read about CORS to enable local testing with Safari for the forum examples here: https://github.com/worldoptimizer/HypeCookBook/wiki/Accessing-external-APIs-from-Hype-Previews

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.

MaxZieb · September 6, 2020, 11:05pm

I have been busy but this project hasn't been forgotten. I was already exploring some advanced use-cases (indexes and fetchData) in the file found on Gumroad but after returning to the project today I strip all the fancy stuff and released a stable core version ready for production to GitHub. The version number of the GitHub core release now reset to v1.0 to reflect the standalone release. The core release, includes a CDN options, a doxdox documentation and a getting started guide in the GitHub README: