Programming Standards

Programming Standards

This document outlines the programming standards and conventions for the Turing Machine Simulator application. Adhering to these standards ensures code consistency, readability, and maintainability.

File Structure

• React components are organized logically. Each major feature (e.g., BlockEditor, BlockPalette) has its own file.
• Helper functions and data structures are grouped into logical files (e.g., BlockUtil.tsx, BlockConfig.ts).
• CSS files are co-located with their respective components and are named to match (e.g., Block.css for Block.tsx). Global styles are in index.css.

Naming Conventions

• Components are in PascalCase (e.g., BlockPalette, BlockEditor).
• Functions are in camelCase (e.g., handleInputCountChange, evaluateBlock).
• Types and Interfaces are in PascalCase (e.g., BlockData, BlockSlot).
• Constants are iin SCREAMING_SNAKE_CASE (e.g., DEFAULT_INPUT_COUNT)

Component Architecture

• All components are written as functional components, leveraging modern React hooks.
• Component props are explicitly typed using TypeScript interfaces (interface Props { ... }).
• The useState hook is used for managing component-specific state (e.g., rootBlock, inputs).
• The useEffect hook is used for side effects, such as updating the root block based on input changes. Dependencies for useEffect are carefully managed to prevent infinite loops (e.g., using JSON.stringify(rootBlock) to detect deep changes).
• The useRef hook is used to access DOM elements directly, such as for integrating with the react-dnd library.

Comments

• Comments are used to explain complex logic, such as the dynamic children generation in Block.tsx and the evaluation logic in BlockConfig.ts.