### Installing Stimulus Vite Helpers for Turbo-Mount

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

Shows the npm command to install the `stimulus-vite-helpers` package, which is required for Vite integration with Turbo-Mount.

```bash
npm install stimulus-vite-helpers
```

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

### Generate Turbo Mount Installation Files

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

This command generates the necessary files and configurations for Turbo Mount, including updating package.json or importmap.rb and creating initialization files.

```bash
bin/rails generate turbo_mount:install
```

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

### Install Turbo Mount with npm/yarn

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

Installs the Turbo Mount JavaScript package and a chosen framework (e.g., React) using npm or yarn. This is typically used with build tools like Vite.

```bash
npm install turbo-mount
# or with yarn
yarn add turbo-mount

# and the desired framework
npm install react react-dom
# or
npm install vue
# or
npm install svelte
```

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

### Install Turbo Mount Gem

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

This snippet shows how to add the Turbo Mount gem to your Ruby on Rails project's Gemfile for installation.

```ruby
gem "turbo-mount"
```

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

### Specifying a Non-Root Mount Target in ERB

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

Provides an ERB example for specifying a non-root mount target for a Turbo-Mount component. It uses the `data-<%= controller_name %>-target="mount"` attribute within the component's HTML structure.

```erb
<%= turbo_mount("HexColorPicker", props: {color: "#430"}) do |controller_name| %>
  <h3>Color picker</h3>
  <div data-<%= controller_name %>-target="mount"></div>
<% end %>
```

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

### Auto-loading Components and Controllers with Vite

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

Illustrates Vite integration for Turbo Mount, using `stimulus-vite-helpers`. It shows how to use `registerComponents` to automatically load components and controllers from specified paths.

```javascript
import plugin, { TurboMount } from "turbo-mount/react";
import { registerComponents } from "turbo-mount/registerComponents/vite";

const controllers = import.meta.glob("./**/*_controller.js", { eager: true });
const components = import.meta.glob("/components/**/*.jsx", { eager: true });

const turboMount = new TurboMount();
registerComponents({ plugin, turboMount, components, controllers });
```

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

### Auto-loading Components and Controllers with ESBuild

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

Demonstrates ESBuild integration for Turbo Mount, requiring the `esbuild-rails` package. It shows how to use `registerComponents` to automatically load components and controllers.

```javascript
import plugin, { TurboMount } from "turbo-mount/react";
import { registerComponents } from "turbo-mount/registerComponents/esbuild";

const turboMount = new TurboMount();

import controllers from "./controllers/**/*_controller.js";
import components from "./components/**/*.jsx";

registerComponents({ plugin, turboMount, components, controllers });
```

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

### Initialize Turbo Mount with React Component

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

Initializes Turbo Mount and registers a React component (HexColorPicker) for use within the Hotwire application. It demonstrates importing necessary modules and creating a TurboMount instance.

```javascript
// app/javascript/turbo-mount.js

import { TurboMount } from "turbo-mount";
import { registerComponent } from "turbo-mount/react";
import { HexColorPicker } from 'react-colorful';

const turboMount = new TurboMount(); // or new TurboMount({ application })

registerComponent(turboMount, "HexColorPicker", HexColorPicker);
```

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

### Pin Framework with Importmaps

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

Pins JavaScript framework libraries like React or Vue for use with importmaps in a Rails application.

```bash
bin/importmap pin react react-dom react-dom/client
# or
bin/importmap pin vue
# or
bin/importmap pin svelte
```

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

### Custom Turbo-Mount Controller for Component Behavior

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

Demonstrates how to create a custom Turbo-Mount controller to modify component behavior or pass functions as props. It extends `TurboMountController` and customizes `componentProps` to include an `onChange` handler.

```javascript
import { TurboMountController } from "turbo-mount";

export default class extends TurboMountController {
  get componentProps() {
    return {
      ...this.propsValue,
      onChange: this.onChange.bind(this),
    };
  }

  onChange = (color) => {
    // same as this.propsValue = { ...this.propsValue, color };
    // but skips the rerendering of the component:
    this.setComponentProps({ ...this.propsValue, color });
  };
}
```

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

### Registering a Custom Component Controller

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

Shows how to register a custom component controller with Turbo Mount using the `registerComponent` method. This links a component name to its implementation and its custom controller.

```javascript
import HexColorPickerController from "controllers/turbo_mount/hex_color_picker_controller";

registerComponent(turboMount, "HexColorPicker", HexColorPicker, HexColorPickerController);
```

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

### Include Turbo Mount in application.js

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

Ensures that Turbo Mount is imported and initialized within the main application JavaScript file, alongside Turbo Drive and Stimulus controllers.

```javascript
import "@hotwired/turbo-rails"
import "./controllers"
import "./turbo-mount"  // <------
```

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

### Turbo Mount View Helper Usage

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

Demonstrates how to use the `turbo_mount` view helper in ERB templates to embed a registered component (HexColorPicker) with specific properties and CSS classes.

```erb
<%= turbo_mount("HexColorPicker", props: {color: "#034"}, class: "mb-5") %>
```

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

### Generated HTML for Turbo Mount Component

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

The HTML output generated by the `turbo_mount` view helper, which includes data attributes that Stimulus and Turbo Mount use to identify and mount the specified component.

```html
<div data-controller="turbo-mount"
     data-turbo-mount-component-value="HexColorPicker"
     data-turbo-mount-props-value="{&quot;color&quot;:&quot;#034&quot;}"
     class="mb-5">
</div>
```

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

### Pin Turbo Mount with Importmaps

Source: https://github.com/skryukov/turbo-mount/blob/main/README.md

Configures importmaps in Rails to include the Turbo Mount JavaScript library and its framework-specific plugins, making them available in the application.

```ruby
pin "turbo-mount", to: "turbo-mount.min.js"
pin "turbo-mount/react", to: "turbo-mount/react.min.js"
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.