### Install @wroud/di using Package Managers

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/guide/package/di/getting-started/installation.md

Commands to install the @wroud/di library using npm, yarn, pnpm, and bun. These commands add the package as a project dependency.

```sh
npm install @wroud/di
```

```sh
yarn add @wroud/di
```

```sh
pnpm add @wroud/di
```

```sh
bun add @wroud/di
```

--------------------------------

### TypeScript Setup with @wroud/di

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/guide/package/di/getting-started/installation.md

Demonstrates how to set up dependency injection in TypeScript using @wroud/di. It includes defining injectable services (Logger, UserService), configuring the ServiceContainerBuilder, registering services as singletons or transients, building the container, and retrieving a service to use its methods.

```typescript
import { ServiceContainerBuilder, injectable } from '@wroud/di';

@injectable()
class Logger {
    log(message: string) {
        console.log(message);
    }
}

@injectable(() => [Logger])
class UserService {
    constructor(private logger: Logger) {}

    createUser(user: { name: string }) {
        this.logger.log(`Creating user: ${user.name}`);
        // User creation logic
    }
}

const containerBuilder = new ServiceContainerBuilder();
containerBuilder.addSingleton(Logger);
containerBuilder.addTransient(UserService);
const serviceProvider = containerBuilder.build();

const userService = serviceProvider.getService(UserService);
userService.createUser({ name: 'John Doe' });
```

--------------------------------

### Wroud Foundation Documentation and Getting Started

Source: https://github.com/wroud/foundation/blob/main/README.md

Provides information on where to find comprehensive documentation for all Wroud Foundation packages and guidance on how to get started with them. It directs users to the official documentation site and README files for detailed instructions.

```markdown
Find comprehensive documentation for all packages on our [documentation site](https://wroud.dev). Every package README also provides a brief overview.

Visit the documentation site and select a package to get started. Each section guides you from installation to advanced usage.
```

--------------------------------

### Add Installation Section to Docs

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/git/__testfixtures__/fixture.git-log.txt

Adds a dedicated section for installation instructions to the project's documentation. This guides new users on how to set up the project.

```javascript
docs: add installation section
```

--------------------------------

### Install tslib for Decorator Support

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/packages/di/usage.md

Commands to install the `tslib` package, which may be required in environments that do not natively support decorators.

```sh
npm install tslib
```

```sh
yarn add tslib
```

```sh
pnpm add tslib
```

```sh
bun add tslib
```

--------------------------------

### Install @wroud/di-react

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/packages/di/integrations/react/install.md

Instructions for installing the @wroud/di-react package using npm, yarn, pnpm, and bun.

```sh
npm install @wroud/di-react
```

```sh
yarn add @wroud/di-react
```

```sh
pnpm add @wroud/di-react
```

```sh
bun add @wroud/di-react
```

--------------------------------

### Dependency Injection Setup with @wroud/di

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/guide/package/di/scaling/integration.md

Demonstrates setting up a service container using @wroud/di, registering various services with different lifetimes (singleton, transient, scoped). Includes examples of injectable classes like DatabaseConnection, Database, App, and Request.

```typescript
import { ServiceContainerBuilder, injectable, createService } from "@wroud/di";

@injectable(() => [])
class DatabaseConnection {}
@injectable(() => [DatabaseConnection])
class Database {}
@injectable(() => [Database])
class DBUsers {}
@injectable(() => [Database])
class DBArticles {}
@injectable(() => [Database])
class DBComments {}

@injectable(() => [])
class Request {}
@injectable(() => [Request, DBUsers])
class Profile {}
@injectable(() => [Database])
class SessionStore {}
@injectable(() => [Request, SessionStore])
class Session {}

@injectable(() => [DatabaseConnection, GQLServer])
class App {}
@injectable(() => [Request])
class GQLServer {}

const serviceCollection = new ServiceContainerBuilder()
  .addSingleton(App)
  .addSingleton(DatabaseConnection)
  .addSingleton(GQLServer)
  .addTransient(Database)
  .addTransient(SessionStore)
  .addTransient(DBUsers)
  .addTransient(DBArticles)
  .addTransient(DBComments)
  .addScoped(Request)
  .addScoped(Profile)
  .addScoped(Session);
```

--------------------------------

