### Install Project Dependencies

Source: https://github.com/feedbackone/elmstronaut/blob/main/CONTRIBUTING.md

Navigate into the cloned directory and install the project's dependencies using pnpm.

```sh
cd elmstronaut
pnpm install
```

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

### Create Astro Project with Basics Template

Source: https://github.com/feedbackone/elmstronaut/blob/main/examples/minimal/README.md

Use this command to create a new Astro project with the 'basics' template. Ensure you have pnpm installed.

```sh
pnpm create astro@latest -- --template basics
```

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

### Install Elm and Elmstronaut

Source: https://github.com/feedbackone/elmstronaut/blob/main/README.md

Install the necessary packages for Elm and Elmstronaut using pnpm.

```sh
pnpm add elm elmstronaut
```

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

### Basic Elm Component for Astro

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

A simple Elm component that renders static text. Use this as a basic example for integrating Elm into Astro pages.

```elm
-- src/elm/Hello.elm
module Hello exposing (main)

import Html exposing (Html, text)


main : Html msg
main =
    text "Hello, Astro! 👋"

```

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

### Build Package

Source: https://github.com/feedbackone/elmstronaut/blob/main/PUBLISH.md

Run this command to build the package before publishing.

```bash
pnpm build
```

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

### Set up Elm Project Structure

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

Create the Elm source directory and initialize an Elm project in the root of your Astro project.

```bash
# Create Elm source directory
mkdir -p src/elm

# Initialize Elm project in root
pnpm elm init
```

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

### Publish Package

Source: https://github.com/feedbackone/elmstronaut/blob/main/PUBLISH.md

Execute this command to publish the package to npm.

```bash
pnpm changeset publish
```

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

### Basic Elm 'Hello, world' component

Source: https://github.com/feedbackone/elmstronaut/blob/main/README.md

A simple Elm module that renders 'Hello, Astro 👋'. This is the main entry point for the Elm component.

```elm
module Hello exposing (main)

import Html exposing (Html, text)


main : Html msg
main = 
    text "Hello, Astro 👋"
```

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

### Initialize Elm App and Handle Ports

Source: https://github.com/feedbackone/elmstronaut/blob/main/README.md

Define `window.onElmInit` to receive callbacks for Elm app initializations. Use this to subscribe to messages from Elm or send messages to Elm via ports.

```typescript
window.onElmInit = (elmModuleName: string, app: ElmApp) => {
  if (elmModuleName === "Hello") {
    // Subscribe to messages from Elm
    app.ports?.foo.subscribe?.((message) => console.log(message));

    // Send messages to Elm
    app.ports?.bar.send?.("baz");
  }
};
```

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

### Generate Changeset

Source: https://github.com/feedbackone/elmstronaut/blob/main/PUBLISH.md

Use this command to create a changeset file, which records the changes for the release.

```bash
pnpm changeset
```

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

### JavaScript Callback for Elm Initialization

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

Implement `window.onElmInit` to handle port subscriptions and send messages to Elm when components initialize. This function is called when an Elm component is mounted.

```typescript
// src/elm/interop.ts
window.onElmInit = (elmModuleName: string, app: ElmApp) => {
  if (elmModuleName === "Prompt") {
    handleInit(app);
  }
};

function handleInit(app: ElmApp) {
  // Subscribe to messages from Elm (outgoing port)
  app.ports?.fromElm.subscribe?.((message: string) => {
    if (message === "SHOW_PROMPT") {
      showPrompt(app);
    }
  });
}

function showPrompt(app: ElmApp) {
  const answer = window.prompt(
    "What is your favorite programming language?"
  );

  if (answer?.length) {
    // Send message to Elm (incoming port)
    app.ports?.fromJs.send?.(answer);
  }
}

```

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

### Astro Project Structure Overview

Source: https://github.com/feedbackone/elmstronaut/blob/main/examples/minimal/README.md

This is a typical file structure for an Astro project. Key directories include 'public' for static assets and 'src' for source code.

```text
/
├── public/
│   └── favicon.svg
├── src/
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json
```

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

### Render Elm component in Astro page

Source: https://github.com/feedbackone/elmstronaut/blob/main/README.md

Import and render the Elm 'Hello' component within an Astro page. Ensure to use the 'client:load' directive as SSR is not yet supported.

```jsx
---
import Hello from "../elm/Hello.elm";
import Layout from "../layouts/Layout.astro";
---

<Layout>
  <Hello client:load />
</Layout>
```

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

