Methane-cli NPM

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 patch version 1.4.1 aims to fix issues related to the components and pages generation.

React Components and Pages as well as NextJs Components, Pages name default to index.jsx or index.tsx if generateFolder configuration is specified. This makes components and pages import cleaner and easier to understand. For example, if you generate a component called Button, the generated component path would be Button/index.jsx or Button/index.tsx and you can import it like this import Button from './components/Button'. Unlike before where you would have to import it like this import Button from './components/Button/Button'.
Fixed component and pages capitalization issue. In previous versions of Methane, if you generate a component called button, the file name remains button but the generated component would be button instead of Button. This has been fixed in this version.
Gracefully handled potential error that might occur when generating pages or components.
Added a new argument -d or --default to methane init command. This allows developers to easily intialize Methane with the default configuration without being prompted to answer questions. This is useful when you want to quickly initialize Methane in a new project. Note You can always update the Methane configuration by running methane config command.

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

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

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.