### Install @wroud/preconditions

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/preconditions/README.md

Instructions for installing the @wroud/preconditions package using npm or yarn.

```sh
npm install @wroud/preconditions
```

```sh
yarn add @wroud/preconditions
```

--------------------------------

### Install @wroud/di-tools-analyzer

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/guide/package/di-tools/analyzer/introduction.md

Installs the `@wroud/di-tools-analyzer` package using various package managers like npm, yarn, pnpm, and bun.

```sh
npm install @wroud/di-tools-analyzer
```

```sh
yarn add @wroud/di-tools-analyzer
```

```sh
pnpm add @wroud/di-tools-analyzer
```

```sh
bun add @wroud/di-tools-analyzer
```

--------------------------------

### Installation

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/navigation/README.md

Installs the @wroud/navigation package using npm or yarn.

```sh
npm install @wroud/navigation
```

```sh
yarn add @wroud/navigation
```

--------------------------------

### Install @wroud/playground-react

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/playground-react/README.md

Instructions for installing the @wroud/playground-react library using npm or yarn.

```sh
npm install @wroud/playground-react
yarn add @wroud/playground-react
```

--------------------------------

### ServiceContainerBuilder Example

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/packages/di/api.md

Example demonstrating how to use the ServiceContainerBuilder to register singleton services and build a service provider.

```ts
import { ServiceContainerBuilder } from "@wroud/di";
import Logger from "./Logger";
import ILoggerService from "./ILoggerService";

const builder = new ServiceContainerBuilder();
builder.addSingleton(Logger);
builder.addSingleton(ILoggerService, Logger);
builder.addSingleton(ILoggerService, () => new Logger());

const provider = builder.build();
```

--------------------------------

### Basic Setup with @wroud/di-tools-analyzer

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/guide/package/di-tools/analyzer/introduction.md

Demonstrates the basic setup for using `@wroud/di-tools-analyzer` by importing necessary components from `@wroud/di` and `@wroud/di-tools-analyzer`, creating a `ServiceContainerBuilder`, and then calling `getDependenciesGraph` to collect dependency data.

```javascript
import { ServiceContainerBuilder } from "@wroud/di";
import { getDependenciesGraph } from "@wroud/di-tools-analyzer";

const builder = new ServiceContainerBuilder();
// Register your services

const data = await getDependenciesGraph(builder);
```

--------------------------------

### Install @wroud/react-split-view

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/react-split-view/src/split.stories.md

Command to install the @wroud/react-split-view package using npm.

```bash
npm install @wroud/react-split-view
```

--------------------------------

### Package Manager Installation

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/packages/react-split-view/install.md

Install the @wroud/react-split-view package using npm, yarn, pnpm, or bun.

```sh
npm install @wroud/react-split-view
```

```sh
yarn add @wroud/react-split-view
```

```sh
pnpm add @wroud/react-split-view
```

```sh
bun add @wroud/react-split-view
```

--------------------------------

### Install @wroud/ts-project-linker

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/ts-project-linker/README.md

Instructions for installing the @wroud/ts-project-linker CLI tool using npm or yarn.

```bash
npm install @wroud/ts-project-project-linker
```

```bash
yarn add @wroud/ts-project-project-linker
```

--------------------------------

### Install @wroud/react-tree with Package Managers

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/packages/react-tree/install.md

Installs the @wroud/react-tree package using npm, yarn, pnpm, or bun. This is the primary method for integrating the library into your project.

```sh
npm install @wroud/react-tree
```

```sh
yarn add @wroud/react-tree
```

```sh
pnpm add @wroud/react-tree
```

```sh
bun add @wroud/react-tree
```

--------------------------------

### Install @wroud/vite-plugin-playground

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/vite-plugin-playground/README.md

Installs the @wroud/vite-plugin-playground and @wroud/playground-react packages using npm or yarn.

```sh
npm install @wroud/vite-plugin-playground @wroud/playground-react
```

```sh
yarn add @wroud/vite-plugin-playground @wroud/playground-react
```

--------------------------------

### Install @wroud/di-react

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/di-react/README.md

Demonstrates how to install the @wroud/di-react package using different package managers like npm, yarn, pnpm, or bun.

```sh
npm install @wroud/di-react
```

```sh
yarn add @wroud/di-react
```

