fix js compile, add jsTest pipeline step

ikovalyov · Jun 26, 2024 · 0f72b89 · 0f72b89
1 parent 25bb82b
commit 0f72b89
Show file tree

Hide file tree

Showing 20 changed files with 119 additions and 143 deletions.
diff --git a/.github/workflows/gradle.yml b/.github/workflows/gradle.yml
@@ -22,9 +22,8 @@ jobs:
     - name: Grant execute permission for gradlew
       run: chmod +x gradlew
     - name: Build with Gradle
-      run: ./gradlew jvmTest
+      run: ./gradlew jvmTest jsTest
   spotless:
-
     runs-on: ubuntu-latest
 
     steps:

diff --git a/build.gradle.kts b/build.gradle.kts
@@ -49,7 +49,7 @@ kotlin {
             }
         }
     }
-    js {
+    js(IR) {
         browser {
             commonWebpackConfig {
                 cssSupport {
@@ -208,8 +208,7 @@ spotless {
         val files = project.fileTree(rootDir)
         files.include("**/*.kt")
         target(files)
-        ktlint("0.47.1")
-            .setUseExperimental(true)
+        ktlint("1.3.0")
             .editorConfigOverride(
                 mapOf(
                     "max_line_length" to "256",
@@ -218,8 +217,7 @@ spotless {
             )
     }
     kotlinGradle {
-        ktlint("0.47.1")
-            .setUseExperimental(true)
+        ktlint("1.3.0")
             .editorConfigOverride(
                 mapOf(
                     "max_line_length" to "256",

diff --git a/src/jsMain/kotlin/com.github.ikovalyov/App.kt b/src/jsMain/kotlin/com.github.ikovalyov/App.kt
@@ -6,8 +6,6 @@ import com.github.ikovalyov.react.components.bootstrap.Input
 import com.github.ikovalyov.react.components.bootstrap.ScreenReaderSpan
 import com.github.ikovalyov.react.components.bootstrap.nav.CollapseButton
 import com.github.ikovalyov.react.components.bootstrap.nav.menuItem
-import csstype.ClassName
-import csstype.px
 import emotion.react.css
 import react.FC
 import react.Props
@@ -16,6 +14,8 @@ import react.dom.html.ReactHTML.form
 import react.dom.html.ReactHTML.nav
 import react.dom.html.ReactHTML.ul
 import react.router.dom.Link
+import web.cssom.ClassName
+import web.cssom.px
 
 const val navbarTogglerId = "navbarTogglerDemo01"
 val App = FC<Props> {
@@ -38,8 +38,18 @@ val App = FC<Props> {
                         +"Home "
                         ScreenReaderSpan("(current)")
                     }
-                    menuItem(href = "${Api.backendEndpoint}/oauth/login/google", active = false, disabled = false, reactLink = false) { +"Login" }
-                    menuItem(href = "${Api.backendEndpoint}/logout", active = false, disabled = false, reactLink = false) { +"Logout" }
+                    menuItem(
+                        href = "${Api.backendEndpoint}/oauth/login/google",
+                        active = false,
+                        disabled = false,
+                        reactLink = false
+                    ) { +"Login" }
+                    menuItem(
+                        href = "${Api.backendEndpoint}/logout",
+                        active = false,
+                        disabled = false,
+                        reactLink = false
+                    ) { +"Logout" }
                     menuItem(href = "#", active = false, disabled = true) { +"Disabled" }
                 }
                 form {

diff --git a/src/jsMain/kotlin/com.github.ikovalyov/Main.kt b/src/jsMain/kotlin/com.github.ikovalyov/Main.kt
@@ -4,15 +4,16 @@ import com.github.ikovalyov.model.security.service.SecurityService
 import com.github.ikovalyov.model.service.TemplateService
 import com.github.ikovalyov.model.service.UserService
 import com.github.ikovalyov.routes.Index
-import csstype.ClassName
 import kotlinx.serialization.ExperimentalSerializationApi
+import react.FC
 import react.Fragment
 import react.create
 import react.dom.client.createRoot
 import react.dom.html.ReactHTML
-import react.router.Route
-import react.router.Routes
-import react.router.dom.BrowserRouter
+import react.router.RouteObject
+import react.router.RouterProvider
+import react.router.dom.createBrowserRouter
+import web.cssom.ClassName
 import web.dom.document
 
 @OptIn(ExperimentalSerializationApi::class)
@@ -25,25 +26,32 @@ suspend fun main() {
     val allUsers = userService.getAllUsers()
     val templateService = TemplateService()
     val allTemplates = templateService.getAllTemplates()
-    root.render(
-        Fragment.create {
-            BrowserRouter {
-                App { }
-                ReactHTML.div {
-                    className = ClassName("container-fluid")
-                    Routes {
-                        Route {
-                            index = true
-                            element = Index.create {
-                                this.currentUser = currentUser
-                                this.userList = allUsers
-                                this.templateList = allTemplates
-                            }
-                            path = "/"
+
+    val APP_ROUTER = createBrowserRouter(
+        arrayOf(
+            RouteObject(
+                path = "/",
+                element = Fragment.create {
+                    +App.create()
+                    ReactHTML.div {
+                        className = ClassName("container-fluid")
+                        +Index.create {
+                            this.currentUser = currentUser
+                            this.userList = allUsers
+                            this.templateList = allTemplates
                         }
                     }
                 }
-            }
+            )
+        )
+    )
+
+    val ReactRouterDomApp = FC {
+        RouterProvider {
+            router = APP_ROUTER
         }
+    }
+    root.render(
+        ReactRouterDomApp.create()
     )
 }
diff --git a/src/jsMain/kotlin/com.github.ikovalyov/extenstion/Dom.kt b/src/jsMain/kotlin/com.github.ikovalyov/extenstion/Dom.kt
diff --git a/src/jsMain/kotlin/com.github.ikovalyov/react/components/bootstrap/Button.kt b/src/jsMain/kotlin/com.github.ikovalyov/react/components/bootstrap/Button.kt
@@ -1,12 +1,12 @@
 package com.github.ikovalyov.react.components.bootstrap
 
-import csstype.ClassName
 import react.ChildrenBuilder
-import react.dom.html.ButtonType
 import react.dom.html.ReactHTML
+import web.cssom.ClassName
+import web.html.ButtonType
 
 sealed class Button {
-    abstract operator fun invoke(builder: ChildrenBuilder, block: ChildrenBuilder.() -> Unit): Unit
+    abstract operator fun invoke(builder: ChildrenBuilder, block: ChildrenBuilder.() -> Unit)
 
     object ButtonOutlineSuccess : Button() {
         override operator fun invoke(builder: ChildrenBuilder, block: ChildrenBuilder.() -> Unit) {

diff --git a/src/jsMain/kotlin/com.github.ikovalyov/react/components/bootstrap/Div.kt b/src/jsMain/kotlin/com.github.ikovalyov/react/components/bootstrap/Div.kt
@@ -1,11 +1,11 @@
 package com.github.ikovalyov.react.components.bootstrap
 
-import csstype.ClassName
 import react.ChildrenBuilder
 import react.dom.html.ReactHTML
+import web.cssom.ClassName
 
 sealed class Div {
-    abstract operator fun invoke(builder: ChildrenBuilder, block: ChildrenBuilder.() -> Unit): Unit
+    abstract operator fun invoke(builder: ChildrenBuilder, block: ChildrenBuilder.() -> Unit)
 
     object ContainerFluidDiv : Div() {
         override operator fun invoke(builder: ChildrenBuilder, block: ChildrenBuilder.() -> Unit) {

diff --git a/src/jsMain/kotlin/com.github.ikovalyov/react/components/bootstrap/Input.kt b/src/jsMain/kotlin/com.github.ikovalyov/react/components/bootstrap/Input.kt
@@ -1,13 +1,13 @@
 package com.github.ikovalyov.react.components.bootstrap
 
 import com.github.ikovalyov.react.components.bootstrap.nav.ariaLabel
-import csstype.ClassName
 import react.ChildrenBuilder
-import react.dom.html.InputType
 import react.dom.html.ReactHTML
+import web.cssom.ClassName
+import web.html.InputType
 
 sealed class Input {
-    abstract operator fun invoke(name: String, builder: ChildrenBuilder): Unit
+    abstract operator fun invoke(name: String, builder: ChildrenBuilder)
 
     object SearchInput : Input() {
         override operator fun invoke(name: String, builder: ChildrenBuilder) {

diff --git a/src/jsMain/kotlin/com.github.ikovalyov/react/components/bootstrap/ScreenReaderSpan.kt b/src/jsMain/kotlin/com.github.ikovalyov/react/components/bootstrap/ScreenReaderSpan.kt
@@ -1,8 +1,8 @@
 package com.github.ikovalyov.react.components.bootstrap
 
-import csstype.ClassName
 import react.ChildrenBuilder
 import react.dom.html.ReactHTML
+import web.cssom.ClassName
 
 fun ChildrenBuilder.ScreenReaderSpan(text: String) {
     ReactHTML.span {

diff --git a/src/jsMain/kotlin/com.github.ikovalyov/react/components/bootstrap/nav/Anchor.kt b/src/jsMain/kotlin/com.github.ikovalyov/react/components/bootstrap/nav/Anchor.kt
@@ -1,9 +1,9 @@
 package com.github.ikovalyov.react.components.bootstrap.nav
 
-import csstype.ClassName
 import kotlinx.browser.window
 import react.ChildrenBuilder
 import react.router.dom.Link
+import web.cssom.ClassName
 
 fun ChildrenBuilder.ReactAnchor(hrefString: String, active: Boolean, disabled: Boolean, block: ChildrenBuilder.() -> Unit) {
     Link {

diff --git a/src/jsMain/kotlin/com.github.ikovalyov/react/components/bootstrap/nav/CollapseButton.kt b/src/jsMain/kotlin/com.github.ikovalyov/react/components/bootstrap/nav/CollapseButton.kt
@@ -1,11 +1,11 @@
 package com.github.ikovalyov.react.components.bootstrap.nav
 
-import csstype.ClassName
 import react.ChildrenBuilder
-import react.dom.html.ButtonType
 import react.dom.html.HTMLAttributes
 import react.dom.html.ReactHTML
 import react.dom.html.ReactHTML.span
+import web.cssom.ClassName
+import web.html.ButtonType
 
 var HTMLAttributes<*>.dataBsToggle: String?
     get() = asDynamic()["data-bs-toggle"]

diff --git a/src/jsMain/kotlin/com.github.ikovalyov/react/components/bootstrap/nav/MenuItem.kt b/src/jsMain/kotlin/com.github.ikovalyov/react/components/bootstrap/nav/MenuItem.kt
@@ -1,8 +1,8 @@
 package com.github.ikovalyov.react.components.bootstrap.nav
 
-import csstype.ClassName
 import react.ChildrenBuilder
 import react.dom.html.ReactHTML.div
+import web.cssom.ClassName
 
 fun ChildrenBuilder.menuItem(href: String, active: Boolean, disabled: Boolean, reactLink: Boolean = true, block: ChildrenBuilder.() -> Unit) {
     div {

diff --git a/src/jsMain/kotlin/com.github.ikovalyov/react/components/template/Crud.kt b/src/jsMain/kotlin/com.github.ikovalyov/react/components/template/Crud.kt
@@ -4,7 +4,7 @@ import com.benasher44.uuid.Uuid
 import com.github.ikovalyov.Api.backendEndpoint
 import com.github.ikovalyov.coroutines.SimpleCoroutineScope
 import com.github.ikovalyov.model.markers.IEditable
-import js.core.jso
+import js.objects.jso
 import kotlinx.browser.window
 import kotlinx.coroutines.await
 import kotlinx.coroutines.launch
@@ -197,62 +197,54 @@ private fun <I : IEditable> ChildrenBuilder.CrudComponent(props: CrudComponentPr
 
         CrudState.LIST -> {
             console.log("Loading ItemList")
-            child(
-                ItemList(
-                    jso<ItemListProps<I>> {
-                        switchToEditState = ::switchToEditStateFuncVar
-                        switchToViewState = ::switchToViewStateFunc
-                        switchToInsertState = ::switchToInsertStateFunc
-                        deleteItem = ::deleteItem
-                        items = componentState.itemsList
-                    }
-                ).render()
-            )
+            +ItemList(
+                jso<ItemListProps<I>> {
+                    switchToEditState = ::switchToEditStateFuncVar
+                    switchToViewState = ::switchToViewStateFunc
+                    switchToInsertState = ::switchToInsertStateFunc
+                    deleteItem = ::deleteItem
+                    items = componentState.itemsList
+                }
+            ).render()
         }
 
         CrudState.EDIT -> {
             console.log("Loading TemplateEdit")
-            child(
-                TemplateEdit(
-                    jso {
-                        switchToListState = ::switchToListViewStateFunc
-                        submitForm = ::submitEditItemForm
-                    },
-                    jso<TemplateEditState<I>> {
-                        item = componentState.currentItem!!
-                    }
-                ).render()
-            )
+            +TemplateEdit(
+                jso {
+                    switchToListState = ::switchToListViewStateFunc
+                    submitForm = ::submitEditItemForm
+                },
+                jso<TemplateEditState<I>> {
+                    item = componentState.currentItem!!
+                }
+            ).render()
         }
 
         CrudState.VIEW -> {
             console.log("Loading TemplateView")
-            child(
-                TemplateView(
-                    jso<TemplateViewProps<I>> {
-                        switchToListState = ::switchToListViewStateFunc
-                    },
-                    jso {
-                        item = componentState.currentItem!!
-                    }
-                ).render()
-            )
+            +TemplateView(
+                jso<TemplateViewProps<I>> {
+                    switchToListState = ::switchToListViewStateFunc
+                },
+                jso {
+                    item = componentState.currentItem!!
+                }
+            ).render()
         }
 
         CrudState.ADD -> {
             console.log("Loading TemplateInsert")
-            child(
-                TemplateInsert(
-                    jso<TemplateInsertProps<I>> {
-                        this.item = props.factory()
-                        this.submitForm = ::submitInsertItemForm
-                        this.switchToListState = ::switchToListViewStateFunc
-                    },
-                    jso {
-                        this.currentItem = props.factory()
-                    }
-                ).render()
-            )
+            +TemplateInsert(
+                jso<TemplateInsertProps<I>> {
+                    this.item = props.factory()
+                    this.submitForm = ::submitInsertItemForm
+                    this.switchToListState = ::switchToListViewStateFunc
+                },
+                jso {
+                    this.currentItem = props.factory()
+                }
+            ).render()
         }
     }
 }

diff --git a/src/jsMain/kotlin/com.github.ikovalyov/react/components/template/ItemList.kt b/src/jsMain/kotlin/com.github.ikovalyov/react/components/template/ItemList.kt
@@ -10,8 +10,8 @@ import react.Fragment
 import react.PropsWithChildren
 import react.ReactNode
 import react.create
-import react.dom.html.ButtonType
 import react.dom.html.ReactHTML
+import web.html.ButtonType
 import kotlin.coroutines.CoroutineContext
 
 external interface ItemListProps<T : Any> : PropsWithChildren {
@@ -30,7 +30,7 @@ class ItemList<I : IEditable>(props: ItemListProps<I>) :
     override val coroutineContext: CoroutineContext
         get() = job
 
-    override fun render(): ReactNode? {
+    override fun render(): ReactNode {
         return Fragment.create {
             Table<I> {
                 items = props.items?.toTypedArray()