Common code initial

build.gradle.kts

@@ -1,19 +1,19 @@
 plugins {
-  kotlin("multiplatform") version "1.9.23"
+  kotlin("multiplatform") version "1.7.20"
-  id("maven-publish")
+  `maven-publish`
-  id("signing")
+  signing
   id("org.jetbrains.dokka") version "1.5.31"
 }
 
 group = "nl.astraeus"
-version = "1.2.3-SNAPSHOT"
+version = "1.0.8-SNAPSHOT"
 
 repositories {
   mavenCentral()
 }
 
 kotlin {
-  js(IR) {
+  js(BOTH) {
     browser {
       testTask {
         useKarma {
@@ -22,37 +22,20 @@ kotlin {
       }
     }
   }
-  /*
-  @OptIn(ExperimentalWasmDsl::class)
-  wasmJs {
-    //moduleName = project.name
-    browser()
-
-    mavenPublication {
-      groupId = group as String
-      pom { name = "${project.name}-wasm-js" }
-    }
-  }
-
-  @OptIn(ExperimentalKotlinGradlePluginApi::class)
-  applyDefaultHierarchyTemplate {
-    common {
-      group("jsCommon") {
-        withJs()
-        // TODO: switch to `withWasmJs()` after upgrade to Kotlin 2.0
-        withWasm()
-      }
-    }
-  }
-  */
 
   sourceSets {
     val commonMain by getting {
       dependencies {
-        api("org.jetbrains.kotlinx:kotlinx-html:0.11.0")
+        implementation(kotlin("stdlib-common"))
+
+        api("org.jetbrains.kotlinx:kotlinx-html-js:0.7.3")
+      }
+    }
+    val jsMain by getting {
+      dependencies {
+        implementation(kotlin("stdlib-js"))
       }
     }
-    val jsMain by getting
     val jsTest by getting {
       dependencies {
         implementation(kotlin("test-js"))
@@ -88,25 +71,25 @@ publishing {
     maven {
       name = "releases"
       // change to point to your repo, e.g. http://my.org/repo
-      setUrl("https://reposilite.astraeus.nl/releases")
+      setUrl("https://nexus.astraeus.nl/nexus/content/repositories/releases")
       credentials {
-        val reposiliteUsername: String? by project
+        val nexusUsername: String? by project
-        val reposilitePassword: String? by project
+        val nexusPassword: String? by project
 
-        username = reposiliteUsername
+        username = nexusUsername
-        password = reposilitePassword
+        password = nexusPassword
       }
     }
     maven {
       name = "snapshots"
       // change to point to your repo, e.g. http://my.org/repo
-      setUrl("https://reposilite.astraeus.nl/snapshots")
+      setUrl("https://nexus.astraeus.nl/nexus/content/repositories/snapshots")
       credentials {
-        val reposiliteUsername: String? by project
+        val nexusUsername: String? by project
-        val reposilitePassword: String? by project
+        val nexusPassword: String? by project
 
-        username = reposiliteUsername
+        username = nexusUsername
-        password = reposilitePassword
+        password = nexusPassword
       }
     }
     maven {
@@ -153,23 +136,3 @@ publishing {
 signing {
   sign(publishing.publications)
 }
-
-tasks.named<Task>("signJsPublication") {
-  dependsOn(tasks.named<Task>("publishKotlinMultiplatformPublicationToMavenLocal"))
-}
-
-tasks.named<Task>("publishJsPublicationToReleasesRepository") {
-  dependsOn(tasks.named<Task>("signKotlinMultiplatformPublication"))
-}
-
-tasks.named<Task>("publishKotlinMultiplatformPublicationToMavenLocalRepository") {
-  dependsOn(tasks.named<Task>("signJsPublication"))
-}
-
-tasks.named<Task>("publishKotlinMultiplatformPublicationToReleasesRepository") {
-  dependsOn(tasks.named<Task>("signJsPublication"))
-}
-
-tasks.named<Task>("publishKotlinMultiplatformPublicationToSonatypeRepository") {
-  dependsOn(tasks.named<Task>("signJsPublication"))
-}

docs/getting-started.md

@@ -56,7 +56,7 @@ fun greet() = "world"
 
 Replace the code in the file with the following for a simple click app:
 
-```kotlin
+```koltin
 import kotlinx.browser.document
 import kotlinx.html.button
 import kotlinx.html.div
@@ -144,4 +144,4 @@ the data changes, that would look like this:
 
 In that case you can remove the requestUpdate call from the onClickFunction.
 
-You can find a working repository of this example here: [kotlin-komponent-start](https://github.com/rnentjes/kotlin-komponent-start)
+You can find a working repository of this example here: [example]()

docs/home.md

@@ -3,4 +3,3 @@
 * [Home](home.md)
 * [Getting started](getting-started.md)
 * [How it works](how-it-works.md)
-

docs/how-it-works.md

@@ -15,8 +15,8 @@ This way there will not be double updates of the same komponent.
 The render call will be invoked and every html builder function (div, span etc.) will call the 
 different HtmlBuilder functions like onTagStart, onTagAttributeChange etc.
 
-In these functions the HtmlBuilder will compare the dom against the call being made, and it will update the DOM
+In these functions the HtmlBuilder will compare the dom against the call being made and it will update the DOM
-as needed.
+if needed.
 
 
 

gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 #Wed Mar 04 13:29:12 CET 2020
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists

readme.md

@@ -9,5 +9,3 @@ See the komp-todo repository for a basic example here: [komp-todo](https://githu
 For a more complete example take a look at the simple-password-manager repository: [simple-password-manager](https://github.com/rnentjes/simple-password-manager)
 
 Available on maven central: "nl.astraeus:kotlin-komponent-js:1.0.0"
-
-Some getting started documentation can be found [here](docs/getting-started.md)

src/commonMain/kotlin/nl/astraeus/komp/HtmlBuilderCommon.kt

@@ -0,0 +1 @@
+package nl.astraeus.komp

src/jsMain/kotlin/nl/astraeus/komp/ElementExtentions.kt

@@ -1,9 +1,8 @@
 package nl.astraeus.komp
 
-import org.w3c.dom.events.Event
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLInputElement
-import org.w3c.dom.events.EventListener
+import org.w3c.dom.events.Event
 import org.w3c.dom.get
 
 private fun Int.asSpaces(): String {

src/jsMain/kotlin/nl/astraeus/komp/ElementIndex.kt

@@ -1,64 +0,0 @@
-package nl.astraeus.komp
-
-import org.w3c.dom.Node
-import org.w3c.dom.get
-
-data class ElementIndex(
-  val parent: Node,
-  var childIndex: Int,
-  var setAttr: MutableSet<String> = mutableSetOf()
-) {
-  override fun toString(): String {
-    return "${parent.nodeName}[$childIndex]"
-  }
-}
-
-fun ArrayList<ElementIndex>.currentParent(): Node {
-  this.lastOrNull()?.let {
-    return it.parent
-  }
-
-  throw IllegalStateException("currentParent should never be null!")
-}
-
-fun ArrayList<ElementIndex>.currentElement(): Node? {
-  this.lastOrNull()?.let {
-    return it.parent.childNodes[it.childIndex]
-  }
-
-  return null
-}
-
-fun ArrayList<ElementIndex>.currentPosition(): ElementIndex? {
-  return if (this.size < 2) {
-    null
-  } else {
-    this[this.size - 2]
-  }
-}
-
-fun ArrayList<ElementIndex>.nextElement() {
-  this.lastOrNull()?.let {
-    it.setAttr.clear()
-    it.childIndex++
-  }
-}
-
-fun ArrayList<ElementIndex>.pop() {
-  this.removeLast()
-}
-
-fun ArrayList<ElementIndex>.push(element: Node) {
-  this.add(ElementIndex(element, 0))
-}
-
-fun ArrayList<ElementIndex>.replace(new: Node) {
-  if (this.currentElement() != null) {
-    this.currentElement()?.parentElement?.replaceChild(
-      new,
-      this.currentElement()!!
-    )
-  } else {
-    this.last().parent.appendChild(new)
-  }
-}

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

@@ -13,6 +13,7 @@ import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.HTMLSpanElement
 import org.w3c.dom.Node
 import org.w3c.dom.asList
+import org.w3c.dom.events.Event
 import org.w3c.dom.get
 
 private var currentElement: Element? = null
@@ -26,6 +27,62 @@ interface HtmlConsumer : TagConsumer<Element> {
 fun FlowOrMetaDataOrPhrasingContent.currentElement(): Element =
   currentElement ?: error("No current element defined!")
 
+private data class ElementIndex(
+  val parent: Node,
+  var childIndex: Int,
+  var setAttr: MutableSet<String> = mutableSetOf()
+)
+
+private fun ArrayList<ElementIndex>.currentParent(): Node {
+  this.lastOrNull()?.let {
+    return it.parent
+  }
+
+  throw IllegalStateException("currentParent should never be null!")
+}
+
+private fun ArrayList<ElementIndex>.currentElement(): Node? {
+  this.lastOrNull()?.let {
+    return it.parent.childNodes[it.childIndex]
+  }
+
+  return null
+}
+
+private fun ArrayList<ElementIndex>.currentPosition(): ElementIndex? {
+  return if (this.size < 2) {
+    null
+  } else {
+    this[this.size - 2]
+  }
+}
+
+private fun ArrayList<ElementIndex>.nextElement() {
+  this.lastOrNull()?.let {
+    it.setAttr.clear()
+    it.childIndex++
+  }
+}
+
+private fun ArrayList<ElementIndex>.pop() {
+  this.removeLast()
+}
+
+private fun ArrayList<ElementIndex>.push(element: Node) {
+  this.add(ElementIndex(element, 0))
+}
+
+private fun ArrayList<ElementIndex>.replace(new: Node) {
+  if (this.currentElement() != null) {
+    this.currentElement()?.parentElement?.replaceChild(
+      new,
+      this.currentElement()!!
+    )
+  } else {
+    this.last().parent.appendChild(new)
+  }
+}
+
 private fun Node.asElement() = this as? HTMLElement
 
 class HtmlBuilder(
@@ -37,7 +94,6 @@ class HtmlBuilder(
   private var inDebug = false
   private var exceptionThrown = false
   private var currentNode: Node? = null
-  private var firstTag: Boolean = true
   var root: Element? = null
 
   init {
@@ -56,13 +112,6 @@ class HtmlBuilder(
         )
       }
     } else {
-      // current element should become parent
-/*
-      val ce = komponent.element
-      if (ce != null) {
-        append(ce as Element)
-      }
-*/
       komponent.create(
         currentPosition.last().parent as Element,
         currentPosition.last().childIndex
@@ -97,7 +146,7 @@ class HtmlBuilder(
 
   override fun onTagStart(tag: Tag) {
     logReplace {
-      "onTagStart, [${tag.tagName}, ${tag.namespace ?: ""}], currentPosition: $currentPosition"
+      "onTagStart, [${tag.tagName}, ${tag.namespace}], currentPosition: $currentPosition"
     }
 
     currentNode = currentPosition.currentElement()
@@ -110,7 +159,7 @@ class HtmlBuilder(
         document.createElement(tag.tagName)
       }
 
-      logReplace { "onTagStart, currentElement1.1: $currentNode" }
+      //logReplace"onTagStart, currentElement1.1: $currentNode")
       currentPosition.currentParent().appendChild(currentNode!!)
     } else if (
       !currentNode?.asElement()?.tagName.equals(tag.tagName, true) ||
@@ -138,18 +187,17 @@ class HtmlBuilder(
     currentElement = currentNode as? Element ?: currentElement
 
     if (currentNode is Element) {
-      if (firstTag) {
+      if (root == null) {
-        logReplace { "Setting root: $currentNode" }
+        //logReplace"Setting root: $currentNode")
         root = currentNode as Element
-        firstTag = false
       }
 
       currentElement?.clearKompEvents()
-
-      // if currentElement = checkbox make sure it's cleared
       (currentElement as? HTMLInputElement)?.checked = false
 
       currentPosition.lastOrNull()?.setAttr?.clear()
+
+      // if currentElement = checkbox make sure it's cleared
       for (entry in tag.attributesEntries) {
         currentElement!!.setKompAttribute(entry.key, entry.value)
         currentPosition.lastOrNull()?.setAttr?.add(entry.key)
@@ -159,14 +207,14 @@ class HtmlBuilder(
     currentPosition.push(currentNode!!)
   }
 
-  private fun checkTag(source: String, tag: Tag) {
+  private fun checkTag(tag: Tag) {
     check(currentElement != null) {
-      js("debugger;")
+      js("debugger")
-      "No current tag ($source)"
+      "No current tag"
     }
     check(currentElement?.tagName.equals(tag.tagName, ignoreCase = true)) {
-      js("debugger;")
+      js("debugger")
-      "Wrong current tag ($source), got: ${tag.tagName} expected ${currentElement?.tagName}"
+      "Wrong current tag"
     }
   }
 
@@ -178,7 +226,7 @@ class HtmlBuilder(
     logReplace { "onTagAttributeChange, ${tag.tagName} [$attribute, $value]" }
 
     if (Komponent.enableAssertions) {
-      checkTag("onTagAttributeChange", tag)
+      checkTag(tag)
     }
 
     currentElement?.setKompAttribute(attribute, value)
@@ -192,22 +240,18 @@ class HtmlBuilder(
   override fun onTagEvent(
     tag: Tag,
     event: String,
-    value: (kotlinx.html.org.w3c.dom.events.Event) -> Unit
+    value: (Event) -> Unit
   ) {
     logReplace { "onTagEvent, ${tag.tagName} [$event, $value]" }
 
     if (Komponent.enableAssertions) {
-      checkTag("onTagEvent", tag)
+      checkTag(tag)
     }
 
-    currentElement?.setKompEvent(event.lowercase(), value.asDynamic())
+    currentElement?.setKompEvent(event.toLowerCase(), value)
   }
 
   override fun onTagEnd(tag: Tag) {
-    logReplace {
-      "onTagEnd, [${tag.tagName}, ${tag.namespace}], currentPosition: $currentPosition"
-    }
-
     if (exceptionThrown) {
       return
     }
@@ -219,7 +263,7 @@ class HtmlBuilder(
     }
 
     if (Komponent.enableAssertions) {
-      checkTag("onTagEnd", tag)
+      checkTag(tag)
     }
 
     if (currentElement != null) {
@@ -351,7 +395,7 @@ class HtmlBuilder(
     currentPosition.nextElement()
   }
 
-  fun onTagError(tag: Tag, exception: Throwable) {
+  override fun onTagError(tag: Tag, exception: Throwable) {
     exceptionThrown = true
 
     if (exception !is KomponentException) {

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

@@ -111,25 +111,8 @@ abstract class Komponent {
    *
    * HTMLBuilder.render() is called 1st time the component is rendered, after that this
    * method will be called
-   *
-   * @deprecated
    */
-  @Deprecated(
+  open fun update() {
-    "Deprecated to avoid confusing with requestUpdate, use renderUpdate instead",
-    ReplaceWith("renderUpdate"),
-    level = DeprecationLevel.WARNING
-  )
-  protected fun update() {
-    refresh()
-  }
-
-  /**
-   * This function can be overwritten if you know how to update the Komponent yourself
-   *
-   * HTMLBuilder.render() is called 1st time the component is rendered, after that this
-   * method will be called
-   */
-  open fun renderUpdate() {
     refresh()
   }
 
@@ -245,7 +228,7 @@ abstract class Komponent {
 
               if (next.memoizeChanged()) {
                 next.onBeforeUpdate()
-                next.renderUpdate()
+                next.update()
                 next.updateMemoizeHash()
                 next.onAfterUpdate()
               } else if (logRenderEvent) {

src/jsMain/kotlin/nl/astraeus/komp/MutableCollectionStateDelegate.kt

@@ -31,7 +31,7 @@ class MutableCollectionStateDelegate<T>(
   }
 
   // todo: return iterator wrapper to update at changes?
-  //override fun iterator(): MutableIterator<T> = collection.iterator()
+  // override fun iterator(): MutableIterator<T> = collection.iterator()
 
   override fun remove(element: T): Boolean {
     komponent.requestUpdate()

src/jsMain/kotlin/nl/astraeus/komp/State.kt

@@ -14,9 +14,9 @@ interface Delegate<T> {
     property: KProperty<*>,
     value: T
   )
-
 }
 
+
 open class StateDelegate<T>(
   val komponent: Komponent,
   initialValue: T
@@ -51,6 +51,6 @@ open class StateDelegate<T>(
 inline fun <reified T> Komponent.state(
   initialValue: T
 ): Delegate<T> = StateDelegate(
-  this,
+      this,
-  initialValue
+      initialValue
-)
+    )

src/jsTest/kotlin/nl/astraeus/komp/TestUpdate.kt

@@ -1,7 +1,6 @@
 package nl.astraeus.komp
 
 import kotlinx.browser.document
-import kotlinx.html.DIV
 import kotlinx.html.InputType
 import kotlinx.html.classes
 import kotlinx.html.div
@@ -126,7 +125,7 @@ class IncludeKomponent(
 }
 
 class ReplaceKomponent : Komponent() {
-  val includeKomponent = IncludeKomponent("Other text")
+  val includeKomponent = IncludeKomponent()
   var includeSpan = true
 
   override fun generateMemoizeHash(): Int = includeSpan.hashCode() * 7 + includeKomponent.generateMemoizeHash()
@@ -137,8 +136,20 @@ class ReplaceKomponent : Komponent() {
 
       div {
         if (includeSpan) {
-          for (index in 0 ..< 3) {
+          span {
-            extracted(index)
+            i("fas fa-eye") {
+              +"span1"
+            }
+          }
+          span {
+            i("fas fa-eye") {
+              +"span2"
+            }
+          }
+          span {
+            i("fas fa-eye") {
+              +"span3"
+            }
           }
         }
 
@@ -146,14 +157,6 @@ class ReplaceKomponent : Komponent() {
       }
     }
   }
-
-  private fun HtmlBuilder.extracted(index: Int) {
-    span {
-      i("fas fa-eye") {
-        + ("span" + (index+1))
-      }
-    }
-  }
 }
 
 class TestUpdate {