TypeScript Configuration

Relevant source files

The following files were used as context for generating this wiki page:

• tsconfig.json
• package.json
• cubic.yaml
• src/store.ts
• src/index.ts
• src/provider.tsx

The TypeScript configuration for the @pcstyle/toast project establishes a robust development environment focused on strict type safety, modern ECMAScript standards, and seamless integration with React-based ecosystems. It defines the compilation boundaries, module resolution strategies, and distribution formats for the toast notification system.

This configuration ensures that the library maintains high internal code quality while providing clear type definitions for consumers. The setup utilizes a dual-theme system (Cyber and Minimal) and leverages Framer Motion for animations, all managed through a type-safe central store.

Compiler Options and Environment

The core of the TypeScript setup is defined in tsconfig.json, targeting modern environments and enforcing strict development practices.

Compilation Target and Modules

The project targets ES2020 and uses ESNext modules. The module resolution is set to bundler, which is optimized for modern web development tools.

Option	Value	Description
target	ES2020	Sets the JavaScript language version for emitted JavaScript.
module	ESNext	Specifies the module code generation.
moduleResolution	bundler	Strategy used to resolve module imports.
jsx	react-jsx	Controls how JSX constructs are transformed.

Sources: tsconfig.json:3-16

Output and Directory Structure

TypeScript is configured to separate source files from the compiled output to maintain a clean package structure.

• Root Directory: All source code resides in the src/ directory.
• Output Directory: Compiled files, including JavaScript and type definitions, are emitted to ./dist.
• Declarations: The compiler generates .d.ts declaration files and accompanying maps to facilitate debugging for library consumers.

Sources: tsconfig.json:8-11

Strict Type Safety Standards

The project implements a "STRICT_TYPES" rule, as defined in the repository configuration. This policy prohibits the use of any types or non-null assertions to ensure deep type safety across the SDK.

The diagram above illustrates the intersection between standard TypeScript strict mode and custom repository rules.

Sources: tsconfig.json:12, cubic.yaml:20-25

Build and Distribution

The build process is integrated into the package management system, focusing on producing a package compatible with ESM consumers.

Package Exports

The package.json defines how the project is consumed. It uses the exports field to provide entry points for both code (./dist/index.js) and types (./dist/index.d.ts).

Field	Path	Purpose
main	./dist/index.js	Main entry point for the package.
types	./dist/index.d.ts	Path to the generated type definitions.
scripts.build	tsc	Uses the TypeScript compiler for building the project.

Sources: package.json:7-18

Build Pipeline Flow

The build process transforms TypeScript source files into a distributable format while maintaining type integrity.

The flow shows the transformation from source files to the final distribution assets as configured in the compiler options.

Sources: tsconfig.json:8-11, package.json:17

Core Type Definitions

The system relies on several key interfaces and types to manage the state and functionality of the toast notifications.

Toast Data Structures

The internal store and public API utilize the Toast and ToastType definitions to ensure consistent data handling.

export type ToastType = "success" | "error" | "info" | "warning" | "loading" | "default";

export interface Toast {
  id: string;
  message: string | React.ReactNode;
  type: ToastType;
  duration?: number;
  action?: {
    label: string;
    onClick: () => void;
  };
}

Sources: src/store.ts:5-17

Component Prop Types

The ToastProvider component uses specific interfaces to define available themes and positions, providing autocomplete and validation for React consumers.

• Themes: cyber | minimal
• Positions: top-right, top-center, bottom-right, bottom-center

Sources: src/provider.tsx:7-10

External Dependencies and Peer Types

The configuration accounts for external dependencies required for the UI and animations.

Dependency	Type	Version Requirement
typescript	Dev	^5.0.0
@types/react	Dev	^19.0.0
react	Peer	>=18
framer-motion	Peer	>=10

Sources: package.json:20-33

The TypeScript configuration serves as the foundation for the @pcstyle/toast library, ensuring that the code is strictly typed and correctly bundled for modern React applications while maintaining the "cyberpunk" aesthetic through rigid architectural standards.