Where to put Helper Functions

Hi, where is the best place to put helper functions in Hype?

I’d love to keep them in the Resource Library, but when I ‘Add JavaScript Function’ there, I can’t seem to add parameters in addition to the required ‘hypeDocument, element, event’.

In the attached, Arithmetic.hype.zip (19.6 KB) a simple helper function in the Head HTML returns the value of an input or its placeholder if nothing has been input.

Is putting helper functions in the Head HTML best practice?

You can put them into the global window scope or into the local hypeDocument scope.

window.myFunction = function(a,b){return a+b;}

or

hypeDocument.myFunction = function(a,b){return a+b;}

Thanks @MaxZieb, not knowing where I should put these, I tried creating a function called helperFunctions() in the Resources library and used your hypeDocument.myFunction to define the helper function that was working in the Head HTML within that. That didn’t work so I tried then calling helperFunctions() ‘On Scene Load’, but it still doesn’t seem to work - see attached Arithmetic.hype.zip (19.5 KB) .

Where should I enter these through the Hype interface?

Hope this helps to make things clearer…

Arithmetic_MaxV1.hype.zip (22,3 KB)

Hope the document answers that question…

About the why…

Javascript is all about scope… specially the modern versions. So being able to compartmentalize your code is key. Putting stuff into a global scope is one way to go but has the risk of interfering with other things on a multifaceted page environment. Defining things in the hypeDocument scope limits the added functions to the scope of that specific hype widget instance and gives you access to the hypeDocument API. Also it is passed into every Hype function scope you create in the app so you get a handle to trigger it.

More on scope can be found here:
https://www.w3schools.com/js/js_scope.asp

2 Likes

Thank you very much, that’s absolutely wonderful. I see where I was going wrong.

1 Like

Glad it helped!

If you ever want to take it up a notch further look at symbol based components like this example …

And the extension category in general
https://forums.tumult.com/c/extension-project