↑ look at project
1.3.5 Function in data constructs are now resolved, new handler 'variables' resolves to customData, exposed default 'handler', to change use HypeDataMagic.setDefault('handler', 'text'), new default 'customData' is used to init hypeDocument.customData (in addition to old 'customDataForPreview'), new default 'allowDataFunctions' is set to true and allows for functions in data, new default 'allowVariables' is set to true and allows for variables in default handlers image and text, exposed low-level functions resolveVariablesInString, resolveVariablesInObject and cloneObject
This release adds another layer of data in form of custom data variables (can also be tweaked to use other sources using the default 'variables'). Given some data like:
HypeDataMagic.setData({
greeting: 'Hello ${userName}, welcome!',
});
You can assign greeting as usual to a rectangle by assigning it with data-magic-key set to greeting. New is the possibility to update partial strings with variables.
The variable ${userName} will be substituted from the default variable source hypeDocument.customData. So, if you set hypeDocument.customData.userName = 'Max' and subsequently refresh using hypeDocument.refresh() the display will be updated.
Variables are mapped to hypeDocument.customData and can also be set from outside Hype using the already established
HypeDataMagic.setDefault('customDataForPreview', {
userName: 'Max'
})
and the now new
HypeDataMagic.setDefault('customData', {
userName: 'Max'
})
The difference being that the new option sets the custom data beyond only the preview.
The new variable allows nested notation. Given some custom data like:
HypeDataMagic.setDefault('customData', {
user: {
name: 'Max',
age: 46,
gender: 'male',
loves: [
"Tumult Hype",
"classical music"
]
},
})
variables can reference the data as follows, ${user.name}, ${user.age}, ${user.gender}, ,${user.loves[0]}, ${user.loves[1]}. As you can see, you can mix object and array notation just like in magic keys.
Another new thing is that data can contain functions. This is totally optional and can also be disallowed if you feel strongly about it. Given you assign your data through JavaScript, defining a branch using a function allows creating data or sub-branches dynamically. These functions don't accept any parameters, but given the context you define them in (like Hype function or Hype Events) you can even use hypeDocument in the function itself.
HypeDataMagic.setData({
dynamic: function(){
return {
data: 'I am a random number: '+Math.round(Math.random()*100)
}
}
});
The data-magic-key would be dynamic.data and result in the text I am a random number: 34'… with the number changing on every refresh. The same also works for variables.
${resourcesFolderName} is now substituted if found in an unresolved form. Hype currently doesn't resolve the variable in external JS files, and at least this little workaround resolves it as a variable inside of Hype Data Magic keys when displayed with default handlers. If you have a custom handler, you can just chain your handler behind the new variables handler.
Just set data-magic-handler and set it to variables, myhandler for example.
I just realized that the ${variable} syntax collides with template literals. But, I am keeping the syntax and for that special case my suggested workaround is…
To avoid immediate substitution in such cases, use a substitution like 
instead of $ and replace it:
var myLiteralString = `
✨{variable} is
in this
template
literal`.replace('✨', '$');
I might add an alternative like this for template literal built into Hype Data Magic in a future version.
