Added style option

build.gradle

@@ -1,5 +1,5 @@
 group 'nl.astraeus'
-version '0.1.10-SNAPSHOT'
+version '0.1.10'
 
 apply plugin: 'kotlin2js'
 apply plugin: 'kotlin-dce-js'

komp.iml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<module external.linked.project.id="komp" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" external.system.module.group="nl.astraeus" external.system.module.version="0.1.9" type="JAVA_MODULE" version="4">
+<module external.linked.project.id="komp" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" external.system.module.group="nl.astraeus" external.system.module.version="0.1.10-SNAPSHOT" type="JAVA_MODULE" version="4">
   <component name="FacetManager">
     <facet type="kotlin-language" name="Kotlin">
       <configuration version="3" platform="JavaScript " allPlatforms="JS []" useProjectSettings="false" pureKotlinSourceFolders="$MODULE_DIR$/src/test/kotlin;/home/rnentjes/Development/komp/komp/src/main/kotlin">
@@ -34,8 +34,8 @@
     <exclude-output />
     <content url="file://$MODULE_DIR$">
       <sourceFolder url="file://$MODULE_DIR$/src/test/kotlin" type="kotlin-test" />
-      <sourceFolder url="file://$MODULE_DIR$/src/main/kotlin" type="kotlin-source" />
-      <sourceFolder url="file://$MODULE_DIR$/src/main/resources" type="kotlin-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/kotlin" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/src/main/resources" type="java-resource" />
       <excludeFolder url="file://$MODULE_DIR$/.gradle" />
       <excludeFolder url="file://$MODULE_DIR$/build" />
       <excludeFolder url="file://$MODULE_DIR$/out" />

src/main/kotlin/nl/astraeus/komp/HtmlBuilder.kt

@@ -5,7 +5,6 @@ import kotlinx.html.Entities
 import kotlinx.html.Tag
 import kotlinx.html.TagConsumer
 import kotlinx.html.Unsafe
-import kotlinx.html.consumers.onFinalize
 import org.w3c.dom.Document
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.Node
@@ -21,7 +20,10 @@ interface HtmlConsumer : TagConsumer<HTMLElement> {
   fun append(node: Node)
 }
 
-class HtmlBuilder(val document : Document) : HtmlConsumer {
+class HtmlBuilder(
+    val komponent: Komponent,
+    val document : Document
+) : HtmlConsumer {
   private val path = arrayListOf<HTMLElement>()
   private var lastLeaved : HTMLElement? = null
 
@@ -31,10 +33,6 @@ class HtmlBuilder(val document : Document) : HtmlConsumer {
       else -> document.createElement(tag.tagName) as HTMLElement
     }
 
-    tag.attributesEntries.forEach {
-      element.setAttribute(it.key, it.value)
-    }
-
     if (path.isNotEmpty()) {
       path.last().appendChild(element)
     }
@@ -69,6 +67,33 @@ class HtmlBuilder(val document : Document) : HtmlConsumer {
       throw IllegalStateException("We haven't entered tag ${tag.tagName} but trying to leave")
     }
 
+    val element = path.last()
+
+    tag.attributesEntries.forEach {
+      if (it.key == "class") {
+        val classes = it.value.split(" ")
+        val classNames = StringBuilder()
+
+        for (cls in classes) {
+          val cssStyle = komponent.declaredStyles[cls]
+
+          if (cssStyle != null) {
+            for (index in 0 until cssStyle.length) {
+              val propertyName = cssStyle.item(index)
+              element.style.setProperty(propertyName, cssStyle.getPropertyValue(propertyName))
+            }
+          } else {
+            classNames.append(cls)
+            classNames.append(" ")
+          }
+        }
+
+        element.className = classNames.toString()
+      } else {
+        element.setAttribute(it.key, it.value)
+      }
+    }
+
     lastLeaved = path.removeAt(path.lastIndex)
   }
 
@@ -120,50 +145,3 @@ class HtmlBuilder(val document : Document) : HtmlConsumer {
   private fun HTMLElement.asR(): HTMLElement = this.asDynamic()
 
 }
-
-fun Document.createTree() : TagConsumer<HTMLElement> = HtmlBuilder(this)
-val Document.create : TagConsumer<HTMLElement>
-  get() = HtmlBuilder(this)
-
-fun Node.append(block: TagConsumer<HTMLElement>.() -> Unit): List<HTMLElement> =
-    ArrayList<HTMLElement>().let { result ->
-      ownerDocumentExt.createTree().onFinalize { it, partial ->
-        if (!partial) {
-          result.add(it); appendChild(it)
-        }
-      }.block()
-
-      result
-    }
-
-fun Node.prepend(block: TagConsumer<HTMLElement>.() -> Unit): List<HTMLElement> =
-    ArrayList<HTMLElement>().let { result ->
-      ownerDocumentExt.createTree().onFinalize { it, partial ->
-        if (!partial) {
-          result.add(it)
-          insertBefore(it, firstChild)
-        }
-      }.block()
-
-      result
-    }
-
-val HTMLElement.append: TagConsumer<HTMLElement>
-  get() = ownerDocumentExt.createTree().onFinalize { element, partial ->
-    if (!partial) {
-      this@append.appendChild(element)
-    }
-  }
-
-val HTMLElement.prepend: TagConsumer<HTMLElement>
-  get() = ownerDocumentExt.createTree().onFinalize { element, partial ->
-    if (!partial) {
-      this@prepend.insertBefore(element, this@prepend.firstChild)
-    }
-  }
-
-private val Node.ownerDocumentExt: Document
-  get() = when {
-    this is Document -> this
-    else             -> ownerDocument ?: throw IllegalStateException("Node has no ownerDocument")
-  }

src/main/kotlin/nl/astraeus/komp/Komponent.kt

@@ -1,10 +1,14 @@
 package nl.astraeus.komp
 
 import kotlinx.html.Tag
+import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.Node
+import org.w3c.dom.css.CSSStyleDeclaration
 import kotlin.browser.document
 
+public typealias CssStyle = CSSStyleDeclaration.() -> Unit
+
 fun Tag.include(component: Komponent) {
   component.update()
 
@@ -18,9 +22,10 @@ fun Tag.include(component: Komponent) {
 
 abstract class Komponent {
   var element: Node? = null
+  val declaredStyles: MutableMap<String, CSSStyleDeclaration> = HashMap()
 
   open fun create(): HTMLElement {
-    val consumer = HtmlBuilder(document)
+    val consumer = HtmlBuilder(this, document)
     val result = render(consumer)
 
     element = result
@@ -30,6 +35,15 @@ abstract class Komponent {
 
   abstract fun render(consumer: HtmlBuilder): HTMLElement
 
+  open fun style(className: String, vararg imports: CssStyle, block: CSSStyleDeclaration.() -> Unit = {}) {
+    val style = (document.createElement("div") as HTMLDivElement).style
+    for (imp in imports) {
+      imp(style)
+    }
+    block(style)
+    declaredStyles[className] = style
+  }
+
   open fun update() = refresh()
 
   open fun refresh() {