> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nanoforge.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Component

> Generate a NanoForge ECS component

import Tooltip from "mint/Tooltip";

## Overview

The `component` schematic scaffolds a new ECS component class for a NanoForge client or server part. The generated file includes the component class, a default export required for code generation, and an `EDITOR_COMPONENT_MANIFEST` required for the NanoForge editor to display and configure the component.

## Usage

```bash theme={null}
schematics @nanoforge-dev/schematics:component --part=client --name=health
```

## Options

| Option      | Type                   | Default      | Description                                                                                                                                                                           |
| ----------- | ---------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | `string`               | `example`    | <Tooltip tip="Converted to PascalCase for the class name (e.g. 'health' → 'HealthComponent') and kebab-case for the file name (e.g. 'health.component.ts').">Component name</Tooltip> |
| `part`      | `"client" \| "server"` | *(required)* | <Tooltip tip="Determines which ECS package to import from: @nanoforge-dev/ecs-client or @nanoforge-dev/ecs-server.">The part of the application this component belongs to</Tooltip>   |
| `directory` | `string`               | `.`          | <Tooltip tip="Typically the components/ folder inside your part directory, e.g. client/components/.">Destination directory for the generated file</Tooltip>                           |
| `language`  | `"ts" \| "js"`         | `ts`         | Language to use for the generated file                                                                                                                                                |

## Generated file

`{directory}/{name}.component.ts`

```ts theme={null}
import { type EditorComponentManifest } from "@nanoforge-dev/ecs-client";

export class HealthComponent {
  name = this.constructor.name;

  constructor(
    public paramA: string,
    public paramB: number,
    public paramC: boolean = false,
  ) {}

  get foo() {
    return "bar";
  }

  get paramAOrDefault() {
    return this.paramC ? this.paramA : "default";
  }

  addOne() {
    this.paramB += 1;
  }
}

// Required to generate code
export default HealthComponent.name;

// Required for the editor to display the component and generate code
export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
  name: "Health",
  description: "Health component description",
  params: [
    {
      type: "string",
      name: "paramA",
      description: "Param A description",
      example: "Example value",
    },
    {
      type: "number",
      name: "paramB",
      description: "Param B description",
      example: 3,
    },
    {
      type: "boolean",
      name: "paramC",
      description: "Param C description",
      example: true,
      default: false,
      optional: true,
    },
  ],
};
```

## Editor manifest

The `EDITOR_COMPONENT_MANIFEST` export is required for the NanoForge editor to discover the component, render its configuration panel, and generate code. Each `params` entry describes one constructor parameter:

| Field         | Required | Description                                                  |
| ------------- | -------- | ------------------------------------------------------------ |
| `type`        | Yes      | Parameter type: `"string"`, `"number"`, or `"boolean"`       |
| `name`        | Yes      | Constructor parameter name                                   |
| `description` | Yes      | Human-readable description shown in the editor               |
| `example`     | Yes      | Example value used in code generation                        |
| `default`     | No       | Default value when the parameter is optional                 |
| `optional`    | No       | When `true`, the editor treats the parameter as non-required |

## Examples

**Generate a `PlayerComponent` for the client:**

```bash theme={null}
schematics @nanoforge-dev/schematics:component \
  --part=client \
  --name=player \
  --directory=client/components
```

**Generate a JavaScript server component:**

```bash theme={null}
schematics @nanoforge-dev/schematics:component \
  --part=server \
  --name=network-player \
  --language=js \
  --directory=server/components
```