Update web tutorials and template to conform the latest API changes

templates/web-template/build.gradle.kts

@@ -3,9 +3,9 @@ import org.jetbrains.compose.desktop.application.dsl.TargetFormat
 
 plugins {
     // __KOTLIN_COMPOSE_VERSION__
-    kotlin("multiplatform") version "1.5.0"
+    kotlin("multiplatform") version "1.5.10"
     // __LATEST_COMPOSE_RELEASE_VERSION__
-    id("org.jetbrains.compose") version ("0.0.0-web-dev-13")
+    id("org.jetbrains.compose") version ("0.0.0-web-dev-14")
 }
 
 repositories {

tutorials/Web/Building_UI/README.md

@@ -175,19 +175,20 @@ You can find a more detailed overview of the style DSL, as well as additional ex
 ### Runnable example
 
 ```kotlin
-import androidx.compose.web.elements.*
+import androidx.compose.runtime.Composable
-import androidx.compose.web.attributes.*
+import org.jetbrains.compose.web.attributes.*
-import androidx.compose.web.css.*
+import org.jetbrains.compose.web.css.*
-import androidx.compose.web.renderComposable
+import org.jetbrains.compose.web.dom.*
+import org.jetbrains.compose.web.renderComposable
 
 fun main() {
     renderComposable(rootElementId = "root") {
         Div(
             attrs = {
                 // specify attributes here
-            },
+                style {
-            style = {
+                    // specify inline style here
-                // specify inline style here
+                }
             }
         ) {
             Text("A text in <div>")
@@ -196,17 +197,16 @@ fun main() {
         Input(
             type = InputType.Text, // All InputTypes supported
             value = "", // sets the input value
-            attrs = {},
+            attrs = {}
-            style = {}
         )
 
         Input(attrs = { type(InputType.Text) })
 
         Text("Arbitrary text")
 
-        Span(
+        Span({
-            style = { color("red") } // inline style
+            style { color("red") } // inline style
-        ) {
+        }) {
             Text("Red text")
         }
 
@@ -241,15 +241,15 @@ fun main() {
             }
         ) { Text("Button") }
 
-        Div(
+        Div({
-            style = {
+            style {
                 display(DisplayStyle.Flex)
                 padding(20.px)
 
                 // custom property
                 property("font-family", value("Arial, Helvetica, sans-serif"))
             }
-        ) { Text("Text in Div with inline style") }
+        }) { Text("Text in Div with inline style") }
     }
 }
 ```

tutorials/Web/Events_Handling/README.md

@@ -60,9 +60,9 @@ There are more event listeners supported out of a box. We plan to add the docume
 
 ```kotlin
 import androidx.compose.runtime.*
-import androidx.compose.web.elements.*
+import org.jetbrains.compose.web.css.*
-import androidx.compose.web.attributes.*
+import org.jetbrains.compose.web.dom.*
-import androidx.compose.web.renderComposable
+import org.jetbrains.compose.web.renderComposable
 
 fun main() {
     renderComposable(rootElementId = "root") {

tutorials/Web/Getting_Started/README.md

@@ -93,13 +93,11 @@ kotlin {
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.setValue
-import androidx.compose.web.css.padding
+import androidx.compose.runtime.Composable
-import androidx.compose.web.css.px
+import org.jetbrains.compose.web.attributes.*
-import androidx.compose.web.elements.Button
+import org.jetbrains.compose.web.css.*
-import androidx.compose.web.elements.Div
+import org.jetbrains.compose.web.dom.*
-import androidx.compose.web.elements.Span
+import org.jetbrains.compose.web.renderComposable
-import androidx.compose.web.elements.Text
-import androidx.compose.web.renderComposable
 
 fun main() {
     var count: Int by mutableStateOf(0)

tutorials/Web/Style_Dsl/README.md

@@ -10,15 +10,15 @@ In this tutorial we have a look at how to style the components using the Style D
 You can declare inline styles via the `style` block of a component
 
 ``` kotlin
-Div(
+Div({
-    style = {
+    style {
         display(DisplayStyle.Flex)
         padding(20.px)
         
         // custom property (or not supported out of a box)
         property("font-family", value("Arial, Helvetica, sans-serif"))
     }
-) { /* content goes here */ }
+}) { /* content goes here */ }
 ```
 
 In HTML, it will look like this:
@@ -164,11 +164,10 @@ object MyStyleSheet: StyleSheet() {
 ### Runnable example
 
 ```kotlin
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
-import androidx.compose.web.elements.*
+import org.jetbrains.compose.web.css.*
-import androidx.compose.web.attributes.*
+import org.jetbrains.compose.web.dom.*
-import androidx.compose.web.css.*
+import org.jetbrains.compose.web.renderComposable
-import androidx.compose.web.renderComposable
 
 object AppStylesheet : StyleSheet() {
     val container by style { // container is a class
@@ -191,15 +190,15 @@ fun Container(content: @Composable () -> Unit) {
 
 fun main() {
     renderComposable(rootElementId = "root") {
-        Div(
+        Div({
-            style = {
+            style {
                 display(DisplayStyle.Flex)
                 padding(20.px)
 
                 // custom property (or not supported out of a box)
                 property("font-family", value("Arial, Helvetica, sans-serif"))
             }
-        ) { /* content goes here */ }
+        }) { /* content goes here */ }
 
 
         Style(AppStylesheet)