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

c7

v2.1.0

Published

c7: The Configurable Committable Cross-appliCation Custom Component Creator

Downloads

18

Readme

c7 is a CLI that allows you to define reusable code components and recreate them with different names/paths/variables—no more copy-pasting folders an changing filenames, imports, exports, comments, or anything else. With c7, just record yourself creating a component, and then add a new one when you need it. No time-consuming config files needed.

Why c7? It's an easy way to standardize component generation. Maybe you've already scripted a macro to do this, but your team and other people contributing to your repo won't have access to it. Make it easier for everyone—contributors, maintainers, you.

Plus, with snack packs, you can easily bootstrap your project with best practices for anything the community supports, in any language: components in React, handlers in Express, goroutines in Go, routes in Rust, and more. If the community doesn't have a starter pack, you can even make your own!



How do I use it?

Install it

Install it globally with npm.

$ npm install -g c7

Record yourself creating something

c7 needs to know how to make what you want. If it doesn't already know, teach it by letting it watch you. Run the command below, then make your changes. Press Enter once you're done, and it'll automatically create all the configuration for you.

$ c7 record [<id> --<param1>=<value1> --<param2>=<value2> ...]

id is a unique identifier for whatever you're making. If it's a Page in a React app, use Page. Any alphanumeric value is supported here.

params and values allow you to define custom variables for each code component. For example, a React design component would probably have a name, so you'd add the --name param. The value is whatever that param is set to in the code you create.

For example, you want to create a React component. To teach it, you might create a component with the name Button. You'd run this:

$ c7 record component --name=Button

Then, you'd add the relevant files (Button.jsx, Button.css, whatever your heart desires). c7 will replace every occurrence of Button with a placeholder that will be filled in when you add a new component.

Note: If you want to create something else, use --name=<whatever you want>. Your choice!

Add more somethings

Once the configuration is generated, you can add new items whenever you want! Run the command below with the same id and params, and c7 will figure out where to put the new values.

$ c7 add [<id> --<param1>=<value1> --<param2>=<value2> ...]

The id determines what is generated. It has to match what you recorded, or in the case of a starter pack, whatever is specified by the author of the starter pack.

Use the same params as when you recorded, but with updated values. Using the React component example above, if you wanted to create an Input component, you'd run this:

$ c7 add component --name=Input

FAQs

Is it stable?

Yes! Our 2.0.0 release is stable and ready for production use. If you catch any bugs, please drop them in our Issues page!

What's the point? Can't I just use existing packages/some other solution?

Sure! Whatever works best for you works best for you, and if that's not c7, we encourage you to do what makes you happy.

The key advantages of c7 are that:

  • since configurations can be committed, everyone in your team can generate things the same way
  • it's not opinionated at all—create components however you want
  • if you do want to do things the idiomatic way, you can with starter packs
  • super simple configuration—just record file creation, and c7 does the rest

How does modifying files work?

Currently, c7 looks for where you've added data based on line and col position. It will add data at the same place (adjusting to make sure it stays even if things shift a little). Eventually, we'll support AST parsers to more meaningfully modify files.

We'll support a limited subset, but we'll allow plugins to support other community-written parsers.

Configuring c7

These can be configured either in c7.json or as params when running commands.

|Param|Type|Default|                 Description                 | |-----|-----|-----|-----| |MatchCase|Boolean|true|Determines whether to match the case of parameters. If false, will match lowercase, uppercase, and capitalcase variants of every custom parameter in paths, new files, and modified files.| |MatchPath|Boolean|true|Determines whether to match paths of created and modified files. If false, will never try to change the path.| |AllowVars|Boolean|false|Determines whether parameters can be passed as variables to other parameters. For example, if true, passing --name=Param1 --test=[name]00 would set name to be Param1 and test to be Param100.|

More to come soon!

What's the roadmap?

In the interest of full disclosure, here's a list of all planned and existing features, along with their status.

  • Add incomplete

    • Create live

      • Create directories live
      • Create files live
      • Ensure no overwrite live
    • Modify incomplete

      • Modify files using line position incomplete
        • Insert chunks at position live
        • Update chunk position on insert live
        • Detect external changes to file (lastHash, lastContents) todo
        • Add naive, diff, prefix, skip resolutions todo
      • Modify files using AST todo
  • Record live

    • New live

      • New directories live
      • New files live
      • Use user-friendly templates live
    • Modified live

      • Modified directories live
      • Modified files live
  • Starter packs live

    • Allow modify if not exist (ifEmpty) live

    • Install from git live

      • Verify repository exists live
      • Recursively fetch data live
  • Plugins todo

    • Refactor and extract core to plugin todo

  • Dependency management todo

If you would like to see a feature not listed here, or if you notice any bugs, drop them in our Issues page!

Contributing

See CONTRIBUTING.md.