Skip to content

Commit d610798

Browse files
authored
Merge pull request #2 from univdev/feature/create-react-hook
Add feature 'Create React Hook' menu
2 parents e6f19b2 + 92bcff5 commit d610798

File tree

5 files changed

+54
-15
lines changed

5 files changed

+54
-15
lines changed

package.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@
1616
{
1717
"command": "vscode-react-developer-toolkit.createReactComponent",
1818
"title": "Create React Component"
19+
},
20+
{
21+
"command": "vscode-react-developer-toolkit.createReactHook",
22+
"title": "Create React Hook"
23+
},
24+
{
25+
"command": "vscode-react-developer-toolkit.createReactHOC",
26+
"title": "Create React HOC"
1927
}
2028
],
2129
"menus": {
@@ -30,6 +38,14 @@
3038
{
3139
"command": "vscode-react-developer-toolkit.createReactComponent",
3240
"group": "1_create"
41+
},
42+
{
43+
"command": "vscode-react-developer-toolkit.createReactHook",
44+
"group": "1_create"
45+
},
46+
{
47+
"command": "vscode-react-developer-toolkit.createReactHOC",
48+
"group": "1_create"
3349
}
3450
]
3551
},
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as vscode from 'vscode';
2+
import * as fs from 'fs';
3+
import * as fspath from 'path';
4+
import { reactHookFactory } from '../factory/ReactHook.factory';
5+
6+
export const createReactHookCommand = (uri: vscode.Uri) => {
7+
const path = uri.fsPath;
8+
9+
vscode.window.showInputBox({
10+
prompt: 'Enter React hook name',
11+
placeHolder: 'MyHook (or useMyHook)',
12+
}).then((hookName) => {
13+
if (typeof hookName === 'string') {
14+
let newHookName = hookName;
15+
if (hookName.startsWith('use') === false) newHookName = `use${hookName}`;
16+
17+
vscode.window.showInformationMessage(newHookName);
18+
19+
const hookFileContent = reactHookFactory(newHookName);
20+
21+
fs.writeFileSync(
22+
fspath.join(path, `${newHookName}.ts`),
23+
hookFileContent,
24+
);
25+
}
26+
});
27+
};

src/extension.ts

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,6 @@
11
import * as vscode from 'vscode';
2-
import { createReactComponent } from './commands/CreateReactComponent.command';
2+
import { commandsFactory } from './factory';
33

44
export function activate(context: vscode.ExtensionContext) {
5-
let disposable = vscode.commands.registerCommand('vscode-react-developer-toolkit.createReactComponent', (uri: vscode.Uri) => {
6-
if (uri && uri.fsPath) {
7-
vscode.window.showInputBox({
8-
prompt: 'Enter React component name',
9-
placeHolder: 'MyComponent'
10-
}).then(componentName => {
11-
if (componentName) {
12-
createReactComponent(uri.fsPath, componentName);
13-
}
14-
});
15-
}
16-
});
17-
18-
context.subscriptions.push(disposable);
5+
commandsFactory(context);
196
}

src/factory/Commands.factory.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as vscode from 'vscode';
22
import { createReactComponentCommand } from "../commands/CreateReactComponent.command";
3+
import { createReactHookCommand } from '../commands/CreateReactHook.factory';
34

45
export const commandsFactory = (context: vscode.ExtensionContext) => {
56
commands.forEach((command) => {
@@ -12,6 +13,10 @@ const commands = [
1213
'vscode-react-developer-toolkit.createReactComponent',
1314
createReactComponentCommand,
1415
),
16+
vscode.commands.registerCommand(
17+
'vscode-react-developer-toolkit.createReactHook',
18+
createReactHookCommand,
19+
),
1520
];
1621

1722
export default commandsFactory;

src/factory/ReactHook.factory.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const reactHookFactory = (hookName: string) => `export const ${hookName} = () => {
2+
3+
};
4+
`;

0 commit comments

Comments
 (0)