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

In React, modules should be imported using the import statement like import ModuleName as * from 'module-name' or import ModuleName from '../ModuleName depending on if you're using ES6/7 and how the module is exported.

This applies to each separate file, which means each component, assuming you have them in separate files.

I believe this works differently with Svelte components; I'd suggest that this is really two questions: one about React and one about Svelte.

I'll leave it to someone else to answer the Svelte question.

EDIT: So we're clear: you don't need to import modules that won't be explicitly used in single-file components, even if you'll need them when you actually use the component. They only need to be present in files where they are explicitly used. Again, this applies to React.

Svelte is based on it's own template system which uses .svelt files so I'm guessing this process is different, but I'd assume you do the imports inside your <script> tags following similar guidelines.