Using fontawesome JS SVG core API instead of simple API.

core/src/commonMain/kotlin/world/phantasmal/core/unsafe/UnsafeMap.kt

@@ -12,3 +12,14 @@ expect class UnsafeMap<K, V>() {
     fun set(key: K, value: V)
     fun delete(key: K): Boolean
 }
+
+fun <K, V : Any> UnsafeMap<K, V>.getOrPut(key: K, default: () -> V): V {
+    var value = get(key)
+
+    if (value == null) {
+        value = default()
+        set(key, value)
+    }
+
+    return value
+}

webui/build.gradle.kts

@@ -5,7 +5,10 @@ plugins {
 dependencies {
     api(project(":core"))
     api(project(":observable"))
-    implementation(npm("@fortawesome/fontawesome-free", "^5.13.1"))
+    implementation(npm("@fortawesome/fontawesome-svg-core", "^1.2.36"))
+    implementation(npm("@fortawesome/free-regular-svg-icons", "^5.15.4"))
+    implementation(npm("@fortawesome/free-solid-svg-icons", "^5.15.4"))
+    implementation(npm("@fortawesome/free-brands-svg-icons", "^5.15.4"))
 
     testImplementation(project(":test-utils"))
 }

webui/src/main/kotlin/world/phantasmal/webui/dom/Dom.kt

@@ -10,10 +10,18 @@ import org.w3c.dom.pointerevents.PointerEvent
 import world.phantasmal.core.disposable.Disposable
 import world.phantasmal.core.disposable.Disposer
 import world.phantasmal.core.disposable.disposable
+import world.phantasmal.core.unsafe.UnsafeMap
+import world.phantasmal.core.unsafe.getOrPut
 import world.phantasmal.observable.cell.Cell
 import world.phantasmal.observable.cell.list.ListCell
 import world.phantasmal.observable.cell.list.ListChange
 import world.phantasmal.observable.cell.list.ListChangeEvent
+import world.phantasmal.webui.externals.fontawesome.IconDefinition
+import world.phantasmal.webui.externals.fontawesome.freeBrandsSvgIcons.faGithub
+import world.phantasmal.webui.externals.fontawesome.freeRegularSvgIcons.faCaretSquareRight
+import world.phantasmal.webui.externals.fontawesome.freeRegularSvgIcons.faEye
+import world.phantasmal.webui.externals.fontawesome.freeSolidSvgIcons.*
+import world.phantasmal.webui.externals.fontawesome.icon as faIcon
 
 fun <E : Event> EventTarget.disposableListener(
     type: String,
@@ -120,32 +128,36 @@ enum class Icon {
     Undo,
 }
 
+/** Fontawesome icons. */
+private val faElementCache = UnsafeMap<IconDefinition, Element>()
+
 fun Node.icon(icon: Icon): HTMLElement {
-    val iconStr = when (icon) {
+    val iconDef = when (icon) {
-        Icon.ArrowDown -> "fas fa-arrow-down"
+        Icon.ArrowDown -> faArrowDown
-        Icon.ArrowRight -> "fas fa-arrow-right"
+        Icon.ArrowRight -> faArrowRight
-        Icon.Eye -> "far fa-eye"
+        Icon.Eye -> faEye
-        Icon.File -> "fas fa-file"
+        Icon.File -> faFile
-        Icon.GitHub -> "fab fa-github"
+        Icon.GitHub -> faGithub
-        Icon.LevelDown -> "fas fa-level-down-alt"
+        Icon.LevelDown -> faLevelDownAlt
-        Icon.LevelUp -> "fas fa-level-up-alt"
+        Icon.LevelUp -> faLevelUpAlt
-        Icon.LongArrowRight -> "fas fa-long-arrow-alt-right"
+        Icon.LongArrowRight -> faLongArrowAltRight
-        Icon.NewFile -> "fas fa-file-medical"
+        Icon.NewFile -> faFileMedical
-        Icon.Play -> "fas fa-play"
+        Icon.Play -> faPlay
-        Icon.Plus -> "fas fa-plus"
+        Icon.Plus -> faPlus
-        Icon.Redo -> "fas fa-redo"
+        Icon.Redo -> faRedo
-        Icon.Remove -> "fas fa-trash-alt"
+        Icon.Remove -> faTrashAlt
-        Icon.Save -> "fas fa-save"
+        Icon.Save -> faSave
-        Icon.Stop -> "fas fa-stop"
+        Icon.Stop -> faStop
-        Icon.SquareArrowRight -> "far fa-caret-square-right"
+        Icon.SquareArrowRight -> faCaretSquareRight
-        Icon.TriangleDown -> "fas fa-caret-down"
+        Icon.TriangleDown -> faCaretDown
-        Icon.TriangleUp -> "fas fa-caret-up"
+        Icon.TriangleUp -> faCaretUp
-        Icon.Undo -> "fas fa-undo"
+        Icon.Undo -> faUndo
     }
 
-    // Wrap the span in another span, because Font Awesome will replace the inner element. This way
+    return span {
-    // the returned element will stay valid.
+        val iconEl = faElementCache.getOrPut(iconDef) { faIcon(iconDef).node[0]!! }
-    return span { span { className = iconStr } }
+        append(iconEl.cloneNode(deep = true))
+    }
 }
 
 fun <T> bindChildrenTo(

webui/src/main/kotlin/world/phantasmal/webui/externals/fontawesome/fontawesomeSvgCore.kt

@@ -0,0 +1,22 @@
+@file:JsModule("@fortawesome/fontawesome-svg-core")
+@file:JsNonModule
+
+package world.phantasmal.webui.externals.fontawesome
+
+import org.w3c.dom.HTMLCollection
+
+external class IconDefinition
+
+external class Icon {
+    val html: Array<String>
+    val node: HTMLCollection
+}
+
+external fun icon(icon: IconDefinition): Icon
+
+external class Config {
+    /** async or sync */
+    var mutateApproach: String
+}
+
+external val config: Config

webui/src/main/kotlin/world/phantasmal/webui/externals/fontawesome/freeBrandsSvgIcons/fontawesomeFreeSolidSvgIcons.kt

@@ -0,0 +1,8 @@
+@file:JsModule("@fortawesome/free-brands-svg-icons")
+@file:JsNonModule
+
+package world.phantasmal.webui.externals.fontawesome.freeBrandsSvgIcons
+
+import world.phantasmal.webui.externals.fontawesome.IconDefinition
+
+external val faGithub: IconDefinition

webui/src/main/kotlin/world/phantasmal/webui/externals/fontawesome/freeRegularSvgIcons/fontawesomeFreeSolidSvgIcons.kt

@@ -0,0 +1,9 @@
+@file:JsModule("@fortawesome/free-regular-svg-icons")
+@file:JsNonModule
+
+package world.phantasmal.webui.externals.fontawesome.freeRegularSvgIcons
+
+import world.phantasmal.webui.externals.fontawesome.IconDefinition
+
+external val faCaretSquareRight: IconDefinition
+external val faEye: IconDefinition

webui/src/main/kotlin/world/phantasmal/webui/externals/fontawesome/freeSolidSvgIcons/fontawesomeFreeSolidSvgIcons.kt

@@ -0,0 +1,23 @@
+@file:JsModule("@fortawesome/free-solid-svg-icons")
+@file:JsNonModule
+
+package world.phantasmal.webui.externals.fontawesome.freeSolidSvgIcons
+
+import world.phantasmal.webui.externals.fontawesome.IconDefinition
+
+external val faArrowDown: IconDefinition
+external val faArrowRight: IconDefinition
+external val faCaretDown: IconDefinition
+external val faCaretUp: IconDefinition
+external val faFile: IconDefinition
+external val faFileMedical: IconDefinition
+external val faLevelDownAlt: IconDefinition
+external val faLevelUpAlt: IconDefinition
+external val faLongArrowAltRight: IconDefinition
+external val faPlay: IconDefinition
+external val faPlus: IconDefinition
+external val faRedo: IconDefinition
+external val faSave: IconDefinition
+external val faStop: IconDefinition
+external val faTrashAlt: IconDefinition
+external val faUndo: IconDefinition

webui/src/main/kotlin/world/phantasmal/webui/widgets/Widget.kt

@@ -217,13 +217,6 @@ abstract class Widget(
             el
         }
 
-        init {
-            js("require('@fortawesome/fontawesome-free/js/fontawesome');")
-            js("require('@fortawesome/fontawesome-free/js/solid');")
-            js("require('@fortawesome/fontawesome-free/js/regular');")
-            js("require('@fortawesome/fontawesome-free/js/brands');")
-        }
-
         protected fun style(style: String) {
             STYLE_EL.append(style)
         }