Compose-Web with React examples (#693)

* Add compose-web example with a react component
* Add example with a compose component in a react app

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>

examples/web-getting-started/src/jsMain/kotlin/YoutubeComponent.kt

@@ -0,0 +1,11 @@
+@file:JsModule("react-youtube-lite")
+@file:JsNonModule
+
+import react.*
+
+@JsName("ReactYouTubeLite")
+external val reactPlayer: RClass<ReactYouTubeProps>
+
+external interface ReactYouTubeProps : RProps {
+	var url: String
+}

examples/web-with-react/.gitignore

@@ -0,0 +1,3 @@
+/.gradle/
+/.idea/
+/build/

examples/web-with-react/README.md

@@ -0,0 +1,24 @@
+### Use Compose(web) in React app
+
+[see ComposeInReactApp.kt](src/jsMain/kotlin/ComposeInReactApp.kt)
+
+`useCompose(...)` is a custom React effect to render a content using Compose.
+It's not a part of any library.
+
+### Use React in Compose(web) app
+
+`UseReactEffect(...)` is a custom Compose effect to render a content using React.
+It's not a part of any library.
+
+[see ReactInComposeApp.kt](src/jsMain/kotlin/ReactInComposeApp.kt)
+
+### How to use existing React components:
+
+It requires adding `external` declarations. For example: [ReactYoutubePlayer.kt](src/jsMain/kotlin/ReactYoutubePlayer.kt)
+
+Here is a good tutorial - [Using packages from NPM](https://play.kotlinlang.org/hands-on/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS/07_Using_Packages_From_NPM)
+
+### Running web application
+```
+./gradlew jsBrowserRun
+```

examples/web-with-react/build.gradle.kts

@@ -0,0 +1,31 @@
+plugins {
+	kotlin("multiplatform") version "1.5.0"
+	id("org.jetbrains.compose") version "0.0.0-web-dev-13"
+}
+
+repositories {
+	mavenCentral()
+	maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+	maven("https://maven.pkg.jetbrains.space/kotlin/p/kotlin/kotlin-js-wrappers")
+}
+
+kotlin {
+	js(IR) {
+		browser()
+		binaries.executable()
+	}
+	sourceSets {
+		val jsMain by getting {
+			dependencies {
+				implementation(compose.web.core)
+				implementation(compose.runtime)
+				implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.201-kotlin-1.5.0")
+				implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.201-kotlin-1.5.0")
+				implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.0-pre.201-kotlin-1.5.0")
+				implementation(npm("react", "17.0.2"))
+				implementation(npm("react-dom", "17.0.2"))
+				implementation(npm("react-youtube-lite", "1.0.1"))
+			}
+		}
+	}
+}

examples/web-with-react/gradle.properties

@@ -0,0 +1 @@
+kotlin.code.style=official

examples/web-with-react/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.0.2-all.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

examples/web-with-react/gradlew

@@ -0,0 +1,185 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=`expr $i + 1`
+    done
+    case $i in
+        0) set -- ;;
+        1) set -- "$args0" ;;
+        2) set -- "$args0" "$args1" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=`save "$@"`
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+exec "$JAVACMD" "$@"

examples/web-with-react/gradlew.bat

@@ -0,0 +1,89 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

examples/web-with-react/settings.gradle.kts

@@ -0,0 +1,9 @@
+pluginManagement {
+    repositories {
+        gradlePluginPortal()
+        maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+    }
+}
+
+rootProject.name = "web-with-react"
+

examples/web-with-react/src/jsMain/kotlin/ComposeInReactApp.kt

@@ -0,0 +1,153 @@
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.web.elements.Div
+import androidx.compose.web.elements.Text
+import androidx.compose.web.renderComposable
+import kotlinx.browser.document
+import kotlinx.browser.window
+import kotlinx.css.*
+import kotlinx.html.InputType
+import kotlinx.html.js.onClickFunction
+import kotlinx.html.js.onInputFunction
+import org.w3c.dom.HTMLElement
+import react.*
+import react.dom.*
+import styled.css
+import styled.styledDiv
+
+@Composable
+private fun ComposableComponentToUseInReact(count: State<Int>) {
+    repeat(count.value) {
+        Div {
+            Text("Item $it")
+        }
+    }
+}
+
+/**
+ * @param containerRef - [RMutableRef] - reference to the HTMLElement that is used as a root for Composition
+ * @param stateInitialValue - initial state value for the Composition
+ * @param stateValueProvider - a lambda that's used to change the state's value
+ * @param composable - the content controlled by Compose and mounted in a root provided by [containerRef]
+ */
+private fun <T> useCompose(
+    containerRef: RMutableRef<HTMLElement>,
+    stateInitialValue: T,
+    stateValueProvider: () -> T,
+    composable: @Composable (state: State<T>) -> Unit
+) {
+    val mutableState = useRef(mutableStateOf(stateInitialValue))
+
+    useEffect {
+        mutableState.current?.value = stateValueProvider()
+    }
+
+    useLayoutEffectWithCleanup(dependencies = emptyList()) {
+        val composition = renderComposable(containerRef.current!!) {
+            composable(mutableState.current!!)
+        }
+        return@useLayoutEffectWithCleanup {
+            composition.dispose()
+        }
+    }
+}
+
+private external interface ListProps : RProps {
+    var countOfItems: Int
+}
+
+private val composeListComponentWrapper = functionalComponent<ListProps> { props ->
+    val containerRef = useRef<HTMLElement>(null)
+
+    useCompose(
+        containerRef = containerRef,
+        stateInitialValue = 0,
+        stateValueProvider = { props.countOfItems }
+    ) {
+        ComposableComponentToUseInReact(it)
+    }
+
+    // This div will be a root for the Composition managed by Compose
+    div {
+        attrs {
+            ref { containerRef.current = it }
+        }
+    }
+}
+
+private val column = functionalComponent<RProps> {
+    val (counter, setCounter) = useState(0)
+
+    styledDiv {
+        css {
+            padding = "25px"
+        }
+
+        h3 {
+            +"Update items count using slider:"
+        }
+
+        input(type = InputType.range) {
+            attrs {
+                onInputFunction = {
+                    setCounter(it.target?.asDynamic().value.toString().toInt())
+                }
+                value = "$counter"
+            }
+        }
+
+        h3 {
+            +"Compose controlled items:"
+        }
+
+        child(composeListComponentWrapper) {
+            this.attrs {
+                countOfItems = counter
+            }
+        }
+    }
+}
+
+private val appContent = functionalComponent<RProps> {
+    val (columnsCount, setColumnsCount) = useState(3)
+
+    a(href = "${window.location.origin}?app=composeApp") {
+        +"GO TO REACT IN COMPOSE EXAMPLE"
+    }
+
+    button {
+        attrs {
+            onClickFunction = {
+                setColumnsCount(columnsCount - 1)
+            }
+        }
+        +"Remove column"
+    }
+
+    button {
+        attrs {
+            onClickFunction = {
+                setColumnsCount(columnsCount + 1)
+            }
+        }
+        +"Add column"
+    }
+
+    styledDiv {
+        css {
+            display = Display.flex
+            flexDirection = FlexDirection.row
+        }
+
+        repeat(columnsCount) {
+            child(column)
+        }
+    }
+}
+
+fun composeInReactAppExample() {
+    render(document.getElementById("root")) {
+        child(appContent)
+    }
+}

