### Phoenix Server Setup and Start

Source: https://github.com/woutdp/live_svelte/blob/master/example_project/README.md

Commands to set up project dependencies and start the Phoenix server. Assumes Elixir and Phoenix are installed.

```elixir
mix setup
mix phx.server
```

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

### Install LiveSvelte Setup

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

These bash commands are used to fetch project dependencies and run the LiveSvelte setup script.

```bash
mix deps.get
mix live_svelte.setup
```

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

### Project Setup and Running Example

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Provides step-by-step commands to clone the live_svelte repository, set up dependencies, build assets, and run the example project using `mix phx.server`.

```bash
git clone https://github.com/woutdp/live_svelte.git
cd live_svelte
mix deps.get
npm install --prefix assets
mix assets.build
cd example_project
mix deps.get
npm install --prefix assets
mix phx.server
```

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

### Install Node.js for Production (Dockerfile)

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Installs Node.js version 19.x using NodeSource setup script for the production environment. Includes cleanup.

```dockerfile
# install nodejs for production environment
RUN curl -fsSL https://deb.nodesource.com/setup_19.x | bash - && apt-get install -y nodejs
```

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

### Install Heroicons v2.0.16

Source: https://github.com/woutdp/live_svelte/blob/master/example_project/priv/hero_icons/UPGRADE.md

This script downloads the specified version of Heroicons from GitHub, extracts the optimized icons, and cleans up the downloaded archive. Ensure your HERO_VSN environment variable is set to the desired version.

```bash
export HERO_VSN="2.0.16" ; \
  curl -L -o optimized.zip "https://github.com/tailwindlabs/heroicons/archive/refs/tags/v${HERO_VSN}.zip" ; \
  tar --strip-components=1 -xvf optimized.zip heroicons-${HERO_VSN}/optimized ; \
  rm optimized.zip
```

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

### Install NPM Packages (Dockerfile)

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Sets the working directory to /app/assets and installs all npm packages within that directory using 'npm install'.

```dockerfile
# install all npm packages in assets directory
WORKDIR /app/assets
RUN npm install

# change back to build dir
WORKDIR /app
```

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

### Install Build Dependencies (Dockerfile)

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Installs essential build tools like git, curl, and build-essential in the Docker image. It also installs Node.js for the build stage.

```dockerfile
RUN apt-get update -y && apt-get install -y build-essential git curl \
    && apt-get clean && rm -f /var/lib/apt/lists/*_*

# install nodejs for build stage
RUN curl -fsSL https://deb.nodesource.com/setup_19.x | bash - && apt-get install -y nodejs
```

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

### Install Runtime Dependencies (Dockerfile)

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Installs runtime dependencies including libstdc++6, openssl, libncurses5, locales, ca-certificates, and curl. It also installs Node.js for the production environment.

```dockerfile
RUN apt-get update -y && \
   apt-get install -y libstdc++6 openssl libncurses5 locales ca-certificates curl \
   && apt-get clean && rm -f /var/lib/apt/lists/*_*

# install nodejs for production environment
RUN curl -fsSL https://deb.nodesource.com/setup_19.x | bash - && apt-get install -y nodejs
```

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

### Integrating LiveSvelte into LiveView Setup

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Shows how to import `LiveSvelte` into the `live_view` function in `web/<app_name>_web.ex` to enable the `~V` sigil.

```elixir
def live_view do
  quote do
    use Phoenix.LiveView,
      layout: {ExampleWeb.Layouts, :app}

    import LiveSvelte

    unquote(html_helpers())
  end
end
```

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

### Svelte 5 Migration Guide (package.json)

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Updates esbuild-svelte and svelte dependencies in package.json to support Svelte 5.

```javascript
// package.json
 "esbuild-svelte": "^0.9.0",
 "svelte": "^5"
```

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

### Svelte 5 Migration Guide (mix.exs)

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Updates the LiveSvelte dependency in the mix.exs file to version 0.15.0 for Svelte 5 support.

```elixir
# `mix.exs`
{:live_svelte, "0.15.0"}
```

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

### Svelte LiveView DSL Example

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Demonstrates using the `~V` sigil to render a Svelte component within a LiveView. Includes script for Svelte logic and template for rendering.