--------------------------------

### Install @wroud/vite-plugin-ssg

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/vite-plugin-ssg/README.md

Instructions for installing the @wroud/vite-plugin-ssg package using npm or yarn.

```bash
npm install @wroud/vite-plugin-ssg
```

```bash
yarn add @wroud/vite-plugin-ssg
```

--------------------------------

### Install @wroud/react-split-view

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/react-split-view/README.md

Instructions for installing the @wroud/react-split-view package using npm or yarn.

```sh
npm install @wroud/react-split-view
```

```sh
yarn add @wroud/react-split-view
```

--------------------------------

### Install @wroud/flow-middleware

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/flow-middleware/README.md

Instructions for installing the @wroud/flow-middleware package using npm or yarn.

```sh
npm install @wroud/flow-middleware
```

```sh
yarn add @wroud/flow-middleware
```

--------------------------------

### Install @wroud/di with Package Managers

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/packages/di/install.md

Installs the @wroud/di package using various package managers like npm, yarn, pnpm, and bun. This is the primary method for adding the package to your project.

```sh
npm install @wroud/di
```

```sh
yarn add @wroud/di
```

```sh
pnpm add @wroud/di
```

```sh
bun add @wroud/di
```

--------------------------------

### Install graphql-codegen-fragment-masking

Source: https://github.com/wroud/foundation/blob/main/packages/graphql-codegen-fragment-masking/README.md

Instructions for installing the graphql-codegen-fragment-masking package using npm or yarn.

```bash
npm install -D graphql-codegen-fragment-masking
```

```bash
yarn add -D graphql-codegen-fragment-masking
```

--------------------------------

### Installation

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/vite-plugin-asset-resolver/README.md

Commands to install the @wroud/vite-plugin-asset-resolver package using npm or yarn.

```sh
npm install @wroud/vite-plugin-asset-resolver
```

```sh
yarn add @wroud/vite-plugin-asset-resolver
```

--------------------------------

### Install @wroud/di-tools-analyzer with npm

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/di-tools-analyzer/README.md

Installs the @wroud/di-tools-analyzer package using npm.

```sh
npm install @wroud/di-tools-analyzer
```

--------------------------------

### Install @wroud/react-tree

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/react-tree/README.md

Instructions for installing the @wroud/react-tree package using npm or yarn.

```sh
npm install @wroud/react-tree
```

```sh
yarn add @wroud/react-tree
```

--------------------------------

### IServiceProvider Example

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/packages/di/api.md

Example demonstrating how to use the IServiceProvider to resolve services, including resolving multiple instances and using scopes for isolated service lifecycles.

```ts
import Logger from "./Logger";

const logger = provider.getService(Logger);
logger.log("Hello world!");

const loggers = provider.getServices(Logger);
loggers.forEach((logger) => logger.log("Hello from multiple loggers!"));

const scope = provider.createScope();
const scopedLogger = scope.serviceProvider.getService(Logger);
scopedLogger.log("Scoped Hello world!");

provider.dispose();
```

--------------------------------

### Simplify Examples and Samples

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/git/__testfixtures__/fixture.git-log.txt

Refactors and simplifies code examples and samples within the documentation. The goal is to make them easier to understand and use.

```javascript
docs: make examples simpler
```

```javascript
docs: simplify samples
```

--------------------------------

### Install @wroud/api-logger

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/api-logger/README.md

Instructions for installing the @wroud/api-logger package using npm or yarn.

```sh
npm install @wroud/api-logger

yarn add @wroud/api-logger
```

--------------------------------

### Install @wroud/github and @wroud/git

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/github/README.md

Installs the @wroud/github and @wroud/git packages using npm or yarn.

```sh
npm install @wroud/github @wroud/git
```

```sh
yarn add @wroud/github @wroud/git
```

--------------------------------

### Install @wroud/di-tools-analyzer with yarn

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/di-tools-analyzer/README.md

Installs the @wroud/di-tools-analyzer package using yarn.

```sh
yarn add @wroud/di-tools-analyzer
```

--------------------------------

### Basic Component Story Example

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/playground-react/README.md

An example demonstrating how to define component stories using the `describe` and `story` functions from @wroud/playground-react. It showcases a default button and a primary button with a preview and description.