examples/web-with-react/src/jsMain/kotlin/Main.kt

@@ -0,0 +1,14 @@
+import kotlinx.browser.window
+import org.w3c.dom.url.URLSearchParams
+
+fun main() {
+
+	val urlParams = URLSearchParams(window.location.search)
+
+	val app = urlParams.get("app") ?: "composeApp"
+
+	when (app) {
+		"composeApp" -> reactInComposeAppExample()
+		"reactApp" -> composeInReactAppExample()
+	}
+}

examples/web-with-react/src/jsMain/kotlin/ReactInComposeApp.kt

@@ -0,0 +1,92 @@
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.web.css.margin
+import androidx.compose.web.css.percent
+import androidx.compose.web.css.px
+import androidx.compose.web.css.width
+import androidx.compose.web.elements.*
+import androidx.compose.web.renderComposable
+import kotlinx.browser.window
+import org.w3c.dom.HTMLElement
+import react.RBuilder
+import react.dom.render
+import react.dom.unmountComponentAtNode
+
+/**
+ * @param key - when UseReactEffect is invoked with a new [key], compose forces react to render with a new content.
+ * @param content - the builder for the content managed by React
+ */
+@Composable
+private fun ElementScope<HTMLElement>.UseReactEffect(
+    key: Any?,
+    content: RBuilder.() -> Unit
+) {
+    DomSideEffect(key = key) { htmlElement ->
+        render(htmlElement) {
+            content()
+        }
+    }
+
+    DisposableRefEffect { htmlElement ->
+        onDispose {
+            unmountComponentAtNode(htmlElement)
+        }
+    }
+}
+
+@Composable
+fun YoutubeReactPlayerWrapper(videoUrl: String) {
+    if (videoUrl.isEmpty()) return
+    Div(
+        style = {
+            width(50.percent)
+        }
+    ) {
+        UseReactEffect(key = videoUrl) {
+            reactPlayer {
+                attrs.url = videoUrl
+            }
+        }
+    }
+}
+
+private val videos = listOf(
+    "https://www.youtube.com/watch?v=UryyHq45Y_8",
+    "https://www.youtube.com/watch?v=698I_AH8h6s",
+    "https://www.youtube.com/watch?v=F8jj7e-_jFA"
+)
+
+fun reactInComposeAppExample() {
+    var videoUrl by mutableStateOf("")
+
+    renderComposable(rootElementId = "root") {
+
+        A(href = "${window.location.origin}?app=reactApp") { Text("GO TO COMPOSE IN REACT EXAMPLE") }
+
+        Div {
+            videos.forEachIndexed { ix, url ->
+                Button(
+                    attrs = {
+                        onClick { videoUrl = url }
+                    },
+                    style = {
+                        margin(10.px)
+                    }
+                ) { Text("Video ${ix + 1}") }
+            }
+
+            Button(
+                attrs = {
+                    onClick { videoUrl = "" }
+                },
+                style = {
+                    margin(10.px)
+                }
+            ) { Text("Reset") }
+
+            YoutubeReactPlayerWrapper(videoUrl)
+        }
+    }
+}

examples/web-with-react/src/jsMain/kotlin/ReactYoutubePlayer.kt

@@ -0,0 +1,11 @@
+@file:JsModule("react-youtube-lite")
+@file:JsNonModule
+
+import react.*
+
+@JsName("ReactYouTubeLite")
+external val reactPlayer: RClass<ReactYouTubeProps>
+
+external interface ReactYouTubeProps : RProps {
+	var url: String
+}

examples/web-with-react/src/jsMain/resources/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Compose for Web: with react component</title>
+</head>
+<body>
+<div id="root"></div>
+<script src="web-with-react.js"></script>
+</body>
+</html>