Hype DataFill (reactive dataset to class mapping)

Simple project to get text previews using data set values. If the browser supports Mutation Observer the dataset keys stay reactive. There is certainly better ways to implement reactivity with a object based two-way data storage like in React or Vue instead of distributed datasets, but it is a demo on getting feedback direct in the IDE and using the additional HTML-attributes panel provided by Hype.

Usage: After registering the dataset keys with HypeDataFill.mapDatasetToClass for example HypeDataFill.mapDatasetToClass('headline', '.data-headline'); every element below an element that has a data-headline and has the class .data-headline will have the content defined under data-headline.

Source
HypeDataFill.js
HypeDataFill.min.js

Download Example
HypeDataFill.hype.zip

Demo Example
HypeDataFill.html

Version history
1.0 Initial release under MIT-license
1.1 Added option to set initial value

2 Likes

Little sidenote: Hype by default sets the dataset values on every scene load. I am using that fact as it triggers the observer and creates all values. Downside is though, the Hype-Runtime always sets the values you “hardcoded” in the IDE. For most simple cases it’s no problem but if you want to use the reactive nature of this beyond the scene scope you currently need to refrain from defining the value in the IDE. I added an example on how to create a persistent value “user”. In the long run some built in persistent option would be cool with IDE preview.

Still a valid conclusion but workaround is now baked in to Hype DataFill 1.1

↑ look at project
1.1 Added option to set initial value
Example also updated…

Preface: This is only a concern for consistency across scenes… if you only plan to update values in a scene or update them on scene load anyway… this 1.1 update and notes are nothing you have to think about.

Example: You mapped data-user to the class .date-user with HypeDataFill.mapDatasetToClass('user', '.data-user'); in your Head HTML. Whenever you assign data-user on a group or symbol all children with the class .date-user will be updated. If you are doing this assignment in the IDE it will be set by Hype on every scene load. To avoid that just set .date-user-initial instead.

Explanation of initial-clause: All values set with the attribute panel in Hype are persistent duo to the Hype runtime refreshing them on each scene load. This little “genie” at work might be what people expect using the IDE but it certainly isn’t how programmers updating values per script would expect things to behave. Hype DataFill 1.1 now has a baked in workaround for this… just add “-initial” to your attribute entry (for example data-user-initial given your key is normally data-user). Then this value will only be set as an initial value and honor updates done via script like yourElement.dataset.user = "Max Musterman"; across scene transition. They are anyway honored in a scene context either way.

Future thoughts: Maybe mappings hypeDocument specific as all mappings are currently on the Hype Document level and affect every Hype-Document on that page the same way.

1 Like

Uuups, the link to the zip file seems to be broken…

Fixed

1 Like