Add JS support

[TBSten]

Compose Multiplatform includes a library called Compose HTML that uses a set of js source files.
I would like you to add js support to combine this with soil.

[ogaclejapan]

I think adding it should be possible, so I'll give it a try 👌

[ogaclejapan]

Hi, @TBSten
First, I tried implementing it in the query.core package, but it seems that the JsNumber type cannot be resolved in the jsMain source set. When I duplicate the following code in jsMain, it results in a type error.

soil/soil-query-core/src/wasmJsMain/kotlin/soil/query/core/Platform.wasmJs.kt

Line 22 in b2b11a0

fun now(): JsNumber

Since I'm not very familiar with Kotlin/JS, it might take me some time to solve this. Would you happen to have any suggestions or solutions to resolve this issue? 🤷

[TBSten]

Sorry for the late reply 🙏.
Indeed you are right, the JsNumber type seems to exist only in wasmJs...
I am not sure why.

However, Date.now() seems to be used only in that file.
How about using kotlin.js.Date instead?

+import kotlin.js.Date

 actual fun epoch(): Long {
     return Date.now().toString().toLong() / 1000
 }

-external object Date {
-    fun now(): JsNumber
-}

[TBSten]

Hi, @ogaclejapan

I tried to tackle this problem after a long time, but I encountered the error: Implementing a function interface is prohibited in JavaScript. (Most were error messages generated for ***Rule, which has been deprecated.)

> Task :soil-form:compileKotlinJs FAILED
e: file:///Users/<project-dir>/soil-form/src/commonMain/kotlin/soil/form/rule/ArrayRule.kt:44:7 Implementing a function interface is prohibited in JavaScript.
e: file:///Users/<project-dir>/soil-form/src/commonMain/kotlin/soil/form/rule/BooleanRule.kt:41:7 Implementing a function interface is prohibited in JavaScript.
e: file:///Users/<project-dir>/soil-form/src/commonMain/kotlin/soil/form/rule/CollectionRule.kt:44:7 Implementing a function interface is prohibited in JavaScript.
e: file:///Users/<project-dir>/soil-form/src/commonMain/kotlin/soil/form/rule/DoubleRule.kt:42:7 Implementing a function interface is prohibited in JavaScript.
e: file:///Users/<project-dir>/soil-form/src/commonMain/kotlin/soil/form/rule/FloatRule.kt:42:7 Implementing a function interface is prohibited in JavaScript.
e: file:///Users/<project-dir>/soil-form/src/commonMain/kotlin/soil/form/rule/IntRule.kt:41:7 Implementing a function interface is prohibited in JavaScript.
e: file:///Users/<project-dir>/soil-form/src/commonMain/kotlin/soil/form/rule/LongRule.kt:41:7 Implementing a function interface is prohibited in JavaScript.
e: file:///Users/<project-dir>/soil-form/src/commonMain/kotlin/soil/form/rule/ObjectRule.kt:45:7 Implementing a function interface is prohibited in JavaScript.
e: file:///Users/<project-dir>/soil-form/src/commonMain/kotlin/soil/form/rule/StringRule.kt:42:7 Implementing a function interface is prohibited in JavaScript.

> Task :soil-query-core:compileTestKotlinJs FAILED
e: file:///Users/<project-dir>/soil-query-core/src/commonTest/kotlin/soil/query/core/BatchSchedulerTest.kt:65:19 Implementing a function interface is prohibited in JavaScript.

It seems Kotlin/JS does not support extending functional types.

When considering JS support, it might be best to avoid using type aliases for functions.

[ogaclejapan]

Hi, @TBSten

Thank you for looking into this!
It's unfortunate that extension functions on function types are not supported in Kotlin/JS 😭

We could consider separating the implementation only for the JS platform using the actual/expect pattern, but it doesn't seem easily supportable at this point...

We'll continue to explore this if any good ideas come up 💪

[ogaclejapan]

Hi @TBSten,

I've started working on this feature and created a branch to implement JS target support:

• https://github.com/soil-kt/soil/tree/support-js-target

However, I'm currently facing two main issues that I'd like to discuss:

1. Compose Tests Not Working

The Compose tests are failing to run on the JS target, which seems to be related to this known issue:

• https://youtrack.jetbrains.com/issue/CMP-4906/1nMakeRasterN32Premul-is-not-defined-when-running-runComposeUiTest-with-js

For now, I'm considering excluding these tests from the JS target until this upstream issue is resolved 🤔

2. Sample App Not Displaying

The sample application isn't displaying correctly on the JS target.

Questions for you:

• Have you encountered similar issues when working with Compose HTML?
• Do you have any insights or workarounds for getting Compose HTML applications to display properly?

Any guidance or suggestions you could provide would be greatly helpful in moving this feature forward 🙌

[ogaclejapan]

Hi, @TBSten
JS support is now available in 1.0.0-alpha15 🚀