feat: adds a hotkey to open dev menu

[watadarkstar]

Description

Closes #148

Loom video demo

A few notes and questions:

• I went with cmd + ctrl + z because I didn't want to interfere with cmd + d which is already a command that is handled by the simulator (also because cmd + d is a bit buggy on Expo projects and opens a different menu than this one). Another reason I choose this is because cmd + ctrl + z is the default to shake the device on the simulator for iOS. We can change this if needed as I'm sure I may get some push back to use cmd + d or cmd + ctrl + d.

• You can see the keybinding can be changed in the keybinding menu in VSCode. For Mac its Code -> Settings -> Keyboard Shortcuts then search for "React Native IDE" to change the openDevMenu keybinding

TODOs

• Decide on what key binding should be the default keybinding (I've decided on cmd + ctrl + z as the default keybinding see my rationale here)
• Test that the key binding can be customized at will via the VSCode UI (I've tested it and it works see my loom video)

How to test

1. Run the extension following these steps
2. Open a test project as described in those steps
3. Press cmd + ctrl + z at any point
4. Change the keybinding for Mac its Code -> Settings -> Keyboard Shortcuts then search for "React Native IDE" to change the openDevMenu keybinding

Screenshot

[vercel]

@watadarkstar is attempting to deploy a commit to the software-mansion Team on Vercel.

To accomplish this, @watadarkstar needs to request access to the Team.

Afterwards, an owner of the Team is required to accept their membership request.

If you're already a member of the respective Vercel Team, make sure that your Personal Vercel Account is connected to your GitHub account.

[filip131311]

Hello, I left some hopefully helpful inline comments.

regarding the correct binding, I don't have an opinion witch biding is better, but I think it's good idea to disable cmd no matter what we choose. You wiil find that keylisteners are defined in file named Preview.ts

[watadarkstar]

@filip131311 Thanks for the review. I will work on these comments when I get a chance. Maybe this weekend or late next week.

[filip131311]

In line

[kmagiera]

I'd be ok with merging this as is w/o focusing on other aspects like displaying hotkey binding in the UI etc. However, I since I don't have experience with commands that have keys it'd be important for me to understand:

• if key is specified in package.json does it serve as default key for that command
• What if there is conflict with some other command (I personally use cmd+d to delete lines)?
• Can we leave it empty and just allow users to configure it?
• Is the key combination going to work across all editors or only when focused on the IDE panel?

[watadarkstar]

I'd be ok with merging this as is w/o focusing on other aspects like displaying hotkey binding in the UI etc. However, I since I don't have experience with commands that have keys it'd be important for me to understand:

• if key is specified in package.json does it serve as default key for that command
• What if there is conflict with some other command (I personally use cmd+d to delete lines)?
• Can we leave it empty and just allow users to configure it?
• Is the key combination going to work across all editors or only when focused on the IDE panel?

I agree, I also use CMD + D for deleting lines. I will change it back to cmd + ctrl + z which I is not used by VSCode by default.

Lets slim this down, we can add the hotkey binding in the UI in another PR.

To answer your questions:

if key is specified in package.json does it serve as default key for that command

Yes.

What if there is conflict with some other command (I personally use cmd+d to delete lines)?

We should try to avoid conflicts, hence why I choose command + ctr + z in the first place (its the shake hotkey for the simulator) and is not used by VSCode by default.

Can we leave it empty and just allow users to configure it?

Yes you can leave it empty. My recommendation is to have it default to cmd + ctrl + z since that keybinding is not used by VSCode by default.

Is the key combination going to work across all editors or only when focused on the IDE panel?

It will work across all editors not just the IDE panel.

[watadarkstar]

@kmagiera @filip131311 I'm working on this PR today. Going to try to get it in a ready place but I say let's keep it simple and focus on the "hotkey functionality". @filip131311 You can complete the cog wheel UI work in another PR.

[filip131311]

@watadarkstar Hey, It's great news are you open to work on a cog wheel functionality in a seperate PR?

[watadarkstar]

@watadarkstar Hey, It's great news are you open to work on a cog wheel functionality in a seperate PR?

Yeah potentially I can do it but it will take some time as my schedule is busy. I only work on open source every other Friday.

Do you have Discord @filip131311 ? I have a few questions on this static method refactor I want to ask you. My discord is: watadarkstar Please add me as a friend on Discord and we can discuss further.

[watadarkstar]

Hello, I see you changed the keybinding, but did you have a chance to take a look at disabling it in Preview?

@filip131311 I'd like to avoid disabling the keybinding because cmd + d may be something developers expect within the React Native IDE panel. Yet I'm using cmd + ctrl + z in any panel, which is different. Furthermore, cmd + ctrl + z opens a different developer menu than cmd + d does on Expo apps. I also don't really see how to disable it inside Preview if you really want it disabled, can you elaborate on exactly what file I need to modify and where exactly I should add this code? I'm not too familiar with this codebase. But my recommendation as a user of React Native IDE is to not disable it as it could lead to more confusion for developers who currently expect cmd + d to work within the React Native IDE panel.

[watadarkstar]

@filip131311 @kmagiera This is ready to be reviewed again. I have cleaned up the code, simplified it, removed the static methods and tested it fully.

Here is a Loom video demoing the feature.

[kmagiera]

Thanks, this looks good now.

[vercel]

An owner of the software-mansion Team on Vercel declined @watadarkstar's request to join.

In order for their commit to be deployed, @watadarkstar must push and request access again.