I’m playing around with using Compose Web to write...

# compose-web

[Adam S]

I’m playing around with using Compose Web to write a GitHub pages site for one of my projects (it’s fun!), and I’m trying to do a bit of ‘literal programming’ (à la Kotlinx Knit) so that any Kotlin/JVM code snippets in the docs are easy to understand and edit because they’re in-line and in-context, and will automatically kept up-to-date.

I’m playing around with an approach where

• example code blocks are tagged with a data-test-code=example-hello-world-test.kt
• expected test results are tagged with data-test-expected=example-hello-world-test.kt
• a Compose Web test then scrapes those code blocks out, and saves them to disk, along with a generated test case
• and then another process (another Gradle task maybe?) runs the generated tests
Sample code in 🧵

Thoughts?

[Adam S]

it’s a bit awkward, not helped by Compose Web being Kotlin/JS and the code I want to test is Kotlin/JVM. It would help if Compose Web was multiplatform, then I could define introToKotlin() in commonMain, and then it would be easier in JVM to save the files, or run them dynamically via a scripting engine or Gradle Test Kit.

[David Herman]

What's the reason for the DiposableEffects?

[David Herman]

Can you just do Code { Text(...) } ?

[David Herman]

It's a neat idea to try to make your html the source of truth.

[David Herman]

I'm not that's the expected way for people to use property. Those are meant for valid styles. I bet if you inspect the DOM you'll get a bunch of confused highlights. Feels like you're (ab)using the behavior to be able to register random information on your elements.

[David Herman]

I'm never played around with this, but maybe instead of styles, you can create data attributes instead?

Div(attrs = {
    attr("data-blah", "example")  
})

As a bonus, it's even a little less code

See also: https://css-tricks.com/a-complete-guide-to-data-attributes/

[David Herman]

As an alternate approach, I imagine you can create a bunch of real .kt files in your resources folder, compile and run them using Gradle and capture their output, and then just embed those kt files directly into your site?

Div {
    P { Text("What does Hello World look like?") }

    CodeSnippet("hello-world-example-01.kt")

    P { Text("As expected, it logs") }

    CodeSnippet("hello-world-example-01-out.kt")
  }
}

@Composable
fun CodeSnippet(filename: String) {
  var content by remember { mutableStateOf("Loading...") }
  LaunchedEffect(Unit) {
     window.fetch(filenamen).then { response ->
        response.text().then { content = it }
     }
  }
  Pre { Code { Text(content) } }
}

[David Herman]

And then maybe write a test inside Gradle? Which searches your code for "CodeSnippet" calls and verifies that the filenames exist in the right place resources directory.

[Adam S]

I’m not that’s the expected way for people to use property

oops yes, thanks. I meant to use attr()

[Adam S]

As an alternate approach, I imagine you can create a bunch of real .kt files in your resources folder, compile and run them using Gradle and capture their output, and then just embed those kt files directly into your site?

Yeah I thought about that. There are some things that I didn’t like:

• when writing docs I don’t like switching between the source code and documentation, and I think it will be more likely for them to get out of sync
• what happens if you only want to use part of the source code in the site? For example, you want to hide the imports.
In Knit, you can put hidden code in a comment. If you’re including something from a file then you need some sort of start/end tagging system (like what the Gradle docs do)