From dd83c87f64b63e733fe504be59ec508d4535ab30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Thu, 4 Jan 2018 18:08:53 +0100 Subject: [PATCH] example: Lint & fix TS example --- examples/typescript/components/Card.vue | 54 +++++++------ examples/typescript/modules/typescript.js | 6 ++ examples/typescript/nuxt.config.js | 2 +- examples/typescript/package.json | 15 ++-- examples/typescript/pages/index.vue | 6 +- examples/typescript/store/index.ts | 43 +++++----- examples/typescript/store/modules/people.ts | 89 +++++++++++---------- examples/typescript/store/root.ts | 32 ++++---- 8 files changed, 128 insertions(+), 119 deletions(-) diff --git a/examples/typescript/components/Card.vue b/examples/typescript/components/Card.vue index efce3253e2..5816521b24 100644 --- a/examples/typescript/components/Card.vue +++ b/examples/typescript/components/Card.vue @@ -1,26 +1,28 @@ - -// **PLEASE NOTE** All "Nuxt Class Components" require at minimum a script tag that exports a default object - \ No newline at end of file + + + diff --git a/examples/typescript/modules/typescript.js b/examples/typescript/modules/typescript.js index 5295ac849c..47cca47f50 100644 --- a/examples/typescript/modules/typescript.js +++ b/examples/typescript/modules/typescript.js @@ -1,4 +1,6 @@ module.exports = function (options) { + // Add .ts extension for store, middleware and more + this.nuxt.options.extensions.push('ts') // Extend build this.extendBuild(config => { const tsLoader = { @@ -22,5 +24,9 @@ module.exports = function (options) { rule.options.loaders.ts = tsLoader } } + // Add .ts extension in webpack resolve + if (config.resolve.extensions.indexOf('.ts') === -1) { + config.resolve.extensions.push('.ts') + } }) } diff --git a/examples/typescript/nuxt.config.js b/examples/typescript/nuxt.config.js index cc6493b7ed..57e1b3d69c 100644 --- a/examples/typescript/nuxt.config.js +++ b/examples/typescript/nuxt.config.js @@ -20,7 +20,7 @@ module.exports = { */ css: ['tachyons/css/tachyons.min.css', '~/assets/css/main.css'], build: { - vendor: ['axios', 'gsap', 'vuex-class', 'nuxt-class-component'] + vendor: ['axios', 'vuex-class', 'nuxt-class-component'] }, modules: ['~/modules/typescript'] } diff --git a/examples/typescript/package.json b/examples/typescript/package.json index 5e795aa8a0..176f88e8aa 100644 --- a/examples/typescript/package.json +++ b/examples/typescript/package.json @@ -2,15 +2,10 @@ "version": "1.0.1", "private": true, "dependencies": { - "axios": "^0.16.1", - "gsap": "^1.19.1", + "axios": "^0.17.1", "nuxt": "latest", - "nuxt-class-component": "^1.0.3", - "tachyons": "^4.7.0", - "vue": "~2.5.1", - "vue-server-renderer": "~2.5.1", - "vue-template-compiler": "~2.5.1", - "vue-class-component": "^6.0.0", + "nuxt-class-component": "^1.1.3", + "tachyons": "^4.9.1", "vue-property-decorator": "^6.0.0", "vuex-class": "^0.3.0" }, @@ -21,7 +16,7 @@ "generate": "nuxt generate" }, "devDependencies": { - "ts-loader": "^3.0.0", - "typescript": "^2.2.2" + "ts-loader": "^3.2.0", + "typescript": "^2.6.2" } } diff --git a/examples/typescript/pages/index.vue b/examples/typescript/pages/index.vue index e53adb6b71..a38675ef60 100644 --- a/examples/typescript/pages/index.vue +++ b/examples/typescript/pages/index.vue @@ -19,10 +19,10 @@ import Component from 'nuxt-class-component' import Card from '~/components/Card.vue' import { State, Getter, namespace } from 'vuex-class' -import * as people from '~/store/modules/people'; +import * as people from '~/store/modules/people' -const PeopleState = namespace(people.name, State); -const PeopleGetter = namespace(people.name, Getter); +const PeopleState = namespace(people.name, State) +const PeopleGetter = namespace(people.name, Getter) @Component({ components: { diff --git a/examples/typescript/store/index.ts b/examples/typescript/store/index.ts index a28a26ac6d..5bb3f11913 100644 --- a/examples/typescript/store/index.ts +++ b/examples/typescript/store/index.ts @@ -1,25 +1,32 @@ -import * as root from "./root"; -import * as people from "./modules/people"; +import Vuex from 'vuex' +import * as root from './root' +import * as people from './modules/people' -// more info about store: https://vuex.vuejs.org/en/core-concepts.html +// More info about store: https://vuex.vuejs.org/en/core-concepts.html +// See https://nuxtjs.org/guide/vuex-store#classic-mode // structure of the store: - // types: Types that represent the keys of the mutations to commit - // state: The information of our app, we can get or update it. - // getters: Get complex information from state - // action: Sync or async operations that commit mutations - // mutations: Modify the state - -export const modules = { - [people.name]: people -}; + // types: Types that represent the keys of the mutations to commit + // state: The information of our app, we can get or update it. + // getters: Get complex information from state + // action: Sync or async operations that commit mutations + // mutations: Modify the state interface ModulesStates { - people: people.State; + people: people.State } -export type RootState = root.State & ModulesStates; +export type RootState = root.State & ModulesStates -export const state = root.state; -export const getters = root.getters; -export const actions = root.actions; -export const mutations = root.mutations; \ No newline at end of file +const createStore = () => { + return new Vuex.Store({ + state: root.state(), + getters: root.getters, + mutations: root.mutations, + actions: root.actions, + modules: { + [people.name]: people + } + }) +} + +export default createStore diff --git a/examples/typescript/store/modules/people.ts b/examples/typescript/store/modules/people.ts index 9cbf667c16..e73da3a343 100644 --- a/examples/typescript/store/modules/people.ts +++ b/examples/typescript/store/modules/people.ts @@ -1,70 +1,71 @@ -import { ActionTree, MutationTree, GetterTree, ActionContext } from "vuex"; -import { RootState } from "store"; +import { ActionTree, MutationTree, GetterTree, ActionContext } from 'vuex' +import { RootState } from 'store' -export const name = "people"; +export const name = 'people' export const types = { - SELECT: "SELECT", - SET: "SET" -}; + SELECT: 'SELECT', + SET: 'SET' +} export interface PersonContact { - email: string; - phone: string; + email: string + phone: string } export interface PersonAddress { - city: string; - country: string; - postalCode: string; - state: string; - street: string; + city: string + country: string + postalCode: string + state: string + street: string } export interface Person { - id: number; - first_name: string; - last_name: string; - contact: PersonContact; - gender: string; - ip_address: string; - avatar: string; - addres: PersonAddress; + id: number + first_name: string + last_name: string + contact: PersonContact + gender: string + ip_address: string + avatar: string + addres: PersonAddress } export interface State { - selected: number; - people: Person[]; + selected: number + people: Person[] } +export const namespaced = true + export const state = (): State => ({ - selected: 1, - people: [] -}); + selected: 1, + people: [] +}) export const getters: GetterTree = { - selectedPerson: state => { - const p = state.people.find(person => person.id === state.selected); - return p ? p : { first_name: "Please,", last_name: "select someone" }; - } -}; + selectedPerson: state => { + const p = state.people.find(person => person.id === state.selected) + return p ? p : { first_name: 'Please,', last_name: 'select someone' } + } +} export interface Actions extends ActionTree { - select(context: ActionContext, id: number): void; + select(context: ActionContext, id: number): void } export const actions: Actions = { - select({ commit }, id: number) { - commit(types.SELECT, id); - } -}; + select({ commit }, id: number) { + commit(types.SELECT, id) + } +} export const mutations: MutationTree = { - [types.SELECT](state, id: number) { - state.selected = id; - }, - [types.SET](state, people: Person[]) { - state.people = people; - } -}; - + [types.SELECT](state, id: number) { + state.selected = id + }, + [types.SET](state, people: Person[]) { + state.people = people + } +} diff --git a/examples/typescript/store/root.ts b/examples/typescript/store/root.ts index 902b539602..41f5373e8c 100644 --- a/examples/typescript/store/root.ts +++ b/examples/typescript/store/root.ts @@ -1,28 +1,26 @@ -import { GetterTree, ActionContext, ActionTree, MutationTree } from "vuex"; -import axios from "~/plugins/axios"; -import { RootState } from "store"; -import * as people from "./modules/people"; +import { GetterTree, ActionContext, ActionTree, MutationTree } from 'vuex' +import axios from '~/plugins/axios' +import { RootState } from 'store' +import * as people from './modules/people' -export const types = {}; +export const types = {} export interface State {} -export const state = (): State => ({}); +export const state = (): State => ({}) -export const getters: GetterTree = {}; +export const getters: GetterTree = {} export interface Actions extends ActionTree { - nuxtServerInit(context: ActionContext): void; + nuxtServerInit(context: ActionContext): void } export const actions: Actions = { - async nuxtServerInit({ commit }) { - const response = await axios.get("/random-data.json"); - const staticPeople = response.data.slice(0, 10); - commit(`${people.name}/${people.types.SET}`, staticPeople, { root: true }); - } -}; - -export const mutations: MutationTree = {}; - + async nuxtServerInit({ commit }) { + const response = await axios.get('/random-data.json') + const staticPeople = response.data.slice(0, 10) + commit(`${people.name}/${people.types.SET}`, staticPeople, { root: true }) + } +} +export const mutations: MutationTree = {}