Elgato_dark/live_svelte
1
0
Fork 0
mirror of https://github.com/woutdp/live_svelte synced 2026-05-24 09:28:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
live_svelte/example_project
History
Denis Donici 80e3277a95 chore: improved docs. removed live json
2026-03-19 12:43:32 -07:00
..
assets chore: improved docs. removed live json 2026-03-19 12:43:32 -07:00
config chore: switch example project to vite 2026-03-19 12:43:32 -07:00
lib chore: improved docs. removed live json 2026-03-19 12:43:32 -07:00
priv Upgrade example project. fix remounting Svelte component (#206) 2026-02-08 13:47:39 +02:00
test chore: improved docs. removed live json 2026-03-19 12:43:32 -07:00
.formatter.exs Add example project 2023-03-14 18:18:15 -07:00
.gitignore Added better navigation between examples projects (#202) 2026-02-01 00:14:15 +02:00
Dockerfile Upgrade example project. fix remounting Svelte component (#206) 2026-02-08 13:47:39 +02:00
mix.exs chore: improved docs. removed live json 2026-03-19 12:43:32 -07:00
mix.lock chore: improved docs. removed live json 2026-03-19 12:43:32 -07:00
README.md chore: improved docs. removed live json 2026-03-19 12:43:32 -07:00

README.md

LiveSvelte Example Project

A working Phoenix application demonstrating LiveSvelte features — Svelte 5 components integrated with Phoenix LiveView.

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.js && 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)

SSR is disabled by default in development. To enable:

config/dev.exs:

config :live_svelte, ssr: true, ssr_module: LiveSvelte.SSR.ViteJS

For production, use NodeJS SSR (already configured):

config :live_svelte, ssr: true, ssr_module: LiveSvelte.SSR.NodeJS

Build the SSR bundle before SSR works:

mix assets.js && 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