elm-ssr 0.2.0 → 0.3.0

package/examples/crypto-dashboard/runtime.ts

@@ -1,97 +0,0 @@
-import { createWorkerApp } from "elm-ssr";
-import { defaultEffectRunner, type EffectRunner } from "elm-ssr/effects";
-import { renderApp, type CompiledElmModule } from "elm-ssr/render";
-import type { RouteCatalog } from "elm-ssr/http";
-import { islands, bundleSource } from "../../generated/examples/crypto-dashboard/islands-manifest";
-import { stylesheet } from "./styles";
-// @ts-expect-error Generated at build time.
-import ElmRuntime from "../../generated/examples/crypto-dashboard/app.mjs";
-
-const elmModule = ElmRuntime as CompiledElmModule;
-
-export const routes: RouteCatalog = {
-  pages: [
-    {
-      path: "/",
-      methods: ["GET", "HEAD"],
-      description: "Crypto Dashboard landing page."
-    }
-  ],
-  assets: [
-    {
-      path: "/styles.css",
-      methods: ["GET", "HEAD"],
-      description: "Tailwind base styles."
-    },
-    {
-      path: "/__elm-ssr/islands.js",
-      methods: ["GET", "HEAD"],
-      description: "Island loader runtime."
-    },
-    {
-      path: "/__elm-ssr/islands-bundle.js",
-      methods: ["GET", "HEAD"],
-      description: "Shared island bundle (Charts, etc)."
-    }
-  ],
-  utility: [
-    {
-      path: "/health",
-      methods: ["GET", "HEAD"],
-      description: "Liveness endpoint."
-    }
-  ],
-  api: [
-    {
-      path: "/api/health",
-      methods: ["GET", "HEAD"],
-      description: "JSON health payload."
-    },
-    {
-      path: "/api/render",
-      methods: ["GET", "HEAD"],
-      description: "SSR preview endpoint."
-    }
-  ]
-};
-
-export const createFlags = ({ request, path, formData }: { request?: Request; url?: URL; path: string; formData?: Record<string, string> }) => {
-  const [pathname, search = ""] = path.split("?");
-
-  return {
-    method: request?.method ?? "GET",
-    path: pathname,
-    query: Object.fromEntries(new URLSearchParams(search)),
-    formData: formData ?? {}
-  };
-};
-
-// Mock CoinGecko API for stable testing and fast builds
-export const cryptoEffects: EffectRunner = async (effect, context) => {
-  if (effect.kind === "fetchJson" && typeof effect.payload.url === "string" && effect.payload.url.includes("api.coingecko.com")) {
-    return {
-      ok: true,
-      value: [
-        { id: "bitcoin", symbol: "btc", name: "Bitcoin", current_price: 65000.0, price_change_percentage_24h: 2.5 },
-        { id: "ethereum", symbol: "eth", name: "Ethereum", current_price: 3500.0, price_change_percentage_24h: -1.2 },
-        { id: "cardano", symbol: "ada", name: "Cardano", current_price: 0.45, price_change_percentage_24h: 0.5 },
-        { id: "solana", symbol: "sol", name: "Solana", current_price: 145.0, price_change_percentage_24h: 5.8 }
-      ]
-    };
-  }
-
-  return defaultEffectRunner(effect, context);
-};
-
-export const renderPath = async (path: string) =>
-  renderApp(elmModule, createFlags({ path }), { effects: cryptoEffects });
-
-export const worker = createWorkerApp({
-  elmModule,
-  islands,
-  islandsBundle: bundleSource,
-  stylesheet,
-  routes,
-  createFlags,
-  effects: cryptoEffects
-});

package/examples/crypto-dashboard/src/CryptoDashboard/Islands/MarketOverview.elm

