diff --git a/examples/web-getting-started/src/jsMain/kotlin/YoutubeComponent.kt b/examples/web-getting-started/src/jsMain/kotlin/YoutubeComponent.kt new file mode 100644 index 0000000000..b636cdbc7b --- /dev/null +++ b/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 + +external interface ReactYouTubeProps : RProps { + var url: String +} \ No newline at end of file diff --git a/examples/web-with-react/.gitignore b/examples/web-with-react/.gitignore new file mode 100644 index 0000000000..8ea68f1b7d --- /dev/null +++ b/examples/web-with-react/.gitignore @@ -0,0 +1,3 @@ +/.gradle/ +/.idea/ +/build/ diff --git a/examples/web-with-react/README.md b/examples/web-with-react/README.md new file mode 100644 index 0000000000..c5fc03c24e --- /dev/null +++ b/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 +``` \ No newline at end of file diff --git a/examples/web-with-react/build.gradle.kts b/examples/web-with-react/build.gradle.kts new file mode 100644 index 0000000000..46bf24cd4f --- /dev/null +++ b/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")) + } + } + } +} diff --git a/examples/web-with-react/gradle.properties b/examples/web-with-react/gradle.properties new file mode 100644 index 0000000000..29e08e8ca8 --- /dev/null +++ b/examples/web-with-react/gradle.properties @@ -0,0 +1 @@ +kotlin.code.style=official \ No newline at end of file diff --git a/examples/web-with-react/gradle/wrapper/gradle-wrapper.jar b/examples/web-with-react/gradle/wrapper/gradle-wrapper.jar new file mode 100644 index 0000000000..e708b1c023 Binary files /dev/null and b/examples/web-with-react/gradle/wrapper/gradle-wrapper.jar differ diff --git a/examples/web-with-react/gradle/wrapper/gradle-wrapper.properties b/examples/web-with-react/gradle/wrapper/gradle-wrapper.properties new file mode 100644 index 0000000000..29e4134576 --- /dev/null +++ b/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 diff --git a/examples/web-with-react/gradlew b/examples/web-with-react/gradlew new file mode 100755 index 0000000000..4f906e0c81 --- /dev/null +++ b/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" "$@" diff --git a/examples/web-with-react/gradlew.bat b/examples/web-with-react/gradlew.bat new file mode 100644 index 0000000000..107acd32c4 --- /dev/null +++ b/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 diff --git a/examples/web-with-react/settings.gradle.kts b/examples/web-with-react/settings.gradle.kts new file mode 100644 index 0000000000..bbdf9586ce --- /dev/null +++ b/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" + diff --git a/examples/web-with-react/src/jsMain/kotlin/ComposeInReactApp.kt b/examples/web-with-react/src/jsMain/kotlin/ComposeInReactApp.kt new file mode 100644 index 0000000000..e57b27a7ee --- /dev/null +++ b/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) { + 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 useCompose( + containerRef: RMutableRef, + stateInitialValue: T, + stateValueProvider: () -> T, + composable: @Composable (state: State) -> 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 { props -> + val containerRef = useRef(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 { + 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 { + 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) + } +} \ No newline at end of file diff --git a/examples/web-with-react/src/jsMain/kotlin/Main.kt b/examples/web-with-react/src/jsMain/kotlin/Main.kt new file mode 100644 index 0000000000..f046acb54f --- /dev/null +++ b/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() + } +} \ No newline at end of file diff --git a/examples/web-with-react/src/jsMain/kotlin/ReactInComposeApp.kt b/examples/web-with-react/src/jsMain/kotlin/ReactInComposeApp.kt new file mode 100644 index 0000000000..727e3e1f6c --- /dev/null +++ b/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.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) + } + } +} \ No newline at end of file diff --git a/examples/web-with-react/src/jsMain/kotlin/ReactYoutubePlayer.kt b/examples/web-with-react/src/jsMain/kotlin/ReactYoutubePlayer.kt new file mode 100644 index 0000000000..6b42517ea4 --- /dev/null +++ b/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 + +external interface ReactYouTubeProps : RProps { + var url: String +} diff --git a/examples/web-with-react/src/jsMain/resources/index.html b/examples/web-with-react/src/jsMain/resources/index.html new file mode 100644 index 0000000000..c078599ac9 --- /dev/null +++ b/examples/web-with-react/src/jsMain/resources/index.html @@ -0,0 +1,11 @@ + + + + + Compose for Web: with react component + + +
+ + + \ No newline at end of file