```elixir
defmodule ExampleWeb.LiveSigil do
  use ExampleWeb, :live_view

  def render(assigns) do
    ~V"""
    <script>
      export let number = 5
      let other = 1

      $: combined = other + number
    </script>

    <p>This is number: {number}</p>
    <p>This is other: {other}</p>
    <p>This is other + number: {combined}</p>

    <button phx-click="increment">Increment</button>
    <button on:click={() => other += 1}>Increment</button>
    """
  end

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :number, 1)}
  end

  def handle_event("increment", _value, socket) do
    {:noreply, assign(socket, :number, socket.assigns.number + 1)}
  end
end
```

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

### LiveSvelte with live_json Usage

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

This example illustrates the usage of `live_json` with LiveSvelte. It shows how to initialize `live_json` in the `mount` function and push updates using `LiveJson.push_patch` in `handle_info`.

```elixir
def render(assigns) do
  ~H"""
    <.svelte name="Component" live_json_props={%{my_prop: @ljmy_prop}} socket={@socket} />
  """
end

def mount(_, _, socket) do
  # Get `my_big_json_object` somehow
  {:ok, LiveJson.initialize("my_prop", my_big_json_object)}
end

def handle_info(%Broadcast{event: "update", payload: my_big_json_object}, socket) do
  {:noreply, LiveJson.push_patch(socket, "my_prop", my_big_json_object)}
end
```

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

### Svelte Component with LiveView Interop

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

A Svelte component example demonstrating how to interact with LiveView using the `live` object. It shows how to push events to the server for state updates and reactive programming.

```svelte
<script>
    export let number = 1
    export let live

    function increase() {
        live.pushEvent("set_number", {number: number + 1}, () => {})
    }

    function decrease() {
        live.pushEvent("set_number", {number: number - 1}, () => {})
    }
</script>

<p>The number is {number}</p>
<button on:click={increase}>+</button>
<button on:click={decrease}>-</button>
```

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

### Modifying Dockerfile for Node.js and NPM Dependencies

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Shows modifications to a generated Dockerfile to install Node.js and npm dependencies required for LiveSvelte.

```diff
# ./Dockerfile

...

# Add steps to install curl, nodejs (version 19+), and npm dependencies
RUN apt-get update && apt-get install -y curl
RUN curl -fsSL https://deb.nodesource.com/setup_19.x | bash -
RUN apt-get install -y nodejs
RUN npm install

...
```

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

### Struct Serialization with Jason.Encoder

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

This example shows how to define a struct in Elixir and use `@derive Jason.Encoder` to enable serialization of the struct's fields for use with Javascript. It also demonstrates how to specify which fields to include.

```elixir
defmodule User do
  @derive Jason.Encoder
  defstruct name: "John", age: 27, address: "Main St"
end
```

```elixir
defmodule User do
  @derive {Jason.Encoder, only: [:name, :age]}
  defstruct name: "John", age: 27, address: "Main St"
end
```

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

### Adjust Mix Aliases for Assets

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

This snippet demonstrates how to update the `setup` and `assets.deploy` aliases in `mix.exs` to include `live_svelte` and Tailwind CSS commands.

```elixir
defp aliases do
  [
    setup: ["deps.get", "ecto.setup", "cmd --cd assets npm install"],
    ...,
    "assets.deploy": ["tailwind <app_name> --minify", "cmd --cd assets node build.js --deploy", "phx.digest"]
  ]
end
```

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

### Disable SSR Per Component

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

This example demonstrates how to disable Server-Side Rendering (SSR) for a specific Svelte component by setting the `ssr` attribute to `false` when including the component.

```elixir
<.svelte name="Example" ssr={false} />
```

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

### Fly.io Deployment Commands

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Commands to launch and open the deployed application using the Fly.io CLI. It includes prompts for configuration tweaks.

```bash
fly launch

? Do you want to tweak these settings before proceeding? (y/N) y

fly apps open
```

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

### Fly.io Launch Command

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Initiates the deployment process for a Fly.io application. This command typically prompts for configuration details.

```bash
fly launch
```

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

### Fly.io Open App Command

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Opens the deployed application in the default web browser after a successful deployment.

```bash
fly apps open
```

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

### Building Assets with Mix

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Commands to build or watch for changes in project assets, including LiveSvelte components.

```bash
mix assets.build
```

```bash
mix assets.build --watch
```

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