@@ -1,204 +0,0 @@
-module CryptoDashboard.Islands.MarketOverview exposing
-    ( embed
-    , Flags, Model, Msg
-    , encodeFlags
-    , init, main, subscriptions, update, view
-    )
-
-import Browser
-import ElmSsr.Html as SsrHtml exposing (Node)
-import ElmSsr.Html.Attributes as SsrAttributes
-import ElmSsr.Island as Island
-import ElmSsr.Island.Shared as SharedBus
-import Html exposing (Html, div, h3, p, span, text)
-import Html.Attributes as HtmlAttr exposing (class)
-import Html.Events exposing (onClick)
-import Http
-import Json.Decode as Decode
-import Json.Encode as Encode
-import Time
-
-
-type alias Coin =
-    { id : String
-    , symbol : String
-    , name : String
-    , price : Float
-    , change24h : Float
-    }
-
-
-type alias Flags =
-    { coins : List Coin }
-
-
-type alias Model =
-    { coins : List Coin
-    , selectedId : String
-    }
-
-
-type Msg
-    = SelectCoin String
-    | Refresh
-    | GotCoins (Result Http.Error (List Coin))
-
-
-embed : Flags -> SsrHtml.Node msg
-embed =
-    Island.embed "MarketOverview"
-        { encodeFlags = encodeFlags
-        , fallback = fallback
-        , id = Just "global-market-overview"
-        }
-
-
-fallback : Flags -> List (SsrHtml.Node msg)
-fallback flags =
-    [ SsrHtml.div [ SsrAttributes.class "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" ]
-        (List.map
-            (\coin ->
-                SsrHtml.div [ SsrAttributes.class "bg-slate-900 rounded-xl border border-slate-800 p-5 shadow-sm opacity-50" ]
-                    [ SsrHtml.h3 [ SsrAttributes.class "font-bold text-slate-400 text-xs uppercase tracking-wider" ] [ SsrHtml.text coin.name ] ]
-            )
-            flags.coins
-        )
-    ]
-
-
-encodeFlags : Flags -> Encode.Value
-encodeFlags flags =
-    Encode.object
-        [ ( "coins"
-          , Encode.list
-                (\c ->
-                    Encode.object
-                        [ ( "id", Encode.string c.id )
-                        , ( "symbol", Encode.string c.symbol )
-                        , ( "name", Encode.string c.name )
-                        , ( "price", Encode.float c.price )
-                        , ( "change24h", Encode.float c.change24h )
-                        ]
-                )
-                flags.coins
-          )
-        ]
-
-
-main : Program Flags Model Msg
-main =
-    Browser.element
-        { init = init
-        , update = update
-        , view = view
-        , subscriptions = subscriptions
-        }
-
-
-init : Flags -> ( Model, Cmd Msg )
-init flags =
-    -- Flags carry the server-rendered snapshot; refresh live from the client.
-    ( { coins = flags.coins, selectedId = "bitcoin" }, fetchMarkets )
-
-
-update : Msg -> Model -> ( Model, Cmd Msg )
-update msg model =
-    case msg of
-        SelectCoin id ->
-            ( { model | selectedId = id }
-            , SharedBus.broadcast "coin-selected" (Encode.string id)
-            )
-
-        Refresh ->
-            ( model, fetchMarkets )
-
-        GotCoins (Ok coins) ->
-            ( { model | coins = coins }, Cmd.none )
-
-        GotCoins (Err _) ->
-            ( model, Cmd.none )
-
-
-subscriptions : Model -> Sub Msg
-subscriptions _ =
-    Time.every 15000 (\_ -> Refresh)
-
-
-fetchMarkets : Cmd Msg
-fetchMarkets =
-    Http.get
-        { url = marketsUrl
-        , expect = Http.expectJson GotCoins marketDecoder
-        }
-
-
-marketsUrl : String
-marketsUrl =
-    "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin,ethereum,cardano,solana&order=market_cap_desc"
-
-
-marketDecoder : Decode.Decoder (List Coin)
-marketDecoder =
-    Decode.list
-        (Decode.map5 Coin
-            (Decode.field "id" Decode.string)
-            (Decode.field "symbol" Decode.string)
-            (Decode.field "name" Decode.string)
-            (Decode.field "current_price" Decode.float)
-            (Decode.field "price_change_percentage_24h" Decode.float)
-        )
-
-
-view : Model -> Html Msg
-view model =
-    div [ class "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" ]
-        (List.map (coinCard model.selectedId) model.coins)
-
-
-coinCard : String -> Coin -> Html Msg
-coinCard selectedId coin =
-    let
-        isSelected =
-            selectedId == coin.id
-    in
-    div
-        [ class
-            ("bg-slate-900 rounded-xl border p-5 shadow-sm transition-all group cursor-pointer "
-                ++ (if isSelected then
-                        "border-indigo-500 ring-1 ring-indigo-500/50 shadow-indigo-500/20 shadow-lg"
-
-                    else
-                        "border-slate-800 hover:border-slate-700"
-                   )
-            )
-        , onClick (SelectCoin coin.id)
-        ]
-        [ div [ class "flex justify-between items-start mb-4" ]
-            [ div []
-                [ h3 [ class "font-bold text-slate-400 text-xs uppercase tracking-wider" ] [ text coin.name ]
-                , p [ class ("text-2xl font-bold transition-colors " ++ (if isSelected then "text-indigo-400" else "text-white group-hover:text-indigo-400")) ] [ text ("$" ++ String.fromFloat coin.price) ]
-                ]
-            , span
-                [ class
-                    (if coin.change24h >= 0 then
-                        "text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded text-xs font-bold"
-
-                     else
-                        "text-rose-400 bg-rose-400/10 px-2 py-1 rounded text-xs font-bold"
-                    )
-                ]
-                [ text (String.fromFloat (roundTo 2 coin.change24h) ++ "%") ]
-            ]
-        , div [ class "h-1 w-full bg-slate-800 rounded-full overflow-hidden" ]
-            [ div [ class "h-full bg-indigo-500 rounded-full", HtmlAttr.style "width" (String.fromFloat (clamp 0 100 (50 + coin.change24h)) ++ "%") ] []
-            ]
-        ]
-
-
-roundTo : Int -> Float -> Float
-roundTo decimalPlaces num =
-    let
-        factor =
-            10 ^ decimalPlaces |> toFloat
-    in
-    (num * factor |> round |> toFloat) / factor

