{"id":22657335,"url":"https://github.com/adedoyin-emmanuel/methane-cli","last_synced_at":"2025-08-21T00:31:09.231Z","repository":{"id":157595042,"uuid":"633546672","full_name":"Adedoyin-Emmanuel/methane-cli","owner":"Adedoyin-Emmanuel","description":"A CLI tool for efficient creation of React \u0026 NextJs components, pages and Service Worker files.","archived":false,"fork":false,"pushed_at":"2024-12-05T09:28:27.000Z","size":2053,"stargazers_count":36,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-14T15:35:58.853Z","etag":null,"topics":["cli","command-line-tool","javascript-cli","productivity","productivity-tools","react","react-cli","reactjs","typescript-cli","typescript-support"],"latest_commit_sha":null,"homepage":"http://npmjs.com/package/methane-cli","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Adedoyin-Emmanuel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-27T18:33:43.000Z","updated_at":"2024-12-05T09:28:31.000Z","dependencies_parsed_at":"2023-07-06T14:00:53.804Z","dependency_job_id":"a117aeb9-7a88-4ee2-b2ab-d64b633dbeea","html_url":"https://github.com/Adedoyin-Emmanuel/methane-cli","commit_stats":null,"previous_names":["adedoyin-emmanuel/react-gen"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adedoyin-Emmanuel%2Fmethane-cli","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adedoyin-Emmanuel%2Fmethane-cli/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adedoyin-Emmanuel%2Fmethane-cli/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adedoyin-Emmanuel%2Fmethane-cli/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Adedoyin-Emmanuel","download_url":"https://codeload.github.com/Adedoyin-Emmanuel/methane-cli/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230471175,"owners_count":18231193,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","command-line-tool","javascript-cli","productivity","productivity-tools","react","react-cli","reactjs","typescript-cli","typescript-support"],"created_at":"2024-12-09T10:25:48.827Z","updated_at":"2024-12-19T17:09:10.853Z","avatar_url":"https://github.com/Adedoyin-Emmanuel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Methane 🚀\n\n\u003cdiv style=\"display: flex; justify-content: start;\"\u003e\n \u003ca href=\"https://wakatime.com/badge/github/Adedoyin-Emmanuel/methane-cli\"\u003e\u003cimg src=\"https://wakatime.com/badge/github/Adedoyin-Emmanuel/methane-cli.svg\" alt=\"wakatime\"\u003e\u003c/a\u003e\n\n\u003ca href=\"https://github.com/adedoyin-emmanuel/methane-cli/stargazers\"\u003e\u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/adedoyin-emmanuel/methane-cli.svg?style=social\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/adedoyin-emmanuel/fotograph/network/members\"\u003e\u003cimg alt=\"GitHub forks\" src=\"https://img.shields.io/github/forks/adedoyin-emmanuel/methane-cli.svg?style=social\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/methane-cli\"\u003e\u003cimg alt=\"GitHub downloads\" src=\"https://img.shields.io/npm/dt/methane-cli.svg\"\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\nMethane is a **CLI** tool that helps developers easily create **React components, pages or NextJS components, pages, dynamic pages and service worker files** with boilerplate codes. It also comes with extra configration that allows you choose either **JavaScript** or **TypeScript** templates.\n\n## What's New ❓\n\nThe latest patch version 1.4.9 introduces a crucial fix that enhances the naming conventions for generated components and Next.js pages. This update ensures that hyphenated names are correctly capitalized, providing a more consistent and readable codebase.\n\n**Component Capitalization Fix:**\n\nWhen generating components with hyphenated names, **Methane** will now correctly capitalize each segment of the name. For instance, creating a component named `animated-button` will result in a component named `AnimatedButton`. This ensures that components follow standard **PascalCase** naming conventions, enhancing code readability and consistency.\n\n**Next.js Page Capitalization Fix:**\n\nSimilarly, generating Next.js pages with hyphenated names will now produce correctly capitalized page names. For example, a page named 2fa-auth will be created as 2FaAuth, user-appointments as UserAppointments, and privacy-policy as PrivacyPolicy. This fix ensures that page names are intuitive and follow common naming practices.\n**Please Note:** Your nextJs page route will not be affected by this change. This change only affects the name of the generated page or component.\n\n## Installation 💿\n\nTo install **Methane-Cli**, run the following command. Note you've to install it as a global package.\n**Note** You've to init methane before using it in your project.\n\n```bash\nnpm install -g methane-cli\n```\n\n```bash\nbun install -g methane-cli\n```\n\n```bash\nyarn add -g methane-cli\n```\n\n## Usage 🚦\n\nTo use **methane** or **rg**, simply run the command\n\n```bash\nmethane\nrg\n\n```\n\nThis would show a welcome message with information about the tool. Then you need to run the init command. This would help you to configure methane to your taste 😛.\n\n```bash\n\nmethane init\n\n```\n\nThis would prompt you to answer some questions and a config file will be created. Note you can't use **Methane** if you don't have the config file.\n\nOptionally, you can also add the `-d` or `--default` argument to skip the prompt and use the default configuration.\n\n```bash\nmethane init --default\n```\n\n## Commands\n\nThe following commands are available in **methane-cli**\n\n- **`--help` or `-h`**: Displays a list of available commands.\n- **`--version` or `-v`**: Displays the version of methane-cli.\n- **`--generate` or `-g`**: Generates Components, Pages or Service Worker files.\n- **`--config` or `-c`**: Configures the CLI tool to your taste.\n- **`--init` or `-i`**: Initializes default configuration files in root directory.\n- **`--list-config` or `-lc`**: Lists all Methane-Cli configurations.\n\nTo run a command, simply add it at the end of **methane** or **rg** for example,\n\n## Configurations 🔥\n\nBy default, when you run **methane init** you would be prompted to select some configurations. If you would love to change the configurations at some point, You can follow this format.\n\n```json\n{\n  \"template\": \"jsx\",\n  \"component\": \"arrow\",\n  \"page\": \"arrow\",\n  \"generateStylesheet\": \"true\",\n  \"generateFolder\": \"true\",\n  \"register\": \"true\",\n  \"stylesheetType\": \"css\"\n}\n```\n\nTo change the configurations, run the following command.\n\n#### Change Template\n\nTo change the template to **tsx** run the following command.\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane c --template tsx\n\n```\n\n_jsx or tsx are the only options available_\n\n#### Change Component Generation Style\n\nTo change the component generation style, run the following command.\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane config -c arrow\n\n```\n\n_arrow or functional are the only options available_\n\n#### Change Page Generation Style\n\nTo change the page generation style, run the following command\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane config -p arrow\n\n```\n\n_arrow or functional are the only options available_\n\n#### Generate Stylesheet\n\nTo generate stylesheet file for components and pages, run the following command\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane config -gs true\n\n```\n\n_true or false are the only options available_\n\n#### Generate Folder\n\nTo generate a folder for components and pages, run the following command\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane config -gf true\n\n```\n\n_true or false are the only options available_\n\n#### Register Generated Pages\n\nTo register the generated pages in your **App.js or App.jsx or App.tsx or App.ts** file, run the following command. This is strictly or **React** and not **NextJS**\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane config -r true\n\n```\n\n_true or false are the only options available_\n\n#### Stylesheet Type\n\nTo change the stylesheet type for your components and pages, run the following command.\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane config -st css\n\n```\n\n_css or scss are the only options available_\n\n## Create a Component ⏭\n\nWith the new update, you can generate **React** or **NextJS** server or client components. Intresting right 😄. But the commands are different.\n\n### Generating A React Component\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane g -c componentName\n\n```\n\n### Generating A NextJS Component\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane g -nc componentName\n\n```\n\n**Optionally, you can specify your nextJs component to be a server or client component** To do this, Simply add the **ct** flag, then you can specify server or client omitting the **ct** would generate a client component by default.\n\nThe convention is that you've a component or components directory in your application. **Methane** would find that directory and then place your component in it.\n\n#### Note\n\n\\_You don't have to be in your react-app components folder. You can run the command from the root folder of your react-application and that's infact how\n\n## Create a Page ⏭\n\nWith the new update, you can generate **React** or **NextJS** server or client pages.\n\n### Generating A React Page\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane g -p pageName\n\n```\n\nThis would create a new page according to the global configuration and add the pages to the components pages in your react-app application. By default, a page generated comes with a **useNavigate()** hook and the **Link** tag.\n\n### Generating A NextJS Page\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane g -np pageName\n\n```\n\nThis would generate a new page according to the configuration in your _/methane/methane.json_ file. Methane would check for your project structure and then create a new page in according to your project structure. By default a generated NextJS page comes with a useRouter and usePathname hook for navigation and also a **Rafce** component template.\n\n**Optionally, you can specify your nextJs page to be a server or client page** To do this, Simply add the **ct** flag, then you can specify server or client omitting the **ct** would generate a client page by default.\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane g -np pageName -ct server\n\n```\n\n### Generating A Dynamic NextJS Page\n\nAs you already know, in **NextJS** dynamic pages are pages whose content is determined by parameters included in the URL. For example _/product/1_ is a dynamic URL. Now Methane can also help you create dynamic pages. Usually, a dynamic page would be nested within a page. For example, I've a products page already _/products_, my dynamic page would most likely be productId. So using Methane, you can generate a dynamic page using the command below\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane g -nid productId -sp /products\n\n```\n\n##### Command Arguments\n\n1. **-nid** -nid (Next Dynamic Page Id) is the dynamic page name, which in this case is _productId_\n2. **-sp** -sp is an optional parameter called (Start Page) which is indicates the folder to place the dynamic page in. You don't need to specify the default nextJS _/app_ when specifying the folder to place the dynamic page.\n\n**Optionally, you can specify your nextJs page to be a server or client page** To do this, Simply add the **ct** flag, then you can specify server or client omitting the **ct** would generate a client page by default.\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane g -ndp productId -sp /products -ct server\n\n```\n\nYou can also nest different directory structure. for example, if you've a _/products_ directory and then you've a dynamic page called _/products/[productId]/_ you can still add a page like _/products/[productId]/edit_ or even _/products/[productId]/sub/[subId]/edit_. The choice is yours. With this awesome command, you would never have to manually create a new page.\n\n## Configurations ⚙️\n\nAdded a new command **`list-config [ls]`**\n\n- `--list-config` or `-lc`: Lists all Methane configurations.\n\n````bash\nmac@Macs-MBP~/D/react-app$ methane list-config\n\nAll configurations\n{\n  template: 'jsx',\n  component: 'arrow',\n  page: 'arrow',\n  generateStylesheet: 'true',\n  generateFolder: 'true',\n  register: 'true',\n  stylesheetType: 'css'\n}\n\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane g -sw\n\n````\n\n## Create a Service Worker ⏭\n\nThis would create a service worker and add the service worker to the [index.js, main.js, index.jsx, main.jsx] or tsx respectively.\n\nYou can now register the service worker by adding\n\n```javascript\nserviceWorkerRegistration.register();\n```\n\n#### Note\n\n_You don't have specify any name for the service-worker_\n\n## Stuck :(\n\nIf you are stuck or you want to learn more about the different configurations, run the following command.\n\n```bash\nmac@Macs-MBP~/D/react-app$ methane c --help\n\n```\n\n### Architecture 🛠\n\n`methane-cli` uses a `modular` architecture.It consists of different modules that perform specific tasks such as generating components, pages, and service worker files.\n\n## Contributing ❤️\n\nIf you'd like to contribute to **Methane**, please follow these steps:\n\n1. Fork the repository\n2. Create a new branch\n3. Make your changes and commit them\n4. Push your changes to your fork\n5. Create a pull request :)\n\nPlease star this repo if you find it useful. Also share the good news with your community.\n\n## License 🧐\n\n**Methane-Cli** is licensed under the [MIT License](https://opensource.org/licenses/MIT).\n\n## Contibutors 👨‍\n\n\u003cdiv style=\"display: flex; flex-wrap: wrap;\"\u003e\n  \u003ca href=\"https://github.com/adedoyin-emmanuuel\" style=\"margin-right: 10px;\"\u003e\n    \u003cimg src=\"https://github.com/adedoyin-emmanuel.png\" width=\"80\" height=\"80\" style=\"border-radius: 50%; border: 2px solid #000;\" alt=\"Adedoyin Emmanuel\"/\u003e\n  \u003c/a\u003e\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadedoyin-emmanuel%2Fmethane-cli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadedoyin-emmanuel%2Fmethane-cli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadedoyin-emmanuel%2Fmethane-cli/lists"}