Skip to content

docs.md

Latest commit

 

History

History
94 lines (68 loc) · 3.56 KB

docs.md

File metadata and controls

94 lines (68 loc) · 3.56 KB
Raw

vski table

Getting Started

This project makes use of @nesterow/xmod module system. The import is allised to @xmod

Frontend Architecture

This document provides an overview of the frontend architecture for this project.

Introduction

The frontend is a Preact application built with Vite and Deno. It follows a modular architecture, where features are organized into self-contained modules. This approach promotes code reusability, maintainability, and scalability.

Module Structure

A typical module has the following structure:

  • mod.ts: The entry point of the module. It exports the module definition.
  • store.ts: The state management for the module, using @preact/signals.
  • Components (e.g., MyComponent.tsx): Preact components related to the module.

Creating a New Module

To create a new module, follow these steps:

  1. Create a new directory in the project directory.
  2. Create a mod.ts file that exports a module definition.
  3. Create a store.ts file to manage the module's state.
  4. Create the necessary components for the module.

Module Interaction

Modules can interact with each other through the store instance.

State Management

The application uses @preact/signals for state management. The state is organized by modules, and each module has its own store.ts file.

The store.ts file exports the following functions:

  • state(): A function that returns the initial state of the module.
  • persist(): A function that returns the state that should be persisted to localStorage.
  • mutate(): A function that mutates the state based on a command.

The application state is accessible through the app.state property in the application context.

Codestyle

The project follows a consistent codestyle to ensure readability and maintainability.

  • Typing: The code is written in TypeScript.
  • Naming Conventions:
    • Components are named in PascalCase.
    • Files are named in PascalCase for components and kebab-case for other files.
    • Variables and functions are named in camelCase.
  • Component Structure:
    • Components are defined in their own files.
    • The component file should be located in the module's directory.
    • The component file should export the component as the default export.
  • Imports:
    • Imports are organized by modules.
    • Absolute imports are used for modules (@/module_name/...).
    • Relative imports are used within a module.

END OF DOCS