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.
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.
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-clibun install -g methane-cliyarn add -g methane-cliTo 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 --defaultThe following commands are available in methane-cli
--helpor-h: Displays a list of available commands.--versionor-v: Displays the version of methane-cli.--generateor-g: Generates Components, Pages or Service Worker files.--configor-c: Configures the CLI tool to your taste.--initor-i: Initializes default configuration files in root directory.--list-configor-lc: Lists all Methane-Cli configurations.
To run a command, simply add it at the end of methane or rg for example,
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.
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
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
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
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
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
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
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
With the new update, you can generate React or NextJS server or client components. Intresting right 😄. But the commands are different.
mac@Macs-MBP~/D/react-app$ methane g -c componentName
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.
_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
With the new update, you can generate React or NextJS server or client pages.
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.
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
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
- -nid -nid (Next Dynamic Page Id) is the dynamic page name, which in this case is productId
- -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.
Added a new command list-config [ls]
--list-configor-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
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();You don't have specify any name for the service-worker
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
methane-cli uses a modular architecture.It consists of different modules that perform specific tasks such as generating components, pages, and service worker files.
If you'd like to contribute to Methane, please follow these steps:
- Fork the repository
- Create a new branch
- Make your changes and commit them
- Push your changes to your fork
- Create a pull request :)
Please star this repo if you find it useful. Also share the good news with your community.
Methane-Cli is licensed under the MIT License.
