| System.config({ | |
| //use typescript for compilation | |
| transpiler: 'typescript', | |
| //typescript compiler options | |
| typescriptOptions: { | |
| emitDecoratorMetadata: true | |
| }, | |
| //map tells the System loader where to look for things | |
| map: { | |
| app: './src' |
| System.config({ | |
| //use typescript for compilation | |
| transpiler: 'typescript', | |
| //typescript compiler options | |
| typescriptOptions: { | |
| emitDecoratorMetadata: true | |
| }, | |
| //map tells the System loader where to look for things | |
| map: { | |
| app: './src' |
Copyright (C) 2017 Leonidas Oy Ltd
Written by <santtu.pajukanta@leonidasoy.fi>
Licensed under the MIT license
We attempt to harness the friendly API of Immutable.js to build Redux reducers while trying to preserve as much type safety as possible.
State branches are TypedRecords. A combineReducers that outputs TypedRecords is provided.
| const createStore = (reducer) => { | |
| let state; | |
| let listeners = []; | |
| const getState = () => state; | |
| const dispatch = (action) => { | |
| state = reducer(state, action); | |
| listeners.forEach(listener => listener()); | |
| }; |
| <template> | |
| <div class="home"> | |
| <img alt="Vue logo" src="../assets/logo.png"> | |
| <HelloWorld msg="Vue.js + TypeScript App"/> | |
| </div> | |
| </template> | |
| <script lang="ts"> | |
| import { Component, Vue } from 'vue-property-decorator'; | |
| import HelloWorld from '@/cmps/HelloWorld.vue'; // @ is an alias to /src |
| <!-- the click event's propagation will be stopped --> | |
| <a @click.stop="doThis"></a> | |
| <!-- the submit event will no longer reload the page --> | |
| <form @submit.prevent="onSubmit"></form> | |
| <!-- enter in the textbox should submit--> | |
| <input type="text" @keyup.enter="submit"> | |
| <!-- Alt + C --> |
| var store = new Vuex.Store({ | |
| state: { | |
| todos: [] | |
| }, | |
| mutations: { | |
| addTodo(state, todoText) { | |
| state.todos.push({ | |
| text: todoText, | |
| done: false | |
| }); |
| Vue.directive("colorful", { | |
| // When the bound element is inserted into the DOM... | |
| inserted: function(el) { | |
| el.addEventListener("keyup", () => { | |
| el.style.backgroundColor = getRandomColor(); | |
| }); | |
| } | |
| }); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css"> | |
| <style> | |
| body { padding-top: 40px; } | |
| </style> | |
| </head> | |
| <body> |
| export default { | |
| template: ` | |
| <section> | |
| <datalist :id="listId"> | |
| <option v-for="opt in info.opts" :value="opt"></option> | |
| </datalist> | |
| <label> | |
| {{info.label}} | |
| <input type="text" v-model="val" @change="reportVal" :list="listId" /> | |
| </label> |