```tsx
import { describe, story } from "@wroud/playground-react";
import { Button } from "./Button";

describe("Buttons", () => {
  story(
    "Default",
    function DefaultButtonStory() {
      return <Button>Click Me</Button>;
    }
  );
  
  story(
    "Primary",
    function PrimaryButtonStory() {
      return <Button variant="primary">Primary Button</Button>;
    },
    {
      preview: true,
      description: "A primary button with higher visual prominence"
    }
  );
});
```

--------------------------------

### Basic Usage Example: Dependency Graph Analysis and Visualization

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/guide/package/di-tools/analyzer/introduction.md

Provides a comprehensive example of using `@wroud/di-tools-analyzer` with D3.js. It covers initializing the D3.js chart, collecting dependency information using `getDependenciesGraph`, and rendering the graph.

```javascript
import { ServiceContainerBuilder } from "@wroud/di";
import { createChart, getDependenciesGraph } from "@wroud/di-tools-analyzer";

// Assume htmlSvgElement, width, and height are predefined
const chart = createChart(htmlSvgElement, width, height); // Initialize D3.js
const builder = new ServiceContainerBuilder();
// Register your services
const graph = await getDependenciesGraph(builder); // Collect information about dependencies, data can be serialized with JSON.stringify()
chart.update(graph); // Render graph
```

--------------------------------

### Codemod Configuration

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/di-tools-codemod/README.md

Example configuration file for di-tools-codemod, specifying transformation options and package mappings.

```json
{
  "transformer": {
    "esm": false,
    "copyright": ""
  },
  "supportedPackages": [
    {
      "name": "inversify",
      "replace": "@wroud/di",
      "injectableDecorator": "injectable",
      "injectDecorator": "inject",
      "multiInjectDecorator": "multiInject"
    }
  ],
  "generateModule": true
}
```

--------------------------------

### Basic Dependency Injection with @wroud/di

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/guide/package/di/getting-started/introduction.md

Demonstrates how to define services, inject dependencies using decorators, build a service container, and resolve services. This example showcases the core functionality of @wroud/di for managing service lifecycles and dependencies.

```javascript
import { ServiceContainerBuilder, injectable } from '@wroud/di';

// Define a service
@injectable()
class Logger {
    log(message: string) {
        console.log(message);
    }
}

// Define another service that depends on Logger
@injectable(() => [Logger])
class UserService {
    constructor(private logger: Logger) {
        this.logger = logger;
    }

    createUser(user: { name: string }) {
        this.logger.log(`Creating user: ${user.name}`);
        // User creation logic
    }
}

// Build the service container
const containerBuilder = new ServiceContainerBuilder();
containerBuilder.addSingleton(Logger);
containerBuilder.addTransient(UserService);
const serviceProvider = containerBuilder.build();

// Resolve and use the UserService
const userService = serviceProvider.getService(UserService);
userService.createUser({ name: 'John Doe' });
```

--------------------------------

### Usage Example for @wroud/di-tools-analyzer

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/di-tools-analyzer/README.md

Demonstrates how to use @wroud/di-tools-analyzer to get the dependency graph from a ServiceContainerBuilder and visualize it using D3.js.

```typescript
import { ServiceContainerBuilder } from "@wroud/di";
import { getDependenciesGraph, createChart } from "@wroud/di-tools-analyzer";

const builder = new ServiceContainerBuilder();
// Register your services

// Collect dependencies graph
const data = await getDependenciesGraph(builder);

// Serialize the data if needed
const jsonData = JSON.stringify(data);

// Visualize
const svg = document.createElement("svg");
const width = 512;
const height = 512;
const chart = createChart(svg, width, height); // Initialize D3.js
chart.update(graph); // Render graph
```

--------------------------------

### GraphQL Code Generator Configuration

Source: https://github.com/wroud/foundation/blob/main/packages/graphql-codegen-fragment-masking/README.md

Example configuration for graphql-codegen-fragment-masking within a codegen.ts file. This setup specifies schema, documents, and plugin generation paths, including custom configurations for fragment masking.

