Methane 🚀

Methane 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.

What's New ❓

The 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.

Component Capitalization Fix:

When 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.

Next.js Page Capitalization Fix:

Similarly, 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. 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.

Installation 💿

To install Methane-Cli, run the following command. Note you've to install it as a global package. Note You've to init methane before using it in your project.

npm install -g methane-cli

bun install -g methane-cli

yarn add -g methane-cli

Usage 🚦

To use methane or rg, simply run the command

methane
rg

This 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 😛.

methane init

This 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.

Optionally, you can also add the -d or --default argument to skip the prompt and use the default configuration.

methane init --default

Commands

The following commands are available in methane-cli

• --help or -h: Displays a list of available commands.
• --version or -v: Displays the version of methane-cli.
• --generate or -g: Generates Components, Pages or Service Worker files.
• --config or -c: Configures the CLI tool to your taste.
• --init or -i: Initializes default configuration files in root directory.
• --list-config or -lc: Lists all Methane-Cli configurations.

To run a command, simply add it at the end of methane or rg for example,

Configurations 🔥

By 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.

{
  "template": "jsx",
  "component": "arrow",
  "page": "arrow",
  "generateStylesheet": "true",
  "generateFolder": "true",
  "register": "true",
  "stylesheetType": "css"
}

To change the configurations, run the following command.

Change Template

To change the template to tsx run the following command.

mac@Macs-MBP~/D/react-app$ methane c --template tsx

jsx or tsx are the only options available

Change Component Generation Style

To change the component generation style, run the following command.

mac@Macs-MBP~/D/react-app$ methane config -c arrow

arrow or functional are the only options available

Change Page Generation Style

To change the page generation style, run the following command

mac@Macs-MBP~/D/react-app$ methane config -p arrow

arrow or functional are the only options available

Generate Stylesheet

To generate stylesheet file for components and pages, run the following command

mac@Macs-MBP~/D/react-app$ methane config -gs true

true or false are the only options available

Generate Folder

To generate a folder for components and pages, run the following command

mac@Macs-MBP~/D/react-app$ methane config -gf true

true or false are the only options available

Register Generated Pages

To 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

mac@Macs-MBP~/D/react-app$ methane config -r true

true or false are the only options available

Stylesheet Type

To change the stylesheet type for your components and pages, run the following command.

mac@Macs-MBP~/D/react-app$ methane config -st css

css or scss are the only options available

Create a Component ⏭

With the new update, you can generate React or NextJS server or client components. Intresting right 😄. But the commands are different.

Generating A React Component

mac@Macs-MBP~/D/react-app$ methane g -c componentName

Generating A NextJS Component

mac@Macs-MBP~/D/react-app$ methane g -nc componentName

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.

The 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.

Note

_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

Create a Page ⏭

With the new update, you can generate React or NextJS server or client pages.

Generating A React Page

mac@Macs-MBP~/D/react-app$ methane g -p pageName

This 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.

Generating A NextJS Page

mac@Macs-MBP~/D/react-app$ methane g -np pageName

This 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.

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.

mac@Macs-MBP~/D/react-app$ methane g -np pageName -ct server

Generating A Dynamic NextJS Page

As 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

mac@Macs-MBP~/D/react-app$ methane g -nid productId -sp /products

Command Arguments

1. -nid -nid (Next Dynamic Page Id) is the dynamic page name, which in this case is productId
2. -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.

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.

mac@Macs-MBP~/D/react-app$ methane g -ndp productId -sp /products -ct server

You 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.

Configurations ⚙️

Added a new command list-config [ls]

• --list-config or -lc: Lists all Methane configurations.

mac@Macs-MBP~/D/react-app$ methane list-config

All configurations
{
  template: 'jsx',
  component: 'arrow',
  page: 'arrow',
  generateStylesheet: 'true',
  generateFolder: 'true',
  register: 'true',
  stylesheetType: 'css'
}


```bash
mac@Macs-MBP~/D/react-app$ methane g -sw

Create a Service Worker ⏭

This would create a service worker and add the service worker to the [index.js, main.js, index.jsx, main.jsx] or tsx respectively.

You can now register the service worker by adding

serviceWorkerRegistration.register();

Note

You don't have specify any name for the service-worker

Stuck :(

If you are stuck or you want to learn more about the different configurations, run the following command.

mac@Macs-MBP~/D/react-app$ methane c --help

Architecture 🛠

methane-cli uses a modular architecture.It consists of different modules that perform specific tasks such as generating components, pages, and service worker files.

Contributing ❤️

If you'd like to contribute to Methane, please follow these steps:

1. Fork the repository
2. Create a new branch
3. Make your changes and commit them
4. Push your changes to your fork
5. Create a pull request :)

Please star this repo if you find it useful. Also share the good news with your community.

License 🧐

Methane-Cli is licensed under the MIT License.

Contibutors 👨‍