Update router definitions to enable code splitting

client/package.json

@@ -80,7 +80,7 @@
     "sass-loader": "^7.1.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
-    "survey-vue": "^1.8.77",
+    "survey-vue": "^1.9.2",
     "unfetch": "^3.1.1",
     "uploadcare-widget": "^3.6.0",
     "url-loader": "^1.0.1",
@@ -91,7 +91,7 @@
     "vue-apollo": "^3.0.0-beta.16",
     "vue-loader": "^15.9.8",
     "vue-matomo": "^3.13.4-0",
-    "vue-router": "^3.0.1",
+    "vue-router": "^3.5.3",
     "vue-scrollto": "^2.11.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.6.14",

client/src/pages/survey.vue

@@ -15,7 +15,6 @@
 </template>
 
 <script>
-  import * as SurveyVue from 'survey-vue';
   import {css} from '@/survey.config';
   import gql from 'graphql-tag';
 
@@ -28,7 +27,9 @@
 
   import {meQuery} from '@/graphql/queries';
 
-  const Survey = SurveyVue.Survey;
+  import * as SurveyVue from 'survey-vue';
+
+  const {Survey, Model} = SurveyVue;
 
   const MODULE_QUERY = gql`
     query ModuleSolutions($id: ID) {
@@ -103,7 +104,7 @@
 
     methods: {
       initSurvey(data, answers) {
-        let survey = new SurveyVue.Model(data);
+        let survey = new Model(data);
         const flatAnswers = {};
         for (let k in answers) {
           flatAnswers[k] = answers[k].answer;

client/src/router/auth.routes.js

@@ -1,9 +1,10 @@
-import hello from '@/pages/hello';
-import betaLogin from '@/pages/beta-login';
-import loginError from '@/pages/login-error';
-import licenseActivation from '@/pages/license-activation';
 import {LICENSE_ACTIVATION} from '@/router/auth.names';
 
+const hello = () => import('@/pages/hello');
+const betaLogin = () => import('@/pages/beta-login');
+const loginError = () => import('@/pages/login-error');
+const licenseActivation = () => import('@/pages/license-activation');
+
 export default [
   {
     path: '/hello',
@@ -13,7 +14,7 @@ export default [
       layout: 'split',
       public: true,
       illustration: 'hello',
-      illustrationAlign: 'top'
+      illustrationAlign: 'top',
     },
   },
   {
@@ -31,7 +32,7 @@ export default [
     name: 'verifyEmail',
     props: {
       title: 'Bitte schauen Sie in Ihr Postfach',
-      errorMessage: 'Ihre E-Mail-Adresse ist noch nicht verifiziert. Wir haben eine E-Mail mit einem Aktivierungslink an Sie verschickt.'
+      errorMessage: 'Ihre E-Mail-Adresse ist noch nicht verifiziert. Wir haben eine E-Mail mit einem Aktivierungslink an Sie verschickt.',
     },
     meta: {
       public: true,
@@ -44,14 +45,14 @@ export default [
     name: 'unknownAuthError',
     props: {
       title: 'Es ist ein Fehler aufgetreten',
-      errorMessage: 'Es tut uns leid, dass mySkillbox im Moment nicht wie erwartet funktioniert. Bitte versuchen Sie es später nochmals.'
+      errorMessage: 'Es tut uns leid, dass mySkillbox im Moment nicht wie erwartet funktioniert. Bitte versuchen Sie es später nochmals.',
     },
     meta: {
       public: true,
       layout: 'public',
     },
   },
-    {
+  {
     path: '/license-activation',
     component: licenseActivation,
     name: LICENSE_ACTIVATION,

client/src/router/index.js

@@ -1,16 +1,6 @@
 import Vue from 'vue';
-import topic from '@/pages/topic';
-import article from '@/pages/article';
-import instrument from '@/pages/instrument';
-import instrumentOverview from '@/pages/instrumentOverview';
-import p404 from '@/pages/p404';
-import start from '@/pages/start';
-import submission from '@/pages/studentSubmission';
+
 import Router from 'vue-router';
-import surveyPage from '@/pages/survey';
-import styleGuidePage from '@/pages/styleguide';
-import joinClass from '@/pages/joinClass';
-import news from '@/pages/news';
 
 import moduleRoutes from './module.routes';
 import portfolioRoutes from './portfolio.routes';
@@ -23,6 +13,19 @@ import store from '@/store/index';
 import {LAYOUT_SIMPLE} from '@/router/core.constants';
 import {EMAIL_NOT_VERIFIED_STATE, NO_VALID_LICENSE_STATE, SUCCESS_STATE} from './oauth.names';
 
+import start from '@/pages/start';
+
+const surveyPage = () => import('@/pages/survey');
+const styleGuidePage = () => import('@/pages/styleguide');
+const joinClass = () => import('@/pages/joinClass');
+const news = () => import('@/pages/news');
+const topic = () => import('@/pages/topic');
+const article = () => import('@/pages/article');
+const instrument = () => import('@/pages/instrument');
+const instrumentOverview = () => import('@/pages/instrumentOverview');
+const p404 = () => import('@/pages/p404');
+const submission = () => import('@/pages/studentSubmission');
+
 const postLoginRedirectUrlKey = 'postLoginRedirectionUrl';
 
 const routes = [

client/src/router/me.routes.js

@@ -1,18 +1,18 @@
-import profilePage from '@/pages/profile';
-import profile from '@/components/profile/Profile';
-import myClass from '@/pages/myClass';
-import activity from '@/pages/activity';
-import oldClasses from '@/pages/oldClasses';
-import createClass from '@/pages/createClass';
-import showSchoolClassCode from '@/pages/me/showSchoolClassCode';
-import showTeamCode from '@/pages/me/showTeamCode';
-import myTeam from '@/pages/me/myTeam';
-import joinTeam from '@/pages/me/joinTeam';
-import createTeam from '@/pages/me/createTeam';
-
 import {CREATE_TEAM, JOIN_TEAM, MY_TEAM, SHOW_SCHOOL_CLASS_CODE, SHOW_TEAM_CODE} from './me.names';
 import {LAYOUT_SIMPLE} from '@/router/core.constants';
 
+const profilePage = () => import('@/pages/profile');
+const profile = () => import('@/components/profile/Profile');
+const myClass = () => import('@/pages/myClass');
+const activity = () => import('@/pages/activity');
+const oldClasses = () => import('@/pages/oldClasses');
+const createClass = () => import('@/pages/createClass');
+const showSchoolClassCode = () => import('@/pages/me/showSchoolClassCode');
+const showTeamCode = () => import('@/pages/me/showTeamCode');
+const myTeam = () => import('@/pages/me/myTeam');
+const joinTeam = () => import('@/pages/me/joinTeam');
+const createTeam = () => import('@/pages/me/createTeam');
+
 export default [
   {
     path: '/me',

client/src/router/module.routes.js

@@ -1,7 +1,3 @@
-import moduleBase from '@/pages/module/module-base';
-import module from '@/pages/module/module';
-import submissions from '@/pages/submissions';
-import moduleVisibility from '@/pages/module/moduleVisibility';
 import {
   MODULE_PAGE,
   MODULE_SETTINGS_PAGE,
@@ -10,11 +6,16 @@ import {
   SUBMISSIONS_PAGE,
   VISIBILITY_PAGE,
 } from '@/router/module.names';
-import settingsPage from '@/pages/module/moduleSettings';
-import snapshots from '@/pages/snapshot/snapshots';
-import snapshot from '@/pages/snapshot/snapshot';
 import {LAYOUT_SIMPLE} from '@/router/core.constants';
 
+const moduleBase = () => import('@/pages/module/module-base');
+const module = () => import('@/pages/module/module');
+const submissions = () => import('@/pages/submissions');
+const moduleVisibility = () => import('@/pages/module/moduleVisibility');
+const settingsPage = () => import('@/pages/module/moduleSettings');
+const snapshots = () => import('@/pages/module/moduleSettings');
+const snapshot = () => import('@/pages/module/moduleSettings');
+
 export default [
   {
     path: '/module/:slug',

client/src/router/onboarding.routes.js

@@ -1,11 +1,11 @@
-import onboarding from '@/pages/onboarding';
-import onboardingStart from '@/pages/onboarding/start';
-import onboardingStep1 from '@/pages/onboarding/step1';
-import onboardingStep2 from '@/pages/onboarding/step2';
-import onboardingStep3 from '@/pages/onboarding/step3';
-
 import {ONBOARDING_STEP_1, ONBOARDING_STEP_2, ONBOARDING_STEP_3} from '@/router/onboarding.names';
 
+const onboarding = () => import('@/pages/onboarding');
+const onboardingStart = () => import('@/pages/onboarding/start');
+const onboardingStep1 = () => import('@/pages/onboarding/step1');
+const onboardingStep2 = () => import('@/pages/onboarding/step2');
+const onboardingStep3 = () => import('@/pages/onboarding/step3');
+
 export default [
   {
     path: '/onboarding',

client/src/router/portfolio.routes.js

@@ -1,8 +1,8 @@
-import portfolio from '@/pages/portfolio/portfolio';
-import project from '@/pages/portfolio/project';
-import newProject from '@/pages/portfolio/newProject';
-import editProject from '@/pages/portfolio/editProject';
 import {NEW_PROJECT_PAGE, PROJECTS_PAGE} from '@/router/portfolio.names';
+const portfolio = () => import('@/pages/portfolio/portfolio');
+const project = () => import('@/pages/portfolio/project');
+const newProject = () => import('@/pages/portfolio/newProject');
+const editProject = () => import('@/pages/portfolio/editProject');
 
 const portfolioRoutes = [
   {path: '/portfolio', name: PROJECTS_PAGE, component: portfolio, meta: {hideFooter: true}},

client/src/router/room.routes.js

@@ -1,10 +1,11 @@
-import rooms from '@/pages/rooms';
-import newRoom from '@/pages/newRoom';
-import editRoom from '@/pages/editRoom';
-import room from '@/pages/room';
-import moduleRoom from '@/pages/module/moduleRoom';
 import {NEW_ROOM_PAGE, ROOMS_PAGE} from '@/router/room.names';
 
+const rooms = () => import('@/pages/rooms');
+const newRoom = () => import('@/pages/newRoom');
+const editRoom = () => import('@/pages/editRoom');
+const room = () => import('@/pages/room');
+const moduleRoom = () => import('@/pages/module/moduleRoom');
+
 export default [
   {path: '/rooms', name: ROOMS_PAGE, component: rooms, meta: {filter: true, hideFooter: true}},
   {path: '/new-room/', name: NEW_ROOM_PAGE, component: newRoom},

client/src/validation/index.js

@@ -1,24 +0,0 @@
-import {extend, localize} from 'vee-validate';
-import {confirmed, double, email, min, required} from 'vee-validate/dist/rules';
-import de from 'vee-validate/dist/locale/de.json';
-
-export const configureValidation = () => {
-  console.log('configuring validation');
-
-  extend('required', required);
-  extend('min', min);
-  extend('decimal', double);
-  extend('confirmed', confirmed);
-  extend('email', email);
-
-  localize('de', {
-    de: {
-      ...de,
-      names: {
-        password: 'Password',
-        email: 'E-Mail',
-        coupon: 'Coupon',
-      },
-    },
-  });
-};