Package for Frontend developers who use FSD architecture.
You can create folders and example files for your project.
fsdh
can create this structure:
.
├── app
│ └── hocs
│ └── exampleHoc
│ ├── index.ts
│ └── model
│ └── exampleHoc.tsx
├── entities
│ ├── index.ts
│ └── ui
│ └── exampleEntity.tsx
├── features
│ ├── index.ts
│ └── ui
│ └── exampleFeature.tsx
├── layouts
│ ├── index.ts
│ └── ui
│ └── exampleLayout.tsx
├── pages
│ ├── index.ts
│ └── ui
│ └── examplePage.tsx
├── shared
│ └── ui
│ └── exampleComponent
│ ├── index.ts
│ └── ui
│ └── exampleComponent.tsx
└── widgets
├── index.ts
└── ui
└── exampleWidget.tsx
You can create slices with this command.
This command will create this architecture of slice:
index.ts
- has import and export statementui/{name}.tsx
- has empty interface for props, emptystyled
const ifstyled-components
specifiedmodel/{name}.ts
- has empty model functionstyles/{name}.module.[s]css
- has empty root class for your component
If you select css/scss/styled-components
option, fsdh
generate slice only with one of them. Priority of these options:
styled-components
scss
css
For example, if you select styled-components
and scss
, fsdh
will generate slice with styled-components
.
You can create slice in non-interactive mode:
fsdh create {path} {options}
Options:
m
: addmodel
sc
: addstyled-components
s
: addscss
c
addcss
cs
option create slice withscss
because of priority of styling options.
For example, this command create slice myWidget
in path widgets/
with model
and styled-components
:
fsdh create widgets/myWidget msc
Use a npm package manager:
npm i --global fsdh
You can build fsdh
from sources:
git clone https://github.com/gaskeo/fsdh
cd fsdh
npm install
npm build
After this commands you can run fsdh
:
npm start [init | create]