diff options
Diffstat (limited to 'kvision-modules/kvision-redux')
8 files changed, 553 insertions, 0 deletions
diff --git a/kvision-modules/kvision-redux/build.gradle b/kvision-modules/kvision-redux/build.gradle new file mode 100644 index 00000000..1b288ad2 --- /dev/null +++ b/kvision-modules/kvision-redux/build.gradle @@ -0,0 +1,19 @@ +apply from: "../shared.gradle" + +dependencies { + compile ("org.jetbrains:kotlin-redux:$kotlinReduxVersion") { + exclude group: "org.jetbrains.kotlinx", module: "kotlinx-html-js" + } +} + +kotlinFrontend { + + npm { + dependency("redux", "4.0.0") + dependency("redux-thunk", "2.3.0") + devDependency("karma", "3.1.4") + devDependency("karma-chrome-launcher", "2.2.0") + devDependency("qunit", "2.8.0") + } + +} diff --git a/kvision-modules/kvision-redux/package.json.d/project.info b/kvision-modules/kvision-redux/package.json.d/project.info new file mode 100644 index 00000000..f4189f6f --- /dev/null +++ b/kvision-modules/kvision-redux/package.json.d/project.info @@ -0,0 +1,3 @@ +{ + "description": "KVision Redux module" +} diff --git a/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/KVManagerRedux.kt b/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/KVManagerRedux.kt new file mode 100644 index 00000000..4b51ff19 --- /dev/null +++ b/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/KVManagerRedux.kt @@ -0,0 +1,69 @@ +/* + * 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 + +import redux.Action +import redux.Enhancer +import redux.Middleware +import redux.Reducer +import redux.Store + +internal val kVManagerReduxInit = KVManagerRedux.init() + +/** + * Internal singleton object which initializes and configures KVision Redux module. + */ +@Suppress("EmptyCatchBlock", "TooGenericExceptionCaught") +internal object KVManagerRedux { + fun init() {} + + private val redux = try { + require("redux/dist/redux.min.js") + } catch (e: Throwable) { + } + internal val reduxThunk = try { + require("redux-thunk/dist/redux-thunk.min.js").default + } catch (e: Throwable) { + } + + @Suppress("UnsafeCastFromDynamic") + internal fun <S, A, R> createStore( + reducer: Reducer<S, A>, + preloadedState: S, + enhancer: Enhancer<S, Action, Action, A, R> + ): Store<S, A, R> { + return redux.createStore(reducer, preloadedState, enhancer) + } + + @Suppress("UnsafeCastFromDynamic") + internal fun <S, A1, R1, A2, R2> applyMiddleware( + vararg middlewares: + Middleware<S, A1, R1, A2, R2> + ): Enhancer<S, A1, R1, A2, R2> { + return redux.applyMiddleware.apply(null, middlewares) + } + + @Suppress("UnsafeCastFromDynamic") + internal fun <A, T1, R> compose(function1: (T1) -> R, function2: (A) -> T1): (A) -> R { + return redux.compose(function1, function2) + } +} 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 new file mode 100644 index 00000000..4c4f5cc5 --- /dev/null +++ b/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/ReduxStore.kt @@ -0,0 +1,124 @@ +/* + * 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 kotlinx.serialization.ImplicitReflectionSerializer +import kotlinx.serialization.KSerializer +import kotlinx.serialization.serializer +import pl.treksoft.kvision.KVManagerRedux +import pl.treksoft.kvision.utils.JSON +import redux.RAction +import redux.Reducer +import redux.Store +import redux.WrapperAction +import redux.rEnhancer + +typealias Dispatch<A> = (A) -> WrapperAction +typealias GetState<S> = () -> S + +/** + * An inline helper function for creating Redux store. + * + * @param reducer a reducer function + * @param state an initial state + * @param middlewares a list of optional Redux JS middlewares + */ +@UseExperimental(ImplicitReflectionSerializer::class) +inline fun <reified S : Any, A : RAction> createReduxStore( + noinline reducer: Reducer<S, A>, + initialState: S, + vararg middlewares: dynamic +): ReduxStore<S, A> { + @Suppress("SpreadOperator") + return ReduxStore(reducer, initialState, S::class.serializer(), *middlewares) +} + +/** + * A class implementing redux pattern backed by the original Redux JS library. + * It requires @Serializable state. + * + * @constructor Creates a Redux store with given reducer function and initial state. + * @param S redux state type (@Serializable) + * @param A redux action type + * @param reducer a reducer function + * @param state an initial state + * @param stateSerializer a serializer for the state type + * @param middlewares a list of optional Redux JS middlewares + */ +class ReduxStore<S : Any, A : RAction>( + reducer: Reducer<S, A>, + initialState: S, + val stateSerializer: KSerializer<S>, + vararg middlewares: dynamic +) { + private val store: Store<String, dynamic, WrapperAction> + + init { + @Suppress("UnsafeCastFromDynamic") + store = KVManagerRedux.createStore( + { s: String, a: RAction -> + @Suppress("UnsafeCastFromDynamic") + if (a == undefined || (a.asDynamic().type is String && a.asDynamic().type.startsWith("@@"))) { + s + } else { + @Suppress("UNCHECKED_CAST") + JSON.plain.stringify(stateSerializer, reducer(JSON.plain.parse(stateSerializer, s), a as A)) + } + }, + JSON.plain.stringify(stateSerializer, initialState), + @Suppress("SpreadOperator") + KVManagerRedux.compose(KVManagerRedux.applyMiddleware(KVManagerRedux.reduxThunk, *middlewares), rEnhancer()) + ) + } + + /** + * Returns the current state. + */ + fun getState(): S { + return JSON.plain.parse(stateSerializer, store.getState()) + } + + /** + * Dispatches a synchronous action object. + */ + fun dispatch(action: A): WrapperAction { + return store.dispatch(action) + } + + /** + * Dispatches an asynchronous action function. + */ + fun dispatch(action: (Dispatch<A>, GetState<S>) -> Unit): WrapperAction { + return store.dispatch({ d: Dispatch<A>, g: GetState<String> -> + action(d, { JSON.plain.parse(stateSerializer, g()) }) + }) + } + + /** + * 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/src/main/kotlin/pl/treksoft/kvision/redux/StateBinding.kt b/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/StateBinding.kt new file mode 100644 index 00000000..55fcdb34 --- /dev/null +++ b/kvision-modules/kvision-redux/src/main/kotlin/pl/treksoft/kvision/redux/StateBinding.kt @@ -0,0 +1,76 @@ +/* + * 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 +import redux.RAction + +/** + * 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>( + store: ReduxStore<S, A>, + private val container: CONT, + private val factory: (CONT.(S) -> Unit) +) : Widget(setOf()) { + + init { + container.add(this) + container.factory(store.getState()) + store.subscribe { update(it) } + } + + /** + * Updates view from the current state. + */ + @Suppress("ComplexMethod") + fun update(state: S) { + singleRender { + container.removeAll() + container.add(this) + container.factory(state) + } + } + + 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> { + return StateBinding(store, this, factory) + } + } +} diff --git a/kvision-modules/kvision-redux/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt b/kvision-modules/kvision-redux/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt new file mode 100644 index 00000000..9d86766c --- /dev/null +++ b/kvision-modules/kvision-redux/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt @@ -0,0 +1,99 @@ +/* + * 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() + } + + 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", 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/src/test/kotlin/test/pl/treksoft/kvision/redux/ReduxStoreSpec.kt b/kvision-modules/kvision-redux/src/test/kotlin/test/pl/treksoft/kvision/redux/ReduxStoreSpec.kt new file mode 100644 index 00000000..3be83556 --- /dev/null +++ b/kvision-modules/kvision-redux/src/test/kotlin/test/pl/treksoft/kvision/redux/ReduxStoreSpec.kt @@ -0,0 +1,83 @@ +/* + * 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 kotlinx.serialization.Serializable +import pl.treksoft.kvision.redux.createReduxStore +import redux.RAction +import test.pl.treksoft.kvision.SimpleSpec +import kotlin.test.Test +import kotlin.test.assertEquals + +@Serializable +data class TestState(val counter: 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) + } + is TestAction.Dec -> { + state.copy(counter = state.counter - 1) + } +} + +class ReduxStoreSpec : SimpleSpec { + + @Test + fun getState() { + run { + val store = createReduxStore(::testReducer, TestState(10)) + assertEquals(TestState(10), store.getState()) + } + } + + @Test + fun dispatch() { + run { + val store = createReduxStore(::testReducer, TestState(10)) + store.dispatch(TestAction.Inc) + store.dispatch(TestAction.Inc) + store.dispatch(TestAction.Inc) + store.dispatch(TestAction.Dec) + assertEquals(TestState(12), store.getState()) + } + } + + @Test + fun subscribe() { + run { + var counter = 0 + val store = createReduxStore(::testReducer, TestState(10)) + store.subscribe { + counter++ + } + store.dispatch(TestAction.Inc) + store.dispatch(TestAction.Dec) + assertEquals(2, counter) + } + } +} diff --git a/kvision-modules/kvision-redux/src/test/kotlin/test/pl/treksoft/kvision/redux/StateBindingSpec.kt b/kvision-modules/kvision-redux/src/test/kotlin/test/pl/treksoft/kvision/redux/StateBindingSpec.kt new file mode 100644 index 00000000..1da16e55 --- /dev/null +++ b/kvision-modules/kvision-redux/src/test/kotlin/test/pl/treksoft/kvision/redux/StateBindingSpec.kt @@ -0,0 +1,80 @@ +/* + * 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 kotlinx.serialization.Serializable +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.createReduxStore +import redux.RAction +import test.pl.treksoft.kvision.DomSpec +import kotlin.browser.document +import kotlin.test.Test + +@Serializable +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", 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" + ) + } + } + +}
\ No newline at end of file |