@mongez/gnz v5.0.21
GNZ
Your best solution for generating files and directories.
Features
- Shipped with many built-in templates.
- Allows you to create your own templates.
Installation
npm install @mongez/gnz
Using Yarn
yarn add @mongez/gnz
Using pnpm
pnpm add @mongez/gnz
Usage
There are many built-in templates that you may use.
Generate React Component
npx gnz react:component MyComponent --path src/components
This will create MyComponent
component in src/components
directory with the following structure:
src
└── components
└── MyComponent
├── index.ts
└── MyComponent.tsx
The output of the index.ts
file is:
export { default } from "./MyComponent";
The output of the MyComponent.tsx
file is:
import { memo } from "react";
function _MyComponent() {
return (
<>
<h1>MyComponent</h1>
</>
);
}
const MyComponent = memo(_MyComponent);
export default MyComponent;
By default the component will be memoized
, if you want to disable this, you can pass --memo
option with false
value.
npx gnz react:component MyComponent --path src/components --memo false
If you want to add a forward ref to the component, you can pass --ref
option.
npx gnz react:component MyComponent --path src/components --ref
The output of the component file will be:
import { forwardRef, memo } from "react";
function _MyComponent(props: any, ref: any) {
return (
<>
<h1>MyComponent</h1>
</>
);
}
const MyComponent = memo(forwardRef(_MyComponent));
export default MyComponent;
Generate Http Service files (Mongez Http)
By using Mongez Http, you can easily manage your endpoint services files.
There are two types of services: Single Service file, and restful service file.
Single Service File
This will generate a service file that contains two function, getXList
where X
is the name of the service, and getX
which receives an id and returns the item with this id.
To create a service file run the following command:
npx gnz http:service users --path src/services
This will generate a users-service.ts
file in src/services
directory with the following structure:
import endpoint from "shared/endpoint";
export function getUsersList(params: any = {}) {
return endpoint.get("/users", { params });
}
export function getUser(id: string | number) {
return endpoint.get(`/users/${id}`);
}
If the endpoint instance is located in another location, path a endpoint
option with the path to the endpoint instance.
npx gnz http:service users --path src/services --endpoint shared/endpoint
Restful Service File
This will generate a service file that contains all the restful method with a Restful Endpoint Class to manage list
, get
, create
, update
, and delete
methods for a single resource.
To create a service file run the following command:
npx gnz http:restful users --path src/services
This will generate a users-service.ts
file in src/services
directory with the following structure:
import { RestfulEndpoint } from "mongez/http";
class UsersService extends RestfulEndpoint {
/**
* The resource route.
*/
public route = "/users";
}
export const usersService = new UsersService();
If you want to manually change the route (which is taken from the service name) you can pass --route
option.
npx gnz http:restful users --path src/services --route /users-list
MongoDB Model
You can easily generate A MongoDB Model using the following command:
npx gnz gn:model users --path src/models
This will create a user
directory with the following structure:
src
└── models
└── user
├── index.ts
└── user.ts
└── migration.ts
The output of the index.ts
file is:
import { Casts, Document, Model } from "@mongez/monpulse";
export class User extends Model {
/**
* Collection name
*/
public static collection = "users";
/**
* Default value for model data
* Works only when creating new records
*/
public defaultValue: Document = {};
/**
* Cast data types before saving documents into database
*/
protected casts: Casts = {};
/**
* Define what columns should be used when model document is embedded in another document.
* Make sure to set only the needed columns to reduce the document size.
* This is useful for better performance when fetching data from database.
*/
public embedded = ["id"];
}
And the migration file:
import { User } from "./user";
export const UserBluePrint = User.blueprint();
export async function userMigration() {
await UserBluePrint.unique("id");
}
userMigration.blueprint = UserBluePrint;
userMigration.down = async () => {
await UserBluePrint.dropUniqueIndex("id");
};
Generate a migration file
If you want to generate a migration file, you can use the following command:
npx gnz gn:migration users --path src/migrations
Generate Component Using Node Api
To generate it manually with more options, you can import the component generator manually and call it.
Create a file called gnz.ts
in your root directory and add the following code:
import { gnz, generateReactComponent } from "@mongez/gnz";
import path from "path";
gnz.execute(
generateReactComponent({
saveTo: path.resolve(__dirname, "src/components"),
name: "MyComponent",
}),
);
Now execute this command:
npx gnz api
Generate Service File (Mongez)
This will generate a service file using Mongez Http
Vscode Extension
Lazy to do all of this? You can use the vscode extension to generate files and directories.
A note about generated templates
Any template that ends with (Mongez)
, it means the generated files will be using some of Mongez Packages.
TODO
- Generate Nextjs Component.
- Generate Nextjs Page.
- Generate
types
file. - Generate
scss
module file. - Generate
css
module file. - Generate
styled
file. - Generate Mongez React Module
- Generate Mongez Moonlight Module
- Generate Mongez Moonlight Reactive Form
- Generate Mongez Moonlight Super Table
- Generate Mongez Moonlight Basic Table
- Generate Mongez Warlock Module
- Generate Mongez Warlock Controller/Action
- Generate Mongez Warlock Route
- Generate Mongez Warlock Output
- Generate Mongez Warlock Locale
- Generate Mongez Warlock flags
- Generate Mongez Warlock events
- Generate Mongez MongoDB Model
- Generate Mongez Laravel Module
- Complete Docs.
25 days ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
8 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
8 months ago
8 months ago
7 months ago
8 months ago
5 months ago
5 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago