Skip to content

Commit

Permalink
feat: adds a hotkey to open dev menu (#167)
Browse files Browse the repository at this point in the history
**Description**

Closes #148 

[Loom video
demo](https://www.loom.com/share/c2620acb13c8484387f22590f4bdab88?sid=256a27d7-f5ff-4147-ba21-bd8d5032accc)

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`.**

<img width="367" alt="Screenshot 2024-04-26 at 3 07 13 PM"
src="https://github.com/software-mansion/react-native-ide/assets/3059371/bbe109df-ea89-44fb-b55c-c4cee4161d80">
<br /><br />

- 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

<img width="1552" alt="Screenshot 2024-05-10 at 12 21 54 PM"
src="https://github.com/software-mansion/react-native-ide/assets/3059371/16c4671c-22ab-4c20-aa2e-38919f05a458">


**TODOs**

- [x] 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](software-mansion/radon-ide#167 (comment)))
- [x] 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](https://www.loom.com/share/c2620acb13c8484387f22590f4bdab88?sid=256a27d7-f5ff-4147-ba21-bd8d5032accc))

**How to test**

1. Run the extension following these
[steps](https://ide.swmansion.com/docs/development#development-setup)
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**

<img width="1552" alt="Screenshot 2024-04-26 at 3 10 16 PM"
src="https://github.com/software-mansion/react-native-ide/assets/3059371/6bb2e326-ce2f-4a2e-ac31-54d46d8c71d5">
  • Loading branch information
Apple0717 committed May 10, 2024
1 parent e8f6812 commit d9ee410
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 0 deletions.
13 changes: 13 additions & 0 deletions packages/vscode-extension/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,12 @@
"main": "./dist/extension.js",
"contributes": {
"commands": [
{
"command": "RNIDE.openDevMenu",
"title": "Open Dev Menu",
"category": "React Native IDE",
"enablement": "RNIDE.extensionIsActive"
},
{
"command": "RNIDE.closePanel",
"title": "Close IDE Panel",
Expand All @@ -56,6 +62,13 @@
"enablement": "!RNIDE.extensionIsActive"
}
],
"keybindings": [
{
"command": "RNIDE.openDevMenu",
"key": "ctrl+alt+z",
"mac": "ctrl+cmd+z"
}
],
"configuration": {
"title": "React Native IDE",
"properties": {
Expand Down
6 changes: 6 additions & 0 deletions packages/vscode-extension/src/extension.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import fs from "fs";
import { SidePanelViewProvider } from "./panels/SidepanelViewProvider";
import { PanelLocation } from "./common/WorkspaceConfig";
import { getLaunchConfiguration } from "./utilities/launchConfiguration";
import { Project } from "./project/project";
import { findSingleFileInWorkspace } from "./utilities/common";

const BIN_MODIFICATION_DATE_KEY = "bin_modification_date";
Expand Down Expand Up @@ -102,6 +103,7 @@ export async function activate(context: ExtensionContext) {
{ webviewOptions: { retainContextWhenHidden: true } }
)
);
context.subscriptions.push(commands.registerCommand("RNIDE.openDevMenu", openDevMenu));
context.subscriptions.push(commands.registerCommand("RNIDE.closePanel", closeIDEPanel));
context.subscriptions.push(commands.registerCommand("RNIDE.openPanel", showIDEPanel));
context.subscriptions.push(commands.registerCommand("RNIDE.showPanel", showIDEPanel));
Expand Down Expand Up @@ -238,6 +240,10 @@ async function findAppRootFolder() {
return undefined;
}

async function openDevMenu() {
Project.currentProject?.openDevMenu();
}

async function diagnoseWorkspaceStructure() {
const appRootFolder = await configureAppRootFolder();
if (appRootFolder) {
Expand Down

0 comments on commit d9ee410

Please sign in to comment.