### Configuring Svelte Options in LiveView Mount

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Demonstrates how to pass Svelte-specific options, such as `ssr` and `class`, via the `svelte_opts` assign in the `mount` function.

```elixir
def mount(_params, _session, socket) do
  {:ok, assign(socket, some_value: 1, svelte_opts: %{ssr: false, class: "example-class"})}
end
```

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

### Import LiveSvelte Helper

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

This Elixir snippet shows how to import the `LiveSvelte` module into your web module (`<app_name>_web.ex`) to enable its functionality.

```elixir
# /lib/<app_name>_web.ex

defp html_helpers do
  quote do

    # ...

    import LiveSvelte  # <-- Add this line

    # ...

  end
end
```

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

### Generating Dockerfile for Release

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Generates a Dockerfile for releasing a Phoenix project, which can be modified for LiveSvelte deployment.

```bash
mix phx.gen.release --docker
```

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

### Basic Robots.txt Configuration

Source: https://github.com/woutdp/live_svelte/blob/master/example_project/priv/static/robots.txt

This snippet shows a basic robots.txt configuration that disallows all spiders from the entire site. It includes comments explaining the purpose of the directives.

```robots.txt
# See https://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file
#
# To ban all spiders from the entire site uncomment the next two lines:
# User-agent: *
# Disallow: /

```

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

### Neovim Treesitter Configuration for Svelte

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Provides the Treesitter configuration for Neovim to enable syntax highlighting for Svelte code within Elixir's `~V` sigil.

```scm
; extends

; Svelte
(sigil
  (sigil_name) @_sigil_name
  (quoted_content) @injection.content
 (#eq? @_sigil_name "V")
 (#set! injection.language "svelte"))
```

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

### Basic Slotting in LiveSvelte

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Demonstrates how to pass content into a Svelte component using slots in LiveSvelte.

```elixir
<.svelte name="Example">
  <p>Slot content</p>
</.svelte>
```

```svelte
<script>
    let {children}: = $props()
</script>

<i>Opening</i>
  {@render children?.()}
<i>Closing</i>
```

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

### Neovim Treesitter Configuration (Older Versions)

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Provides an alternative Treesitter configuration for Neovim versions below v0.9 to enable Svelte syntax highlighting.

```scm
; extends

; Svelte
(sigil
  (sigil_name) @_sigil_name
  (quoted_content) @svelte
(#eq? @_sigil_name "V"))
```

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

### Using LiveSvelte Components Macro

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Illustrates the use of the `LiveSvelte.Components` macro to directly call Svelte components as Elixir functions within LiveView templates, offering a JSX-like syntax.

```elixir
use LiveSvelte.Components

def render(assigns) do
  ~H""".
  <.Example number={@number} socket={@socket} />
"""
end
```

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

### Svelte 5 Migration: Update package.json

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Updates the versions for `esbuild-svelte` and `svelte` in the `package.json` file to support Svelte 5. Recommended versions are `^0.9.0` for `esbuild-svelte` and `^5` for `svelte`.

```javascript
  // package.json
  "esbuild-svelte": "^0.9.0",
  "svelte": "^5",
```

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

### Adding LiveSvelte Dependency in Mix

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Shows how to add the live_svelte dependency to your Elixir project's mix.exs file.

```elixir
{:live_svelte, path: "../live_svelte"},
```

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

### Loading Slot for SSR Fallback

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Illustrates using the ':loading' slot in LiveSvelte to display placeholder content during client-side rendering when SSR is disabled.

```elixir
<.svelte name="Example" ssr={false}>
  <:loading>
    <p>Until your LiveSvelte component renders client-side, this will be displayed</p>
  </:loading>
</.svelte>
```

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

### LiveView Push Patch with Svelte

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Illustrates using LiveView's 'push_patch' within a Svelte component, leveraging `data-phx-link` and `data-phx-link-state` for stateful navigation.

```svelte
<a href="/your-liveview-path" data-phx-link="patch" data-phx-link-state="push">Patch</a>
```

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

### Render Svelte Component in LiveView

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Demonstrates how to render a Svelte component within a LiveView template using the LiveSvelte helper. It shows how to pass props and the socket to the component.

```elixir
def render(assigns) do
  ~H""".
  <.svelte name="Example" props={%{number: @number}} socket={@socket} />
"""
end
```

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

