Importing ES Modules for Side Effects

Did you know that you can import JavaScript modules without having an Export? It is called Imports for Side Effects.
This tutorial explains how you can do them and use them.
Code from video: gist.github.com/prof3ssorSt3v...

[@cloudpuncher4615]

Thanks heaps... this is super handy... I'm glad you have started teaching Web Components.
I've been using them for years and recently have been experimenting with using them for SSR and have played with Qwik style resumable/ event driven JS loading....
This style dynamic import on a Custom Element would work really nicely with just in time Javacript...

[@kumailn7662]

Thanks for adding interesting information in my knowledge

[@khalilbenmeziane8836]

thank you steve

[@mishiranukao]

thank you sir for this knowledgeable video.

[@mouradelcadi]

Thanks so much))

[@bunnyboy7008]

Thanks! This is something which I was not aware of.
However, I've a question, since side effect imports, imports the whole file, do they cause namespace collision?

[@SteveGriffith-Prof3ssorSt3v3]

With side effects you are not actually importing anything from the module. You are running the side effect code only

[@ssikarim]

Thanks Steve. I appreciate your videos.
If the module contains a function with parameters, how to call this function from my "main.js"
I can't figure it out.

[@SteveGriffith-Prof3ssorSt3v3]

If you want to call a function then you need to export the function from the file and import the function into main.js

[@ssikarim]

Thanks Steve
My problem was with parameters.
I almost found the solution.

[@joel-rg8xm]

so, just to review, if my modules don't return anything like a FUNCTION does, and, they just execute some code like a METHOD does.. you don't have to "export" anything and still you can import that module to "SHOW" some content for example.
Am I right?

[@SteveGriffith-Prof3ssorSt3v3]

yes!

[@Tony.Nguyen137]

So it is the same as if I would write all the code in main.js file right? The benefit is that I can split my code

[@SteveGriffith-Prof3ssorSt3v3]

You can split your own code. That new code has its own scope too. It is protected from other scripts.
Additionally you can import and automatically run modules written by someone else.

[@Tony.Nguyen137]

@@SteveGriffith-Prof3ssorSt3v3 So I just checked the network tab of my browser, using @import is not the same as if I wrote all my code inside one 'main.js' file. If I use @import 'utils.js' in my 'main.js' file, the browser will load both files (utils.js and main.js), I thought the @import keyword would put all the code from 'utils.js' into my 'main.js' file. Isn't it actually bad that now -with the @import key- the browser has to load 2 files instead of 1?

[@aralroca]

Is there some way to run these esmodule scripts during HTML streaming time? Or is required iife without esm?

[@SteveGriffith-Prof3ssorSt3v3]

Modules are deferred by default. So, they get read and executed after the DOM is parsed. The scripts and modules are all fetched and executed in the order that they appear.
These are both deferred and then executed after the DOM is parsed.

[@aralroca]

@@SteveGriffith-Prof3ssorSt3v3 and is posible to modify this default? So I prefer to use ESM over iife, but also I want that the user can interact meanwhile the user see a "suspense" during html streaming. Is it that possible? 😬 Thanks anyway!!