Today a bug became a feature.

Background

I had just started working on a Svelte (A Frontend Framework) project after months of Flutter development.

I had found the flutter developer experience in VSCode to be delightful and over time i got used to, and enjoyed the workflow.

VSCode Flutter has a feature where you can build a widget in place , then extract it to an independent widget to make it re-usable ... let me show you

This feature didn't exist for the svelte world , so if i wanted to extract a component to reuse it, i would have to manually create the file .. copy, paste add imports etc. Ain't no body got time for that, so i decide to build it.

And build it I did..... and it has 3030 download at the time of writing this.

The Bug / Feature

So how this extension works is ... you highlight the code that you want to turn into a new svelte component, summon the extension via the Command Pallet, the extension prompts you to give your component a name and everything works components are created

For this to work properly, the extension needs to first ensure that some text has been highlighted before it can extract right ?

Well here's my code, see if you can spot the bug

let selection = editor.selection;
let text = editor.document.getText(selection);

if (!selection){  
  return vscode.window.showErrorMessage("No text Selected");
}//else proceed  
         

I was checking for the wrong variable .. sigh, which means that even if there's nothing selected, the extension continues instead giving the error message

But it turns out that when you let my the extension run without highlighting anything , it still creates a component and adds it at the current cursor position and still adds the imports ... which is something i never knew i needed.

So the Svelte Component Extractor is now Svelte Component Creator.. Check it out