How to Add Your Own Element to Produce

We have big factory and a bunch of workbenches to produce the elements of the next small thing in the web. Each supported framework has it's own generation functions that are contained in the workbench object as a closure.

const workbench: INextjs2Actions = {
    Component: () => createClassComponent(options),

    YourAwesomeElement: () => createAwesomeElement({ ...options, hyped: true })
}

When initial question is answered which is being used to what element user wants to generate, we get some help from the henchman to ask the questions of selected element to user. These questions define how is the element going to be generated.

getQuestionsOfProjectElement(project, element);

All questions are indexed under henchman/suitcase. Make sure your element's questions are being listed here as the others.

export const nextjs2: INextjs2Questions = {
    Page: [
        questions.implementation,
        questions.enterPageName,
        ...
    ],

    ...
}

Since the questions are being asked using inquirer, each question must be type of one of the inquirer provides.

export const connectStore: inquirer.ConfirmQuestion<ICommon.IAnswers> = {
    message: 'Do you want to connect store ?',
    name: 'isConnectStore',
    type: 'confirm',
    default: false
};

An answers object will be resolved from the promptings of inquirer. This is the object you need to act upon and pass to your templates. If needed and also will help to keep the code clean, you can modify it beforehand.

Eventually, the factory will end up making the call to your generation function which is your own implementation of generation logic.

factory[project](element, options);

All generation functions are foldered by project in workbenches/tasks. You need to add your function into the folder which project you want to produce for, and also make sure you add the export line to the folder's index.ts.

export const createAwesomeElement = (options: ICommon.IAnswers): void => {

    // Implement your generation logic here.

    createFile(options.classDir);
    createInterface(options);
    createStyle(options);
}

You can use some help of concurrent functions of the project also you can check workbenches/operations for all the file system operations.

Params are good way to keep the code clean and are eligible to reuse and kept under workbenches/params.

Paths are all about project structure and kept under modules/paths. You can keep all the target and template paths there.

Typings are being kept at modules/typings. Make sure you have updated the typings of the working project. These files are needed to be updated after any property change in the structure.