To use fritz2, you have to set up a Kotlin multiplatform-project. To do so you can either
build.gradle.kts
file:plugins {
kotlin("multiplatform") version "1.6.10"
// KSP support
id("com.google.devtools.ksp") version "1.6.10-1.0.2"
}
repositories {
mavenLocal()
mavenCentral()
}
val fritz2Version = "1.0-RC1"
//group = "my.fritz2.app"
//version = "0.0.1-SNAPSHOT"
kotlin {
jvm()
js(IR) {
browser()
}.binaries.executable()
sourceSets {
val commonMain by getting {
dependencies {
implementation("dev.fritz2:core:$fritz2Version")
// implementation("dev.fritz2:headless:$fritz2Version") // optional
}
}
val jvmMain by getting {
dependencies {
}
}
val jsMain by getting {
dependencies {
}
}
}
}
/**
* KSP support - start
*/
dependencies {
add("kspMetadata", "dev.fritz2:lenses-annotation-processor:$fritz2Version")
}
kotlin.sourceSets.commonMain { kotlin.srcDir("build/generated/ksp/commonMain/kotlin") }
tasks.withType<org.jetbrains.kotlin.gradle.dsl.KotlinCompile<*>>().all {
if (name != "kspKotlinMetadata") dependsOn("kspKotlinMetadata")
}
// needed to work on Apple Silicon. Should be fixed by 1.6.20 (https://youtrack.jetbrains.com/issue/KT-49109#focus=Comments-27-5259190.0-0)
rootProject.plugins.withType<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootPlugin> {
rootProject.the<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension>().nodeVersion = "16.0.0"
}
/**
* KSP support - end
*/
When using the Kotlin Multiplatform project structure, we recommend organizing your code like this:
.
├── src
│ ├── commonMain
│ │ └── kotlin
│ │ └── <packages>
│ │ └── model.kt (common model for client (JS) and server (JVM))
│ └── jsMain
│ ├── kotlin
│ │ └── <packages>
│ │ └── app.kt (contains main function)
│ └── resources
│ └── index.html (starting point for your app)
├── build.gradle.kts (dependencies and tasks)
└── settings.gradle.kts (project name)
The index.html
is just a normal web-page. Be sure to include the resulting script-file from your KotlinJS-build.
You can mark an element of your choice with an id (or use the body by default) to later render your fritz2 tags to it:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
</head>
<body id="target">
Loading...
<script src="<project-name>.js"></script>
</body>
</html>
app.kt
is the starting point of your fritz2 app, so make sure it has a main
-function.
Inside main
, create some content by opening a
render context and
mount it to the DOM of your index.html
:
fun main() {
render("#target") { // using id selector here, leave blank to use document.body by default
h1 { +"My App" }
div("some-fix-css-class") {
p(id = "someId") {
+"Hello World!"
}
}
}
}
When calling render
like that, your content will be mounted to an HTMLElement
with id="target"
.
If you want to mount your content to the body
of your index.html
, you can omit this parameter.
Instead of using the selector
string with the querySelector syntax,
you can also specify an HTMLElement
directly on the targetElement
parameter.
Setting the override
parameter to false
means that your content will be appended. By default, all child
elements will be removed before your content is appended to the targetElement
.
Run the project by calling ./gradlew jsRun
in your project's main directory. Add -t
to enable automatic
building and reloading in the browser after changing your code.
If you want to use the newest snapshot-builds of fritz2 before we release them add the
following lines to your build.gradle.kts
:
repositories {
mavenCentral()
maven("https://s01.oss.sonatype.org/content/repositories/snapshots/") // new repository here
}
val fritz2Version = "1.0-SNAPSHOT" // set the newer snapshot version here
If you find any problems with these snapshot-versions please open an issue.