Skip to content

jazweatherhead/aacm

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

aacm

aacm makes components and styles for you.

Installation

aacm is meant to be installed globally, then used from your app's src/ directory (or equivalent).

$ sudo npm i -g aacm


Syntax

aacm [flags] <ComponentName>

For example,

$ aacm ItemDetail

gives you...

./components/ItemDetail/ItemDetail.jsx

import React from 'react';

import './ItemDetail.scss';

function ItemDetail() {
  return (
    <div className="ItemDetail">

    </div>
  );
}

export default ItemDetail;

and

./components/ItemDetail/ItemDetail.scss

.ItemDetail {
    
}

Now multiply that by every component you'll ever create and you've saved yourself some time. =)


Multiple Components

You can pass in multiple component names at once, like so...

$ aacm Header Body Footer

This creates...

.
└── components
    ├── Body
    │   ├── Body.jsx
    │   └── Body.scss
    ├── Footer
    │   ├── Footer.jsx
    │   └── Footer.scss
    └── Header
        ├── Header.jsx
        └── Header.scss

according to the flags.


Flags

Flag Effect
-c, --class Generates class components
Uses modern syntax
-f, --functional Generates functional components
This is the default
-h, --help Shows available flags
-i, --asi Confidence Mode
Use Automatic Semicolon Insertion
-k, --kebab Makes the generated directories
and file names use kebab-case
-V, --version Shows version number
--css Generates CSS
(default is SCSS)
--old-class Generates class components
Uses classic syntax
--features Outputs to features/
(default is components/)

Any of these may be combined.

For example, aacm ItemDetail -ik generates

./components/item-detail/item-detail.scss

and

./components/item-detail/item-detail.jsx (semicolon free).

About

an automatic component maker

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published