### Adding LiveSvelte Dependency in Package.json

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Demonstrates how to add the live_svelte dependency to your Node.js assets' package.json file.

```javascript
"live_svelte": "file:../../live_svelte",
```

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

### LiveView Push Navigate with Svelte

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Shows how to implement LiveView's 'push_navigate' functionality within a Svelte component using `data-phx-link` and `data-phx-link-state` attributes.

```svelte
<a href="/your-liveview-path" data-phx-link="redirect" data-phx-link-state="push">Redirect</a>
```

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

### Add LiveSvelte Dependency

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

This snippet shows how to add the LiveSvelte package to your Phoenix project's dependencies in `mix.exs`.

```elixir
defp deps do
  [
    {:live_svelte, "~> 0.16.0"}
  ]
end
```

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

### Set NODE_ENV to Production

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

This snippet shows how to set the `NODE_ENV` environment variable to `production` in a Dockerfile, which is crucial for optimal performance and preventing memory leaks during SSR.

```bash
ENV NODE_ENV production
```

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

### Basic LiveSvelte Component

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Defines a LiveView component using the `~V` sigil for Svelte templating. It handles mounting with an initial number and processing 'increment' events.

```elixir
defmodule AppWeb.SvelteLive do
  use AppWeb, :live_view

  def render(assigns) do
    ~H"""
    <.svelte name="Example" props={%{number: @number}} socket={@socket} />
    """
  end

  def handle_event("set_number", %{"number" => number}, socket) do
    {:noreply, assign(socket, :number, number)}
  end

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :number, 5)}
  end
end
```

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

### Svelte 5 Migration: Update mix.exs

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Specifies the dependency version for LiveSvelte in the `mix.exs` file for Elixir projects. Requires running `mix deps.get` after modification.

```elixir
# `mix.exs`
{:live_svelte, "0.15.0"}
```

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

### Block All Spiders

Source: https://github.com/woutdp/live_svelte/blob/master/example_project/priv/static/robots-9e2c81b0855bbff2baa8371bc4a78186.txt

This configuration blocks all web crawlers (spiders) from accessing the entire website. It's a common setting for preventing indexing of all content.

```robots.txt
User-agent: *
Disallow: /
```

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

### Ecto Schema with Jason Encoder

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Defines an Ecto schema for a 'planets' table, excluding the '__meta__' field from JSON encoding using Jason.Encoder.

```elixir
defmodule Example.Planets.Planet do
  use Ecto.Schema
  import Ecto.Changeset
  @derive {Jason.Encoder, except: [:__meta__]}

  schema "planets" do
    field :diameter, :integer
    field :mass, :integer
    field :name, :string

    timestamps()
  end

  ...
end
```

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

### Named Slotting in LiveSvelte

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Shows how to use named slots to pass different content sections into a Svelte component.

```elixir
<.svelte name="Example">
  Main content
  <:subtitle>
    <p>Slot content</p>
  </:subtitle>
</.svelte>
```

```svelte
<script>
    let {children, subtitle}: = $props()
</script>

<i>Opening</i>
  {@render children()}
  <h2>{@render subtitle()}</h2>
<i>Closing</i>
```

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

### Configure Tailwind CSS for Svelte

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

This JavaScript snippet shows how to configure `tailwind.config.js` to include Svelte files for Tailwind CSS processing.

```javascript
...
content: [
  ...
  "./svelte/**/*.svelte"
],
...
```

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

### Routing to Svelte LiveView

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

Configures the router to direct traffic to the Svelte LiveView component.

```elixir
import Phoenix.LiveView.Router

scope "/", AppWeb do
  ... 
  live "/svelte", SvelteLive
  ...
end
```

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

### Disable SSR Globally (Supervisor)

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

To globally disable Server-Side Rendering (SSR) in LiveSvelte, you can avoid including the `NodeJS` supervisor in your `application.ex` file.

```elixir
# In application.ex, do not include the NodeJS supervisor.
```

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

### Disable SSR Globally (Configuration)

Source: https://github.com/woutdp/live_svelte/blob/master/README.md

This configuration snippet shows how to globally disable Server-Side Rendering (SSR) for LiveSvelte by setting the `ssr` option to `false` in the `config.exs` file.

```elixir
config :live_svelte,
  ssr: false
```

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