Code Generation

The `spark create` command generates boilerplate code for pages, endpoints, and components. It handles file placement, naming conventions, and route annotations so you can focus on your logic.

Naming Conventions

All create commands accept PascalCase, camelCase, or snake_case names. The CLI automatically converts the name for each context:

# All of these produce the same result:
spark create page userProfile
spark create page user_profile
spark create page UserProfile

# Result:
#   File:  lib/pages/user_profile_page.dart
#   Class: UserProfilePage
#   Route: /user-profile

Creating Pages

Generate a new page with routing and a basic loader/render structure:

spark create page dashboard

This creates `lib/pages/dashboard_page.dart`:

import 'package:spark_framework/spark.dart';

@Page(path: '/dashboard')
class DashboardPage extends SparkPage<void> {
  @override
  Future<PageResponse<void>> loader(PageRequest request) async {
    return PageData(null);
  }

  @override
  Element render(void data, PageRequest request) {
    return div([
      h1('DashboardPage'),
    ]);
  }
}

See the Pages documentation for details on loaders, responses, and rendering.

Creating Endpoints

Generate a new API endpoint:

spark create endpoint health_check

This creates `lib/endpoints/health_check_endpoint.dart`:

import 'package:spark_framework/spark.dart';

@Endpoint(path: '/api/health-check', method: 'GET')
class HealthCheckEndpoint extends SparkEndpoint {
  @override
  Future<String> handler(SparkRequest request) async {
    return 'HealthCheckEndpoint';
  }
}

Endpoints are automatically routed under `/api/`. See the Endpoints documentation for request bodies, responses, and middleware.

Creating Components

Generate a new web component with the required file structure:

spark create component nav_bar

Component names must be multi-word (e.g., `nav_bar`, `MyCounter`, `UserCard`). Single-word names like `counter` are rejected because web component tags require a hyphen per the HTML spec.

This creates two files in `lib/components/nav_bar/`:

lib/components/nav_bar/
├── nav_bar.dart       # Export with conditional imports
└── nav_bar_base.dart  # Component source code

Export File

`nav_bar.dart` - Handles platform-specific imports:

export 'nav_bar_base.dart'
    if (dart.library.html) 'nav_bar_base.impl.dart'
    if (dart.library.io) 'nav_bar_base.impl.dart';

Base File

`nav_bar_base.dart` - Your component code:

import 'package:spark_framework/spark.dart';

@Component(tag: NavBar.tag)
class NavBar {
  NavBar();

  static const tag = 'nav-bar';

  String get tagName => tag;

  Element render() {
    return div([
      h1('NavBar'),
    ]);
  }
}

See the Components documentation for reactive state, styling, and hydration.