```typescript
import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  pluginLoader: (name) => import(name),
  schema: "./src/schema.graphql",
  documents: "./src/**/*.graphql",
  generates: {
    "./src/generated/fragment-masking.ts": {
      plugins: ["fragment-masking"],
      config: {
        importIncrementalFrom: "./common-types",
        unmaskFunctionName: "getFragmentData",
        useTypeImports: true,
      },
    },
    "./src/generated/common-types.ts": {
      plugins: ["typescript"],
      config: {
        avoidOptionals: true,
      },
    },
  },
};

export default config;
```

--------------------------------

### Service Container Setup and Usage

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/guide/package/di/getting-started/why-use-dependency-injection.md

This snippet demonstrates how to set up a dependency injection container using @wroud/di. It shows registering services as singletons, building the container, and then resolving and using services from the container.

```typescript
import {
  injectable,
  inject,
  ServiceContainerBuilder,
} from "@wroud/di";

// Assume these classes are defined elsewhere and decorated with @injectable()
class Logger {
  log(message: string) {
    console.log(message);
  }
}

class DatabaseConnection {
  connect() {
    console.log("Database connected");
  }
}

class App {
  private logger: Logger;
  private dbConnection: DatabaseConnection;

  constructor(@inject(Logger) logger: Logger, @inject(DatabaseConnection) dbConnection: DatabaseConnection) {
    this.logger = logger;
    this.dbConnection = dbConnection;
  }

  start() {
    this.logger.log("App starting...");
    this.dbConnection.connect();
  }

  stop() {
    this.logger.log("App stopping...");
  }
}

class Database {
  constructor(@inject(DatabaseConnection) dbConnection: DatabaseConnection) {
    // ...
  }
}

class UsersManager {
  constructor(@inject(Database) db: Database) {
    // ...
  }
}

class RegistrationService {
  constructor(@inject(UsersManager) usersManager: UsersManager, @inject(Logger) logger: Logger) {
    // ...
  }

  registerUser() {
    console.log("User registered");
  }
}

// --- Service Container Setup ---
const serviceProvider = new ServiceContainerBuilder()
  .addSingleton(Logger)
  .addSingleton(DatabaseConnection)
  .addSingleton(App)
  .addSingleton(Database)
  .addSingleton(UsersManager)
  .addSingleton(RegistrationService)
  .build();

// --- Resolving and Using Services ---
const app = serviceProvider.getService(App);
const registrationService = serviceProvider.getService(RegistrationService);

app.start();
registrationService.registerUser();
app.stop();

```

--------------------------------

### Example GitHub Action for Single Package

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/ci/README.md

A GitHub Actions workflow for automating releases in a single-package repository. It checks out code, sets up Node.js, installs dependencies, builds the project, and runs CI release commands.

```yaml
name: Release
on:
  push:
    tags:
      - 'v*'
jobs:
  release:
    runs-on: ubuntu-latest
    permissions:
      contents: write
      id-token: write
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - run: corepack enable
      - uses: actions/setup-node@v4
        with:
          node-version: 'lts/*'
          registry-url: 'https://registry.npmjs.org'
          cache: 'yarn'
      - run: yarn install --immutable
      - run: yarn build
      - run: yarn ci:release
      - run: yarn ci:git-tag
      - run: git push --follow-tags
      - run: yarn ci:release-github
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      - run: npm publish --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
```

--------------------------------

### Registering a Singleton Service with @wroud/di

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/packages/di/install.md

Demonstrates how to register a singleton service using the `addSingleton` method of `ServiceContainerBuilder`. It shows the process of creating a service, registering it, and then retrieving it from the service provider.

```ts
import { ServiceContainerBuilder } from '@wroud/di'

const builder = new ServiceContainerBuilder();

class Logger {
  log(message: string) {
    console.log(message);
  }
}

builder.addSingleton(Logger);

const serviceProvider = builder.build();

const logger = serviceProvider.getService(Logger);
logger.log('Hello world!');
// -> Hello world!
```

--------------------------------

### Install @wroud/vite-plugin-tsc

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/packages/vite-plugin-tsc/install.md

Installs the @wroud/vite-plugin-tsc package using various package managers.

```sh
npm install @wroud/vite-plugin-tsc
```

```sh
yarn add @wroud/vite-plugin-tsc
```

```sh
pnpm add @wroud/vite-plugin-tsc
```

```sh
bun add @wroud/vite-plugin-tsc
```

--------------------------------

