c7: The Configurable Committable Cross-appliCation Custom Component Creator

Usage no npm install needed!

<script type="module">
  import c7 from 'https://cdn.skypack.dev/c7';


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!

The Configurable Committable Cross-appliCation Custom Component Creator

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


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!