### Update Versions and Changelog

Source: https://github.com/feedbackone/elmstronaut/blob/main/PUBLISH.md

This command bumps the version in package.json and updates the CHANGELOG.md file.

```bash
pnpm changeset version
```

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

### Configure Astro with Elmstronaut

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

Add the elmstronaut integration to your Astro configuration file.

```typescript
// astro.config.mts
import { defineConfig } from "astro/config";
import elmstronaut from "elmstronaut";

export default defineConfig({
  integrations: [elmstronaut()]
});
```

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

### Push Changes and Tags

Source: https://github.com/feedbackone/elmstronaut/blob/main/PUBLISH.md

Push the committed changes and tags to the remote repository.

```bash
git push
git push --tags
```

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

### Astro Project Commands

Source: https://github.com/feedbackone/elmstronaut/blob/main/examples/minimal/README.md

Common commands for managing an Astro project. These are run from the project's root directory in the terminal.

```sh
pnpm install
```

```sh
pnpm run dev
```

```sh
pnpm run build
```

```sh
pnpm run preview
```

```sh
pnpm run astro ...
```

```sh
pnpm run astro -- --help
```

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

### Update Astro Configuration Import

Source: https://github.com/feedbackone/elmstronaut/blob/main/CONTRIBUTING.md

Adjust the import statement in your Astro project's configuration file to point to the local Elmstronaut index file.

```diff
-  import elmstronaut from "elmstronaut";
+  import elmstronaut from "../../src/index";
```

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

### Use Basic Elm Component in Astro

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

Import and render a basic Elm component within an Astro page. The `client:load` directive ensures it's rendered on the client.

```astro
---
// src/pages/index.astro
import Hello from "../elm/Hello.elm";
import Layout from "../layouts/Layout.astro";
---

<Layout>
  <Hello client:load />
</Layout>

```

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

### Clone Elmstronaut Repository

Source: https://github.com/feedbackone/elmstronaut/blob/main/CONTRIBUTING.md

Use this command to clone the Elmstronaut project from GitHub to your local machine.

```sh
git clone git@github.com:feedbackone/elmstronaut.git
```

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

### Astro page to render Counter component with initial value

Source: https://github.com/feedbackone/elmstronaut/blob/main/README.md

This Astro page imports and renders the Elm 'Counter' component, passing an initial value of 29 as a prop.

```jsx
---
import Counter from "../elm/Counter.elm";
import Layout from "../layouts/Layout.astro";
---

<Layout>
  <Counter client:load initial={29} />
</Layout>
```

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

### Commit Changes

Source: https://github.com/feedbackone/elmstronaut/blob/main/PUBLISH.md

Commit the changes to the repository with a version message.

```bash
git commit -m "x.y.z"
```

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

### Elm Component with Fallback Slot

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

Demonstrates how to provide a fallback content slot for an Elm component in Astro. This content is displayed while the Elm component is loading.

```astro
---
// src/pages/index.astro
import Hello from "../elm/Hello.elm";
import Layout from "../layouts/Layout.astro";
---

<Layout>
  <Hello client:load>
    <p slot="fallback">Loading...</p>
  </Hello>
</Layout>

```

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

### Handling Nested Module Initialization in JavaScript

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

The `elmModuleName` parameter in `window.onElmInit` will use dot notation to represent nested module paths, allowing you to target specific modules.

```typescript
// src/elm/interop.ts
window.onElmInit = (elmModuleName: string, app: ElmApp) => {
  // For src/elm/Greeting/Hello.elm, elmModuleName is "Greeting.Hello"
  if (elmModuleName === "Greeting.Hello") {
    console.log("Greeting.Hello module initialized!");
  }
};

```

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

### Use Interactive Elm Component in Astro

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

Render an interactive Elm component from Astro, passing initial data as props. The `client:load` directive ensures client-side hydration.

```astro
---
// src/pages/counter.astro
import ElmCounter from "../elm/Counter.elm";
import Layout from "../layouts/Layout.astro";
---

<Layout>
  <ElmCounter client:load initial={29} />
</Layout>

```

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

### Link Local Elmstronaut Dependency

Source: https://github.com/feedbackone/elmstronaut/blob/main/CONTRIBUTING.md

Modify your Astro project's package.json to link to the local version of Elmstronaut. Ensure the 'link:' path correctly points to the cloned repository.

