[change] Adapt asynchronous computation

Author: nwtgck

Diff for: package-lock.json

@@ -11,6 +11,7 @@
     "core-js": "^2.6.5",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.6",
+    "vue-async-computed": "^3.6.1",
     "vue-class-component": "^6.0.0",
     "vue-property-decorator": "^8.0.0"
   },

Diff for: package.json

@@ -0,0 +1,20 @@
+// (from: https://github.com/foxbenjaminfox/vue-async-computed/issues/25#issuecomment-459369072)
+
+import { createDecorator, VueDecorator } from 'vue-class-component';
+import { IAsyncComputedProperty } from 'vue-async-computed';
+
+export function AsyncComputed<T>(
+    computedOptions?: IAsyncComputedProperty<T>,
+): VueDecorator {
+    return createDecorator((_options, key) => {
+        // TODO: Not use any casting
+        const options: any = _options as any;
+        options.asyncComputed = options.asyncComputed || {};
+        const method = options.methods![key];
+        options.asyncComputed![key] = <IAsyncComputedProperty<T>>{
+            get: method,
+            ...computedOptions,
+        };
+        delete options.methods![key];
+    });
+}

Diff for: src/AsyncComputed.ts

@@ -1,43 +1,27 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha" target="_blank" rel="noopener">unit-mocha</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
+    {{ myAsyncMessage }}
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
+import { AsyncComputed } from '../AsyncComputed';
 
 @Component
 export default class HelloWorld extends Vue {
   @Prop() private msg!: string;
+
+  // IMPORTANT! This uses an asynchronous computation
+  @AsyncComputed()
+  async myAsyncMessage(): Promise<string> {
+    return new Promise(resolve => {
+      setTimeout(()=>{
+        resolve("This is an asynchronous message!");
+      }, 1000);
+    });
+  }
 }
 </script>
 

Diff for: src/components/HelloWorld.vue

@@ -1,9 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import './registerServiceWorker'
+import AsyncComputed from 'vue-async-computed'
 
 Vue.config.productionTip = false
 
+Vue.use(AsyncComputed)
+
 new Vue({
   render: h => h(App),
 }).$mount('#app')

Diff for: src/main.ts

@@ -19,6 +19,9 @@
     "paths": {
       "@/*": [
         "src/*"
+      ],
+      "*": [
+        "types/*"
       ]
     },
     "lib": [

Diff for: tsconfig.json

@@ -0,0 +1,58 @@
+// (base: https://raw.githubusercontent.com/saraedum/vue-async-computed/5debb7dcd81f52183be55e05b866fc43278a9905/types/index.d.ts)
+
+declare module 'vue-async-computed' {
+  import Vue, { PluginFunction } from "vue";
+
+  interface IAsyncComputedOptions {
+    errorHandler?: (error: string[]) => void;
+    useRawError?: boolean;
+    default?: any;
+  }
+  
+  export default class AsyncComputed {
+    constructor(options?: IAsyncComputedOptions)
+    static install: PluginFunction<never>;
+    static version: string;
+  }
+  
+  type AsyncComputedGetter<T> = () => (Promise<T> | T);
+  export interface IAsyncComputedProperty<T> {
+    default?: T | (() => T);
+    get?: AsyncComputedGetter<T>;
+    watch?: () => void;
+    shouldUpdate?: () => boolean;
+    lazy?: boolean;
+  }
+  
+  interface IAsyncComputedProperties {
+    [K: string]: AsyncComputedGetter<any> | IAsyncComputedProperty<any>;
+  }
+}
+
+declare module "vue/types/options" {
+  import Vue from "vue";
+  import { IAsyncComputedProperties } from "vue-async-computed";
+
+  export class InjectKey{}
+
+  // tslint:disable-next-line:interface-name
+  interface ComponentOptions<V extends Vue> {
+    asyncComputed?: IAsyncComputedProperties;
+  }
+}
+
+interface IASyncComputedState {
+  state: "updating" | "success" | "error";
+  updating: boolean;
+  success: boolean;
+  error: boolean;
+  exception: Error | null;
+  update: () => void;
+}
+
+declare module "vue/types/vue" {
+  // tslint:disable-next-line:interface-name
+  interface Vue {
+    $asyncComputed: {[K: string]: IASyncComputedState };
+  }
+}