Question about Javascript Communication sample

🌵 Needle Engine
1

Hi, I´m trying to reproduce the example with my proyect but I have a question about the next line (27,28) in the index.html :

Original Post on Discord

by user 632418299711324161

2 
// Import components, types, methods from packages in your project ("NpmDefs" in Needle Engine)
    import { ExampleManager, getRandomPower } from "@needle-tools/javascript-communication-sample";

For a standart project, in which the .ts are inside the Project/src/scripts , which would be the route for that import ?

by user 632418299711324161

3

Hi, it would be the same

4

Srry, What do you mean with the same ?

by user 632418299711324161

5

Can you rephrase your question? You have scripts in src/scripts and you want to import those scripts into another package? Or you want to import another package into scripts in src/scripts ?

6

I want to import those scripts into a HTML module in order to use them as the example of javascript comunication :

<script type="module" lang="ts">
    import "@needle-tools/engine";
    
    // Import components, types, methods from the Needle Engine core
    import { GameObject, NeedleEngine } from "@needle-tools/engine";

    // Import components, types, methods from packages in your project ("NpmDefs" in Needle Engine)
    import { ExampleManager, getRandomPower } from "@needle-tools/javascript-communication-sample";

    // This sample shows communication between the DOM (HTML) and the scene (Needle Engine) in both directions.
    // In a typical application, you'd probably want to keep responsibilities in one place - e.g. the UI components
    // should either be modified from here, or from inside the ExampleManager component, to keep things clean.

    NeedleEngine.addContextCreatedCallback(evt => {
        // Find our manager object in the scene
        const manager = GameObject.findObjectOfType(ExampleManager, evt.context);
        
        // Find our HTML button in the document ("DOM")
        const interactButton = document.getElementById("interact");

        // We can adjust HTML elements directly
        interactButton.textContent = `Interact with ${manager.objectsCount} objects`;
       
        interactButton.addEventListener("click", () => {

            // We can adjust HTML elements directly
            interactButton.textContent = `Interact with ${manager.objectsCount} objects`;

            // We can also call methods that are exported from our scene components
            const randomPower = getRandomPower();

            // Call a method on a specific object in the scene
            manager.interact(randomPower);
        });
});
  </script>
</head>

I would like to know which route Do I have to use in order to import my scripts from src/scripts

by user 632418299711324161

7

this is the line import { ExampleManager, getRandomPower } from "@needle-tools/javascript-communication-sample"; , and I want to know the route for my project, for the example this is the route : "@needle-tools/javascript-communication-sample"

by user 632418299711324161

8

You can import them like so from your index.html

<script type="module">
  import { MyScript} from "./src/scripts/MyScript.ts";
  console.log(MyScript)
</script>
9

Oh :sweat_smile: thanks marcel :+1:

by user 632418299711324161

10

Sure! :slightly_smiling_face: