aeternity · shapkarin · Nov 1, 2020 · Nov 3, 2020 · Nov 6, 2020 · Nov 10, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,21 +4,24 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "build:stats": "vue-cli-service build --report-json",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e --mode e2e",
+    "lint": "npm run lint:vue && npm run lint:css",
+    "build:stats": "vue-cli-service build --report-json",
+    "lint:css": "stylelint src/**/*.{css,scss,vue}",
     "lint:vue": "vue-cli-service lint --no-fix",
     "lint:vue:fix": "vue-cli-service lint --fix",
-    "lint:css": "stylelint src/**/*.{css,scss,vue}",
-    "lint": "npm run lint:vue && npm run lint:css",
+    "ssr:build": "vue-cli-service ssr:build",
+    "ssr:serve": "vue-cli-service ssr:serve",
+    "ssr:start": "cross-env NODE_ENV=production vue-cli-service ssr:serve --mode production",
     "test": "npm run lint && npm run test:unit",
     "test:withe2e": "npm run lint && npm run test:unit && npm run test:e2e -- --headless"
   },
-  "license": "ISC",
   "dependencies": {
     "@aeternity/aepp-sdk": "^7.7.0",
     "@dicebear/avatars": "^4.2.5",
     "@dicebear/avatars-avataaars-sprites": "^4.2.5",
+    "@prerenderer/renderer-jsdom": "^0.2.0",
     "aeternity-fungible-token": "github:mradkov/aeternity-fungible-token",
     "autosize": "^4.0.2",
     "axios": "^0.19.0",
@@ -34,13 +37,16 @@
     "vue": "^2.6.12",
     "vue-i18n": "^8.21.1",
     "vue-router": "^3.4.5",
+    "vue-server-renderer": "^2.6.0",
     "vuex": "^3.5.1",
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
+    "@akryum/vue-cli-plugin-ssr": "~0.6.0",
     "@vue/cli-plugin-babel": "~4.2.0",
     "@vue/cli-plugin-e2e-cypress": "~4.2.0",
     "@vue/cli-plugin-eslint": "~4.2.0",
+    "@vue/cli-plugin-router": "^4.5.8",
     "@vue/cli-plugin-unit-jest": "~4.2.0",
     "@vue/cli-service": "~4.2.0",
     "@vue/eslint-config-airbnb": "^5.1.0",
@@ -61,6 +67,8 @@
     "svgo": "^1.3.2",
     "svgo-loader": "^2.2.1",
     "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.6.12"
-  }
+    "vue-template-compiler": "^2.6.12",
+    "prerender-spa-plugin": "^3.4.0"
+  },
+  "license": "ISC"
 }
diff --git a/public/index.ssr.html b/public/index.ssr.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>{{ title }}</title>
+    {{{ renderResourceHints() }}}
+    {{{ renderStyles() }}}
+  </head>
+  <body>
+    <!--vue-ssr-outlet-->
+    {{{ renderState() }}}
+    {{{ renderState({ contextKey: 'apolloState', windowKey: '__APOLLO_STATE__' }) }}}
+    {{{ renderScripts() }}}
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -1,115 +1,13 @@
 <template>
   <div id="app">
-    <MobileNavigation v-if="!$route.meta.fullScreen" />
-    <div class="not-bootstrap-row">
-      <div
-        v-if="!$route.meta.fullScreen"
-        class="sidebar-sticky"
-      >
-        <LeftSection />
-      </div>
-      <RouterView class="router-view" />
-      <div
-        v-if="!$route.meta.fullScreen"
-        class="sidebar-sticky"
-      >
-        <RightSection />
-      </div>
-    </div>
-    <Component
-      :is="component"
-      v-for="{ component, key, props } in opened"
-      :key="key"
-      v-bind="props"
-    />
+    <div>TEST</div>
+    <RouterView />
   </div>
 </template>
 
 <script>
