oc-template-elm-compiler 3.0.1 → 3.0.2

package/dist/lib/elmOCProviderTemplate.js

@@ -11,7 +11,7 @@ function elmEntry({ viewPath, providerFunctions }) {
     const { _baseUrl, _componentName, _componentVersion, _staticPath, ...rest } = props;
     const app = Elm["${extractName(viewPath)}"].init({
       node,
-      flags: rest
+      flags: { ...rest, staticPath: _staticPath }
     })
 
     ${providerFunctions}
@@ -49,7 +49,7 @@ function jsEntry({ viewPath, providerFunctions }) {
     const { _baseUrl, _componentName, _componentVersion, _staticPath, ...rest } = props;
     const app = program.init({
       node,
-      flags: rest
+      flags: { ...rest, staticPath: _staticPath }
     })
 
     ${providerFunctions}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oc-template-elm-compiler",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Compiler for the Elm OC template",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/scaffold/src/.cursor/rules/oc-project.mdc

@@ -56,7 +56,7 @@ OpenComponents is a microfrontend technology that resembles a Vite project but w
 
 ### Parameters vs Actions
 
-- **Parameters**: Initial props passed via URL query string (like `?userId=1`)
+- **Parameters**: Initial props passed via URL query string (like `?name=Ada&year=1986`)
 - **Actions**: Server endpoints that the client can call after initial render
 
 ### Streaming Mode Benefits

package/scaffold/src/package.json

@@ -18,10 +18,10 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "oc-server": "^4.0.2",
-    "oc-template-elm-compiler": "^3.0.1",
+    "oc-server": "^4.0.3",
+    "oc-template-elm-compiler": "^3.0.2",
     "elm": "^0.19.1-6",
-    "typescript": "^5.3.3",
+    "typescript": "^5.9.3",
     "vite": "^7.1.12"
   }
 }

package/scaffold/src/src/Main.elm

@@ -3,7 +3,7 @@ port module Main exposing (..)
 import Browser
 import Css exposing (..)
 import Html.Styled exposing (..)
-import Html.Styled.Attributes exposing (..)
+import Html.Styled.Attributes as Attr exposing (css)
 import Html.Styled.Events exposing (onClick)
 import Json.Decode as D
 import Json.Encode as E
@@ -28,16 +28,17 @@ main =
 
 
 type alias Model =
-    { staticPath: String, firstName : String, lastName : String, born : Int, hobbies : List String, funFact: Maybe String }
-
-type alias FactModel =
-    { funFact: String }
+    { staticPath : String, name : String, year : Int, funFact : Maybe String, error : Maybe String, loading : Bool }
 
 
 type alias DataRequest =
     { year : Int }
 
 
+type alias ActionResponse =
+    { funFact : String, error : String }
+
+
 encode : DataRequest -> E.Value
 encode data =
     E.object
@@ -52,21 +53,11 @@ init flags =
             model
 
         Err _ ->
-            { staticPath = "", firstName = "", lastName = "", born = 0, hobbies = [], funFact = Nothing }
+            { staticPath = "", name = "", year = 0, funFact = Nothing, error = Nothing, loading = False }
     , Cmd.none
     )
 
 
-isJust : Maybe a -> Bool
-isJust data =
-    case data of
-        Nothing ->
-            False
-
-        _ ->
-            True
-
-
 
 -- UPDATE
 
@@ -80,62 +71,160 @@ update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
         GetFunFact ->
-            ( model, DataRequest model.born |> encode |> askFunFact )
+            ( { model | loading = True, error = Nothing }, DataRequest model.year |> encode |> askFunFact )
 
         Recv data ->