### Button Component Documentation

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/vite-plugin-playground/README.md

Markdown documentation for the Button component, including title, description, and usage example.

```md
---
title: Button Component
describe: "@my-components/button"
---

# Button Component

This component provides a customizable button with different variants.

## Usage

```jsx
import { Button } from './Button';

<Button variant="primary">Click Me</Button>
```
```

--------------------------------

### Fix Graph Example

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/git/__testfixtures__/fixture.git-log.txt

Corrects an issue or improves the existing graph example within the project. This ensures the example accurately demonstrates its intended functionality.

```javascript
fix: graph example
```

--------------------------------

### Initialization Variant 1: Manual Instance Creation

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/guide/package/di/getting-started/why-use-dependency-injection.md

Demonstrates manual instance creation and wiring of all dependencies, including the new `DatabaseConnection`. This approach highlights the complexity and potential for errors as the number of dependencies increases.

```typescript
const logger = new Logger();
const databaseConnection = new DatabaseConnection(logger);
const database = new Database(logger, databaseConnection);
const usersManager = new UsersManager(logger, database);
const registrationService = new RegistrationService(logger, usersManager);
const app = new App(logger, databaseConnection);
app.start();
registrationService.registerUser();
app.stop();
```

--------------------------------

### Initialization Variant 1: Manual Dependency Creation

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/guide/package/di/getting-started/why-use-dependency-injection.md

Demonstrates manual instantiation and wiring of dependencies for `Logger`, `Database`, `UsersManager`, `RegistrationService`, and `App`. This approach highlights the verbosity and potential for errors in managing dependencies manually as the application scales.

```typescript
const logger = new Logger();
const database = new Database(logger);
const usersManager = new UsersManager(logger, database);// [!code ++]
const registrationService = new RegistrationService(logger, usersManager);// [!code ++]
const app = new App(logger, database);
app.start();
registrationService.registerUser();// [!code ++]
app.stop();
```

--------------------------------

### Remove Example from Source Code

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/git/__testfixtures__/fixture.git-log.txt

Cleans up the source code by removing example implementations or files. This is often done to separate examples from the core library code.

```javascript
chore: remove example from source code
```

--------------------------------

### Install @wroud/vite-plugin-tsc

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/vite-plugin-tsc/README.md

Installs the @wroud/vite-plugin-tsc package using npm or yarn.

```sh
npm install @wroud/vite-plugin-tsc
```

```sh
yarn add @wroud/vite-plugin-tsc
```

--------------------------------

### Basic Dependency Injection Example

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/di/README.md

Demonstrates the fundamental usage of @wroud/di. It shows how to define an injectable service (`Logger`), build a service container, register the service as a singleton, and retrieve and use the service.

```typescript
import { ServiceContainerBuilder, injectable } from "@wroud/di";

@injectable()
class Logger {
  log(message: string) {
    console.log(message);
  }
}

const builder = new ServiceContainerBuilder();
builder.addSingleton(Logger);
const provider = builder.build();

const logger = provider.getService(Logger);
logger.log("Hello world!");
```

--------------------------------

### Install @wroud/react-reactive-value

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/react-reactive-value/README.md

Installs the @wroud/react-reactive-value package using npm or yarn.

```sh
npm install @wroud/react-reactive-value
```

```sh
yarn add @wroud/react-reactive-value
```

--------------------------------

### Install @wroud/di-tools-codemod

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/di-tools-codemod/README.md

Installs the @wroud/di-tools-codemod package using npm or yarn.

```sh
npm install @wroud/di-tools-codemod
```

```sh
yarn add @wroud/di-tools-codemod
```

--------------------------------

### Module Clusters Visualization Setup

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/guide/package/di-tools/analyzer/introduction.md

Shows how to integrate `@wroud/di-tools-analyzer` for visualizing clusters from `ModuleRegistry`. It involves creating a `ServiceCollectionProxy` to manage module configuration and then obtaining the dependency graph using the proxy.

