Skip to content

Utility to quickly generate layers, slices, and segments from Feature-Sliced Design.

License

Notifications You must be signed in to change notification settings

feature-sliced/cli

Repository files navigation

@feature-sliced/cli

npm version Static checks and tests

Utility to quickly generate layers, slices, and segments from Feature-Sliced Design.

Installation

npm add -g @feature-sliced/cli

This will create a global binary fsd. You can install this CLI locally as well, but then you will need to use npx to run it.

Usage

Generate the Entities layer with a client slice that contains an index file and two segments, ui and api:

fsd entities client --segments ui api

Or, for short:

fsd e client -s ui,api

If you have at least one slice in your project already, the CLI will know where to generate. Otherwise, it will generate in the current folder, or you can specify the location yourself with the --root or -r option.

Other examples
  • Generate the Widgets layer with a bottom-bar slice that has an index file and segments ui and api in the src/ folder:

    fsd w bottom-bar -s ui api -r src
    fsd widget bottom-bar -s ui,api -r src
    fsd widgets bottom-bar --segments ui,api -r src

    Produces:

    • src/widgets/bottom-bar/index.(js|ts) (depending on your project)
    • src/widgets/bottom-bar/ui/
    • src/widgets/bottom-bar/api/
  • Generate the Features layer with a slice employee/employee-record inside a slice group employee:

    fsd f employee/employee-record
    fsd feat employee/employee-record

    In a detected FSD root1 or current folder, produces:

    • features/employee/employee-record/index.(js|ts) (depending on your project)
  • Generate the Entities layer with a user slice inside the src/lib folder, creating it if necessary:

    fsd e user -r ./src/lib
    fsd entity user --root ./src/lib

    Produces:

    • src/lib/entities/user/index.(js|ts) (depending on your project)
  • Generate the Pages layer with slices edit-note and note-list, each containing segments ui and api:

    fsd p edit-note note-list -s ui, api
    fsd page edit-note, note-list -s ui api

    In a detected FSD root1 or current folder, produces:

    • pages/edit-note/index.(js|ts) (depending on your project)
    • pages/edit-note/ui/
    • pages/edit-note/api/
    • pages/note-list/index.(js|ts)
    • pages/note-list/ui/
    • pages/note-list/api/
  • Generate the Shared layer with segments ui and api and an index file for each segment:

    fsd s ui api
    fsd s -s ui api
    fsd shared ui -s api
    

    In a detected FSD root1 or current folder, produces:

    • shared/ui/index.(js|ts)
    • shared/api/index.(js|ts)

Credits

Big thanks to a community member Agent_RBY_ for implementing most of the generating and detecting logic.

License

The source code of this project is distributed under the terms of the ISC license. It's like MIT, but better. Click here to learn what that means.

Footnotes

  1. An FSD root is the folder that contains slices in Feature-Sliced Design. There can be several independent roots in one project. 2 3