Release v0.0.1 (#5)

* Feat: Add 'Create Component' Feature

* Update: Move 'create react component' menu to down of 'React Component Toolkit' menu

* Refactor: Convert command addition to factory pattern

* Feat: Create 'Create React Hook' menu

* Add: Add 'create react hook' command

* Feat: Add 'Create React HOC' menu

* Feat: Add commands 'Create React Context' and 'Create React Provider'

* Docs: Add README.md

* Update: Add publisher's information

Author: univdev

.gitignore

@@ -14,6 +14,7 @@ Thumbs.db
 
 # VSCode settings
 .vscode/
+.vscode-test/
 
 # Build artifacts
 *.vsix

.vscodeignore

@@ -1,11 +1,8 @@
 .vscode/**
 .vscode-test/**
-out/**
-node_modules/**
 src/**
 .gitignore
 .yarnrc
-esbuild.js
 vsc-extension-quickstart.md
 **/tsconfig.json
 **/eslint.config.mjs

LICENSE

@@ -0,0 +1,15 @@
+# License
+
+Copyright (c) 2024 univdev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, subject to the following conditions:
+
+1. The original source code of the Software must be used without modification. Distribution of modified source code is prohibited.
+
+2. Any output or derivative work produced using the Software may be freely used, modified, and distributed, including for commercial purposes.
+
+3. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+4. Commercial use of the unmodified Software requires a separate agreement with the copyright holder.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,71 +1,48 @@
-# vscode-react-developer-toolkit README
+# VSCode React Developer Toolkit
 
-This is the README for your extension "vscode-react-developer-toolkit". After writing up a brief description, we recommend including the following sections.
+VSCode React Developer Toolkit is a powerful extension designed to enhance your React development workflow in Visual Studio Code. This toolkit provides a set of convenient commands to quickly create common React components and patterns, streamlining your development process and boosting productivity.
 
 ## Features
 
-Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
+The extension offers the following commands, accessible through the Explorer context menu under "React Developer Toolkit":
 
-For example if there is an image subfolder under your extension project workspace:
+- **Create React Component**: Quickly scaffold a new React component
+- **Create React Hook**: Generate a custom React hook
+- **Create React HOC**: Set up a Higher-Order Component
+- **Create React Context**: Create a new React Context
+- **Create React Provider**: Generate a React Provider component
 
-\!\[feature X\]\(images/feature-x.png\)
+## Installation
 
-> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
+1. Open Visual Studio Code
+2. Go to the Extensions view (Ctrl+Shift+X)
+3. Search for "VSCode React Developer Toolkit"
+4. Click Install
 
-## Requirements
+## Usage
 
-If you have any requirements or dependencies, add a section describing those and how to install and configure them.
+To use the React Developer Toolkit:
 
-## Extension Settings
+1. Right-click on a folder in the Explorer view
+2. Navigate to the "React Developer Toolkit" submenu
+3. Select the desired command to create the corresponding React element
 
-Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
+## Requirements
 
-For example:
+- Visual Studio Code version 1.94.0 or higher
 
-This extension contributes the following settings:
+## Extension Settings
 
-* `myExtension.enable`: Enable/disable this extension.
-* `myExtension.thing`: Set to `blah` to do something.
+This extension doesn't add any VS Code settings.
 
 ## Known Issues
 
-Calling out known issues can help limit users opening duplicate issues against your extension.
-
-## Release Notes
-
-Users appreciate release notes as you update your extension.
-
-### 1.0.0
-
-Initial release of ...
-
-### 1.0.1
-
-Fixed issue #.
-
-### 1.1.0
-
-Added features X, Y, and Z.
-
----
-
-## Following extension guidelines
-
-Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
-
-* [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
-
-## Working with Markdown
-
-You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
+There are currently no known issues. If you encounter any problems, please report them on the GitHub repository.
 
-* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux).
-* Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux).
-* Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets.
+## Contributing
 