```javascript
import { ServiceContainerBuilder, ModuleRegistry } from "@wroud/di";
import {
  getDependenciesGraph,
  ServiceCollectionProxy,
} from "@wroud/di-tools-analyzer";

const builder = new ServiceContainerBuilder();
const builderProxy = new ServiceCollectionProxy(builder); // [!code ++]

for (const module of ModuleRegistry) {
  await module.configure(builder); // [!code --]
  await module.configure(builderProxy.proxy(module.name)); // [!code ++]
}

const data = await getDependenciesGraph(builder); // [!code --]
const data = await getDependenciesGraph(builder, builderProxy); // [!code ++]
```

--------------------------------

### Basic Navigation Usage

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/navigation/README.md

Demonstrates the basic setup and usage of the Navigation and Router classes, including adding routes, navigating, and retrieving the current state.

```typescript
import { Navigation, Router } from "@wroud/navigation";

// Create a router with default settings
const router = new Router();

// Add routes
router.addRoute({ id: "/" });
router.addRoute({ id: "/users" });
router.addRoute({ id: "/users/:id" });

// Create a navigation instance with the router
const navigation = new Navigation(router);

// Navigate to a route
await navigation.navigate({ id: "/users/:id", params: { id: "123" } });

// Get current route state
const currentState = navigation.getState();
console.log(currentState); // { id: "/users/:id", params: { id: "123" } }

// Go back to previous route
await navigation.goBack();
```

--------------------------------

### Vite Configuration with SSG Plugin

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/vite-plugin-ssg/README.md

Example of how to configure Vite to use the @wroud/vite-plugin-ssg plugin, including setting the build entry point and enabling multi-page application support.

```javascript
import path from "path";

export default defineConfig({
  root: "src",
  build: {
    outDir: "../dist",
    rollupOptions: {
      input: {
        index: path.resolve("src/index.tsx") + "?ssg-entry",
      },
    },
  },
  appType: "mpa", // you can add this option to enable better support for multi-page applications (when you have several inputs in rollupOptions)
  plugins: [ssgPlugin()],
});
```

--------------------------------

### Plain JavaScript Usage with @wroud/di

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/packages/di/usage.md

Demonstrates using `@wroud/di` without decorators by manually registering dependencies using `ServiceRegistry` and building the service container.

```ts
import {
  createService,
  ServiceContainerBuilder,
  ServiceRegistry,
  single,
} from "@wroud/di";

interface ILoggerService {
  log(message: string): void;
}

const ILoggerService = createService<ILoggerService>("ILoggerService");

class ConsoleLoggerService implements ILoggerService {
  log(message: string) {
    console.log(message);
  }
}

class CounterService {
  constructor(private logger: ILoggerService) {}

  action() {
    this.logger.log("Action executed");
  }
}

function configure() {
  ServiceRegistry.register(CounterService, {
    name: "CounterService",
    dependencies: [single(ILoggerService)],
  });

  ServiceRegistry.register(ConsoleLoggerService, {
    name: "ConsoleLoggerService",
    dependencies: [],
  });

  const serviceProvider = new ServiceContainerBuilder()
    .addSingleton(CounterService)
    .addSingleton(ILoggerService, ConsoleLoggerService)
    .build();

  const counter = serviceProvider.getService(CounterService);
}

```

--------------------------------

### Install @wroud/conventional-commits-bump

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/conventional-commits-bump/README.md

Installs the @wroud/conventional-commits-bump package and its dependency @wroud/conventional-commits-parser using npm.

```sh
npm install @wroud/conventional-commits-bump @wroud/conventional-commits-parser
```

--------------------------------

### Project Documentation and Resources

Source: https://github.com/wroud/foundation/blob/main/packages/@wroud/vite-plugin-ssg/README.md

Provides links to external resources for detailed usage, API reference, changelog, and licensing information for the Wroud Foundation project.

```text
Documentation Site: https://wroud.dev
Changelog: ./CHANGELOG.md
License: ./LICENSE
```

--------------------------------

### Wroud Foundation Packages Overview

Source: https://github.com/wroud/foundation/blob/main/README.md

Lists the available packages in the Wroud Foundation, including their npm scope and a brief description of their functionality. This provides an entry point for users to discover and select the tools they need.

