DEV Community

Ryan Westlund
Ryan Westlund

Posted on

Disadvantages of Javascript import

In the project I learned Lit-Element from, coding convention is to use Javascript modules and exports. Our util.js and similar files export their names, and other files use import {thisFunc, thatFunc} from './util.js' etc.

This approach has at least two very annoying consequences:

  • The names aren't in global scope, so I can't access them from devtools.

  • When I start using a new name in a component's file, I have to also add it at the top, and I frequently forget. The problem is compounded by Javascript's utter lack of compile-time sanity checking, meaning I have to sit through a 3 minute build process just to find out I have a name error. Contrast a Python-like import system where you can just specify the module name and get all the names inside it, still without any namespacing issues.

Having thoughtlessly copied the system when I migrated my own website to Lit-Element and dealing with the consequences has made me seriously consider alternative ideas:

  • Have util.js or whatever module just be a script that defines all its names on the window, so I can just run import './util.js' and all the components can get them all. No more errors and wasted debugging time.

  • Have util.js add all of the functions it defines to a single object and add that to the window, resulting in longer names but less risk of namespace collision. My own website's use case probably doesn't need this over the first, but it might be better anyway for clarity's sake.

Does anyone else who uses modern JS and web components do either of these? Are there any good reasons not to? What's the real point of exports and imports over adding stuff to the window?

Discussion (13)

Collapse
evanplaice profile image
Evan Plaice • Edited on

No. I don't do that.

I don't define globals unless a dependent module (ex PrismJS) requires them.

Build delays are a tooling, not a WC issue. I build vanilla WC so no build step is required.

As for devTools access, you can access WC from within the console by grabbing a reference off the DOM. Either with getElementById() or querySelector().

For Example

const component = document.querySelector('custom-wc')
console.dir(component);

If you map all custom attributes to properties on the WC you should be able to get/set them using JS.

I hope that helps

Collapse
yujiri8 profile image
Ryan Westlund Author

I don't think you understood the question. Accessing the custom elements from the DOM is easy, but I can't access functions I import in the component files from a util file.

Collapse
evanplaice profile image
Evan Plaice

Are the functions methods of the component class?

Thread Thread
yujiri8 profile image
Ryan Westlund Author

No

Collapse
sebastianoscarlopez profile image
Sebastian Oscar Lopez • Edited on

Maybe an aproach you like is

import * as utils from './util.js'

so you can do smothing like utils.thisUtilFunc(123)

Collapse
yujiri8 profile image
Ryan Westlund Author

Wow, I forgot that was even a thing! I think I read about the syntax originally and then found out about how 'bare' imports aren't supported in browsers, and in the long quest to find a transpiler solution I forgot about it. Although this still has the downside of not making them available in devtools.

Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

When I start using a new name in a component's file, I have to also add it at the top, and I frequently forget.

Solution: Use VSCode. Intellisense will auto-import it for you.

Collapse
yujiri8 profile image
Ryan Westlund Author

I suppose this is an advantage of IDEs, but it's not going to switch to a completely new editor for it.

Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

But then one could argue that this complaint is not legitimate because it applies to any language that requires importing libraries or modules of any sort. If you're not using an IDE that supports auto-importing, then it's obviously up to you to import it.

Thread Thread
yujiri8 profile image
Ryan Westlund Author

In Python, you can just import the module name and get all its names and without any namespace issues (I wrote this before I remembered that in Javascript import * as ... is a thing). So in light of that yeah that complaint wasn't legit, but my other complaint was that when you import them instead of attaching them to the window, you can't access them in devtools.

Thread Thread
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Ah, okay, I see what you were getting at

Collapse
leob profile image
leob

You say "The problem is compounded by Javascript's utter lack of compile-time sanity checking" - sounds like what you want is Typescript? :-)

Collapse
yujiri8 profile image
Ryan Westlund Author

Ha, yeah, I should probably get around to learning typescript :)