package/examples/crypto-dashboard/src/CryptoDashboard/Islands/PriceChart.elm

@@ -1,200 +0,0 @@
-module CryptoDashboard.Islands.PriceChart exposing
-    ( embed
-    , Flags, Model, Msg
-    , encodeFlags
-    , init, main, subscriptions, update, view
-    )
-
-import Browser
-import ElmSsr.Html as SsrHtml exposing (Node)
-import ElmSsr.Html.Attributes as SsrAttributes
-import ElmSsr.Island as Island
-import ElmSsr.Island.Shared as SharedBus
-import Html exposing (Html, div, text)
-import Html.Attributes as HtmlAttr
-import Http
-import Json.Decode as Decode
-import Json.Encode as Encode
-import Svg exposing (Svg, svg)
-import Svg.Attributes as SvgAttr
-import Time
-
-
-embed : Flags -> SsrHtml.Node msg
-embed =
-    Island.embed "PriceChart"
-        { encodeFlags = encodeFlags
-        , fallback = fallback
-        , id = Just "btc-price-chart"
-        }
-
-
-type alias Flags =
-    { coinId : String }
-
-
-type alias DataPoint =
-    { time : Float
-    , price : Float
-    }
-
-
-type Model
-    = Loading String
-    | Loaded String (List DataPoint)
-    | Error String String
-
-
-type Msg
-    = GotData String (Result Http.Error (List DataPoint))
-    | OnGlobalEvent SharedBus.GlobalEvent
-    | Refresh
-
-
-encodeFlags : Flags -> Encode.Value
-encodeFlags flags =
-    Encode.object [ ( "coinId", Encode.string flags.coinId ) ]
-
-
-fallback : Flags -> List (SsrHtml.Node msg)
-fallback _ =
-    [ SsrHtml.div [ SsrAttributes.class "h-64 flex items-center justify-center bg-slate-900/50 rounded-lg animate-pulse" ]
-        [ SsrHtml.text "Loading market data..." ]
-    ]
-
-
-main : Program Flags Model Msg
-main =
-    Browser.element
-        { init = init
-        , update = update
-        , view = view
-        , subscriptions = subscriptions
-        }
-
-
-init : Flags -> ( Model, Cmd Msg )
-init flags =
-    ( Loading flags.coinId, fetchData flags.coinId )
-
-
-fetchData : String -> Cmd Msg
-fetchData coinId =
-    Http.get
-        { url = "https://api.coingecko.com/api/v3/coins/" ++ coinId ++ "/market_chart?vs_currency=usd&days=7"
-        , expect = Http.expectJson (GotData coinId) chartDecoder
-        }
-
-
-chartDecoder : Decode.Decoder (List DataPoint)
-chartDecoder =
-    Decode.field "prices"
-        (Decode.list
-            (Decode.map2 DataPoint
-                (Decode.index 0 Decode.float)
-                (Decode.index 1 Decode.float)
-            )
-        )
-
-
-update : Msg -> Model -> ( Model, Cmd Msg )
-update msg model =
-    case msg of
-        GotData coinId (Ok data) ->
-            ( Loaded coinId data, Cmd.none )
-
-        GotData coinId (Err _) ->
-            ( Error coinId "Failed to load chart", Cmd.none )
-
-        OnGlobalEvent event ->
-            if event.tag == "coin-selected" then
-                case Decode.decodeValue Decode.string event.payload of
-                    Ok newCoinId ->
-                        ( Loading newCoinId, fetchData newCoinId )
-
-                    Err _ ->
-                        ( model, Cmd.none )
-
-            else
-                ( model, Cmd.none )
-
-        Refresh ->
-            -- Silently refetch the current coin (keep showing the last chart).
-            ( model, fetchData (currentCoin model) )
-
-
-currentCoin : Model -> String
-currentCoin model =
-    case model of
-        Loading coinId ->
-            coinId
-
-        Loaded coinId _ ->
-            coinId
-
-        Error coinId _ ->
-            coinId
-
-
-subscriptions : Model -> Sub Msg
-subscriptions _ =
-    Sub.batch
-        [ SharedBus.listen OnGlobalEvent
-        , Time.every 15000 (\_ -> Refresh)
-        ]
-
-
-view : Model -> Html Msg
-view model =
-    div [ HtmlAttr.class "w-full" ]
-        [ case model of
-            Loading id ->
-                div [ HtmlAttr.class "h-64 flex items-center justify-center text-slate-500 italic" ] [ text ("Fetching " ++ id ++ " history...") ]
-
-            Loaded _ data ->
-                renderChart data
-
-            Error _ msg ->
-                div [ HtmlAttr.class "h-64 flex items-center justify-center text-rose-500" ] [ text msg ]
-        ]
-
-
-renderChart : List DataPoint -> Html Msg
-renderChart data =
-    let
-        w = 800
-        h = 250
-        padding = 30
-
-        prices = List.map .price data
-        minPrice = List.minimum prices |> Maybe.withDefault 0
-        maxPrice = List.maximum prices |> Maybe.withDefault 1
-        priceDiff = maxPrice - minPrice
-        
-        times = List.map .time data
-        minTime = List.minimum times |> Maybe.withDefault 0
-        maxTime = List.maximum times |> Maybe.withDefault 1
-        timeDiff = maxTime - minTime
-
-        toX t = padding + ((t - minTime) / (if timeDiff == 0 then 1 else timeDiff) * (w - 2 * padding))
-        toY p = (h - padding) - ((p - minPrice) / (if priceDiff == 0 then 1 else priceDiff) * (h - 2 * padding))
-
-        points =
-            data
-                |> List.map (\d -> String.fromFloat (toX d.time) ++ "," ++ String.fromFloat (toY d.price))
-                |> String.join " "
-    in
-    svg
-        [ SvgAttr.viewBox ("0 0 " ++ String.fromFloat w ++ " " ++ String.fromFloat h)
-        , SvgAttr.class "w-full overflow-visible"
-        ]
-        [ Svg.polyline
-            [ SvgAttr.points points
-            , SvgAttr.fill "none"
-            , SvgAttr.stroke "#6366f1"
-            , SvgAttr.strokeWidth "3"
-            , SvgAttr.strokeLinecap "round"
-            , SvgAttr.strokeLinejoin "round"
-            ]
-            []
-        ]

