HTML Button - hook up to Needle Export code from html end?

🌵 Needle Engine
1

I’m working with a html developer who is preparing html side buttons for me, and they want to use the same event listeners they register on their end in javascript to call functions my end, rather than me adding extra eventlisteners to the buttons myself which I was going to do.

In terms of approaching this, should I get hold of their javascript + html and put it all into my project so that their javascript can reference a function in my Needle code in the .ts classes I have somehow or do I need to expose something in the classes I am making for them to hook their code up to?

Original Post on Discord

by user 103054507105067008

2

Either would work.
They can get the engine element context (examples in the scripting docs) and use GameObject.findObjectOfType to get specific components of yours, you can make some static api that they can import and you control the methods (e.g. export functions in your npmdef for them to use) or you can call their global js functions or something else from your components

3

Personally i think the expose some api functions is the better approach

4

Is there any documentation or example of how to do the npmdef method?

by user 103054507105067008

5

Have u used npmdefs before?

6

Only imported them for classis or namespaces that were missing

by user 103054507105067008

7

They are basically a normal npm package. So you can define a entry point / main file (e.g. main.ts), in there you can export one or many functions or types.

E.g

export myFunction()…

Lets say your npmdef/package.json name is robs-package then your js dev can import it like so:

import { myFunction } from “robs-package” in his javascript module

8

I think there are some examples in the docs or samples. Maybe the html overlay sample uses it, im not 100% sure. The bike repo does it for sure and you have access as far as i know :slightly_smiling_face:

9

I’ll take a look and post back what I use here in case it helps others trying this :+1: Thanks for the tips

by user 103054507105067008

10

Thanks! :slightly_smiling_face:

11

@ROBYER1 i added a sample just now to the samples repository

12

the javascript interop scene just imports a method and a component from an npmdef package

13

hope it helps to get you started

14

Ah brilliant, will take a look at that

by user 103054507105067008

15

image.png
image.png1920×991 105 KB

16

The other way around would be similar depending on where or how your frontend dev works (if he puts his code inside a package or … )