More ideas over lunchtime.

examples/ChatRoom/main.velp

@@ -1,15 +1,37 @@
-import { App } from "elp/app"
+import { App, Window } from "elp/app"
+import { Form, Label, Input, Button } from "elp/app/elements"
 import { Message, User } from "$types/chat"
 import { Message as MessageView } from "$components/message"
 
-export fn Chat: App {
+export object ChatAppState implements Contextual {
 	.name: *string
-	.messages: []Message
-	.members: []User
+	.messages: [Message]
+	.members: [User]
+	.loggedIn: bool = false
+}
 
-	if name not Empty {
-		ForEach(messages) { message in
-			MessageView(user = message.user, body = message.body)
+// The Contextual type here actually transforms Chat into a context provider which
+// along with the implements on ChatAppState gives all child components writeable
+// state if it is passed down and the property is not marked as const.
+// So when we pass message down by reference we can actually do .message.reactions.push(newReaction)
+// and it will cause reactivity all the way up the view chain where that property is read.
+export fn Chat(name: *string) implements App, Contextual<ChatAppState> -> Window {
+	Window {
+		if .name not Empty or not .loggedIn {
+			ForEach(.messages) { message in
+				// We borrow the message to pass down which extends it's lifetime 
+				// and allows for mutation and avoids copying.
+				MessageView( message = &message)
+			}
+		} else {
+			Form(preventDefault, onSubmit={fn { .loggedIn = true }}) {
+				Label("Enter your display name") {
+					Input(name="display-name", type="text", value={.name})
+					Button {
+						Text("Log in")
+					}
+				}
+			}
 		}
 	}
 }

examples/ChatRoom/types/chat.elp

@@ -1,12 +1,13 @@
 import { UUID } from "elp/types"
 
-export interface User {
-	displayName: string
+export object User {
+	.displayName: string
 }
 
-export interface Message {
-	body: string
-	user: User
+export object Message {
+	.body: const string
+	.user: const User
+	.reactions: []string
 }
 
 export enum Actions {

examples/HelloWorld/components/paragraph.velp

@@ -1,6 +1,7 @@
-import { Text, Component } from "ellipsis"
+import { Component } from "elp/app"
+import { Text } from "elp/app/components"
 
-export fn Paragraph(text: string): Component {
+export fn Paragraph(text: string) implements Component {
 	Text(text)
 }
 

examples/HelloWorld/main.velp

@@ -1,8 +1,10 @@
-import { App, Router } from "ellipsis"
+import { App, Window } from "ellipsis"
 import { Home } from "$screens/home"
 import Styles from "$app/styles"
 
-export fn HelloWorld: App(globalStyles = Styles()) {
-	Home()
+export fn HelloWorld implements App(globalStyles = Styles()) -> Window {
+	Window {
+		Home()
+	}
 }
 

examples/HelloWorld/screens/about.velp

@@ -1,13 +1,13 @@
-import { AsyncQueue, String } from "elp"
+import { AsyncQueue } from "elp/app"
 import { getAboutContent } from "$app/internal/api"
 import { Paragraph } from "$components/paragraph"
 
-export fn About(): Screen {
+export fn About() implements Screen {
     let aboutContent: String
     let error: Error
 
     AsyncQueue {
-        aboutContent, error = await getAboutContent()
+        aboutContent, error = getAboutContent()
     }
 
     Column {

examples/HelloWorld/screens/home.velp

@@ -1,27 +1,21 @@
-import { Column, Row, Text, Date, String } from "ellipsis"
-import { Stylesheet } from "ellipsis/styling"
+import { Column, Row, Text, Date } from "elp/app/elements"
+import { Stylesheet } from "elp/app/styling"
 import Paragraph from "$components/paragraph"
 
-export fn Home: Screen {
+export fn Home implements Screen {
     const name = "Dave"
 
     Column {
         Row(columns = 2) {
             Column {
-                Text {
-                    String("Current date:")
-                }
+                Text("Current date:")
             }
             Column {
-                Text {
-                    Date.Now(format="ll")
-                }
+                Text(Date.Now(format="ll"))
             }
         }
         Row {
-            Text {
-                String("hello {name}")
-            }
+            Text("hello {name}")
             Link(to = "about") {
                 Text("Read about Ellipsis")
             }

examples/kitchen-sink.velp

@@ -16,9 +16,9 @@ enum MyEnum {
 
 const NAME: string
 const NAME: string = "hello"
-variable: string = "world"
-binding = 1
-variadic, binding = 1, 2
+var variable: string = "world"
+var binding = 1
+var variadic, binding = Tuple(1, 2)
 
 fn MyFunction {}
 fn MyFunction() {}