Make Js Component

Make Js Component is an NPX command born with the purpose of streamline the process for developers of creating components with the many FE frameworks around here.

Since some frameworks have standard commands, some had them, some really don't, the quickest thing is usually copy pasting compononent after component and then edit it.

MJC allows you to just call a command and have your JS component ready to use, and edit, with also a bunch of options available in order to start with the perfect boilerplate.

Can't find the framework or the options you need? Checkout the Contributing guide and open an issue to let us know and, if you wish, you can open a PR to have the feature inclued in the command!

• Make Js Component
  • Basic Usage
    • Options
      • --name
      • --folder
      • --framework
      • --[framework]
      • --multiple
  • Available Frameworks
    • Vue
    • React
    • Angular
    • Qwik
    • Svelte
    • Astro
  • Contributing
  • Setup locally

Basic Usage

npx make-js-component

This command will start a short wizard that will create your component in a few steps.

Options

--name

Specify the component name

npx make-js-component --name <NAME>

--folder

Set the /components subfolder in which to create the new component/s.

npx make-js-component --folder <PATH>

--framework

Set which framework your component is for.

npx make-js-component --framework [vue|angular|react|svelte|qwik|astro]

--[framework]

You can specify the desired framework directly by adding a flag. The available flags are the same as the options for --framework flag.

#this will create a vue component
npx make-js-component --vue

--multiple

Using this flag allows you to create multiple components in succession. If you type “exit” while in the naming your component phase, it will exit the prompt.

npx make-js-component --multiple

Available Frameworks

Vue

Want to help with vue components? Check out Vue related issues

When choosing Vue, the wizard will ask you whether you prefer to use the Options API or the Composition API, and you can make your selection using the arrow keys.

React

Want to help with React components? Check out React related issues

When choosing React, the wizard will ask you if you want to use TypeScript or not, and you can make your selection using the arrow keys.

Angular

Want to help with Angular components? Check out Angular related issues

Qwik

Want to help with Qwik components? Check out Qwik related issues

Svelte

Want to help with Svelte components? Check out Svelte related issues

Astro

Want to help with Astro components? Check out Astro related issues

Contributing

Read the Contributing guide for the contribution process

Setup locally

If you're cloning the repo, both for contributing or just to start taking confidence with the code just follow these steps:

1. clone the repo with git clone https://github.com/Giuliano1993/make-js-component
2. inside the folder run npm install
3. then to transpile ts files into js and watch them, run npm run dev

To run your local version of the package and test it, run

npx .