-            ( case D.decodeValue factDecoder data of
-                Ok newModel ->
-                    { model | funFact = Just newModel }
+            case D.decodeValue responseDecoder data of
+                Ok res ->
+                    if res.error == "" then
+                        ( { model | loading = False, funFact = Just res.funFact }, Cmd.none )
+
+                    else
+                        ( { model | loading = False, error = Just res.error }, Cmd.none )
 
                 Err _ ->
-                    { staticPath = "", firstName = "", lastName = "", born = 0, hobbies = [], funFact = Nothing }
-            , Cmd.none
-            )
+                    ( { model | loading = False, error = Just "Something went wrong" }, Cmd.none )
+
+
 
 -- VIEW
 
+
 view : Model -> Html Msg
 view model =
-    div [ css 
-            [ backgroundColor (hex "3b246c")
+    div
+        [ css
+            [ backgroundColor (hex "0f172a")
             , color (hex "fff")
-            , fontFamilies [ "sans-serif" ]
-            , padding (px 40)
+            , fontFamilies [ "DejaVu Sans", "system-ui", "-apple-system", "Segoe UI", "Roboto", "sans-serif" ]
+            , padding2 (px 56) (px 24)
+            , displayFlex
+            , justifyContent center
             ]
         ]
-        [ img [ Html.Styled.Attributes.width 50, Html.Styled.Attributes.height 50, src (model.staticPath ++ "public/logo.png"), alt "Logo" ] []
-        , h1 [ css [ margin4 (px 0) (px 0) (px 20) (px 0) ] ]
-            [ text ("Hello, ") 
-            , span [ css [ textDecoration underline ] ] [text (model.firstName)]
-            , text( " " ++ model.lastName ) ]
-        , div [ css [ marginBottom (px 20) ] ]
-            [ div [ css [ margin2 (px 6) (px 0) ] ] [ text ("Born: " ++ String.fromInt model.born) ]
-            , div [ css [ margin2 (px 6) (px 0) ] ] [ text ("Hobbies: " ++ String.join ", " (List.map String.toLower model.hobbies)) ]
+        [ div
+            [ css
+                [ backgroundColor (hex "ffffff")
+                , color (hex "0f172a")
+                , borderRadius (px 20)
+                , padding (px 32)
+                , width (pct 100)
+                , maxWidth (px 440)
+                , boxShadow5 (px 0) (px 12) (px 32) (px 0) (rgba 2 6 23 0.45)
+                ]
+            ]
+            [ div [ css [ displayFlex, alignItems center, property "gap" "12px", marginBottom (px 20) ] ]
+                [ img
+                    [ css [ width (px 40), height (px 40), borderRadius (px 12), display block ]
+                    , Attr.src (model.staticPath ++ "public/logo.png")
+                    , Attr.alt "Logo"
+                    ]
+                    []
+                , p
+                    [ css
+                        [ margin zero
+                        , fontSize (px 12)
+                        , fontWeight (int 700)
+                        , letterSpacing (Css.em 0.14)
+                        , textTransform uppercase
+                        , color (hex "4f46e5")
+                        ]
+                    ]
+                    [ text "OpenComponents · Vite" ]
+                ]
+            , h1
+                [ css
+                    [ margin4 (px 0) (px 0) (px 8) (px 0)
+                    , fontSize (px 30)
+                    , lineHeight (num 1.15)
+                    , letterSpacing (Css.em -0.02)
+                    ]
+                ]
+                [ text "Hello, "
+                , span [ css [ color (hex "4f46e5") ] ] [ text model.name ]
+                ]
+            , p
+                [ css [ margin4 (px 0) (px 0) (px 4) (px 0), fontSize (px 16), color (hex "475569") ] ]
+                [ text "Born in "
+                , span
+                    [ css
+                        [ display inlineBlock
+                        , backgroundColor (hex "eef2ff")
+                        , color (hex "4338ca")
+                        , borderRadius (px 999)
+                        , padding2 (px 2) (px 12)
+                        , fontWeight (int 700)
+                        ]
+                    ]
+                    [ text (String.fromInt model.year) ]
+                ]
+            , case model.funFact of
+                Nothing ->
+                    text ""
+
+                Just fact ->
+                    div
+                        [ css
+                            [ marginTop (px 20)
+                            , backgroundColor (hex "eef2ff")
+                            , borderLeft3 (px 4) solid (hex "4f46e5")
+                            , borderRadius4 (px 0) (px 12) (px 12) (px 0)
+                            , padding2 (px 14) (px 16)
+                            , fontSize (px 15)
+                            , lineHeight (num 1.5)
+                            , color (hex "1e1b4b")
+                            ]
+                        ]
+                        [ text fact ]
+            , case model.error of
+                Nothing ->
+                    text ""
+
+                Just message ->
+                    div
+                        [ css
+                            [ marginTop (px 20)
+                            , backgroundColor (hex "fef2f2")
+                            , borderLeft3 (px 4) solid (hex "ef4444")
+                            , borderRadius4 (px 0) (px 12) (px 12) (px 0)
+                            , padding2 (px 14) (px 16)
+                            , fontSize (px 15)
+                            , lineHeight (num 1.5)
+                            , color (hex "991b1b")
+                            ]
+                        ]
+                        [ text message ]
+            , button
+                [ css
+                    [ marginTop (px 20)
+                    , width (pct 100)
+                    , backgroundColor (hex "4f46e5")
+                    , color (hex "fff")
+                    , border (px 0)
+                    , borderRadius (px 12)
+                    , padding2 (px 12) (px 24)
+                    , fontSize (px 15)
+                    , fontWeight (int 600)
+                    , cursor pointer
+                    , opacity (num (if model.loading then 0.6 else 1))
+                    , hover [ backgroundColor (hex "4338ca") ]
+                    ]
+                , onClick GetFunFact
+                , Attr.disabled model.loading
+                ]
+                [ text
+                    (if model.loading then
+                        "Loading…"
+
+                     else
+                        "Fun year fact"
+                    )
+                ]
             ]
-        , case model.funFact of
-            Nothing ->
-                text ""
-
-            Just fact ->
-                div [] [text (fact)]
-        , button [ css 
-                      [ backgroundColor (hex "a97613")
-                      , border (px 0)
-                      , padding2 (px 15) (px 32)
-                      , textAlign center
-                      , fontSize (px 16)
-                      , textDecoration none
-                      , display inlineBlock
-                      , color inherit
-                      , cursor pointer
-                      ]
-                  , onClick GetFunFact
-                  ]
-                  [ text "Fun year fact" ]
-                      
         ]
 
 
+
 -- SUBSCRIPTIONS
 
 
@@ -146,18 +235,21 @@ subscriptions _ =
 
 decoder : D.Decoder Model
 decoder =
-    D.map6 Model
+    D.map3
+        (\staticPath name year ->
+            { staticPath = staticPath, name = name, year = year, funFact = Nothing, error = Nothing, loading = False }
+        )
         (D.field "staticPath" D.string)
-        (D.field "firstName" D.string)
-        (D.field "lastName" D.string)
-        (D.field "born" D.int)
-        (D.field "hobbies" (D.list D.string))
-        (D.maybe (D.field "funFact" D.string))
-
--- decoder of a single string field
-factDecoder : D.Decoder String
-factDecoder =
-    D.field "funFact" D.string
+        (D.field "name" D.string)
+        (D.field "year" D.int)
+
+
+responseDecoder : D.Decoder ActionResponse
+responseDecoder =
+    D.map2 ActionResponse
+        (D.field "funFact" D.string)
+        (D.field "error" D.string)
+
 
 
 -- PORTS

package/scaffold/src/src/index.js

@@ -1,11 +1,15 @@
-import { serverClient } from 'oc-server';
+import { serverClient } from 'oc-server/client';
 import { Elm } from './Main.elm';
 
 export default {
   js: (app) => {
     app.ports.askFunFact.subscribe(async (params) => {
-      const data = await serverClient.funFact(params);
-      app.ports.getFunFact.send(data);
+      try {
+        const data = await serverClient.funFact(params);
+        app.ports.getFunFact.send({ funFact: data.funFact, error: '' });
+      } catch (err) {
+        app.ports.getFunFact.send({ funFact: '', error: String(err) });
+      }
     });
   },
   program: Elm.Main,

package/scaffold/src/src/server.ts

@@ -1,82 +1,47 @@
 import { Server } from 'oc-server';
 
-const userDatabase = [
-  { name: 'John Doe', born: 1986, hobbies: ['Swimming', 'Basketball'] },
-  { name: 'Jane Doe', born: 1991, hobbies: ['Running', 'Rugby'] },
-];
-
-const yearsFunFactDatabase: Record<number, string> = {
-  1986: "Halley's Comet made its closest approach to Earth in 1986, visible to the naked eye.",
-  1987: 'The first Final Fantasy game was released in 1987.',
+// Small lookup for the action below. Kept tiny on purpose: it only shows
+// that an action receives input and returns data.
+const funFacts: Record<number, string> = {
+  1986: "Halley's Comet made its closest approach to Earth in 1986.",
   1991: 'The first web page was created in 1991 by Tim Berners-Lee.',
 };
 
-async function getUser(userId: number) {
-  if (userId < 0 || userId >= userDatabase.length) {
-    throw new Error(`User with ID ${userId} not found`);
-  }
-  return userDatabase[userId];
-}
-
-async function getFunFact(year: number) {
-  return yearsFunFactDatabase[year] || `No fun fact available for year ${year}`;
-}
-
-// Export the server instance - this is required for OC
+// Tip: `new Server({ stream: true })` lets handlers and actions return
+// Promises that resolve on the client instead of blocking the render.
 export const server = new Server({
   development: {
-    // Enable console logs from browser to server for debugging
+    // Stream browser console logs to the terminal during `npm start`
     console: true,
   },
 })
-  //Define URL parameters that can be passed to your component
+  // Parameters become URL query strings, e.g. `?name=Ada&year=1986`
   .withParameters({
-    userId: {
-      default: 1,
-      description: 'The user id from the user database',
-      example: 1,
-      mandatory: true,
+    name: {
+      default: 'Jane Doe',
+      description: 'Who to greet',
+      example: 'Jane Doe',
+      type: 'string',
+    },
+    year: {
+      default: 1991,
+      description: 'Birth year used for the fun fact',
+      example: 1991,
       type: 'number',
     },
   })
-  // Main handler - returns initial data for component rendering
-  // This runs when the component is first loaded
-  .handler(async (params, ctx) => {
-    const { userId } = params;
-    const user = await getUser(userId);
-    const [firstName, lastName] = user.name.split(/\s+/);
-
-    if (firstName === 'Invalid') {
-      // Return undefined to prevent rendering
-      return;
-    }
-
-    // Set cache headers when same params produce same result
-    // This improves performance by reducing server load
-    // Don't cache in local environment because we might get render mismatches
-    if (ctx.env.name !== 'local') {
-      ctx.setHeader('Cache-Control', 'max-age=300'); // Cache for 5 minutes
-    }
-
-    // Return data that will be passed as props to React component
-    return {
-      firstName,
-      lastName,
-      born: user.born,
-      hobbies: user.hobbies,
-    };
+  // Runs once per render. Its return value becomes the UI props.
+  .handler(async ({ name = 'Jane Doe', year = 1991 }) => {
+    return { name: name.trim() || 'Jane Doe', year };
   })
-  // Actions are server endpoints that the client can call
-  // Use these for user interactions, form submissions, etc.
-  .action('funFact', async (params: { year: number }) => {
-    const { year } = params;
-    const funFact = await getFunFact(year);
+  // Runs on demand from the browser via `serverClient.funFact({ year })`
+  .action('funFact', async ({ year }: { year: number }) => {
     return {
-      funFact,
+      funFact: funFacts[year] ?? `No fun fact available for year ${year}`,
     };
   });
 
-// This enables automatic type inference between server and client
+// Enables type-safe props and actions on the client
 declare module 'oc-server' {
   interface Register {
     server: typeof server;