npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

make-js-component

v0.4.0

Published

Easily create your js framework component in one command

Downloads

24

Readme

RepoRater

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!

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 .