```diff
"dependencies": {
-  "elmstronaut": "^0.1.0",
+  "elmstronaut": "link:../../",
}
```

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

### Configure elm.json for Astro

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

Modify the elm.json file to specify the source directories for your Elm code within the Astro project.

```json
// elm.json - modify source-directories
{
  "type": "application",
  "source-directories": [
    "src/elm"
  ],
  "elm-version": "0.19.1",
  "dependencies": {
    "direct": {
      "elm/browser": "1.0.2",
      "elm/core": "1.0.5",
      "elm/html": "1.0.0",
      "elm/json": "1.1.3"
    },
    "indirect": {
      "elm/time": "1.0.0",
      "elm/url": "1.0.0",
      "elm/virtual-dom": "1.0.3"
    }
  },
  "test-dependencies": {
    "direct": {},
    "indirect": {}
  }
}
```

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

### Add Elmstronaut integration to Astro config

Source: https://github.com/feedbackone/elmstronaut/blob/main/README.md

Add the elmstronaut integration to your Astro project's configuration file (astro.config.mts).

```diff
+import elmstronaut from "elmstronaut";

 export default defineConfig({
+    integrations: [elmstronaut()],
 });
```

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

### Configure Elm source directory in elm.json

Source: https://github.com/feedbackone/elmstronaut/blob/main/README.md

Modify the elm.json file to specify 'src/elm' as the source directory for Elm files.

```diff
"source-directories": [
-   "src"
+   "src/elm"
 ]
```

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

### Astro Integration with Elm Component

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

Embed an Elm component into an Astro page using `client:load` and include a script for JavaScript interop.

```astro
---
// src/pages/prompt.astro
import ElmPrompt from "../elm/Prompt.elm";
import Layout from "../layouts/Layout.astro";
---

<Layout>
  <ElmPrompt client:load />
  <script src="../elm/interop.ts"></script>
</Layout>

```

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

### Elm Counter component with flags and state management

Source: https://github.com/feedbackone/elmstronaut/blob/main/README.md

An Elm component demonstrating state management for a counter. It accepts an 'initial' value via flags and provides increment/decrement functionality.

```elm
module Counter exposing (main)

import Browser
import Html exposing (Html, button, div, p, text)
import Html.Events exposing (onClick)
import Json.Decode


-- MAIN


main : Program Json.Decode.Value Model Msg
main = 
    Browser.element
        {
            init = init,
            update = update,
            subscriptions = \_ -> Sub.none,
            view = view
        }



-- FLAGS


type alias Flags =
    { initial : Int }


flagsDecoder : Json.Decode.Decoder Flags
flagsDecoder =
    Json.Decode.map Flags
        (Json.Decode.field "initial" Json.Decode.int)



-- MODEL


type alias Model =
    { count : Int }


init : Json.Decode.Value -> ( Model, Cmd Msg )
init flags =
    let
        initialCount =
            Json.Decode.decodeValue flagsDecoder flags
                |> Result.map .initial
                |> Result.withDefault 0
    in
    ( { count = initialCount }, Cmd.none )



-- UPDATE


type Msg
    = Increment
    | Decrement


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Increment ->
            ( { model | count = model.count + 1 }, Cmd.none )

        Decrement ->
            ( { model | count = model.count - 1 }, Cmd.none )



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [
            button [ onClick Increment ] [ text "+" ],
            p [] [ text (String.fromInt model.count) ],
            button [ onClick Decrement ] [ text "-" ]
        ]
```

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

### Interactive Elm Counter Component

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

An Elm component demonstrating interactive elements with state management. It accepts an initial count via flags and handles increment/decrement actions.

```elm
-- src/elm/Counter.elm
module Counter exposing (main)

import Browser
import Html exposing (Html, button, div, p, text)
import Html.Events exposing (onClick)
import Json.Decode


main : Program Json.Decode.Value Model Msg
main =
    Browser.element
        {
            init = init,
            update = update,
            subscriptions = \_ -> Sub.none,
            view = view
        }


-- FLAGS

type alias Flags =
    { initial : Int }


flagsDecoder : Json.Decode.Decoder Flags
flagsDecoder =
    Json.Decode.map Flags
        (Json.Decode.field "initial" Json.Decode.int)


-- MODEL

type alias Model =
    { count : Int }


init : Json.Decode.Value -> ( Model, Cmd Msg )
init flags =
    let
        initialCount =
            Json.Decode.decodeValue flagsDecoder flags
                |> Result.map .initial
                |> Result.withDefault 0
    in
    ( { count = initialCount }, Cmd.none )


-- UPDATE

type Msg
    = Increment
    | Decrement


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Increment ->
            ( { model | count = model.count + 1 }, Cmd.none )

        Decrement ->
            ( { model | count = model.count - 1 }, Cmd.none )


-- VIEW

view : Model -> Html Msg
view model =
    div []
        [
            button [ onClick Increment ] [ text "+" ]
        ,
            p [] [ text (String.fromInt model.count) ]
        ,
            button [ onClick Decrement ] [ text "-" ]
        ]

```

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

