use latest imba version

While at it upgrade all dependencies and move some styles into their
respective files.

package.json

@@ -21,18 +21,18 @@
   "homepage": "http://imba.io",
   "repository": {
     "type": "git",
-    "url": "git://github.com/somebee/hello-world-imba.git"
+    "url": "git://github.com/imba/hello-world-imba.git"
   },
   "license": "MIT",
   "dependencies": {
-    "css-loader": "^3.2.0",
+    "css-loader": "^3.6.0",
     "express": "^4.17.1",
-    "imba": "^1.5.2",
+    "imba": "^2.0.0-alpha.95",
-    "style-loader": "^1.0.0",
+    "style-loader": "^1.2.1",
-    "webpack": "^4.39.3",
+    "webpack": "^4.44.1",
-    "webpack-dev-server": "^3.8.0"
+    "webpack-dev-server": "^3.11.0"
   },
   "devDependencies": {
-    "webpack-cli": "^3.3.7"
+    "webpack-cli": "^3.3.12"
   }
 }

src/client.imba

@@ -11,16 +11,37 @@ var store = {
 	]
 }
 
+css header, footer
+	flex: 0 0 auto;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	padding: 10px 6px;
+	background: #e8e8e8;
+
+css .vbox d: flex fld: column jc: center ai: stretch
+
 tag App
+
+	css button -webkit-appearance: none
+		bg: #4a95eb bg@hover: #3a8eef fs: 13px d: flex
+		ai: center jc: center bd: 0px
+		p: 2px 10px rd: 2px c: white
+		m: 0px 4px fl: 0 0 auto h: 24px
+	css input d: block p: 0px 12px bg: transparent
+		bd: none fs: inherit w: 50px h: 24px
+		fl: 1 1 auto
+
 	def addItem
-		data:items.push(title: data:title)
+		data.items.push(title: $title.value)
-		data:title = ""
+		$title.value = ""
 
 	def render
 		<self.{vbox}>
 			<header>
-				<input[data:title] placeholder="New..." :keyup.enter.addItem>
+				<input$title placeholder="New..." @keyup.enter.addItem()>
-				<button :tap.addItem> 'Add item'
+				<button @click.addItem()> 'Add item'
-			<List list=data:items>
+			<List list=data.items>
 
-Imba.mount <App[store]>
+imba.mount <App data=store>

src/item-list.imba

@@ -1,11 +1,20 @@
 export tag List
+
+	css .completed td: line-through
+	css ul m: 0 p: 0
+		list-style: none inside none
+		fl: 1 1 auto
+	css li p: 8px 12px d: flex fld: row
+		jc: flex-start ai: center 
+		bdb: 1px solid whitesmoke
+
 	prop list
 
 	def completeItem item
-		console.log "clicked,{item:completed}"
+		console.log "clicked,{item.completed}"
-		item:completed = !item:completed
+		item.completed = !item.completed
 
 	def render
 		<self>
 			<ul> for item in list
-				<li .completed=(item:completed) :tap.completeItem(item)> item:title
+				<li .completed=(item.completed) @click.completeItem(item)> item.title

src/server.imba

@@ -1,5 +1,5 @@
-var express = require 'express'
+import express from 'express'
-var server = express()
+const server = express()
 
 server.use(express.static('./dist'))
 
@@ -14,7 +14,7 @@ server.get '/' do |req,res|
 	
 	return res.send html.toString
 
-var port = process:env.PORT or 8080
+var port = process.env.PORT or 8080
 
-var server = server.listen(port) do
+server.listen(port) do
 	console.log 'server is running on port ' + port

src/styles/index.css

@@ -21,78 +21,6 @@ body {
     background: white;
 }
 
-.vbox {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: stretch;
-}
-
-
 body,div,form,header,footer,section,input,button,nav,aside,article {
     box-sizing: border-box;
 }
-
-div,section,input,ul,main,article,.grow {
-    flex: 1 1 auto;
-}
-
-input {
-    display: block;
-    padding: 0px 12px;
-    background: transparent;
-    border: none;
-    font-size: inherit;
-    width: 50px;
-    height: 24px;
-}
-
-button {
-    -webkit-appearance: none;
-    background: #4a95eb;
-    font-size: 13px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 0px;
-    padding: 2px 10px;
-    border-radius: 2px;
-    color: white;
-    margin: 0px 4px;
-    flex: 0 0 auto;
-    height: 24px;
-}
-
-button:hover {
-    background: #3a8eef;
-}
-
-header,footer {
-    flex: 0 0 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 10px 6px;
-    background: #e8e8e8;
-}
-
-ul {
-    list-style: none inside none;
-    margin: 0;
-    padding: 0;
-    padding: 10px;
-}
-
-.completed {
-    text-decoration: line-through;
-}
-
-li {
-    padding: 8px 12px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    border-bottom: 1px solid whitesmoke;
-}