Invalid import placement

[heinthanth]

Hi, love this extension so much. It's like the best extension with CoffeeScript support I've ever seen. But there is an issue.

How to Reproduce

• Write some component to auto-import in JSX like we do with normal JS/TS.
• In this example, I'm importing VStack
• But , VStack is placed at the beginning of line instead of {..., Image, VStack} from

How can I fix it?

[phil294]

Hi @heinthanth, thanks for the kind words and your report! Unfortunately, I can't reproduce this. My imports always get aligned as expected, even with many of them in a single line. Can you please provide some minimal reproduction code in text form?

I have also never used CoffeeSense for React development or JSX in general and I'm quite amazed that it actually even works with JSX, I had no idea.

[heinthanth]

Hi @phil294 , sorry for late reply.

I've setup a demo repo here: https://github.com/heinthanth/coffeesense-bug-demo

Here, also, is a screen recording:

https://user-images.githubusercontent.com/43804263/158397367-73f390f9-e80a-4e9f-8ece-94ce42f0b631.mov

[heinthanth]

I think it just happen with CoffeeScript's "interspersed XML elements". Here: https://coffeescript.org/#jsx

[phil294]

Ok got it now. Should be fixed with v1.7.0. The problem here is at second 0:05 in your video: <VStack in line 9 is an invalid line because the closing bracket is missing, but the error wrongly appears on line 10, so the compilation can never succeed, the source maps are missing and the imports go haywire. The bug does not appear when you type out <VStack/> and just then generate the import using autocomplete. Maybe you can configure VSCode to always insert /> whenever you type <? I'm afraid autoClosingBrackets is not capable of doing that because < is not a known bracket in CoffeeScript language, so you'd either need to send a PR for that to wherever this is configured, or use some kind of extension. Alternatively, with this update, you can also autocomplete inside import brackets, e.g. import { Box, <CURSOR POSITION> } from "@chakra-ui/react" should now also work. Retrospective imports using code actions ("auto fix problems" kind of stuff) is not yet supported, maybe some day.

I'm telling you this because even though I fixed your specific issue with a specific workaround, further such issues will almost certainly arise when you use JSX because the extension is not optimized for it. What for example if you spread out element attributes over multiple lines? Where will errors be shown, does source mapping work, can autocomplete work? There are several hacks in place to fix all of that with normal CS code, but I'm not willing to go the extra mile to repeat that entire effort for JSX as I don't use it. Maybe I am wrong though, and it's fine on its own after all...

Still, I'd be very interested to hear about your problems or experiences with CoffeeSense+JSX, if you ever happen to work much with it.

TL;DR: fixed