TodoMVC example

30 files changed, 1986 insertions, 0 deletions

diff --git a/examples/todomvc/.gitignore b/examples/todomvc/.gitignore
new file mode 100644
index 00000000..4d615936
--- /dev/null
+++ b/examples/todomvc/.gitignore
@@ -0,0 +1,4 @@
+.*/
+build/
+out/
+*.iml
\ No newline at end of file
diff --git a/examples/todomvc/build.gradle b/examples/todomvc/build.gradle
new file mode 100644
index 00000000..3087c146
--- /dev/null
+++ b/examples/todomvc/build.gradle
@@ -0,0 +1,94 @@
+buildscript {
+    ext.kotlin_version = '1.2.21'
+    ext.production = (findProperty('prod') ?: 'false') == 'true'
+    ext.npmdeps = new URL("file:///home/rjaros/git/kvision/npm.dependencies").getText()
+
+    repositories {
+        jcenter()
+        maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }
+        maven { url "https://plugins.gradle.org/m2/" }
+    }
+
+    dependencies {
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+        classpath "org.jetbrains.kotlin:kotlin-frontend-plugin:0.0.26"
+        classpath "gradle.plugin.io.gitlab.arturbosch.detekt:detekt-gradle-plugin:1.0.0.RC6-2"
+    }
+}
+
+apply plugin: 'kotlin2js'
+apply plugin: 'org.jetbrains.kotlin.frontend'
+apply plugin: "io.gitlab.arturbosch.detekt"
+
+repositories {
+    jcenter()
+    maven { url = 'https://dl.bintray.com/gbaldeck/kotlin' }
+    maven { url = 'https://dl.bintray.com/rjaros/kotlin' }
+    maven {
+	url "file:///home/rjaros/kotlin/mvn/"
+    }
+}
+
+dependencies {
+    compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
+    compile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version" // for now only compile configuration is supported
+    compile "pl.treksoft:kvision:0.0.1"
+}
+
+kotlinFrontend {
+    npm {
+        npmdeps.eachLine { line ->
+            def (name, version) = line.tokenize(" ")
+            dependency(name, version)
+        }
+        dependency("todomvc-app-css", "^2.0.0")
+        dependency("todomvc-common", "^1.0.0")
+        devDependency("karma")
+    }
+
+    webpackBundle {
+        bundleName = "main"
+        contentPath = file('src/main/web')
+    }
+
+    define "PRODUCTION", production
+
+}
+
+detekt {
+    version = "1.0.0.RC6-2"
+    profile("main") {
+        input = "$projectDir/src/main/kotlin"
+        config = "$projectDir/detekt.yml"
+        filters = ".*test.*,.*/resources/.*,.*/tmp/.*"
+    }
+}
+
+compileKotlin2Js {
+    kotlinOptions.metaInfo = true
+    kotlinOptions.outputFile = "$project.buildDir.path/js/${project.name}.js"
+    kotlinOptions.sourceMap = !production
+    kotlinOptions.moduleKind = 'commonjs'
+}
+
+compileTestKotlin2Js {
+    kotlinOptions.metaInfo = true
+    kotlinOptions.outputFile = "$project.buildDir.path/js-tests/${project.name}-tests.js"
+    kotlinOptions.sourceMap = !production
+    kotlinOptions.moduleKind = 'commonjs'
+}
+
+task copyResources(type: Copy) {
+    from "src/main/resources"
+    into file(buildDir.path + "/js")
+}
+
+task copyResourcesForTests(type: Copy) {
+    from "src/main/resources"
+    into file(buildDir.path + "/js-tests/")
+}
+
+afterEvaluate {
+    tasks.getByName("webpack-bundle") { dependsOn(copyResources) }
+    tasks.getByName("webpack-run") { dependsOn(copyResources, copyResourcesForTests) }
+}
diff --git a/examples/todomvc/detekt.yml b/examples/todomvc/detekt.yml
new file mode 100644
index 00000000..a6fdea75
--- /dev/null
+++ b/examples/todomvc/detekt.yml
@@ -0,0 +1,292 @@
+autoCorrect: true
+failFast: false
+
+build:
+  warningThreshold: 5
+  failThreshold: 10
+  weights:
+    complexity: 2
+    formatting: 1
+    LongParameterList: 1
+    comments: 1
+
+processors:
+  active: true
+  exclude:
+  # - 'FunctionCountProcessor'
+  # - 'PropertyCountProcessor'
+  # - 'ClassCountProcessor'
+  # - 'PackageCountProcessor'
+  # - 'KtFileCountProcessor'
+
+console-reports:
+  active: true
+  exclude:
+  #  - 'ProjectStatisticsReport'
+  #  - 'ComplexityReport'
+  #  - 'NotificationReport'
+  #  - 'FindingsReport'
+  #  - 'BuildFailureReport'
+
+output-reports:
+  active: true
+  exclude:
+  #  - 'PlainOutputReport'
+  #  - 'XmlOutputReport'
+
+potential-bugs:
+  active: true
+  DuplicateCaseInWhenExpression:
+    active: true
+  EqualsAlwaysReturnsTrueOrFalse:
+    active: false
+  EqualsWithHashCodeExist:
+    active: true
+  WrongEqualsTypeParameter:
+    active: false
+  ExplicitGarbageCollectionCall:
+    active: true
+  UnreachableCode:
+    active: true
+  LateinitUsage:
+    active: false
+  UnsafeCallOnNullableType:
+    active: false
+  UnsafeCast:
+    active: false
+  UselessPostfixExpression:
+    active: false
+
+performance:
+  active: true
+  ForEachOnRange:
+    active: true
+  SpreadOperator:
+    active: true
+  UnnecessaryTemporaryInstantiation:
+    active: true
+
+exceptions:
+  active: true
+  TooGenericExceptionCatched:
+    active: true
+    exceptions:
+      - ArrayIndexOutOfBoundsException
+      - Error
+      - Exception
+      - IllegalMonitorStateException
+      - IndexOutOfBoundsException
+      - NullPointerException
+      - RuntimeException
+  TooGenericExceptionThrown:
+    active: true
+    exceptions:
+      - Throwable
+      - ThrowError
+      - ThrowException
+      - ThrowNullPointerException
+      - ThrowRuntimeException
+      - ThrowThrowable
+
+empty-blocks:
+  active: true
+  EmptyCatchBlock:
+    active: true
+  EmptyClassBlock:
+    active: true
+  EmptyDefaultConstructor:
+    active: true
+  EmptyDoWhileBlock:
+    active: true
+  EmptyElseBlock:
+    active: true
+  EmptyFinallyBlock:
+    active: true
+  EmptyForBlock:
+    active: true
+  EmptyFunctionBlock:
+    active: true
+  EmptyIfBlock:
+    active: true
+  EmptyInitBlock:
+    active: true
+  EmptySecondaryConstructor:
+    active: true
+  EmptyWhenBlock:
+    active: true
+  EmptyWhileBlock:
+    active: true
+
+complexity:
+  active: true
+  LongMethod:
+    threshold: 20
+  LongParameterList:
+    threshold: 5
+  LargeClass:
+    threshold: 150
+  ComplexMethod:
+    threshold: 10
+  TooManyFunctions:
+    threshold: 10
+  ComplexCondition:
+    threshold: 3
+  LabeledExpression:
+    active: false
+  StringLiteralDuplication:
+    active: false
+    threshold: 2
+    ignoreAnnotation: true
+    excludeStringsWithLessThan5Characters: true
+    ignoreStringsRegex: '$^'
+
+code-smell:
+  active: true
+  FeatureEnvy:
+    threshold: 0.5
+    weight: 0.45
+    base: 0.5
+
+formatting:
+  active: true
+  useTabs: true
+  Indentation:
+    active: false
+    indentSize: 4
+  ConsecutiveBlankLines:
+    active: true
+    autoCorrect: true
+  MultipleSpaces:
+    active: true
+    autoCorrect: true
+  SpacingAfterComma:
+    active: true
+    autoCorrect: true
+  SpacingAfterKeyword:
+    active: true
+    autoCorrect: true
+  SpacingAroundColon:
+    active: true
+    autoCorrect: true
+  SpacingAroundCurlyBraces:
+    active: true
+    autoCorrect: true
+  SpacingAroundOperator:
+    active: true
+    autoCorrect: true
+  TrailingSpaces:
+    active: true
+    autoCorrect: true
+  UnusedImports:
+    active: true
+    autoCorrect: true
+  OptionalSemicolon:
+    active: true
+    autoCorrect: true
+  OptionalUnit:
+    active: true
+    autoCorrect: true
+  ExpressionBodySyntax:
+    active: false
+    autoCorrect: false
+  ExpressionBodySyntaxLineBreaks:
+    active: false
+    autoCorrect: false
+  OptionalReturnKeyword:
+    active: true
+    autoCorrect: false
+
+style:
+  active: true
+  ReturnCount:
+    active: true
+    max: 2
+  NewLineAtEndOfFile:
+    active: true
+  OptionalAbstractKeyword:
+    active: true
+  OptionalWhenBraces:
+    active: false
+  EqualsNullCall:
+    active: false
+  ForbiddenComment:
+    active: true
+    values: 'TODO:,FIXME:,STOPSHIP:'
+  ForbiddenImport:
+    active: false
+    imports: ''
+  ModifierOrder:
+    active: true
+  MagicNumber:
+    active: true
+    ignoreNumbers: '-1,0,1,2'
+    ignoreHashCodeFunction: false
+    ignorePropertyDeclaration: false
+    ignoreAnnotation: false
+  WildcardImport:
+    active: true
+  SafeCast:
+    active: true
+  MaxLineLength:
+    active: true
+    maxLineLength: 120
+    excludePackageStatements: false
+    excludeImportStatements: false
+  PackageNaming:
+    active: true
+    packagePattern: '^[a-z]+(\.[a-z][a-z0-9]*)*$'
+  ClassNaming:
+    active: true
+    classPattern: '[A-Z$][a-zA-Z$]*'
+  EnumNaming:
+    active: true
+    enumEntryPattern: '^[A-Z$][a-zA-Z_$]*$'
+  FunctionNaming :
+    active: true
+    functionPattern: '^[a-z$][a-zA-Z$0-9]*$'
+  FunctionMaxLength:
+    active: false
+    maximumFunctionNameLength: 30
+  FunctionMinLength:
+    active: false
+    minimumFunctionNameLength: 3
+  VariableNaming :
+    active: true
+    variablePattern: '^(_)?[a-z$][a-zA-Z$0-9]*$'
+  ConstantNaming :
+    active: true
+    constantPattern: '^([A-Z_]*|serialVersionUID)$'
+  VariableMaxLength:
+    active: false
+    maximumVariableNameLength: 30
+  VariableMinLength:
+    active: false
+    minimumVariableNameLength: 3
+  ProtectedMemberInFinalClass:
+    active: false
+  UnnecessaryParentheses:
+    active: false
+
+comments:
+  active: true
+  CommentOverPrivateMethod:
+    active: true
+  CommentOverPrivateProperty:
+    active: true
+  UndocumentedPublicClass:
+    active: false
+    searchInNestedClass: true
+    searchInInnerClass: true
+    searchInInnerObject: true
+    searchInInnerInterface: true
+  UndocumentedPublicFunction:
+    active: false
+
+# *experimental feature*
+# Migration rules can be defined in the same config file or a new one
+migration:
+  active: true
+  imports:
+    # your.package.Class: new.package.or.Class
+    # for example:
+    # io.gitlab.arturbosch.detekt.api.Rule: io.gitlab.arturbosch.detekt.rule.Rule
diff --git a/examples/todomvc/gradle.properties b/examples/todomvc/gradle.properties
new file mode 100644
index 00000000..4ac81290
--- /dev/null
+++ b/examples/todomvc/gradle.properties
@@ -0,0 +1,2 @@
+#org.gradle.jvmargs=-XX:+UnlockCommercialFeatures -XX:+FlightRecorder
+#org.gradle.debug=true
diff --git a/examples/todomvc/gradle/wrapper/gradle-wrapper.jar b/examples/todomvc/gradle/wrapper/gradle-wrapper.jar
new file mode 100644
index 00000000..09f1fecb
--- /dev/null
+++ b/examples/todomvc/gradle/wrapper/gradle-wrapper.jar
diff --git a/examples/todomvc/gradle/wrapper/gradle-wrapper.properties b/examples/todomvc/gradle/wrapper/gradle-wrapper.properties
new file mode 100644
index 00000000..9f53b3e5
--- /dev/null
+++ b/examples/todomvc/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,6 @@
+#Mon Jan 22 09:38:31 CET 2018
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.4.1-bin.zip
diff --git a/examples/todomvc/gradlew b/examples/todomvc/gradlew
new file mode 100755
index 00000000..cccdd3d5
--- /dev/null
+++ b/examples/todomvc/gradlew
@@ -0,0 +1,172 @@
+#!/usr/bin/env sh
+
+##############################################################################
+##
+##  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=""
+
+# 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, switch paths to Windows format before running java
+if $cygwin ; 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=$((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"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"
diff --git a/examples/todomvc/gradlew.bat b/examples/todomvc/gradlew.bat
new file mode 100644
index 00000000..f9553162
--- /dev/null
+++ b/examples/todomvc/gradlew.bat
@@ -0,0 +1,84 @@
+@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 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=
+
+@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 init
+
+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 init
+
+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
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+: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 %CMD_LINE_ARGS%
+
+: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/todomvc/package.json.d/project.info b/examples/todomvc/package.json.d/project.info
new file mode 100644
index 00000000..3c4d58fe
--- /dev/null
+++ b/examples/todomvc/package.json.d/project.info
@@ -0,0 +1,3 @@
+{
+    "description": "KVision TodoMVC"
+}
diff --git a/examples/todomvc/refresh.sh b/examples/todomvc/refresh.sh
new file mode 100755
index 00000000..2568701d
--- /dev/null
+++ b/examples/todomvc/refresh.sh
@@ -0,0 +1,26 @@
+./gradlew stop
+rm -rf build/bundle
+rm -rf build/js
+rm -rf build/js-tests
+rm -rf build/reports
+rm -rf build/resources
+rm -rf build/tmp
+rm -rf build/logs
+rm -rf build/package.json
+rm -rf build/package-lock.json
+rm -rf build/.modules.with.kotlin.txt
+rm -rf build/.modules.with.types.txt
+rm -rf build/.npmrc
+rm -rf build/.unpack.txt
+rm -rf build/kotlin
+rm -rf build/kotlin-build
+rm -rf build/*.js
+rm -rf build/node_modules/kotlin
+rm -rf build/node_modules/kotlin-test
+rm -rf build/node_modules/kvision
+rm -rf build/node_modules/navigo-kotlin
+rm -rf build/node_modules/jquery-kotlin
+rm -rf build/node_modules/snabbdom-kotlin
+rm -rf build/node_modules/kotlin-observable-js
+rm -rf build/node_modules_imported
+./gradlew -t run
diff --git a/examples/todomvc/settings.gradle b/examples/todomvc/settings.gradle
new file mode 100644
index 00000000..00861ee1
--- /dev/null
+++ b/examples/todomvc/settings.gradle
@@ -0,0 +1 @@
+rootProject.name = 'todomvc'
diff --git a/examples/todomvc/src/main/kotlin/com/example/Main.kt b/examples/todomvc/src/main/kotlin/com/example/Main.kt
new file mode 100644
index 00000000..d8894a4c
--- /dev/null
+++ b/examples/todomvc/src/main/kotlin/com/example/Main.kt
@@ -0,0 +1,40 @@
+package com.example
+
+import pl.treksoft.kvision.ApplicationBase
+import pl.treksoft.kvision.core.KVManager
+import pl.treksoft.kvision.module
+import kotlin.browser.document
+
+fun main(args: Array<String>) {
+    var application: ApplicationBase? = null
+
+    val state: dynamic = module.hot?.let { hot ->
+        hot.accept()
+
+        hot.dispose { data ->
+            data.appState = application?.dispose()
+            KVManager.shutdown()
+            application = null
+        }
+
+        hot.data
+    }
+
+    if (document.body != null) {
+        KVManager.start()
+        application = start(state)
+    } else {
+        KVManager.init()
+        application = null
+        document.addEventListener("DOMContentLoaded", { application = start(state) })
+    }
+}
+
+fun start(state: dynamic): ApplicationBase? {
+    if (document.getElementById("todomvc") == null) return null
+    val application = Todomvc()
+    @Suppress("UnsafeCastFromDynamic")
+    application.start(state?.appState ?: emptyMap())
+    return application
+}
+
diff --git a/examples/todomvc/src/main/kotlin/com/example/Todomvc.kt b/examples/todomvc/src/main/kotlin/com/example/Todomvc.kt
new file mode 100644
index 00000000..76d90716
--- /dev/null
+++ b/examples/todomvc/src/main/kotlin/com/example/Todomvc.kt
@@ -0,0 +1,242 @@
+package com.example
+
+import com.lightningkite.kotlin.observable.list.observableListOf
+import org.w3c.dom.get
+import org.w3c.dom.set
+import pl.treksoft.kvision.ApplicationBase
+import pl.treksoft.kvision.core.Root
+import pl.treksoft.kvision.data.DataComponent
+import pl.treksoft.kvision.data.DataContainer
+import pl.treksoft.kvision.form.FieldLabel
+import pl.treksoft.kvision.form.check.CHECKINPUTTYPE
+import pl.treksoft.kvision.form.check.CheckInput
+import pl.treksoft.kvision.form.text.TextInput
+import pl.treksoft.kvision.html.Button
+import pl.treksoft.kvision.html.LIST
+import pl.treksoft.kvision.html.Link
+import pl.treksoft.kvision.html.ListTag
+import pl.treksoft.kvision.html.TAG
+import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.routing.routing
+import kotlin.browser.localStorage
+
+const val ENTER_KEY = 13
+const val ESCAPE_KEY = 27
+
+class Todo(completed: Boolean, title: String, hidden: Boolean) : DataComponent() {
+    var completed: Boolean by obs(completed)
+    var title: String by obs(title)
+    var hidden: Boolean by obs(hidden)
+}
+
+enum class LISTMODE {
+    ALL,
+    ACTIVE,
+    COMPLETED
+}
+
+class Todomvc : ApplicationBase() {
+
+    private val model = observableListOf<Todo>()
+
+    private val checkAllInput = CheckInput(classes = setOf("toggle-all")).apply {
+        id = "toggle-all"
+        onClick {
+            val value = this.value
+            model.forEach { it.completed = value }
+        }
+    }
+    private val allLink = Link("All", "#!/", classes = setOf("selected"))
+    private val activeLink = Link("Active", "#!/active")
+    private val completedLink = Link("Completed", "#!/completed")
+    private val clearCompletedButton = Button("Clear completed", classes = setOf("clear-completed")).onClick {
+        model.filter { it.completed }.forEach { model.remove(it) }
+    }
+
+    private val countTag = Tag(TAG.STRONG, "0")
+    private val itemsLeftTag = Tag(TAG.SPAN, " items left", classes = setOf("todo-count")).apply {
+        add(countTag)
+    }
+    private var mode: LISTMODE = LISTMODE.ALL
+
+    private val header = genHeader()
+    private val main = genMain()
+    private val footer = genFooter()
+
+    override fun start(state: Map<String, Any>) {
+        val root = Root("todomvc")
+        val section = Tag(TAG.SECTION, classes = setOf("todoapp"))
+        section.add(this.header)
+        section.add(this.main)
+        section.add(this.footer)
+        root.add(section)
+        loadModel()
+        checkModel()
+        routing.on("/", { _ -> all() })
+            .on("/active", { _ -> active() })
+            .on("/completed", { _ -> completed() })
+            .resolve()
+    }
+
+    private fun loadModel() {
+        localStorage.get("todos-kvision")?.let {
+            JSON.parse<Array<dynamic>>(it).map { Todo(it.completed, it.title, false) }.forEach {
+                model.add(it)
+            }
+        }
+    }
+
+    private fun saveModel() {
+        val jsonString = model.map {
+            val array = listOf("title" to it.title, "completed" to it.completed).toTypedArray()
+            JSON.stringify(kotlin.js.json(*array))
+        }.toString()
+        localStorage.set("todos-kvision", jsonString)
+    }
+
+    private fun checkModel() {
+        val countActive = model.filter { !it.completed }.size
+        val countCompleted = model.filter { it.completed }.size
+        this.main.visible = model.isNotEmpty()
+        this.footer.visible = model.isNotEmpty()
+        this.countTag.text = countActive.toString()
+        this.itemsLeftTag.text = when (countActive) {
+            1 -> " item left"
+            else -> " items left"
+        }
+        this.checkAllInput.value = (countActive == 0)
+        this.clearCompletedButton.visible = countCompleted > 0
+        saveModel()
+    }
+
+    private fun all() {
+        this.mode = LISTMODE.ALL
+        this.allLink.addCssClass("selected")
+        this.activeLink.removeCssClass("selected")
+        this.completedLink.removeCssClass("selected")
+        this.model.forEach { it.hidden = false }
+    }
+
+    private fun active() {
+        this.mode = LISTMODE.ACTIVE
+        this.allLink.removeCssClass("selected")
+        this.activeLink.addCssClass("selected")
+        this.completedLink.removeCssClass("selected")
+        this.model.forEach { it.hidden = it.completed }
+    }
+
+    private fun completed() {
+        this.mode = LISTMODE.COMPLETED
+        this.allLink.removeCssClass("selected")
+        this.activeLink.removeCssClass("selected")
+        this.completedLink.addCssClass("selected")
+        this.model.forEach { it.hidden = !it.completed }
+    }
+
+    private fun genHeader(): Tag {
+        return Tag(TAG.HEADER, classes = setOf("header")).apply {
+            add(Tag(TAG.H1, "todos"))
+            add(TextInput(classes = setOf("new-todo")).apply {
+                placeholder = "What needs to be done?"
+                autofocus = true
+                setEventListener<TextInput> {
+                    keydown = { e ->
+                        if (e.keyCode == ENTER_KEY) {
+                            addTodo(self.value)
+                            self.value = null
+                        }
+                    }
+                }
+            })
+        }
+    }
+
+    private fun addTodo(value: String?) {
+        val v = value?.trim() ?: ""
+        if (v.isNotEmpty()) {
+            model.add(Todo(false, v, mode == LISTMODE.COMPLETED))
+        }
+    }
+
+    private fun editTodo(index: Int, value: String?) {
+        val v = value?.trim() ?: ""
+        if (v.isNotEmpty()) {
+            model[index].title = v
+        } else {
+            model.removeAt(index)
+        }
+    }
+
+    private fun genMain(): Tag {
+        return Tag(TAG.SECTION, classes = setOf("main")).apply {
+            add(checkAllInput)
+            add(FieldLabel("toggle-all", "Mark all as complete"))
+            add(DataContainer(model, { index ->
+                val li = Tag(TAG.LI)
+                li.apply {
+                    if (model[index].completed) addCssClass("completed")
+                    if (model[index].hidden) addCssClass("hidden")
+                    val edit = TextInput(classes = setOf("edit"))
+                    val view = Tag(TAG.DIV, classes = setOf("view")).apply {
+                        add(CheckInput(
+                            CHECKINPUTTYPE.CHECKBOX, model[index].completed, classes = setOf("toggle")
+                        ).onClick {
+                            model[index].completed = this.value
+                            model[index].hidden =
+                                    mode == LISTMODE.ACTIVE && this.value || mode == LISTMODE.COMPLETED && !this.value
+                        })
+                        add(Tag(TAG.LABEL, model[index].title).apply {
+                            setEventListener<Tag> {
+                                dblclick = {
+                                    li.getElementJQuery()?.addClass("editing")
+                                    edit.value = model[index].title
+                                    edit.getElementJQuery()?.focus()
+                                }
+                            }
+                        })
+                        add(Button("", classes = setOf("destroy")).onClick {
+                            model.removeAt(index)
+                        })
+                    }
+                    edit.setEventListener<TextInput> {
+                        blur = {
+                            if (li.getElementJQuery()?.hasClass("editing") == true) {
+                                li.getElementJQuery()?.removeClass("editing")
+                                editTodo(index, self.value)
+                            }
+                        }
+                        keydown = { e ->
+                            if (e.keyCode == ENTER_KEY) {
+                                li.getElementJQuery()?.removeClass("editing")
+                                editTodo(index, self.value)
+                            }
+                            if (e.keyCode == ESCAPE_KEY) {
+                                li.getElementJQuery()?.removeClass("editing")
+                            }
+                        }
+                    }
+                    add(view)
+                    add(edit)
+                }
+            }, Tag(TAG.UL, classes = setOf("todo-list"))).onUpdate {
+                checkModel()
+            })
+        }
+    }
+
+    private fun genFooter(): Tag {
+        return Tag(TAG.FOOTER, classes = setOf("footer")).apply {
+            add(itemsLeftTag)
+            add(ListTag(LIST.UL, classes = setOf("filters")).apply {
+                add(allLink)
+                add(activeLink)
+                add(completedLink)
+            })
+            add(clearCompletedButton)
+        }
+    }
+
+    override fun dispose(): Map<String, Any> {
+        return mapOf()
+    }
+}
diff --git a/examples/todomvc/src/main/web/index.html b/examples/todomvc/src/main/web/index.html
new file mode 100644
index 00000000..e5ba8812
--- /dev/null
+++ b/examples/todomvc/src/main/web/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>KVision • TodoMVC</title>
+    <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
+    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+</head>
+<body>
+<div id="todomvc"></div>
+<footer class="info">
+    <p>Double-click to edit a todo</p>
+    <p>Created by <a href="https://github.com/rjaros">Robert Jaros</a></p>
+    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+</footer>
+<!-- Scripts here. Don't remove ↓ -->
+<script src="node_modules/todomvc-common/base.js"></script>
+<script>var KV_NO_BOOTSTRAP_CSS = true;</script>
+<script src="main.bundle.js"></script>
+</body>
+</html>
diff --git a/examples/todomvc/src/main/web/node_modules/todomvc-app-css/index.css b/examples/todomvc/src/main/web/node_modules/todomvc-app-css/index.css
new file mode 100644
index 00000000..d8be205a
--- /dev/null
+++ b/examples/todomvc/src/main/web/node_modules/todomvc-app-css/index.css
@@ -0,0 +1,376 @@
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	font-weight: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	appearance: none;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #f5f5f5;
+	color: #4d4d4d;
+	min-width: 230px;
+	max-width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-weight: 300;
+}
+
+:focus {
+	outline: 0;
+}
+
+.hidden {
+	display: none;
+}
+
+.todoapp {
+	background: #fff;
+	margin: 130px 0 40px 0;
+	position: relative;
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp input::-moz-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp input::input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp h1 {
+	position: absolute;
+	top: -155px;
+	width: 100%;
+	font-size: 100px;
+	font-weight: 100;
+	text-align: center;
+	color: rgba(175, 47, 47, 0.15);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	font-weight: inherit;
+	line-height: 1.4em;
+	border: 0;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.003);
+	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px solid #e6e6e6;
+}
+
+.toggle-all {
+	text-align: center;
+	border: none; /* Mobile Safari */
+	opacity: 0;
+	position: absolute;
+}
+
+.toggle-all + label {
+	width: 60px;
+	height: 34px;
+	font-size: 0;
+	position: absolute;
+	top: -52px;
+	left: -13px;
+	-webkit-transform: rotate(90deg);
+	transform: rotate(90deg);
+}
+
+.toggle-all + label:before {
+	content: '❯';
+	font-size: 22px;
+	color: #e6e6e6;
+	padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked + label:before {
+	color: #737373;
+}
+
+.todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+	border-bottom: none;
+}
+
+.todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+.todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 12px 16px;
+	margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+	display: none;
+}
+
+.todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	appearance: none;
+}
+
+.todo-list li .toggle {
+	opacity: 0;
+}
+
+.todo-list li .toggle + label {
+	/*
+		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+	*/
+	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+	background-repeat: no-repeat;
+	background-position: center left;
+}
+
+.todo-list li .toggle:checked + label {
+	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+}
+
+.todo-list li label {
+	word-break: break-all;
+	padding: 15px 15px 15px 60px;
+	display: block;
+	line-height: 1.2;
+	transition: color 0.4s;
+}
+
+.todo-list li.completed label {
+	color: #d9d9d9;
+	text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 30px;
+	color: #cc9a9a;
+	margin-bottom: 11px;
+	transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+	color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+	content: '×';
+}
+
+.todo-list li:hover .destroy {
+	display: block;
+}
+
+.todo-list li .edit {
+	display: none;
+}
+
+.todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+.footer {
+	color: #777;
+	padding: 10px 15px;
+	height: 20px;
+	text-align: center;
+	border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 50px;
+	overflow: hidden;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+	            0 8px 0 -3px #f6f6f6,
+	            0 9px 1px -3px rgba(0, 0, 0, 0.2),
+	            0 16px 0 -6px #f6f6f6,
+	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+	float: left;
+	text-align: left;
+}
+
+.todo-count strong {
+	font-weight: 300;
+}
+
+.filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+.filters li {
+	display: inline;
+}
+
+.filters li a {
+	color: inherit;
+	margin: 3px;
+	padding: 3px 7px;
+	text-decoration: none;
+	border: 1px solid transparent;
+	border-radius: 3px;
+}
+
+.filters li a:hover {
+	border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li a.selected {
+	border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.clear-completed:hover {
+	text-decoration: underline;
+}
+
+.info {
+	margin: 65px auto 0;
+	color: #bfbfbf;
+	font-size: 10px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+	text-align: center;
+}
+
+.info p {
+	line-height: 1;
+}
+
+.info a {
+	color: inherit;
+	text-decoration: none;
+	font-weight: 400;
+}
+
+.info a:hover {
+	text-decoration: underline;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	.toggle-all,
+	.todo-list li .toggle {
+		background: none;
+	}
+
+	.todo-list li .toggle {
+		height: 40px;
+	}
+}
+
+@media (max-width: 430px) {
+	.footer {
+		height: 50px;
+	}
+
+	.filters {
+		bottom: 10px;
+	}
+}
diff --git a/examples/todomvc/src/main/web/node_modules/todomvc-app-css/package.json b/examples/todomvc/src/main/web/node_modules/todomvc-app-css/package.json
new file mode 100644
index 00000000..72831e7b
--- /dev/null
+++ b/examples/todomvc/src/main/web/node_modules/todomvc-app-css/package.json
@@ -0,0 +1,58 @@
+{
+  "_from": "todomvc-app-css@^2.0.0",
+  "_id": "todomvc-app-css@2.1.0",
+  "_inBundle": false,
+  "_integrity": "sha1-tvJxbTOa+i5feZNH0qSLBTliQqU=",
+  "_location": "/todomvc-app-css",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "range",
+    "registry": true,
+    "raw": "todomvc-app-css@^2.0.0",
+    "name": "todomvc-app-css",
+    "escapedName": "todomvc-app-css",
+    "rawSpec": "^2.0.0",
+    "saveSpec": null,
+    "fetchSpec": "^2.0.0"
+  },
+  "_requiredBy": [
+    "/"
+  ],
+  "_resolved": "https://registry.npmjs.org/todomvc-app-css/-/todomvc-app-css-2.1.0.tgz",
+  "_shasum": "b6f2716d339afa2e5f799347d2a48b05396242a5",
+  "_spec": "todomvc-app-css@^2.0.0",
+  "_where": "/home/rjaros/git/kvision/examples/todomvc/src/main/web",
+  "author": {
+    "name": "Sindre Sorhus",
+    "email": "sindresorhus@gmail.com",
+    "url": "sindresorhus.com"
+  },
+  "bugs": {
+    "url": "https://github.com/tastejs/todomvc-app-css/issues"
+  },
+  "bundleDependencies": false,
+  "deprecated": false,
+  "description": "CSS for TodoMVC apps",
+  "files": [
+    "index.css"
+  ],
+  "homepage": "https://github.com/tastejs/todomvc-app-css#readme",
+  "keywords": [
+    "todomvc",
+    "tastejs",
+    "app",
+    "todo",
+    "template",
+    "css",
+    "style",
+    "stylesheet"
+  ],
+  "license": "CC-BY-4.0",
+  "name": "todomvc-app-css",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tastejs/todomvc-app-css.git"
+  },
+  "style": "index.css",
+  "version": "2.1.0"
+}
diff --git a/examples/todomvc/src/main/web/node_modules/todomvc-app-css/readme.md b/examples/todomvc/src/main/web/node_modules/todomvc-app-css/readme.md
new file mode 100644
index 00000000..6ddbebf0
--- /dev/null
+++ b/examples/todomvc/src/main/web/node_modules/todomvc-app-css/readme.md
@@ -0,0 +1,28 @@
+# todomvc-app-css
+
+> CSS for TodoMVC apps
+
+![](screenshot.png)
+
+
+## Install
+
+
+```
+$ npm install --save todomvc-app-css
+```
+
+
+## Getting started
+
+```html
+<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+```
+
+See the [TodoMVC app template](https://github.com/tastejs/todomvc-app-template).
+
+
+
+## License
+
+<a rel="license" href="http://creativecommons.org/licenses/by/4.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/4.0/80x15.png" /></a><br />This <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" rel="dct:type">work</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://sindresorhus.com" property="cc:attributionName" rel="cc:attributionURL">Sindre Sorhus</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/deed.en_US">Creative Commons Attribution 4.0 International License</a>.
diff --git a/examples/todomvc/src/main/web/node_modules/todomvc-common/base.css b/examples/todomvc/src/main/web/node_modules/todomvc-common/base.css
new file mode 100644
index 00000000..da65968a
--- /dev/null
+++ b/examples/todomvc/src/main/web/node_modules/todomvc-common/base.css
@@ -0,0 +1,141 @@
+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #c5c5c5;
+	border-bottom: 1px dashed #f7f7f7;
+}
+
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+
+.learn h3 {
+	font-size: 24px;
+}
+
+.learn h4 {
+	font-size: 18px;
+}
+
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+
+.learn li {
+	line-height: 20px;
+}
+
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+#issue-count {
+	display: none;
+}
+
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+
+.quote p {
+	font-style: italic;
+}
+
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+
+.quote footer img {
+	border-radius: 3px;
+}
+
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+
+.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	transition-property: left;
+	transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+	.learn-bar {
+		width: auto;
+		padding-left: 300px;
+	}
+
+	.learn-bar > .learn {
+		left: 8px;
+	}
+}
diff --git a/examples/todomvc/src/main/web/node_modules/todomvc-common/base.js b/examples/todomvc/src/main/web/node_modules/todomvc-common/base.js
new file mode 100644
index 00000000..a56b5aac
--- /dev/null
+++ b/examples/todomvc/src/main/web/node_modules/todomvc-common/base.js
@@ -0,0 +1,249 @@
+/* global _ */
+(function () {
+	'use strict';
+
+	/* jshint ignore:start */
+	// Underscore's Template Module
+	// Courtesy of underscorejs.org
+	var _ = (function (_) {
+		_.defaults = function (object) {
+			if (!object) {
+				return object;
+			}
+			for (var argsIndex = 1, argsLength = arguments.length; argsIndex < argsLength; argsIndex++) {
+				var iterable = arguments[argsIndex];
+				if (iterable) {
+					for (var key in iterable) {
+						if (object[key] == null) {
+							object[key] = iterable[key];
+						}
+					}
+				}
+			}
+			return object;
+		};
+
+		// By default, Underscore uses ERB-style template delimiters, change the
+		// following template settings to use alternative delimiters.
+		_.templateSettings = {
+			evaluate    : /<%([\s\S]+?)%>/g,
+			interpolate : /<%=([\s\S]+?)%>/g,
+			escape      : /<%-([\s\S]+?)%>/g
+		};
+
+		// When customizing `templateSettings`, if you don't want to define an
+		// interpolation, evaluation or escaping regex, we need one that is
+		// guaranteed not to match.
+		var noMatch = /(.)^/;
+
+		// Certain characters need to be escaped so that they can be put into a
+		// string literal.
+		var escapes = {
+			"'":      "'",
+			'\\':     '\\',
+			'\r':     'r',
+			'\n':     'n',
+			'\t':     't',
+			'\u2028': 'u2028',
+			'\u2029': 'u2029'
+		};
+
+		var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
+
+		// JavaScript micro-templating, similar to John Resig's implementation.
+		// Underscore templating handles arbitrary delimiters, preserves whitespace,
+		// and correctly escapes quotes within interpolated code.
+		_.template = function(text, data, settings) {
+			var render;
+			settings = _.defaults({}, settings, _.templateSettings);
+
+			// Combine delimiters into one regular expression via alternation.
+			var matcher = new RegExp([
+				(settings.escape || noMatch).source,
+				(settings.interpolate || noMatch).source,
+				(settings.evaluate || noMatch).source
+			].join('|') + '|$', 'g');
+
+			// Compile the template source, escaping string literals appropriately.
+			var index = 0;
+			var source = "__p+='";
+			text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
+				source += text.slice(index, offset)
+					.replace(escaper, function(match) { return '\\' + escapes[match]; });
+
+				if (escape) {
+					source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
+				}
+				if (interpolate) {
+					source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
+				}
+				if (evaluate) {
+					source += "';\n" + evaluate + "\n__p+='";
+				}
+				index = offset + match.length;
+				return match;
+			});
+			source += "';\n";
+
+			// If a variable is not specified, place data values in local scope.
+			if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
+
+			source = "var __t,__p='',__j=Array.prototype.join," +
+				"print=function(){__p+=__j.call(arguments,'');};\n" +
+				source + "return __p;\n";
+
+			try {
+				render = new Function(settings.variable || 'obj', '_', source);
+			} catch (e) {
+				e.source = source;
+				throw e;
+			}
+
+			if (data) return render(data, _);
+			var template = function(data) {
+				return render.call(this, data, _);
+			};
+
+			// Provide the compiled function source as a convenience for precompilation.
+			template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
+
+			return template;
+		};
+
+		return _;
+	})({});
+
+	if (location.hostname === 'todomvc.com') {
+		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+		ga('create', 'UA-31081062-1', 'auto');
+		ga('send', 'pageview');
+	}
+	/* jshint ignore:end */
+
+	function redirect() {
+		if (location.hostname === 'tastejs.github.io') {
+			location.href = location.href.replace('tastejs.github.io/todomvc', 'todomvc.com');
+		}
+	}
+
+	function findRoot() {
+		var base = location.href.indexOf('examples/');
+		return location.href.substr(0, base);
+	}
+
+	function getFile(file, callback) {
+		if (!location.host) {
+			return console.info('Miss the info bar? Run TodoMVC from a server to avoid a cross-origin error.');
+		}
+
+		var xhr = new XMLHttpRequest();
+
+		xhr.open('GET', findRoot() + file, true);
+		xhr.send();
+
+		xhr.onload = function () {
+			if (xhr.status === 200 && callback) {
+				callback(xhr.responseText);
+			}
+		};
+	}
+
+	function Learn(learnJSON, config) {
+		if (!(this instanceof Learn)) {
+			return new Learn(learnJSON, config);
+		}
+
+		var template, framework;
+
+		if (typeof learnJSON !== 'object') {
+			try {
+				learnJSON = JSON.parse(learnJSON);
+			} catch (e) {
+				return;
+			}
+		}
+
+		if (config) {
+			template = config.template;
+			framework = config.framework;
+		}
+
+		if (!template && learnJSON.templates) {
+			template = learnJSON.templates.todomvc;
+		}
+
+		if (!framework && document.querySelector('[data-framework]')) {
+			framework = document.querySelector('[data-framework]').dataset.framework;
+		}
+
+		this.template = template;
+
+		if (learnJSON.backend) {
+			this.frameworkJSON = learnJSON.backend;
+			this.frameworkJSON.issueLabel = framework;
+			this.append({
+				backend: true
+			});
+		} else if (learnJSON[framework]) {
+			this.frameworkJSON = learnJSON[framework];
+			this.frameworkJSON.issueLabel = framework;
+			this.append();
+		}
+
+		this.fetchIssueCount();
+	}
+
+	Learn.prototype.append = function (opts) {
+		var aside = document.createElement('aside');
+		aside.innerHTML = _.template(this.template, this.frameworkJSON);
+		aside.className = 'learn';
+
+		if (opts && opts.backend) {
+			// Remove demo link
+			var sourceLinks = aside.querySelector('.source-links');
+			var heading = sourceLinks.firstElementChild;
+			var sourceLink = sourceLinks.lastElementChild;
+			// Correct link path
+			var href = sourceLink.getAttribute('href');
+			sourceLink.setAttribute('href', href.substr(href.lastIndexOf('http')));
+			sourceLinks.innerHTML = heading.outerHTML + sourceLink.outerHTML;
+		} else {
+			// Localize demo links
+			var demoLinks = aside.querySelectorAll('.demo-link');
+			Array.prototype.forEach.call(demoLinks, function (demoLink) {
+				if (demoLink.getAttribute('href').substr(0, 4) !== 'http') {
+					demoLink.setAttribute('href', findRoot() + demoLink.getAttribute('href'));
+				}
+			});
+		}
+
+		document.body.className = (document.body.className + ' learn-bar').trim();
+		document.body.insertAdjacentHTML('afterBegin', aside.outerHTML);
+	};
+
+	Learn.prototype.fetchIssueCount = function () {
+		var issueLink = document.getElementById('issue-count-link');
+		if (issueLink) {
+			var url = issueLink.href.replace('https://github.com', 'https://api.github.com/repos');
+			var xhr = new XMLHttpRequest();
+			xhr.open('GET', url, true);
+			xhr.onload = function (e) {
+				var parsedResponse = JSON.parse(e.target.responseText);
+				if (parsedResponse instanceof Array) {
+					var count = parsedResponse.length;
+					if (count !== 0) {
+						issueLink.innerHTML = 'This app has ' + count + ' open issues';
+						document.getElementById('issue-count').style.display = 'inline';
+					}
+				}
+			};
+			xhr.send();
+		}
+	};
+
+	redirect();
+	getFile('learn.json', Learn);
+})();
diff --git a/examples/todomvc/src/main/web/node_modules/todomvc-common/package.json b/examples/todomvc/src/main/web/node_modules/todomvc-common/package.json
new file mode 100644
index 00000000..a267618e
--- /dev/null
+++ b/examples/todomvc/src/main/web/node_modules/todomvc-common/package.json
@@ -0,0 +1,54 @@
+{
+  "_from": "todomvc-common@^1.0.0",
+  "_id": "todomvc-common@1.0.4",
+  "_inBundle": false,
+  "_integrity": "sha512-AA0Z4exovEqubhbZCrzzn9roVT4zvOncS319p2zIc4CsNe5B9TLL7Sei1NIV6d+WrgR5rOi+y0I9Y6GE7xgNOw==",
+  "_location": "/todomvc-common",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "range",
+    "registry": true,
+    "raw": "todomvc-common@^1.0.0",
+    "name": "todomvc-common",
+    "escapedName": "todomvc-common",
+    "rawSpec": "^1.0.0",
+    "saveSpec": null,
+    "fetchSpec": "^1.0.0"
+  },
+  "_requiredBy": [
+    "/"
+  ],
+  "_resolved": "https://registry.npmjs.org/todomvc-common/-/todomvc-common-1.0.4.tgz",
+  "_shasum": "23099af886c2f0525bfd4537e078f12d0074309e",
+  "_spec": "todomvc-common@^1.0.0",
+  "_where": "/home/rjaros/git/kvision/examples/todomvc/src/main/web",
+  "author": {
+    "name": "TasteJS"
+  },
+  "bugs": {
+    "url": "https://github.com/tastejs/todomvc-common/issues"
+  },
+  "bundleDependencies": false,
+  "deprecated": false,
+  "description": "Common TodoMVC utilities used by our apps",
+  "files": [
+    "base.js",
+    "base.css"
+  ],
+  "homepage": "https://github.com/tastejs/todomvc-common#readme",
+  "keywords": [
+    "todomvc",
+    "tastejs",
+    "util",
+    "utilities"
+  ],
+  "license": "MIT",
+  "main": "base.js",
+  "name": "todomvc-common",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tastejs/todomvc-common.git"
+  },
+  "style": "base.css",
+  "version": "1.0.4"
+}
diff --git a/examples/todomvc/src/main/web/node_modules/todomvc-common/readme.md b/examples/todomvc/src/main/web/node_modules/todomvc-common/readme.md
new file mode 100644
index 00000000..7a5de511
--- /dev/null
+++ b/examples/todomvc/src/main/web/node_modules/todomvc-common/readme.md
@@ -0,0 +1,15 @@
+# todomvc-common
+
+> Common TodoMVC utilities used by our apps
+
+
+## Install
+
+```
+$ npm install --save todomvc-common
+```
+
+
+## License
+
+MIT © [TasteJS](http://tastejs.com)
diff --git a/examples/todomvc/src/main/web/package-lock.json b/examples/todomvc/src/main/web/package-lock.json
new file mode 100644
index 00000000..244ffb88
--- /dev/null
+++ b/examples/todomvc/src/main/web/package-lock.json
@@ -0,0 +1,16 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "todomvc-app-css": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/todomvc-app-css/-/todomvc-app-css-2.1.0.tgz",
+      "integrity": "sha1-tvJxbTOa+i5feZNH0qSLBTliQqU="
+    },
+    "todomvc-common": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/todomvc-common/-/todomvc-common-1.0.4.tgz",
+      "integrity": "sha512-AA0Z4exovEqubhbZCrzzn9roVT4zvOncS319p2zIc4CsNe5B9TLL7Sei1NIV6d+WrgR5rOi+y0I9Y6GE7xgNOw=="
+    }
+  }
+}
diff --git a/examples/todomvc/src/main/web/package.json b/examples/todomvc/src/main/web/package.json
new file mode 100644
index 00000000..e939a50f
--- /dev/null
+++ b/examples/todomvc/src/main/web/package.json
@@ -0,0 +1,7 @@
+{
+  "private": true,
+  "dependencies": {
+    "todomvc-app-css": "^2.0.0",
+    "todomvc-common": "^1.0.0"
+  }
+}
diff --git a/examples/todomvc/src/test/kotlin/test/com/example/TestUtil.kt b/examples/todomvc/src/test/kotlin/test/com/example/TestUtil.kt
new file mode 100644
index 00000000..c5ec014f
--- /dev/null
+++ b/examples/todomvc/src/test/kotlin/test/com/example/TestUtil.kt
@@ -0,0 +1,32 @@
+package test.com.example
+
+import pl.treksoft.jquery.jQuery
+import kotlin.browser.document
+
+interface TestSpec {
+    fun beforeTest()
+
+    fun afterTest()
+
+    fun run(code: () -> Unit) {
+        beforeTest()
+        code()
+        afterTest()
+    }
+}
+
+interface DomSpec : TestSpec {
+
+    override fun beforeTest() {
+        val fixture = "<div style=\"display: none\" id=\"pretest\">" +
+                "<div id=\"helloworld\"></div></div>"
+        document.body?.insertAdjacentHTML("afterbegin", fixture)
+    }
+
+    override fun afterTest() {
+        val div = document.getElementById("pretest")
+        div?.remove()
+        jQuery(`object` = ".modal-backdrop").remove()
+    }
+
+}
diff --git a/examples/todomvc/webpack.config.d/bootstrap.js b/examples/todomvc/webpack.config.d/bootstrap.js
new file mode 100644
index 00000000..32a7c4d0
--- /dev/null
+++ b/examples/todomvc/webpack.config.d/bootstrap.js
@@ -0,0 +1,4 @@
+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'});
+config.module.rules.push({test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml'});
diff --git a/examples/todomvc/webpack.config.d/css.js b/examples/todomvc/webpack.config.d/css.js
new file mode 100644
index 00000000..5d710d35
--- /dev/null
+++ b/examples/todomvc/webpack.config.d/css.js
@@ -0,0 +1,2 @@
+config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" });
+
diff --git a/examples/todomvc/webpack.config.d/dce.js b/examples/todomvc/webpack.config.d/dce.js
new file mode 100644
index 00000000..b536a6bf
--- /dev/null
+++ b/examples/todomvc/webpack.config.d/dce.js
@@ -0,0 +1,2 @@
+var path = require("path");
+config.resolve.modules.unshift(path.resolve("./js/min"));
diff --git a/examples/todomvc/webpack.config.d/file.js b/examples/todomvc/webpack.config.d/file.js
new file mode 100644
index 00000000..8b853e7e
--- /dev/null
+++ b/examples/todomvc/webpack.config.d/file.js
@@ -0,0 +1,6 @@
+config.module.rules.push(
+    {
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        loader: 'file-loader'
+    }
+);
\ No newline at end of file
diff --git a/examples/todomvc/webpack.config.d/jquery.js b/examples/todomvc/webpack.config.d/jquery.js
new file mode 100644
index 00000000..40522595
--- /dev/null
+++ b/examples/todomvc/webpack.config.d/jquery.js
@@ -0,0 +1,4 @@
+config.plugins.push(new webpack.ProvidePlugin({
+    $: "jquery",
+    jQuery: "jquery"
+}));
diff --git a/examples/todomvc/webpack.config.d/minify.js b/examples/todomvc/webpack.config.d/minify.js
new file mode 100644
index 00000000..34e706c9
--- /dev/null
+++ b/examples/todomvc/webpack.config.d/minify.js
@@ -0,0 +1,4 @@
+if (defined.PRODUCTION) {
+    config.plugins.push(new webpack.optimize.UglifyJsPlugin({
+    }));
+}