### Configure Tailwind CSS for Elm Files

Source: https://github.com/feedbackone/elmstronaut/blob/main/README.md

Add this snippet to your CSS to ensure Tailwind classes used in Elm files are included in the final bundle. Ensure the path to your Elm source files is correct.

```css
@import "tailwindcss";

+ @source "../../src/elm";
```

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

### Add fallback slot for loading Elm component

Source: https://github.com/feedbackone/elmstronaut/blob/main/README.md

Include a fallback slot in the Astro component to display content while the Elm component is loading. This helps improve user experience and CLS scores.

```jsx
---
import Hello from "../elm/Hello.elm";
import Layout from "../layouts/Layout.astro";
---

<Layout>
  <Hello client:load>
    <p slot="fallback">Loading...</p>
  </Hello>
</Layout>
```

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

### Elm Ports for JavaScript Communication

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

Define ports in Elm to send messages to and receive messages from JavaScript. Use `port module` to expose ports.

```elm
port module Prompt exposing (main)

import Browser
import Html exposing (Html, button, dd, div, dl, dt, text)
import Html.Events exposing (onClick)


main : Program () Model Msg
main = 
    Browser.element
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view
        }


-- PORTS

port fromElm : String -> Cmd msg

port fromJs : (String -> msg) -> Sub msg


-- MODEL

type alias Model = 
    { answer : Maybe String }


init : () -> ( Model, Cmd Msg )
init _ = 
    ( { answer = Nothing }, Cmd.none )


-- UPDATE

type Msg
    = ShowPrompt
    | GotAnswer String


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model = 
    case msg of
        ShowPrompt ->
            ( model, fromElm "SHOW_PROMPT" )

        GotAnswer answer_ ->
            ( { model | answer = Just answer_ }, Cmd.none )


-- SUBSCRIPTIONS

subscriptions : Model -> Sub Msg
subscriptions _ = 
    fromJs GotAnswer


-- VIEW

view : Model -> Html Msg
view model = 
    div []
        [ button [ onClick ShowPrompt ] [ text "Show prompt" ]
        , case model.answer of
            Just answer ->
                dl []
                    [ dt [] [ text "What is your favorite programming language?" ]
                    , dd [] [ text answer ]
                    ]

            Nothing ->
                text ""
        ]

```

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

### Tailwind CSS Configuration for Elm Files

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

Configure Tailwind CSS to scan Elm files for CSS class names by adding an `@source` directive in your global CSS file.

```css
/* src/styles/global.css */
@import "tailwindcss";

@source "../../src/elm";

```

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

### TypeScript Types for Elm Interop

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

Defines the global TypeScript types for `ElmApp` and `ElmPort` to facilitate type-safe communication between Elm and JavaScript.

```typescript
// Available global types (automatically injected)

interface ElmApp {
  ports?: Record<string, ElmPort>;
}

type ElmPort = Incoming | Outgoing;

// Incoming ports (JS -> Elm)
type Incoming = {
  send(...args): void;
  subscribe: undefined;
  unsubscribe: undefined;
};

// Outgoing ports (Elm -> JS)
type Outgoing = {
  subscribe(callback: (...args) => void): void;
  unsubscribe(callback: (...args) => void): void;
  send: undefined;
};

// Global window extension
declare namespace globalThis {
  interface Window {
    onElmInit?: (elmModuleName: string, app: ElmApp) => void;
  }
}

```

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

### Nested Elm Module Naming Convention

Source: https://context7.com/feedbackone/elmstronaut/llms.txt

When Elm files are in subdirectories, their module names reflect the path structure. This is crucial for correctly identifying modules in JavaScript interop.

```elm
-- src/elm/Greeting/Hello.elm
module Greeting.Hello exposing (main)

import Html exposing (Html, text)

main : Html msg
main = 
    text "Hello from nested module!"

```

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