```markdown
- [@wroud/api-logger](packages/@wroud/api-logger): Lightweight logging interface for JavaScript and TypeScript applications.
- [@wroud/ci](packages/@wroud/ci): Automate releases via conventional commits and GitHub Actions.
- [@wroud/conventional-commits-bump](packages/@wroud/conventional-commits-bump): Determine semantic version bumps from commit messages.
- [@wroud/conventional-commits-changelog](packages/@wroud/conventional-commits-changelog): Generate markdown changelogs from conventional commits.
- [@wroud/conventional-commits-parser](packages/@wroud/conventional-commits-parser): Parse conventional commit messages with metadata support.
- [@wroud/di](packages/@wroud/di): Simple dependency injection library for JavaScript and TypeScript.
- [@wroud/di-react](packages/@wroud/di-react): React bindings for the @wroud/di library.
- [@wroud/di-tools-analyzer](packages/@wroud/di-tools-analyzer): Analyze @wroud/di containers and visualize dependencies.
- [@wroud/di-tools-codemod](packages/@wroud/di-tools-codemod): Codemod for migrating from Inversify to @wroud/di.
- [@wroud/flow-middleware](packages/@wroud/flow-middleware): Manage middleware chains with re-runs and error handling.
- [@wroud/git](packages/@wroud/git): Utilities for reading commits and tags from git repositories.
- [@wroud/github](packages/@wroud/github): Parse git history for GitHub issues and commit links.
- [@wroud/navigation](packages/@wroud/navigation): Framework-agnostic navigation and routing system.
- [@wroud/playground](packages/@wroud/playground): Core runtime for the component playground system.
- [@wroud/playground-react](packages/@wroud/playground-react): React components for interactive playground stories.
- [@wroud/preconditions](packages/@wroud/preconditions): Framework for defining and applying preconditions.
- [@wroud/react-reactive-value](packages/@wroud/react-reactive-value): Manage reactive values in React with automatic re-renders.
- [@wroud/react-split-view](packages/@wroud/react-split-view): React hook for resizable split views.
- [@wroud/react-tree](packages/@wroud/react-tree): Virtualized tree component for hierarchical data.
- [@wroud/ts-project-linker](packages/@wroud/ts-project-linker): Sync TypeScript project references with package dependencies.
- [@wroud/ts-template](packages/@wroud/ts-template): CLI generator for TypeScript project templates.
- [@wroud/vite-plugin-asset-resolver](packages/@wroud/vite-plugin-asset-resolver): Custom asset resolution plugin for Vite.
- [@wroud/vite-plugin-playground](packages/@wroud/vite-plugin-playground): Vite plugin for component playground stories.
- [@wroud/vite-plugin-ssg](packages/@wroud/vite-plugin-ssg): Static site generation plugin for React with Vite.
- [@wroud/vite-plugin-tsc](packages/@wroud/vite-plugin-tsc): Integrate `tsc` with Vite for background type checking or transpile TypeScript files with project reference support.
- [graphql-codegen-fragment-masking](packages/graphql-codegen-fragment-masking): GraphQL Codegen plugin for fragment masking helpers.
- [graphql-codegen-typed-document-nodes](packages/graphql-codegen-typed-document-nodes): GraphQL Codegen plugin for typed document nodes.
```

--------------------------------

### Install graphql-codegen-typed-document-nodes

Source: https://github.com/wroud/foundation/blob/main/packages/graphql-codegen-typed-document-nodes/README.md

Installs the graphql-codegen-typed-document-nodes plugin and its required peer dependency @graphql-codegen/typescript-operations using npm or yarn.

```sh
npm install -D graphql-codegen-typed-document-nodes @graphql-codegen/typescript-operations
```

```sh
yarn add -D graphql-codegen-typed-document-nodes @graphql-codegen/typescript-operations
```

--------------------------------

### Application Entry Point and Service Container Initialization

Source: https://github.com/wroud/foundation/blob/main/packages/docs/src/guide/package/di/scaling/integration.md

Demonstrates how to initialize the Wroud application's service container by iterating through registered modules and building the service provider.

```ts
import { ServiceContainerBuilder, ModuleRegistry } from "@wroud/di";
import { App } from "@my/core";

// Create a new ServiceContainerBuilder instance
const builder = new ServiceContainerBuilder();

// Iterate over the registered modules in ModuleRegistry
for (const module of ModuleRegistry) {
  await module.configure(builder);
}

// Build the service container
const serviceProvider = builder.build();

// Now you can resolve and use your services
const app = serviceProvider.getService(App);
app.start();
```