I am trying to find best way to call some JS function that I declared from external JS file by its name. I am able to make it work using the following approach:

# define function at window level in external example_scripts.js file
window.some_function = function(params) => { ... };

#import example_scripts.js file in app.razor
<script src="_content/MyProject/example_scripts.js"></script>

# here we have some component where we pass name of JS function
# internally it will use JS Interop to call some other JS function from external project
# and pass the name of the JS function we declared to call
<MyComponent Script="some_function" />

# in another JS file in another project we call that function by its name stored in script property
window[script].call(null, params);

This works. Is there a way to make this work by using JS collocated file? The way I underwstood how it works from this document, collocated js files allows us to properly organize js files and avoids step of importing them. However, I am unable to make this work.

If I don’t import js file, when debugging the app I do not see anywhere this function/file generated (in Developer Tools -> Sources). If I publish the app, then I can see js file generated in bin/Release/{TARGET FRAMEWORK MONIKER}/publish/wwwroot/{PATH}/{COMPONENT}.razor.js, but it still cannot find it.

Anyone has any idea how to properly declare JS function in collocated js file, so that I can latter call it by name in another JS file?