Elgato_dark/live_svelte
1
0
Fork 0
mirror of https://github.com/woutdp/live_svelte synced 2026-05-24 01:18:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
live_svelte/example_project/README.md
Denis Donici 5d369a3282 chore: update docs
2026-03-19 12:43:32 -07:00

3.9 KiB
Raw Permalink Blame History

LiveSvelte Example Project

A working Phoenix application demonstrating LiveSvelte features — Svelte 5 components integrated with Phoenix LiveView. It uses phoenix_vite for Vite: one mix phx.server starts Phoenix and the Vite dev server, so Svelte and CSS changes hot-reload with no extra terminal.

Setup

  1. Install Elixir + Node.js 19+
  2. Run mix setup (installs deps + npm packages + creates DB)
  3. Start server: mix phx.server
  4. Visit: http://localhost:4000

Demo Categories

Basics

  • Hello World (/hello-world) — Simplest component rendering
  • Struct Props (/live-struct) — Passing Elixir structs as props (requires @derive Jason.Encoder)
  • Lodash (/lodash) — Using npm packages in Svelte components

Interactive

  • Counter (/live-simple-counter) — Server state + client events
  • Plus/Minus (Live) (/live-plus-minus) — LiveView event handling
  • Hybrid Counter (/live-plus-minus-hybrid) — Mix of client and server events
  • Lights (/live-lights) — Multiple components sharing LiveView state
  • Sigil (/live-sigil) — Inline Svelte templates with the ~V sigil

Data & Real-Time

  • Streams (/streams) — Phoenix stream() for efficient list updates
  • Props Diff (/live-props-diff) — Only changed assigns sent on update (JSON Patch)
  • ID List Diff (/live-id-list-diff) — ID-based list diffing for minimal ops
  • Chat (/live-chat) — Real-time updates with PubSub + pushEvent
  • Log List (/live-log-list) — Dynamic list updates
  • Breaking News (/live-breaking-news) — Real-time ticker with ~V sigil

Slots

  • Simple Slots (/live-slots-simple) — Basic slot usage
  • Dynamic Slots (/live-slots-dynamic) — Named slots with dynamic content

Composables

  • Form (/live-form) — useLiveForm() with Ecto changeset validation
  • File Upload (/live-upload) — useLiveUpload() with progress and validation
  • Navigation (/live-navigation) — useLiveNavigation() for patch/navigate
  • Composition (/live-composition) — useLiveSvelte() for pushEvent in component trees
  • Event Reply (/live-event-reply) — useEventReply() for request-response

Advanced

  • SSR Demo (/live-ssr) — Server-side rendering with NodeJS (see SSR section below)
  • Client Loading (/live-client-side-loading) — Loading slot shown until hydration

Ecto

  • Notes OTP (/live-notes-otp) — SQLite-backed notes with Ecto

Testing

# Server-side tests (fast, no browser)
mix test --only phoenix_test

# Browser E2E tests (requires ChromeDriver)
mix test --only e2e

# All tests
mix test

After changing JS/Svelte files, rebuild before running tests:

mix assets.build && mix test

E2E tests require Chrome + ChromeDriver in PATH. Install with your OS package manager. See live_svelte/CLAUDE.md for detailed testing guidance.

SSR (Server-Side Rendering)

In development the app uses LiveSvelte.SSR.ViteJS: SSR requests go to the Vite dev server (started by the :vite watcher in config/dev.exs). The endpoint’s static_url and watchers are set so that assets and HMR are served from Vite.

config/dev.exs (already set in this project):

config :live_svelte, ssr_module: LiveSvelte.SSR.ViteJS, vite_host: "http://localhost:5173"
# Endpoint also has static_url: [host: "localhost", port: 5173] and watchers: [..., vite: {PhoenixVite.Npm, :run, [:vite, ~w(dev)]}]

For production, NodeJS SSR is used (already configured); build the SSR bundle with:

mix assets.build && mix compile

The SSR demo page (/live-ssr) uses ssr={true} on the component. NodeJS must be available for SSR in production; in test env SSR is disabled globally via config :live_svelte, ssr: false.

Learn more