Using an external text editor and custom js functions?

Hi Everyone,

I hope some experienced Hype users can help me with a few workflow questions.

I do all my coding in Sublime text (with Vi key bindings) and would love to use Sublime for coding with Hype.
I have three questions related to this:

  1. Is it possible to configure Hype to use a external text editor?

  2. What’s the best way to integrate custom functions into Hype? What I’ve been doing so far is something like this:
    a. Add my custom function to the resources.
    b. Use a “Run JavaScript” Action to create a custom internal Hype function.
    c. Tell the Hype function to call my external custom function, like this:

    function customHypeFunction(hypedocument, element, event) {
    myCustomExternalFunction(hypedocument, element, event)

Is that the best way?

  1. I write a lot of code that is shared and re-used with a team of people. It makes a lot of sense for us to create generic, easily customizable scripts (for things like drag-and-drop) that we can use in multiple projects. What’s the best way to for us to share common code like this? Write custom functions and add them to the resources? Or, link the functions to the document’s <head> with a <script> tag?


question two: -> have a look at the hype-extension-thread. described there is a nice method to add custom functions/methods to the hypescope. host the created script as a ‘library’ with own cdn …

question one: @hypeteam wouldn’t it be nice to create a port / plugin that offers hyperedit as external editor for hype¿ #dollarsdollarsdollars :wink:

1 Like

@h_classen Thank you!
Is this the thread you are referring to?

That looks like an interesting way to write extensions, but I’m actually just looking for a simple way to write a function with an external text editor, link it to Hype, and have access to the hypeDocument scope within that function.

me too :slight_smile:

Hey d13, have you had any issues working with external js this way, or have you found another option?
Using sublime for my gsap animations would be the best workflow.

Hi @sirhclluk!

No, I gave up trying to do this and have just been writing all my JS in Hype.
Yes, it’s painful, but I decided that if I have to write a lot of custom JS, Hype is probably not the tool I should be using.
I now try to limit my use of Hype for what it’s really good at: code-free, visually rich interactivity and animations, with very minimal custom code.
So over the last few months I’ve been writing my heavy applications in JS (or, for more complex apps, Elm) and then using iFrames to pull in focused Hype components.

I personally think Hype handles JS very well.

But for me the only reason to be able to edit Hype functions in external editor is things like
code folding
code completion
live syntax error reporting
paired brackets double clicking

And it would be good if we could export/import the Hype Function ( as Hype functions ).

On the latter, I am thinking I could probably write a script to add a selected function file to a hype project plist file as a function…

mmm, I did a simple test in adding a function as a Hype function. It actually worked ( as I expected it would :grin:)

The one thing I am unclear about is the oid in the dictionary. I just gave a number (10) since I already had 6 and 8 for the other two functions that were in the project.

@jonathan can you give me some more details on this oid. and what it is use for and how the number is chosen.
As you can see adding an external function as an Hype function is relatively easy.

(So much so that it would be good if this was included as a option in Hype to add a function)

“mmm, I did a simple test in adding a function as a Hype function. It actually worked ( as I expected it would :grin:)”

Could you explain what you mean by this? Sounds interesting!

You would do this when the project is closed.

Each project has a data.plist inside it’s contents package.
(I have played with these before when I wanted to do a quick change of a var name that occurred in a lot of functions and
did not want to have to ’ click function, find word, replace word’ so many times, so I just ran a find replace over the plist file)

In the plist is the whole setup for the project. This includes scripts

The scripts is an array of dictionaries.
Each dictionary holds two strings.
an oid and the actual function code.

So as a test I added a Hype function to the project in the normal way via Hype.
I did that bit just to make sure the scripts array was in the data.plist.

I then closed the project and opened the plist file in an editor.

Found the scripts array and added a child dictionary with the child strings.

The code was simply:

	function customHypeFunction(hypedocument, element, event) {
console.log('hello world')

and the oid was 10.

This works and it is something I could probably automate. But I would rather have it included as a real option of hype

1 Like

Interestingly a open Hype project monitors changes to it’s plist file , and live updates.