Passing javascript function vs use imports in Svelte or React component

Question

I wanted to use some function from javascript module in one of my component. Should I pass it in props when making the component or should I just use Imports in component itself to get the javascript function?

Example of Passing in Svelte component:

Proxy.js

var Proxy = {
    test: function() {
        .....
    }
}

export default Proxy;

Dashboard.svelte

<script>

export let Proxy;


// use Proxy test function now
</script>

Example of import JS

Proxy.js

var Proxy = {
    test: function() {
        .....
    }
}

export default Proxy;

Dashboard.svelte

<script>
import Proxy from "../Proxy.js"

// use Proxy test function now
</script>

Which is better way to do in svelte components or any frontend code for that matter?

Answer 1

If you plan to use your Proxy module inside of the <script /> section, then you will need to use import just like you would do with any other javascript module.

The export keyword used here is special when using Svelte.js. You use it to receive props in your components. Since it appears that Proxy is not a prop for a svelte component, then you wouldn't use export to include it.

When using React, you would also use import. The use of export in React is the same as in regular javascript, you don't use it for props.