-import { mapMutations, mapState, mapGetters } from 'vuex';
-import { initSdk, scanForWallets, tokenBalance } from './utils/aeternity';
-import Backend from './utils/backend';
-import { EventBus } from './utils/eventBus';
-import { atomsToAe } from './utils';
-import MobileNavigation from './components/layout/MobileNavigation.vue';
-import LeftSection from './components/layout/LeftSection.vue';
-import RightSection from './components/layout/RightSection.vue';
-
 export default {
-  components: { MobileNavigation, LeftSection, RightSection },
-  computed: {
-    ...mapGetters('modals', ['opened']),
-    ...mapState(['address', 'sdk']),
-  },
-  async created() {
-    EventBus.$on('reloadData', () => {
-      this.reloadData();
-    });
-    setInterval(() => this.reloadData(), 120 * 1000);
-
-    await initSdk();
-    await Promise.all([
-      this.initWallet(),
-      this.reloadData(),
-    ]);
-  },
-  methods: {
-    ...mapMutations([
-      'setAddress', 'updateTopics', 'updateCurrencyRates',
-      'setOracleState', 'setChainNames', 'updateBalance',
-      'setGraylistedUrls', 'setTokenInfo', 'setVerifiedUrls', 'useSdkWallet', 'addTokenBalance',
-      'setPinnedItems',
-    ]),
-    async reloadData() {
-      const [
-        chainNames, oracleState, topics, verifiedUrls, graylistedUrls, tokenInfo,
-      ] = await Promise.all([
-        Backend.getCacheChainNames(),
-        Backend.getOracleCache(),
-        Backend.getTopicsCache(),
-        Backend.getVerifiedUrls(),
-        Backend.getGrayListedUrls(),
-        Backend.getTokenInfo(),
-        this.$store.dispatch('backend/reloadStats'),
-        this.$store.dispatch('backend/reloadPrices'),
-        this.reloadUserData(),
-      ]);
-
-      this.updateTopics(topics);
-      this.setChainNames(chainNames);
-      this.setOracleState(oracleState);
-      this.setGraylistedUrls(graylistedUrls);
-      this.setVerifiedUrls(verifiedUrls);
-      this.setTokenInfo(tokenInfo);
-    },
-    async reloadUserData() {
-      if (!this.address) return;
-      await Promise.all([
-        this.$store.dispatch('updatePinnedItems'),
-        this.$store.dispatch('updateUserProfile'),
-        (async () => {
-          const balance = await this.sdk.balance(this.address).catch(() => 0);
-          this.updateBalance(atomsToAe(balance).toFixed(2));
-        })(),
-        (async () => {
-          const tokens = await Backend.getTokenBalances(this.address);
-          await Promise.all(Object.entries(tokens).map(async ([token]) => this
-            .addTokenBalance({ token, balance: await tokenBalance(token, this.address) })));
-        })(),
-      ]);
-    },
-    async initWallet() {
-      let { address } = this.$route.query;
-      if (!address) {
-        address = await scanForWallets();
-        console.log('found wallet');
-        this.useSdkWallet();
-        this.$store.dispatch('updateCookiesConsent', address);
-      }
-      this.setAddress(address);
-      await this.reloadUserData();
-    },
-  },
+
 };
 </script>
 

diff --git a/src/entry-client.js b/src/entry-client.js
@@ -0,0 +1,22 @@
+
+import { loadAsyncComponents } from '@akryum/vue-cli-plugin-ssr/client';
+
+import createApp from './main';
+
+createApp({
+  async beforeApp ({
+    router,
+  }) {
+    await loadAsyncComponents({ router });
+  },
+  afterApp({
+    app,
+    router,
+    store,
+  }) {
+    store.replaceState(window.__INITIAL_STATE__);
+    router.onReady(() => {
+      app.$mount('#app');
+    });
+  }
+});
diff --git a/src/entry-server.js b/src/entry-server.js
@@ -0,0 +1,33 @@
+import createApp from './main'
+
+const prepareUrlForRouting = url => {
+  const { BASE_URL } = process.env
+  return url.startsWith(BASE_URL.replace(/\/$/, ''))
+    ? url.substr(BASE_URL.length)
+    : url
+}
+
+export default context => {
+  return new Promise(async (resolve, reject) => {
+    const {
+      app,
+      router,
+      store,
+    } = await createApp()
+
+    router.push(prepareUrlForRouting(context.url))
+
+    router.onReady(() => {
+      context.rendered = () => {
+        // After all preFetch hooks are resolved, our store is now
+        // filled with the state needed to render the app.
+        // When we attach the state to the context, and the `template` option
+        // is used for the renderer, the state will automatically be
+        // serialized and injected into the HTML as `window.__INITIAL_STATE__`.
+        context.state = store.state
+
+      }
+      resolve(app)
+    }, reject)
+  })
+}
diff --git a/src/main.js b/src/main.js
@@ -1,16 +1,15 @@
 import './styles/base.scss';
 
 import Vue from 'vue';
-import VueRouter from 'vue-router';
 import { sync } from 'vuex-router-sync';
 import { defer } from 'lodash-es';
 import App from './App.vue';
-import store from './store';
-import router from './router';
+import createStore from './store';
+import { createRouter } from './router';
 import i18n from './utils/i18nHelper';
 import registerModals from './views/modals';
 
-Vue.use(VueRouter);
+// Vue.use(VueRouter);
 
 Vue.config.productionTip = false;
 
@@ -29,21 +28,36 @@ Vue.prototype.$watchUntilTruly = function watchUntilTruly(getter) {
 };
 
 registerModals();
-sync(store, router);
-
-store.watch(
-  ({ isBackendLive }) => isBackendLive,
-  async (isBackendLive) => {
-    const targetRouteName = isBackendLive ? 'tips' : 'maintenance';
-    if (router.currentRoute.name === targetRouteName) return;
-    await router.push({ name: targetRouteName });
-  },
-);
-
-export default new Vue({
+// sync(store, router);
+
+export default async function createApp ({
+          beforeApp = () => {},
+          afterApp = () => {}
+        } = {}) {
+          const router = createRouter()
+          // const store = createStore()
+
+
+          await beforeApp({
+            router,
+            // store,
+          })
+
+          const app = new Vue({
   el: '#app',
-  store,
+  // store,
   router,
   i18n,
   render: (h) => h(App),
-}).$mount('#app');
+})
+
+          const result = {
+            app,
+            router,
+            // store,
+          }
+
+          await afterApp(result)
+
+          return result
+        };