Add faster update option, v 0.1.9
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
group 'nl.astraeus'
|
||||
version '0.1.9-SNAPSHOT'
|
||||
version '0.1.9'
|
||||
|
||||
apply plugin: 'kotlin2js'
|
||||
apply plugin: 'kotlin-dce-js'
|
||||
|
||||
6
komp.iml
6
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.8" 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.9-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" />
|
||||
|
||||
121
komp.ipr
121
komp.ipr
@@ -72,6 +72,127 @@
|
||||
<component name="MacroExpansionManager">
|
||||
<option name="directoryName" value="qFcQOWli" />
|
||||
</component>
|
||||
<component name="Palette2">
|
||||
<group name="Swing">
|
||||
<item class="com.intellij.uiDesigner.HSpacer" tooltip-text="Horizontal Spacer" icon="/com/intellij/uiDesigner/icons/hspacer.png" removable="false" auto-create-binding="false" can-attach-label="false">
|
||||
<default-constraints vsize-policy="1" hsize-policy="6" anchor="0" fill="1" />
|
||||
</item>
|
||||
<item class="com.intellij.uiDesigner.VSpacer" tooltip-text="Vertical Spacer" icon="/com/intellij/uiDesigner/icons/vspacer.png" removable="false" auto-create-binding="false" can-attach-label="false">
|
||||
<default-constraints vsize-policy="6" hsize-policy="1" anchor="0" fill="2" />
|
||||
</item>
|
||||
<item class="javax.swing.JPanel" icon="/com/intellij/uiDesigner/icons/panel.png" removable="false" auto-create-binding="false" can-attach-label="false">
|
||||
<default-constraints vsize-policy="3" hsize-policy="3" anchor="0" fill="3" />
|
||||
</item>
|
||||
<item class="javax.swing.JScrollPane" icon="/com/intellij/uiDesigner/icons/scrollPane.png" removable="false" auto-create-binding="false" can-attach-label="true">
|
||||
<default-constraints vsize-policy="7" hsize-policy="7" anchor="0" fill="3" />
|
||||
</item>
|
||||
<item class="javax.swing.JButton" icon="/com/intellij/uiDesigner/icons/button.png" removable="false" auto-create-binding="true" can-attach-label="false">
|
||||
<default-constraints vsize-policy="0" hsize-policy="3" anchor="0" fill="1" />
|
||||
<initial-values>
|
||||
<property name="text" value="Button" />
|
||||
</initial-values>
|
||||
</item>
|
||||
<item class="javax.swing.JRadioButton" icon="/com/intellij/uiDesigner/icons/radioButton.png" removable="false" auto-create-binding="true" can-attach-label="false">
|
||||
<default-constraints vsize-policy="0" hsize-policy="3" anchor="8" fill="0" />
|
||||
<initial-values>
|
||||
<property name="text" value="RadioButton" />
|
||||
</initial-values>
|
||||
</item>
|
||||
<item class="javax.swing.JCheckBox" icon="/com/intellij/uiDesigner/icons/checkBox.png" removable="false" auto-create-binding="true" can-attach-label="false">
|
||||
<default-constraints vsize-policy="0" hsize-policy="3" anchor="8" fill="0" />
|
||||
<initial-values>
|
||||
<property name="text" value="CheckBox" />
|
||||
</initial-values>
|
||||
</item>
|
||||
<item class="javax.swing.JLabel" icon="/com/intellij/uiDesigner/icons/label.png" removable="false" auto-create-binding="false" can-attach-label="false">
|
||||
<default-constraints vsize-policy="0" hsize-policy="0" anchor="8" fill="0" />
|
||||
<initial-values>
|
||||
<property name="text" value="Label" />
|
||||
</initial-values>
|
||||
</item>
|
||||
<item class="javax.swing.JTextField" icon="/com/intellij/uiDesigner/icons/textField.png" removable="false" auto-create-binding="true" can-attach-label="true">
|
||||
<default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1">
|
||||
<preferred-size width="150" height="-1" />
|
||||
</default-constraints>
|
||||
</item>
|
||||
<item class="javax.swing.JPasswordField" icon="/com/intellij/uiDesigner/icons/passwordField.png" removable="false" auto-create-binding="true" can-attach-label="true">
|
||||
<default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1">
|
||||
<preferred-size width="150" height="-1" />
|
||||
</default-constraints>
|
||||
</item>
|
||||
<item class="javax.swing.JFormattedTextField" icon="/com/intellij/uiDesigner/icons/formattedTextField.png" removable="false" auto-create-binding="true" can-attach-label="true">
|
||||
<default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1">
|
||||
<preferred-size width="150" height="-1" />
|
||||
</default-constraints>
|
||||
</item>
|
||||
<item class="javax.swing.JTextArea" icon="/com/intellij/uiDesigner/icons/textArea.png" removable="false" auto-create-binding="true" can-attach-label="true">
|
||||
<default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
|
||||
<preferred-size width="150" height="50" />
|
||||
</default-constraints>
|
||||
</item>
|
||||
<item class="javax.swing.JTextPane" icon="/com/intellij/uiDesigner/icons/textPane.png" removable="false" auto-create-binding="true" can-attach-label="true">
|
||||
<default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
|
||||
<preferred-size width="150" height="50" />
|
||||
</default-constraints>
|
||||
</item>
|
||||
<item class="javax.swing.JEditorPane" icon="/com/intellij/uiDesigner/icons/editorPane.png" removable="false" auto-create-binding="true" can-attach-label="true">
|
||||
<default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
|
||||
<preferred-size width="150" height="50" />
|
||||
</default-constraints>
|
||||
</item>
|
||||
<item class="javax.swing.JComboBox" icon="/com/intellij/uiDesigner/icons/comboBox.png" removable="false" auto-create-binding="true" can-attach-label="true">
|
||||
<default-constraints vsize-policy="0" hsize-policy="2" anchor="8" fill="1" />
|
||||
</item>
|
||||
<item class="javax.swing.JTable" icon="/com/intellij/uiDesigner/icons/table.png" removable="false" auto-create-binding="true" can-attach-label="false">
|
||||
<default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
|
||||
<preferred-size width="150" height="50" />
|
||||
</default-constraints>
|
||||
</item>
|
||||
<item class="javax.swing.JList" icon="/com/intellij/uiDesigner/icons/list.png" removable="false" auto-create-binding="true" can-attach-label="false">
|
||||
<default-constraints vsize-policy="6" hsize-policy="2" anchor="0" fill="3">
|
||||
<preferred-size width="150" height="50" />
|
||||
</default-constraints>
|
||||
</item>
|
||||
<item class="javax.swing.JTree" icon="/com/intellij/uiDesigner/icons/tree.png" removable="false" auto-create-binding="true" can-attach-label="false">
|
||||
<default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3">
|
||||
<preferred-size width="150" height="50" />
|
||||
</default-constraints>
|
||||
</item>
|
||||
<item class="javax.swing.JTabbedPane" icon="/com/intellij/uiDesigner/icons/tabbedPane.png" removable="false" auto-create-binding="true" can-attach-label="false">
|
||||
<default-constraints vsize-policy="3" hsize-policy="3" anchor="0" fill="3">
|
||||
<preferred-size width="200" height="200" />
|
||||
</default-constraints>
|
||||
</item>
|
||||
<item class="javax.swing.JSplitPane" icon="/com/intellij/uiDesigner/icons/splitPane.png" removable="false" auto-create-binding="false" can-attach-label="false">
|
||||
<default-constraints vsize-policy="3" hsize-policy="3" anchor="0" fill="3">
|
||||
<preferred-size width="200" height="200" />
|
||||
</default-constraints>
|
||||
</item>
|
||||
<item class="javax.swing.JSpinner" icon="/com/intellij/uiDesigner/icons/spinner.png" removable="false" auto-create-binding="true" can-attach-label="true">
|
||||
<default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1" />
|
||||
</item>
|
||||
<item class="javax.swing.JSlider" icon="/com/intellij/uiDesigner/icons/slider.png" removable="false" auto-create-binding="true" can-attach-label="false">
|
||||
<default-constraints vsize-policy="0" hsize-policy="6" anchor="8" fill="1" />
|
||||
</item>
|
||||
<item class="javax.swing.JSeparator" icon="/com/intellij/uiDesigner/icons/separator.png" removable="false" auto-create-binding="false" can-attach-label="false">
|
||||
<default-constraints vsize-policy="6" hsize-policy="6" anchor="0" fill="3" />
|
||||
</item>
|
||||
<item class="javax.swing.JProgressBar" icon="/com/intellij/uiDesigner/icons/progressbar.png" removable="false" auto-create-binding="true" can-attach-label="false">
|
||||
<default-constraints vsize-policy="0" hsize-policy="6" anchor="0" fill="1" />
|
||||
</item>
|
||||
<item class="javax.swing.JToolBar" icon="/com/intellij/uiDesigner/icons/toolbar.png" removable="false" auto-create-binding="false" can-attach-label="false">
|
||||
<default-constraints vsize-policy="0" hsize-policy="6" anchor="0" fill="1">
|
||||
<preferred-size width="-1" height="20" />
|
||||
</default-constraints>
|
||||
</item>
|
||||
<item class="javax.swing.JToolBar$Separator" icon="/com/intellij/uiDesigner/icons/toolbarSeparator.png" removable="false" auto-create-binding="false" can-attach-label="false">
|
||||
<default-constraints vsize-policy="0" hsize-policy="0" anchor="0" fill="1" />
|
||||
</item>
|
||||
<item class="javax.swing.JScrollBar" icon="/com/intellij/uiDesigner/icons/scrollbar.png" removable="false" auto-create-binding="true" can-attach-label="false">
|
||||
<default-constraints vsize-policy="6" hsize-policy="0" anchor="0" fill="2" />
|
||||
</item>
|
||||
</group>
|
||||
</component>
|
||||
<component name="PhpWorkspaceProjectConfiguration" backward_compatibility_performed="true" />
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
|
||||
169
src/main/kotlin/nl/astraeus/komp/HtmlBuilder.kt
Normal file
169
src/main/kotlin/nl/astraeus/komp/HtmlBuilder.kt
Normal file
@@ -0,0 +1,169 @@
|
||||
package nl.astraeus.komp
|
||||
|
||||
import kotlinx.html.DefaultUnsafe
|
||||
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
|
||||
import org.w3c.dom.asList
|
||||
import org.w3c.dom.events.Event
|
||||
|
||||
@Suppress("NOTHING_TO_INLINE")
|
||||
private inline fun HTMLElement.setEvent(name: String, noinline callback : (Event) -> Unit) : Unit {
|
||||
asDynamic()[name] = callback
|
||||
}
|
||||
|
||||
interface HtmlConsumer : TagConsumer<HTMLElement> {
|
||||
fun append(node: Node)
|
||||
}
|
||||
|
||||
class HtmlBuilder(val document : Document) : HtmlConsumer {
|
||||
private val path = arrayListOf<HTMLElement>()
|
||||
private var lastLeaved : HTMLElement? = null
|
||||
|
||||
override fun onTagStart(tag: Tag) {
|
||||
val element: HTMLElement = when {
|
||||
tag.namespace != null -> document.createElementNS(tag.namespace!!, tag.tagName).asDynamic()
|
||||
else -> document.createElement(tag.tagName) as HTMLElement
|
||||
}
|
||||
|
||||
tag.attributesEntries.forEach {
|
||||
element.setAttribute(it.key, it.value)
|
||||
}
|
||||
|
||||
if (path.isNotEmpty()) {
|
||||
path.last().appendChild(element)
|
||||
}
|
||||
|
||||
path.add(element)
|
||||
}
|
||||
|
||||
override fun onTagAttributeChange(tag: Tag, attribute: String, value: String?) {
|
||||
when {
|
||||
path.isEmpty() -> throw IllegalStateException("No current tag")
|
||||
path.last().tagName.toLowerCase() != tag.tagName.toLowerCase() -> throw IllegalStateException("Wrong current tag")
|
||||
else -> path.last().let { node ->
|
||||
if (value == null) {
|
||||
node.removeAttribute(attribute)
|
||||
} else {
|
||||
node.setAttribute(attribute, value)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
override fun onTagEvent(tag: Tag, event: String, value: (Event) -> Unit) {
|
||||
when {
|
||||
path.isEmpty() -> throw IllegalStateException("No current tag")
|
||||
path.last().tagName.toLowerCase() != tag.tagName.toLowerCase() -> throw IllegalStateException("Wrong current tag")
|
||||
else -> path.last().setEvent(event, value)
|
||||
}
|
||||
}
|
||||
|
||||
override fun onTagEnd(tag: Tag) {
|
||||
if (path.isEmpty() || path.last().tagName.toLowerCase() != tag.tagName.toLowerCase()) {
|
||||
throw IllegalStateException("We haven't entered tag ${tag.tagName} but trying to leave")
|
||||
}
|
||||
|
||||
lastLeaved = path.removeAt(path.lastIndex)
|
||||
}
|
||||
|
||||
override fun onTagContent(content: CharSequence) {
|
||||
if (path.isEmpty()) {
|
||||
throw IllegalStateException("No current DOM node")
|
||||
}
|
||||
|
||||
path.last().appendChild(document.createTextNode(content.toString()))
|
||||
}
|
||||
|
||||
override fun onTagContentEntity(entity: Entities) {
|
||||
if (path.isEmpty()) {
|
||||
throw IllegalStateException("No current DOM node")
|
||||
}
|
||||
|
||||
// stupid hack as browsers doesn't support createEntityReference
|
||||
val s = document.createElement("span") as HTMLElement
|
||||
s.innerHTML = entity.text
|
||||
path.last().appendChild(s.childNodes.asList().filter { it.nodeType == Node.TEXT_NODE }.first())
|
||||
|
||||
// other solution would be
|
||||
// pathLast().innerHTML += entity.text
|
||||
}
|
||||
|
||||
override fun append(node: Node) {
|
||||
path.last().appendChild(node)
|
||||
}
|
||||
|
||||
override fun onTagContentUnsafe(block: Unsafe.() -> Unit) {
|
||||
with(DefaultUnsafe()) {
|
||||
block()
|
||||
|
||||
path.last().innerHTML += toString()
|
||||
}
|
||||
}
|
||||
|
||||
override fun onTagComment(content: CharSequence) {
|
||||
if (path.isEmpty()) {
|
||||
throw IllegalStateException("No current DOM node")
|
||||
}
|
||||
|
||||
path.last().appendChild(document.createComment(content.toString()))
|
||||
}
|
||||
|
||||
override fun finalize(): HTMLElement = lastLeaved?.asR() ?: throw IllegalStateException("We can't finalize as there was no tags")
|
||||
|
||||
@Suppress("UNCHECKED_CAST")
|
||||
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")
|
||||
}
|
||||
@@ -1,52 +1,52 @@
|
||||
package nl.astraeus.komp
|
||||
|
||||
import kotlinx.html.HtmlBlockTag
|
||||
import kotlinx.html.TagConsumer
|
||||
import kotlinx.html.dom.create
|
||||
import kotlinx.html.Tag
|
||||
import org.w3c.dom.HTMLElement
|
||||
import org.w3c.dom.Node
|
||||
import kotlin.browser.document
|
||||
|
||||
fun HtmlBlockTag.include(component: Komponent) {
|
||||
component.element = component.render(this.consumer as TagConsumer<HTMLElement>)
|
||||
fun Tag.include(component: Komponent) {
|
||||
component.update()
|
||||
|
||||
val consumer = this.consumer
|
||||
val element = component.element
|
||||
|
||||
if (consumer is HtmlBuilder && element != null) {
|
||||
consumer.append(element)
|
||||
}
|
||||
}
|
||||
|
||||
abstract class Komponent {
|
||||
var element: Node? = null
|
||||
|
||||
open fun create(): HTMLElement {
|
||||
val result = render(document.create)
|
||||
val consumer = HtmlBuilder(document)
|
||||
val result = render(consumer)
|
||||
|
||||
element = result
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
abstract fun render(consumer: TagConsumer<HTMLElement>): HTMLElement
|
||||
abstract fun render(consumer: HtmlBuilder): HTMLElement
|
||||
|
||||
open fun update() = refresh()
|
||||
|
||||
open fun refresh() {
|
||||
if (element == null) {
|
||||
console.log("Unable to refresh, element == null", this)
|
||||
}
|
||||
element?.let { element ->
|
||||
val oldElement = element
|
||||
if (logRenderEvent) {
|
||||
console.log("Rendering", this)
|
||||
}
|
||||
|
||||
val oldElement = element
|
||||
val newElement = create()
|
||||
|
||||
if (oldElement != null) {
|
||||
if (logReplaceEvent) {
|
||||
console.log("Replacing", oldElement, newElement)
|
||||
}
|
||||
element.parentNode?.replaceChild(newElement, oldElement)
|
||||
oldElement.parentNode?.replaceChild(newElement, oldElement)
|
||||
}
|
||||
}
|
||||
|
||||
open fun update() {
|
||||
refresh()
|
||||
}
|
||||
|
||||
@JsName("remove")
|
||||
fun remove() {
|
||||
element?.let {
|
||||
@@ -61,7 +61,6 @@ abstract class Komponent {
|
||||
}
|
||||
|
||||
companion object {
|
||||
|
||||
var logRenderEvent = false
|
||||
var logReplaceEvent = false
|
||||
|
||||
|
||||
Reference in New Issue
Block a user