-## For more information
+Contributions are welcome! Please feel free to submit a Pull Request.
 
-* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
-* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
+## License
 
-**Enjoy!**
+This extension is licensed under the [MIT License](LICENSE.md).

dist/extension.js

@@ -0,0 +1,54 @@
+"use strict";var U=Object.create;var i=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var D=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of V(e))!A.call(t,s)&&s!==o&&i(t,s,{get:()=>e[s],enumerable:!(r=q(e,s))||r.enumerable});return t};var n=(t,e,o)=>(o=t!=null?U(W(t)):{},l(e||!t||!t.__esModule?i(o,"default",{value:t,enumerable:!0}):o,t)),z=t=>l(i({},"__esModule",{value:!0}),t);var K={};D(K,{activate:()=>J});module.exports=z(K);var c=n(require("vscode"));var h=n(require("vscode")),d=n(require("path")),a=n(require("fs"));var v=t=>`import { FC } from 'react';
+
+export type I${t}Props = {
+
+};
+
+export const ${t}: FC<I${t}Props> = () => {
+  return (
+
+  );
+};
+
+export default ${t};
+`;var m=t=>`export * from './${t}';`;var y=t=>{if(t&&t.fsPath){let e=t.fsPath;h.window.showInputBox({prompt:"Enter React component name",placeHolder:"MyComponent"}).then(o=>{if(o){let r=d.join(e,o);a.mkdirSync(r);let s=v(o),x=m(o);a.writeFileSync(d.join(r,`${o}.tsx`),s),a.writeFileSync(d.join(r,"index.ts"),x)}})}};var C=n(require("vscode")),u=n(require("fs")),w=n(require("path"));var F=t=>`export const ${t} = () => {
+  
+};
+`;var P=t=>{let e=t.fsPath;C.window.showInputBox({prompt:"Enter React hook name",placeHolder:"MyHook (or useMyHook)"}).then(o=>{if(typeof o=="string"){let r=o;o.startsWith("use")===!1&&(r=`use${o}`),C.window.showInformationMessage(r);let s=F(r);u.writeFileSync(w.join(e,`${r}.ts`),s)}})};var H=n(require("vscode")),$=n(require("fs")),k=n(require("path"));var R=t=>`import { ComponentType } from 'react';
+
+export type IComponentRequiredProps = {
+  // Write required props.
+};
+
+export function ${t}<P = IComponentRequiredProps>(Component: ComponentType<P>) {
+  return function(props: P) {
+    return (
+      <Component { ...props as any } />
+    );
+  };
+};
+
+export default ${t};
+`;var I=t=>{let e=t.fsPath;H.window.showInputBox({prompt:"Enter React hoc name",placeHolder:"withMyHOC"}).then(o=>{if(o){let r=R(o);$.writeFileSync(k.join(e,`${o}.hoc.tsx`),r)}})};var E=n(require("vscode")),p=n(require("fs")),f=n(require("path"));var g=t=>`import { FC } from "react";
+
+export type ITestProviderProps = {
+  // Enter provider props
+};
+
+export const TestProvider: FC<ITestProviderProps> = () => {
+  return (
+
+  );
+};
+
+export default TestProvider;
+`;var j=t=>{let e=t.fsPath;E.window.showInputBox({prompt:"Enter React provider name",placeHolder:"MyProvider (Provider: use same name as context)"}).then(o=>{if(o){let r=`${o}.provider.tsx`,s=g(o),x=m(r);p.mkdirSync(f.join(e,o)),p.writeFileSync(f.join(e,o,r),s),p.writeFileSync(f.join(e,o,"index.ts"),x)}})};var M=n(require("vscode")),b=n(require("fs")),O=n(require("path"));var S=t=>`import { createContext } from "react";
+
+export type I${t}ContextValue = {
+  // Enter context props
+};
+
+export const ${t}Context = createContext<I${t}ContextValue | undefined>(undefined);
+
+export default ${t}Context;
+`;var T=t=>{let e=t.fsPath;M.window.showInputBox({prompt:"Enter React context name",placeHolder:"MyContext (A .context prefix is added to the filename.)"}).then(o=>{if(o){let r=S(o);b.writeFileSync(O.join(e,`${o}.context.ts`),r)}})};var B=t=>{G.forEach(e=>{t.subscriptions.push(e)})},G=[c.commands.registerCommand("vscode-react-developer-toolkit.createReactComponent",y),c.commands.registerCommand("vscode-react-developer-toolkit.createReactHOC",I),c.commands.registerCommand("vscode-react-developer-toolkit.createReactHook",P),c.commands.registerCommand("vscode-react-developer-toolkit.createReactProvider",j),c.commands.registerCommand("vscode-react-developer-toolkit.createReactContext",T)];function J(t){B(t)}0&&(module.exports={activate});

