diff options
12 files changed, 533 insertions, 2 deletions
diff --git a/build.gradle b/build.gradle index bfeea65d..1a8952bb 100644 --- a/build.gradle +++ b/build.gradle @@ -26,6 +26,7 @@ plugins { configure(allprojects - project(':kvision-modules')) { repositories { jcenter() + mavenCentral() maven { url = "https://dl.bintray.com/kotlin/kotlin-eap" } maven { url = 'https://kotlin.bintray.com/kotlinx' } maven { url = 'https://dl.bintray.com/gbaldeck/kotlin' } @@ -170,6 +171,7 @@ dokka { 'kvision-modules/kvision-datacontainer/src/main/kotlin', 'kvision-modules/kvision-dialog/src/main/kotlin', 'kvision-modules/kvision-redux/src/main/kotlin', + 'kvision-modules/kvision-redux-kotlin/src/main/kotlin', 'kvision-modules/kvision-moment/src/main/kotlin', 'kvision-modules/kvision-tabulator/src/main/kotlin', 'kvision-modules/kvision-pace/src/main/kotlin', diff --git a/gradle.properties b/gradle.properties index 9be7c906..9b1dfa97 100644 --- a/gradle.properties +++ b/gradle.properties @@ -21,3 +21,5 @@ navigoKotlinVersion=0.0.3 kotlinObservableVersion=0.0.4 nodeKtVersion=0.1.0 kotlinReduxVersion=4.0.0-pre.77-kotlin-1.3.41 +reduxKotlinVersion=0.2.6 +reduxKotlinThunkVersion=0.2.8 diff --git a/kvision-modules/kvision-redux-kotlin/build.gradle b/kvision-modules/kvision-redux-kotlin/build.gradle new file mode 100644 index 00000000..78bfda21 --- /dev/null +++ b/kvision-modules/kvision-redux-kotlin/build.gradle @@ -0,0 +1,17 @@ +apply from: "../shared.gradle" + +dependencies { + compile ("org.reduxkotlin:redux-kotlin-js:$reduxKotlinVersion") + compile ("org.reduxkotlin:redux-kotlin-thunk-js:$reduxKotlinThunkVersion") +} + +kotlinFrontend { + + npm { + devDependency("karma", "3.1.4") + devDependency("karma-chrome-launcher", "2.2.0") + devDependency("karma-webpack", "3.0.5") + devDependency("qunit", "2.8.0") + } + +} diff --git a/kvision-modules/kvision-redux-kotlin/package.json.d/project.info b/kvision-modules/kvision-redux-kotlin/package.json.d/project.info new file mode 100644 index 00000000..d36f4db0 --- /dev/null +++ b/kvision-modules/kvision-redux-kotlin/package.json.d/project.info @@ -0,0 +1,3 @@ +{ + "description": "KVision Redux Kotlin module" +} diff --git a/kvision-modules/kvision-redux-kotlin/src/main/kotlin/pl/treksoft/kvision/redux/ReduxStore.kt b/kvision-modules/kvision-redux-kotlin/src/main/kotlin/pl/treksoft/kvision/redux/ReduxStore.kt new file mode 100644 index 00000000..58cf86c6 --- /dev/null +++ b/kvision-modules/kvision-redux-kotlin/src/main/kotlin/pl/treksoft/kvision/redux/ReduxStore.kt @@ -0,0 +1,110 @@ +/* + * 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.redux + +import org.reduxkotlin.ActionTypes +import org.reduxkotlin.Middleware +import org.reduxkotlin.Store +import org.reduxkotlin.applyMiddleware +import org.reduxkotlin.createStore +import org.reduxkotlin.createThunk +import org.reduxkotlin.createThunkMiddleware + +interface RAction +typealias ReducerFun<S, A> = (S, A) -> S +typealias Dispatch<A> = (A) -> Unit +typealias GetState<S> = () -> S +typealias ActionCreator<A, S> = (Dispatch<A>, GetState<S>) -> Unit + +/** + * An inline helper function for creating Redux store. + * + * @param reducer a reducer function + * @param initialState an initial state + * @param middlewares a list of optional Redux JS middlewares + */ +fun <S : Any, A : RAction> createReduxStore( + reducer: ReducerFun<S, A>, + initialState: S, + vararg middlewares: Middleware<S> +): ReduxStore<S, A> { + @Suppress("SpreadOperator") + return ReduxStore(reducer, initialState, *middlewares) +} + +/** + * A class implementing redux pattern backed by the Redux Kotlin library. + * + * @constructor Creates a Redux store with given reducer function and initial state. + * @param S redux state type + * @param A redux action type + * @param reducer a reducer function + * @param initialState an initial state + * @param middlewares a list of optional Redux Kotlin middlewares + */ +class ReduxStore<S : Any, A : RAction>( + reducer: ReducerFun<S, A>, + initialState: S, + vararg middlewares: Middleware<S> +) { + @Suppress("UNCHECKED_CAST") + private val store: Store<S> = createStore({ s: S, a: Any -> + if (a == ActionTypes.INIT || a == ActionTypes.REPLACE) { + s + } else { + reducer(s, a as A) + } + }, initialState, applyMiddleware(createThunkMiddleware(), *middlewares)) + + /** + * Returns the current state. + */ + fun getState(): S { + @Suppress("UNCHECKED_CAST") + return store.getState() + } + + /** + * Dispatches a synchronous action object. + */ + fun dispatch(action: A) { + store.dispatch(action) + } + + /** + * Dispatches an asynchronous action function. + */ + fun dispatch(actionCreator: ActionCreator<A, S>) { + @Suppress("UNCHECKED_CAST") + val thunk = createThunk<S> { dispatch, getState, _ -> actionCreator(dispatch as ((A) -> Unit), getState) } + store.dispatch(thunk) + } + + /** + * Subscribes a client for the change state notifications. + */ + fun subscribe(listener: (S) -> Unit): () -> Unit { + return store.subscribe { + listener(getState()) + } + } +} diff --git a/kvision-modules/kvision-redux-kotlin/src/main/kotlin/pl/treksoft/kvision/redux/StateBinding.kt b/kvision-modules/kvision-redux-kotlin/src/main/kotlin/pl/treksoft/kvision/redux/StateBinding.kt new file mode 100644 index 00000000..a980a79a --- /dev/null +++ b/kvision-modules/kvision-redux-kotlin/src/main/kotlin/pl/treksoft/kvision/redux/StateBinding.kt @@ -0,0 +1,108 @@ +/* + * 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.redux + +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.core.Widget + +/** + * A class which binds the redux store with the given container. + * + * @constructor Creates StateBinding which binds the redux store with the given container. + * @param S redux state type + * @param A redux action type + * @param CONT container type + * @param store a redux store + * @param container a container + * @param factory a function which re-creates the view based on the given state + */ +class StateBinding<S : Any, A : RAction, CONT : Container, CONTENT>( + store: ReduxStore<S, A>, + private val container: CONT, + private val factory: (CONT.(S) -> CONTENT) +) : Widget(setOf()) { + + init { + update(store.getState()) + store.subscribe { update(it) } + } + + private var updateState: ((S, CONTENT) -> Unit)? = null + private var content: CONTENT? = null + + /** + * Updates view from the current state. + */ + @Suppress("ComplexMethod") + fun update(state: S) { + singleRender { + if (updateState == null || content == null) { + container.removeAll() + container.add(this) + content = container.factory(state) + } else { + content?.let { + updateState?.invoke(state, it) + } + } + } + } + + private fun setUpdateState(updateState: (S, CONTENT) -> Unit) { + this.updateState = updateState + } + + companion object { + /** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ + fun <S : Any, A : RAction, CONT : Container> CONT.stateBinding( + store: ReduxStore<S, A>, + factory: (CONT.(S) -> Unit) + ): StateBinding<S, A, CONT, Unit> { + return StateBinding(store, this, factory) + } + + /** + * DSL builder extension function for updateable redux content. + * + * It takes the same parameters as the constructor of the built component. + */ + fun <S : Any, A : RAction, CONT : Container, CONTENT> CONT.stateUpdate( + store: ReduxStore<S, A>, + factory: (CONT.(S) -> CONTENT) + ): Updateable<S, CONTENT> { + return Updateable(StateBinding(store, this, factory)::setUpdateState) + } + } +} + +/** + * A helper class for updateable redux content. + */ +class Updateable<S : Any, CONTENT>(private val setUpdateState: ((S, CONTENT) -> Unit) -> Unit) { + infix fun updateWith(updateState: (S, CONTENT) -> Unit) { + setUpdateState(updateState) + } +} diff --git a/kvision-modules/kvision-redux-kotlin/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt b/kvision-modules/kvision-redux-kotlin/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt new file mode 100644 index 00000000..13c8531b --- /dev/null +++ b/kvision-modules/kvision-redux-kotlin/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.shutdown() + } + + 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", fixed = true) + 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-redux-kotlin/src/test/kotlin/test/pl/treksoft/kvision/redux/ReduxStoreSpec.kt b/kvision-modules/kvision-redux-kotlin/src/test/kotlin/test/pl/treksoft/kvision/redux/ReduxStoreSpec.kt new file mode 100644 index 00000000..b45eb9dd --- /dev/null +++ b/kvision-modules/kvision-redux-kotlin/src/test/kotlin/test/pl/treksoft/kvision/redux/ReduxStoreSpec.kt @@ -0,0 +1,82 @@ +/* + * 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.redux + +import pl.treksoft.kvision.redux.createReduxStore +import redux.RAction +import test.pl.treksoft.kvision.SimpleSpec +import kotlin.test.Test +import kotlin.test.assertEquals + +data class TestState(val counter: Int, val values: List<Int>) + +sealed class TestAction : RAction { + object Inc : TestAction() + object Dec : TestAction() +} + +fun testReducer(state: TestState, action: TestAction): TestState = when (action) { + is TestAction.Inc -> { + state.copy(counter = state.counter + 1, values = state.values + state.counter) + } + is TestAction.Dec -> { + state.copy(counter = state.counter - 1, values = state.values + state.counter) + } +} + +class ReduxStoreSpec : SimpleSpec { + + @Test + fun getState() { + run { + val store = createReduxStore(::testReducer, TestState(10, listOf())) + assertEquals(TestState(10, listOf()), store.getState()) + } + } + + @Test + fun dispatch() { + run { + val store = createReduxStore(::testReducer, TestState(10, listOf())) + store.dispatch(TestAction.Inc) + store.dispatch(TestAction.Inc) + store.dispatch(TestAction.Inc) + store.dispatch(TestAction.Dec) + store.dispatch(TestAction.Dec) + assertEquals(TestState(11, listOf(10, 11, 12, 13, 12)), store.getState()) + } + } + + @Test + fun subscribe() { + run { + var counter = 0 + val store = createReduxStore(::testReducer, TestState(10, listOf())) + store.subscribe { + counter++ + } + store.dispatch(TestAction.Inc) + store.dispatch(TestAction.Dec) + assertEquals(2, counter) + } + } +} diff --git a/kvision-modules/kvision-redux-kotlin/src/test/kotlin/test/pl/treksoft/kvision/redux/StateBindingSpec.kt b/kvision-modules/kvision-redux-kotlin/src/test/kotlin/test/pl/treksoft/kvision/redux/StateBindingSpec.kt new file mode 100644 index 00000000..ec32d0d6 --- /dev/null +++ b/kvision-modules/kvision-redux-kotlin/src/test/kotlin/test/pl/treksoft/kvision/redux/StateBindingSpec.kt @@ -0,0 +1,107 @@ +/* + * 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.redux + +import pl.treksoft.kvision.html.Div.Companion.div +import pl.treksoft.kvision.panel.Root +import pl.treksoft.kvision.panel.SimplePanel +import pl.treksoft.kvision.redux.StateBinding.Companion.stateBinding +import pl.treksoft.kvision.redux.StateBinding.Companion.stateUpdate +import pl.treksoft.kvision.redux.createReduxStore +import redux.RAction +import test.pl.treksoft.kvision.DomSpec +import kotlin.browser.document +import kotlin.test.Test + +data class State(val counter: Int) + +sealed class StateAction : RAction { + object Inc : StateAction() + object Dec : StateAction() +} + +fun stateReducer(state: State, action: StateAction): State = when (action) { + is StateAction.Inc -> { + state.copy(counter = state.counter + 1) + } + is StateAction.Dec -> { + state.copy(counter = state.counter - 1) + } +} + +class StateBindingSpec : DomSpec { + + @Test + fun stateBinding() { + run { + val root = Root("test", fixed = true) + val store = createReduxStore(::stateReducer, State(10)) + + val container = SimplePanel() + container.stateBinding(store) { state -> + div("${state.counter}") + } + root.add(container) + val element = document.getElementById("test") + assertEqualsHtml( + "<div><div></div><div>10</div></div>", + element?.innerHTML, + "Should render initial state of the container" + ) + store.dispatch(StateAction.Inc) + assertEqualsHtml( + "<div><div></div><div>11</div></div>", + element?.innerHTML, + "Should render changed state of the container" + ) + } + } + + @Test + fun stateUpdate() { + run { + val root = Root("test", fixed = true) + val store = createReduxStore(::stateReducer, State(10)) + + val container = SimplePanel() + container.stateUpdate(store) { state -> + div("${state.counter}") + } updateWith { state, d -> + d.content = "${state.counter}" + } + root.add(container) + val element = document.getElementById("test") + assertEqualsHtml( + "<div><div></div><div>10</div></div>", + element?.innerHTML, + "Should render initial state of the container" + ) + store.dispatch(StateAction.Inc) + assertEqualsHtml( + "<div><div></div><div>11</div></div>", + element?.innerHTML, + "Should render changed state of the container" + ) + } + } + +} diff --git a/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/ReduxStore.kt b/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/ReduxStore.kt index bfe7bc50..8cb1540d 100644 --- a/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/ReduxStore.kt +++ b/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/ReduxStore.kt @@ -22,12 +22,12 @@ package pl.treksoft.kvision.redux import pl.treksoft.kvision.KVManagerRedux -import redux.RAction import redux.Reducer import redux.Store import redux.WrapperAction import redux.rEnhancer +typealias RAction = redux.RAction typealias Dispatch<A> = (A) -> WrapperAction typealias GetState<S> = () -> S typealias ActionCreator<A, S> = (Dispatch<A>, GetState<S>) -> Unit diff --git a/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/StateBinding.kt b/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/StateBinding.kt index 383e734e..a980a79a 100644 --- a/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/StateBinding.kt +++ b/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/StateBinding.kt @@ -23,7 +23,6 @@ package pl.treksoft.kvision.redux import pl.treksoft.kvision.core.Container import pl.treksoft.kvision.core.Widget -import redux.RAction /** * A class which binds the redux store with the given container. diff --git a/settings.gradle b/settings.gradle index c3be4fc2..39b26428 100644 --- a/settings.gradle +++ b/settings.gradle @@ -15,6 +15,7 @@ include 'kvision-modules:kvision-base', 'kvision-modules:kvision-datacontainer', 'kvision-modules:kvision-dialog', 'kvision-modules:kvision-redux', + 'kvision-modules:kvision-redux-kotlin', 'kvision-modules:kvision-tabulator', 'kvision-modules:kvision-moment', 'kvision-modules:kvision-pace', |