diff options
12 files changed, 441 insertions, 0 deletions
diff --git a/build.gradle.kts b/build.gradle.kts index 05c6df5f..d360dc70 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -139,6 +139,7 @@ tasks { "kvision-maps", "kvision-moment", "kvision-pace", + "kvision-react", "kvision-redux", "kvision-redux-kotlin", "kvision-richtext", diff --git a/gradle.properties b/gradle.properties index 502c5bfa..1218e1da 100644 --- a/gradle.properties +++ b/gradle.properties @@ -17,6 +17,7 @@ jqueryKotlinVersion=0.0.4 snabbdomKotlinVersion=0.1.1 navigoKotlinVersion=0.0.3 nodeKtVersion=0.1.0 +kotlinReactVersion=16.13.0-pre.94-kotlin-1.3.70 kotlinReduxVersion=4.0.0-pre.94-kotlin-1.3.70 reduxKotlinVersion=0.4.0 reduxKotlinThunkVersion=0.4.0 diff --git a/kvision-modules/kvision-react/build.gradle.kts b/kvision-modules/kvision-react/build.gradle.kts new file mode 100644 index 00000000..212531d0 --- /dev/null +++ b/kvision-modules/kvision-react/build.gradle.kts @@ -0,0 +1,53 @@ +buildscript { + extra.set("production", (findProperty("prod") ?: findProperty("production") ?: "false") == "true") +} + +plugins { + kotlin("js") + id("maven-publish") +} + +repositories() + +val kotlinReactVersion: String by project + +kotlin { + kotlinJsTargets() +} + +dependencies { + implementation(kotlin("stdlib-js")) + api(rootProject) + api("org.jetbrains:kotlin-react:$kotlinReactVersion") + api("org.jetbrains:kotlin-react-dom:$kotlinReactVersion") + implementation(npm("react", "16.13.1")) + implementation(npm("react-dom", "16.13.1")) + testImplementation(kotlin("test-js")) +} + +val sourcesJar by tasks.registering(Jar::class) { + archiveClassifier.set("sources") + from(kotlin.sourceSets.main.get().kotlin) +} + +publishing { + publications { + create<MavenPublication>("kotlin") { + from(components["kotlin"]) + artifact(tasks["sourcesJar"]) + pom { + defaultPom() + } + } + } +} + +setupPublication() + +tasks { + getByName("JsJar", Jar::class) { + from("${rootProject.buildDir}/js/packages/kvision-${project.name}/package.json") { + filter { it.replace("\"main\": \"kotlin/kvision-kvision", "\"main\": \"kvision-kvision") } + } + } +} diff --git a/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/KVManagerReact.kt b/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/KVManagerReact.kt new file mode 100644 index 00000000..88768d8e --- /dev/null +++ b/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/KVManagerReact.kt @@ -0,0 +1,34 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +package pl.treksoft.kvision + +internal val kVManagerReactInit = KVManagerReact.init() + +/** + * Internal singleton object which initializes and configures KVision React module. + */ +internal object KVManagerReact { + + internal val reactDom = require("react-dom") + + internal fun init() {} +} diff --git a/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/react/React.kt b/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/react/React.kt new file mode 100644 index 00000000..7424159f --- /dev/null +++ b/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/react/React.kt @@ -0,0 +1,113 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +package pl.treksoft.kvision.react + +import com.github.snabbdom.VNode +import org.w3c.dom.HTMLElement +import pl.treksoft.kvision.KVManagerReact +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.core.Widget +import pl.treksoft.kvision.utils.set +import react.RBuilder +import react.dom.render as ReactRender + +/** + * React component for KVision with support for state holder. + * @param S state type + * @param classes a set of CSS class names + * @param builder a builder function for external react components with support for the state holder. + */ +class React<S>( + state: S, + classes: Set<String> = setOf(), + private val builder: RBuilder.(getState: () -> S, changeState: ((S) -> S) -> Unit) -> Unit +) : Widget(classes) { + + var state = state + set(value) { + field = value + refreshFunction?.invoke() + } + + private var refreshFunction: (() -> Unit)? = null + + @Suppress("UnsafeCastFromDynamic") + internal constructor( + classes: Set<String> = setOf(), + builder: RBuilder.(getState: () -> S, changeState: ((S) -> S) -> Unit) -> Unit + ) : this(js("{}"), classes, builder) + + override fun afterInsert(node: VNode) { + ReactRender(node.elm as HTMLElement) { + reactComponent { + this.renderFunction = { rBuilder, refresh -> + refreshFunction = refresh + rBuilder.builder({ state }) { changeState: (S) -> S -> + state = changeState(state) + refresh() + } + } + } + } + } + + override fun afterDestroy() { + vnode?.elm?.let { + KVManagerReact.reactDom.unmountComponentAtNode(it) + } + } +} + +/** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ +fun <S> Container.react( + state: S, + classes: Set<String>? = null, + className: String? = null, + builder: RBuilder.(getState: () -> S, changeState: ((S) -> S) -> Unit) -> Unit +): React<S> { + val react = React(state, classes ?: className.set, builder) + this.add(react) + return react +} + +/** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ +fun Container.react( + classes: Set<String>? = null, + className: String? = null, + builder: RBuilder.() -> Unit +): React<dynamic> { + val fullBuilder = fun RBuilder.(_: () -> dynamic, _: ((dynamic) -> dynamic) -> Unit) { + this.builder() + } + val react = React(classes ?: className.set, fullBuilder) + this.add(react) + return react +} diff --git a/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/react/ReactComponent.kt b/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/react/ReactComponent.kt new file mode 100644 index 00000000..a350468e --- /dev/null +++ b/kvision-modules/kvision-react/src/main/kotlin/pl/treksoft/kvision/react/ReactComponent.kt @@ -0,0 +1,58 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +package pl.treksoft.kvision.react + +import react.RBuilder +import react.RComponent +import react.RProps +import react.RState +import react.ReactElement +import react.setState + +/** + * @suppress Internal interface for properties + */ +external interface ReactComponentProps : RProps { + var renderFunction: (rBuilder: RBuilder, refresh: () -> Unit) -> Unit +} + +/** + * Internal React component wrapper + */ +internal class ReactComponent : RComponent<ReactComponentProps, RState>() { + override fun RBuilder.render() { + props.renderFunction(this) { + setState { + } + } + } +} + +/** + * Internal React component builder function + */ +internal fun RBuilder.reactComponent(handler: ReactComponentProps.() -> Unit): ReactElement { + return child(ReactComponent::class) { + this.attrs(handler) + } +} diff --git a/kvision-modules/kvision-react/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt b/kvision-modules/kvision-react/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt new file mode 100644 index 00000000..76c3b6ee --- /dev/null +++ b/kvision-modules/kvision-react/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt @@ -0,0 +1,100 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +package test.pl.treksoft.kvision + +import org.w3c.dom.Element +import pl.treksoft.jquery.jQuery +import pl.treksoft.kvision.core.Widget +import pl.treksoft.kvision.panel.Root +import kotlin.browser.document +import kotlin.test.assertEquals +import kotlin.test.assertTrue + +interface TestSpec { + fun beforeTest() + + fun afterTest() + + fun run(code: () -> Unit) { + beforeTest() + code() + afterTest() + } +} + +interface SimpleSpec : TestSpec { + + override fun beforeTest() { + } + + override fun afterTest() { + } + +} + +interface DomSpec : TestSpec { + + override fun beforeTest() { + val fixture = "<div style=\"display: none\" id=\"pretest\">" + + "<div id=\"test\"></div></div>" + document.body?.insertAdjacentHTML("afterbegin", fixture) + } + + override fun afterTest() { + val div = document.getElementById("pretest") + div?.let { jQuery(it).remove() } + jQuery(".modal-backdrop").remove() + Root.disposeAllRoots() + } + + fun assertEqualsHtml(expected: String?, actual: String?, message: String?) { + if (expected != null && actual != null) { + val exp = jQuery(expected) + val act = jQuery(actual) + val result = exp[0]?.isEqualNode(act[0]) + if (result == true) { + assertTrue(result == true, message) + } else { + assertEquals(expected, actual, message) + } + } else { + assertEquals(expected, actual, message) + } + } +} + +interface WSpec : DomSpec { + + fun runW(code: (widget: Widget, element: Element?) -> Unit) { + run { + val root = Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED) + val widget = Widget() + widget.id = "test_id" + root.add(widget) + val element = document.getElementById("test_id") + code(widget, element) + } + } + +} + +external fun require(name: String): dynamic diff --git a/kvision-modules/kvision-react/src/test/kotlin/test/pl/treksoft/kvision/react/ReactSpec.kt b/kvision-modules/kvision-react/src/test/kotlin/test/pl/treksoft/kvision/react/ReactSpec.kt new file mode 100644 index 00000000..ccabc721 --- /dev/null +++ b/kvision-modules/kvision-react/src/test/kotlin/test/pl/treksoft/kvision/react/ReactSpec.kt @@ -0,0 +1,66 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +package test.pl.treksoft.kvision.react + +import kotlinx.html.js.onChangeFunction +import org.w3c.dom.HTMLInputElement +import pl.treksoft.kvision.panel.Root +import pl.treksoft.kvision.react.react +import react.dom.input +import test.pl.treksoft.kvision.DomSpec +import kotlin.browser.document +import kotlin.test.Test + +class ReactSpec : DomSpec { + + @Test + fun react() { + run { + val root = Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED) + val react = root.react("initial") { getState, changeState -> + input { + attrs { + value = getState() + onChangeFunction = { e -> + val target = e.target as HTMLInputElement + changeState { + target.value + } + } + } + } + } + val element = document.getElementById("test") + assertEqualsHtml( + "<div><input value=\"initial\"></div>", + element?.innerHTML, + "Should render React input component" + ) + react.state = "changed" + assertEqualsHtml( + "<div><input value=\"changed\"></div>", + element?.innerHTML, + "Should render React input component with changed state" + ) + } + } +} diff --git a/kvision-modules/kvision-react/webpack.config.d/bootstrap.js b/kvision-modules/kvision-react/webpack.config.d/bootstrap.js new file mode 100644 index 00000000..35b28e6a --- /dev/null +++ b/kvision-modules/kvision-react/webpack.config.d/bootstrap.js @@ -0,0 +1,3 @@ +config.module.rules.push({test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'}); +config.module.rules.push({test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream'}); +config.module.rules.push({test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader'}); diff --git a/kvision-modules/kvision-react/webpack.config.d/css.js b/kvision-modules/kvision-react/webpack.config.d/css.js new file mode 100644 index 00000000..5d710d35 --- /dev/null +++ b/kvision-modules/kvision-react/webpack.config.d/css.js @@ -0,0 +1,2 @@ +config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" }); + diff --git a/kvision-modules/kvision-react/webpack.config.d/file.js b/kvision-modules/kvision-react/webpack.config.d/file.js new file mode 100644 index 00000000..653ca21f --- /dev/null +++ b/kvision-modules/kvision-react/webpack.config.d/file.js @@ -0,0 +1,9 @@ +config.module.rules.push( + { + test: /\.(jpe?g|png|gif|svg)$/i, + loader: 'file-loader', + options: { + esModule: false, + }, + } +); diff --git a/settings.gradle.kts b/settings.gradle.kts index 6860d1f8..20c20b48 100644 --- a/settings.gradle.kts +++ b/settings.gradle.kts @@ -43,6 +43,7 @@ include( "kvision-modules:kvision-maps", "kvision-modules:kvision-moment", "kvision-modules:kvision-pace", + "kvision-modules:kvision-react", "kvision-modules:kvision-redux", "kvision-modules:kvision-redux-kotlin", "kvision-modules:kvision-richtext", |