dist/extension.js.map

@@ -1,56 +1,54 @@
-const esbuild = require("esbuild");
+const esbuild = require('esbuild');
 
 const production = process.argv.includes('--production');
 const watch = process.argv.includes('--watch');
 
+async function main() {
+  const ctx = await esbuild.context({
+    entryPoints: ['src/extension.ts'],
+    bundle: true,
+    format: 'cjs',
+    minify: production,
+    sourcemap: !production,
+    sourcesContent: false,
+    platform: 'node',
+    outfile: 'dist/extension.js',
+    external: ['vscode'],
+    logLevel: 'silent',
+    plugins: [
+      /* add to the end of plugins array */
+      esbuildProblemMatcherPlugin
+    ]
+  });
+  if (watch) {
+    await ctx.watch();
+  } else {
+    await ctx.rebuild();
+    await ctx.dispose();
+  }
+}
+
 /**
  * @type {import('esbuild').Plugin}
  */
 const esbuildProblemMatcherPlugin = {
-	name: 'esbuild-problem-matcher',
+  name: 'esbuild-problem-matcher',
 
-	setup(build) {
-		build.onStart(() => {
-			console.log('[watch] build started');
-		});
-		build.onEnd((result) => {
-			result.errors.forEach(({ text, location }) => {
-				console.error(`✘ [ERROR] ${text}`);
-				console.error(`    ${location.file}:${location.line}:${location.column}:`);
-			});
-			console.log('[watch] build finished');
-		});
-	},
+  setup(build) {
+    build.onStart(() => {
+      console.log('[watch] build started');
+    });
+    build.onEnd(result => {
+      result.errors.forEach(({ text, location }) => {
+        console.error(`✘ [ERROR] ${text}`);
+        console.error(`    ${location.file}:${location.line}:${location.column}:`);
+      });
+      console.log('[watch] build finished');
+    });
+  }
 };
 
-async function main() {
-	const ctx = await esbuild.context({
-		entryPoints: [
-			'src/extension.ts'
-		],
-		bundle: true,
-		format: 'cjs',
-		minify: production,
-		sourcemap: !production,
-		sourcesContent: false,
-		platform: 'node',
-		outfile: 'dist/extension.js',
-		external: ['vscode'],
-		logLevel: 'silent',
-		plugins: [
-			/* add to the end of plugins array */
-			esbuildProblemMatcherPlugin,
-		],
-	});
-	if (watch) {
-		await ctx.watch();
-	} else {
-		await ctx.rebuild();
-		await ctx.dispose();
-	}
-}
-
 main().catch(e => {
-	console.error(e);
-	process.exit(1);
+  console.error(e);
+  process.exit(1);
 });

esbuild.js

@@ -15,12 +15,11 @@ export default [{
     },
 
     rules: {
+        'curly': ['error', 'multi-line'],
         "@typescript-eslint/naming-convention": ["warn", {
             selector: "import",
             format: ["camelCase", "PascalCase"],
         }],
-
-        curly: "warn",
         eqeqeq: "warn",
         "no-throw-literal": "warn",
         semi: "warn",