Help needed for understanding imports in the widget Examples.

[ChristopherEverett]

I am a Javascript newb, and thought it would be relatively straightforward to pick up how the language worked from looking at the examples. The syntax is pretty familiar, but what I'm struggling to get is how importing works.

Taking a look at simple-bar/config.js I see several imports that seem to use what I've come to learn are URIs, but I have no idea if it's necessary to import in this way, and if so where to find the correct URIs to use. For example, the first import is:
import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';

If I were to follow this example would I need to change this line, and if so to what? Would it be sufficient to just use import Hyprland? If it is optional, what is the benefit of using one over the other?

I don't know why I'm getting hung up on this part of the code, but I feel like not understanding what's going on here is keeping me from focusing on the rest of it, and I'd love a little help.

[Aylur]

the resource path is pointing to the compiled and installed source of ags
resource:///com/github/Aylur/ags/service/hyprland.js points to src/service/hyprland.ts
the available files are listed in the gresource xml
more on module here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

the examples haven't been updated yet, but you no longer need to import from these paths, because Widget, Service, Utils, Variable, App are now in the global scope

import Widget from 'resource:///com/github/Aylur/ags/widget.js' // this line can be removed
Widget.Window() 

to import services you can use Service.import, which is shown on each service's wiki page
for example hyprland

import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js' // old
const Hyprland = await Service.import('hyprland') // new

[ChristopherEverett]

Awesome, thank you for the explanation and the resources!