import-js icon indicating copy to clipboard operation
import-js copied to clipboard

Add support for adding custom elements

Open mikabytes opened this issue 5 years ago • 3 comments

Based on #550, this PR indeed adds support for importing files that define custom elements. It has a few quirks though.

Quirks

  • I want it to be treated as a named export, but JavaScript doesn't allow me to specify such metadata. The consequence is that imports can be added, but not matched or removed.
  • Correct me if I'm wrong, but it seems ImportJS doesn't have support for "that which has a name but is not a named export". My solution is horrible, adding it as a named export and then stripping it away as a side-effect later.
  • I lacked the energy to write tests for this. I will, but first, I would like to invite your comments on what I've done so far.
  • I'm not too happy about the way I'm checking the type-of-export based on the adding <> characters to the name. I AM happy about using <> to have ImportJS give me distinct messages about importing a custom element though.
  • I didn't find a suitable way to traverse the AST to find all the statements, so I got lazy and used a regular expression instead. This means that it will incorrectly import files where this statement has been commented out.
  • No configuration option to disable this feature (yet)

One idea

Maybe we could add support for "that which has a name but is not named in JS spec" as a comment? Maybe something like:

import './my-custom-element.js' // <my-custom-element>

OR

import /* <my-custom-element> from */ './my-custom-element.js'

Separating multiple named exports with comma. Or something. I'm happy to hear your ideas.

other

Not too bad for 3 hours work on a foreign codebase.... :)

mikabytes avatar Feb 14 '20 15:02 mikabytes

Apologies for the delay here! I hope to have a look at this later today.

trotzig avatar Feb 17 '20 15:02 trotzig

Excellent work!

I want it to be treated as a named export, but JavaScript doesn't allow me to specify such metadata. The consequence is that imports can be added, but not matched or removed.

You're right that ImportJS doesn't have support for that, but you're wrong about your solution being horrible. :)

I'm not too happy about the way I'm checking the type-of-export based on the adding <> characters to the name. I AM happy about using <> to have ImportJS give me distinct messages about importing a custom element though.

I think this is fine.

import /* <my-custom-element> from */ './my-custom-element.js'

I like this idea. If you can make this work, go for it. If not, I think it's fine if removing the imports is a manual process.

trotzig avatar Feb 19 '20 08:02 trotzig

but you're wrong about your solution being horrible

Haha, agree to disagree ;-)

import /* <my-custom-element> from */ './my-custom-element.js'

I'll have something ready once I have some time to do it. Might not be this week, we'll see!

mikabytes avatar Feb 19 '20 10:02 mikabytes