feat(web): basic modular store structure (core, auth)

.eslintrc

@@ -12,5 +12,16 @@
  "rules": {
  "no-console": "error",
  "@typescript-eslint/explicit-function-return-type": "off"
- }
+ },
+ "overrides": [
+ {
+ "files": ["**/*.js"],
+ "env": {
+ "node": true
+ },
+ "rules": {
+ "@typescript-eslint/no-var-requires": "off"
+ }
+ }
+ ]
 }

apps/web/.eslintrc.js

@@ -1,24 +1,18 @@
 module.exports = {
  env: {
- node: true
+ node: true,
  },
- extends: [
- 'plugin:vue/essential',
- '@vue/typescript'
- ],
+ extends: ['plugin:vue/essential', '@vue/prettier', '@vue/typescript'],
  rules: {
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
- 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
  overrides: [
  {
- files: [
- '**/__tests__/*.{j,t}s?(x)',
- '**/tests/unit/**/*.spec.{j,t}s?(x)'
- ],
+ files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
  env: {
- jest: true
- }
- }
- ]
-}
+ jest: true,
+ },
+ },
+ ],
+};

apps/web/src/app.vue

@@ -7,6 +7,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import './layout';
+import './modules';
 
 const DEFAULT_LAYOUT = 'default';
 

apps/web/src/core/store/index.ts

@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { RootState } from './state';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store<RootState>({
+ strict: process.env.NODE_ENV !== 'production',
+ state: {},
+ mutations: {},
+ actions: {},
+});
+
+export { RootState };

apps/web/src/core/store/state.ts

@@ -0,0 +1 @@
+export type RootState = {};

apps/web/src/main.ts

@@ -3,9 +3,9 @@ import Vue from 'vue';
 import App from './app.vue';
 import './registerServiceWorker';
 import router from './router';
-import store from './store';
+import store from './core/store';
 
-Vue.config.productionTip = false;
+Vue.config.productionTip = process.env.NODE_ENV === 'production';
 
 Vue.use(BootstrapVue);
 

apps/web/src/modules/auth/index.ts

@@ -0,0 +1 @@
+import './store';

apps/web/src/modules/auth/store/actions.ts

@@ -0,0 +1,5 @@
+import { ActionTree } from 'vuex';
+import { RootState } from '~app/core/store';
+import { AuthState } from './state';
+
+export const authActions: ActionTree<AuthState, RootState> = {};

apps/web/src/modules/auth/store/getters.ts

@@ -0,0 +1,5 @@
+import { GetterTree } from 'vuex';
+import { RootState } from '~app/core/store';
+import { AuthState } from './state';
+
+export const authGetters: GetterTree<AuthState, RootState> = {};

apps/web/src/modules/auth/store/index.ts

@@ -0,0 +1,17 @@
+import { Module } from 'vuex';
+import store, { RootState } from '~app/core/store';
+import { authActions } from './actions';
+import { authGetters } from './getters';
+import { authMutations } from './mutations';
+import { AuthState, initialAuthState } from './state';
+
+export const MODULE_PATH = 'auth';
+
+export const authStore: Module<AuthState, RootState> = {
+ state: initialAuthState(),
+ actions: authActions,
+ mutations: authMutations,
+ getters: authGetters,
+};
+
+store.registerModule(MODULE_PATH, authStore);

apps/web/src/modules/auth/store/mutations.ts

@@ -0,0 +1,4 @@
+import { MutationTree } from 'vuex';
+import { AuthState } from './state';
+
+export const authMutations: MutationTree<AuthState> = {};

apps/web/src/modules/auth/store/state.ts

@@ -0,0 +1,15 @@
+// TODO interface shared with backend
+export interface User {
+ id: number;
+ name: string;
+}
+
+export interface AuthState {
+ user: User | null;
+}
+
+export function initialAuthState(): AuthState {
+ return {
+ user: null,
+ };
+}

apps/web/src/modules/index.ts

@@ -0,0 +1 @@
+import './auth';

apps/web/src/views/home.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import HelloWorld from '@/components/HelloWorld.vue';
+import HelloWorld from '~app/components/HelloWorld.vue';
 
 export default {
  name: 'home',

apps/web/tsconfig.json

@@ -10,27 +10,11 @@
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "baseUrl": ".",
- "types": [
- "webpack-env",
- "jest"
- ],
+ "types": ["webpack-env", "jest"],
  "paths": {
- "@/*": [
- "src/*"
- ]
+ "~app/*": ["src/*"]
  },
- "lib": [
- "esnext",
- "dom",
- "dom.iterable",
- "scripthost"
- ]
+ "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
- "include": [
- "src/**/*.ts",
- "src/**/*.tsx",
- "src/**/*.vue",
- "tests/**/*.ts",
- "tests/**/*.tsx"
- ]
+ "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"]
 }

apps/web/vue.config.js

@@ -1,8 +1,12 @@
+const path = require('path');
 const isDev = process.env.NODE_ENV !== 'production';
 
 module.exports = {
  lintOnSave: false,
  css: {
  sourceMap: isDev,
  },
+ chainWebpack: config => {
+ config.resolve.alias.set('~app', path.resolve('./src'));
+ },
 };