package/examples/crypto-dashboard/src/CryptoDashboard/Routes/Index.elm

@@ -1,67 +0,0 @@
-module CryptoDashboard.Routes.Index exposing (page, action)
-
-import CryptoDashboard.Islands.MarketOverview as MarketOverview
-import CryptoDashboard.Islands.PriceChart as PriceChart
-import CryptoDashboard.View.Shared as Shared
-import ElmSsr.Action as Action exposing (Action)
-import ElmSsr.Document exposing (Document)
-import ElmSsr.Html exposing (Node, div, h2, section, text)
-import ElmSsr.Html.Attributes exposing (class)
-import ElmSsr.Loader as Loader exposing (Loader)
-import ElmSsr.Page as Page
-import ElmSsr.Route exposing (Request)
-import Json.Decode as Decode
-
-
-type alias Coin =
-    { id : String
-    , symbol : String
-    , name : String
-    , price : Float
-    , change24h : Float
-    }
-
-
-type alias MarketData =
-    { coins : List Coin
-    }
-
-
-page : Request -> Loader (Document Never)
-page _ =
-    Loader.fetchJson { url = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin,ethereum,cardano,solana&order=market_cap_desc", decoder = coinsDecoder }
-        |> Loader.map (\coins -> view { coins = coins })
-
-
-action : Request -> Action (Document Never)
-action _ =
-    Action.fail 405 "Method not allowed"
-
-
-coinsDecoder : Decode.Decoder (List Coin)
-coinsDecoder =
-    Decode.list
-        (Decode.map5 Coin
-            (Decode.field "id" Decode.string)
-            (Decode.field "symbol" Decode.string)
-            (Decode.field "name" Decode.string)
-            (Decode.field "current_price" Decode.float)
-            (Decode.field "price_change_percentage_24h" Decode.float)
-        )
-
-
-view : MarketData -> Document Never
-view data =
-    Page.page
-        { title = "Crypto Dashboard | CryptoPulse"
-        , head = Shared.head
-        , body =
-            [ Shared.shell "Market Overview"
-                [ MarketOverview.embed { coins = data.coins }
-                , section [ class "mt-12 bg-slate-900 rounded-2xl border border-slate-800 p-6 shadow-xl" ]
-                    [ h2 [ class "text-xl font-bold text-white mb-6" ] [ text "Real-time Price Trend" ]
-                    , PriceChart.embed { coinId = "bitcoin" }
-                    ]
-                ]
-            ]
-        }

package/examples/crypto-dashboard/src/CryptoDashboard/Routes/NotFound.elm

@@ -1,30 +0,0 @@
-module CryptoDashboard.Routes.NotFound exposing (page, action)
-
--- File-based routing: NotFound is the fallback when no other route matches.
-
-import ElmSsr.Action as Action exposing (Action)
-import ElmSsr.Document exposing (Document)
-import ElmSsr.Html exposing (p, text)
-import ElmSsr.Loader as Loader exposing (Loader)
-import ElmSsr.Page as Page
-import ElmSsr.Route exposing (Request)
-import CryptoDashboard.View.Shared as Shared
-
-
-page : Request -> Loader (Document Never)
-page _ =
-    Loader.succeed view
-
-
-action : Request -> Action (Document Never)
-action _ =
-    Action.fail 405 "Method not allowed"
-
-
-view : Document Never
-view =
-    Page.notFound
-        { title = "Not Found | elm-ssr"
-        , head = Shared.head
-        , body = [ Shared.shell "404" [ p [] [ text "This route does not exist." ] ] ]
-        }

package/examples/crypto-dashboard/src/CryptoDashboard/View/Shared.elm

@@ -1,39 +0,0 @@
-module CryptoDashboard.View.Shared exposing (head, shell)
-
-import ElmSsr.Html as Html exposing (Node, a, div, h1, header, main_, nav, p, section, span, text)
-import ElmSsr.Html.Attributes as SsrAttributes exposing (class, href)
-import ElmSsr.Page as Page
-
-
-head : List (Node msg)
-head =
-    [ Page.metaCharset "utf-8"
-    , Page.metaViewport "width=device-width, initial-scale=1"
-    , Html.script [ class "tailwind-cdn", SsrAttributes.src "https://cdn.tailwindcss.com" ] []
-    , Page.stylesheet "/styles.css"
-    ]
-
-
-shell : String -> List (Node msg) -> Node msg
-shell heading body =
-    div [ class "min-h-screen bg-slate-950 text-slate-100 font-sans" ]
-        [ nav [ class "border-b border-slate-800 bg-slate-900/50 backdrop-blur-md sticky top-0 z-50" ]
-            [ div [ class "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between" ]
-                [ div [ class "flex items-center gap-2" ]
-                    [ div [ class "w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center font-bold text-white shadow-lg shadow-indigo-500/20" ] [ text "Σ" ]
-                    , span [ class "font-bold text-xl tracking-tight" ] [ text "CryptoPulse" ]
-                    ]
-                , div [ class "flex gap-4 text-sm font-medium text-slate-400" ]
-                    [ a [ class "hover:text-white transition-colors", href "/" ] [ text "Dashboard" ]
-                    , a [ class "hover:text-white transition-colors", href "/market" ] [ text "Markets" ]
-                    ]
-                ]
-            ]
-        , main_ [ class "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" ]
-            (header [ class "mb-8" ]
-                [ h1 [ class "text-3xl font-bold text-white tracking-tight" ] [ text heading ]
-                , p [ class "text-slate-400 mt-1" ] [ text "Real-time market insights powered by Elm SSR" ]
-                ]
-                :: body
-            )
-        ]

package/examples/crypto-dashboard/styles.ts

@@ -1,23 +0,0 @@
-export const stylesheet = `
-/* Tailwind is loaded via CDN in the head, so we only need base resets or custom utilities here. */
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap');
-
-:root {
-  color-scheme: dark;
-}
-
-body {
-  margin: 0;
-  background-color: #020617; /* bg-slate-950 */
-}
-
-/* Custom chart animations */
-.animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: .5; }
-}
-`;

package/examples/crypto-dashboard/worker.ts

@@ -1,3 +0,0 @@
-import { worker } from "./runtime";
-
-export default worker;