vue 3 upgrade, bigger ping size

package.json

@@ -8,30 +8,31 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-decorators": "^7.12.1",
+    "@babel/plugin-proposal-class-properties": "^7.12.13",
+    "@babel/plugin-proposal-decorators": "^7.12.13",
+    "@vue/compiler-sfc": "^3.0.5",
     "axios": "^0.19.2",
     "bulma": "^0.7.5",
-    "core-js": "^2.6.11",
+    "core-js": "^3.6.5",
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
-    "vue": "^2.6.12",
-    "vue-class-component": "^7.2.6",
-    "vue-property-decorator": "^8.5.1"
+    "vue": "^3.0.0",
+    "vue-class-component": "^8.0.0-0",
+    "vue-property-decorator": "^9.1.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.12.1",
-    "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-eslint": "^3.12.1",
-    "@vue/cli-plugin-typescript": "^3.12.1",
-    "@vue/cli-service": "^3.12.1",
-    "@vue/eslint-config-typescript": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-typescript": "^4.5.11",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/eslint-config-typescript": "^5.0.2",
     "babel-eslint": "^10.1.0",
-    "cross-env": "^5.2.1",
-    "eslint": "^6.8.0",
-    "eslint-plugin-vue": "^5.2.3",
-    "typescript": "^3.9.7",
-    "vue-template-compiler": "^2.6.12"
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0-0",
+    "typescript": "~3.9.3"
   },
   "eslintConfig": {
     "root": true,
@@ -39,7 +40,7 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "eslint:recommended",
       "@vue/typescript"
     ],
@@ -54,7 +55,8 @@
     }
   },
   "browserslist": [
-    "> 0.25%",
-    "Chrome > 60"
+    "> 1%",
+    "last 2 versions",
+    "not dead"
   ]
 }

src/App.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Options, Vue } from 'vue-class-component';
 import Main from './components/Main.vue';
 
-@Component({
+@Options({
   components: {
     Main,
   },

src/components/DomainItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p class="heading" v-text="hostname" />
+    <h2 class="subtitle" v-text="hostname" />
     <div v-if="finished">
       <p class="title" v-text="datacenter" />
       <p class="heading" v-text="airport" />
@@ -8,8 +8,16 @@
       <p class="heading" v-if="ipv6">IPv6</p>
       <p class="heading" v-if="!ipv6">IPv4</p>
       <p class="heading" v-text="httpVerison" />
-      <p class="heading">First ping: {{ firstPing }}</p>
-      <p class="heading">Second ping: {{ secondPing }}</p>
+      <div class="columns">
+        <div class="column is-one-half">
+          <p class="heading">First ping:</p>
+          <h2 class="subtitle is-2" v-text="firstPing" />
+        </div>
+        <div class="column is-one-half">
+          <p class="heading">Second ping:</p>
+          <h2 class="subtitle is-2" v-text="secondPing" />
+        </div>
+      </div>
     </div>
     <div v-if="broken">
       <p>Likely not a Cloudflare website, or not proxied.</p>
@@ -17,7 +25,7 @@
   </div>
 </template>
 <script lang="ts">
-import { Vue, Component, Prop } from "vue-property-decorator";
+import { Options, Vue, prop } from "vue-class-component";
 import Axios from "axios";
 
 interface TraceResponse {
@@ -35,21 +43,23 @@ interface TraceResponse {
   warp: string;
 }
 
-@Component
-export default class DomainItem extends Vue {
-  // @ts-ignore
-  @Prop(String) readonly hostname: string;
-  finished = false
-  broken = false
-  datacenter = ""
-  ipv6 = false
-  httpVerison = ""
-  airport = ""
-  firstPing = 0
-  secondPing = 0
+class Props {
+  public hostname = prop<string>({ default: "" });
+}
+
+@Options({})
+export default class DomainItem extends Vue.with(Props) {
+  finished = false;
+  broken = false;
+  datacenter = "";
+  ipv6 = false;
+  httpVerison = "";
+  airport = "";
+  firstPing = 0;
+  secondPing = 0;
   mounted() {
     this.loadHostname(this.hostname)
-      .then(datacenter => {
+      .then((datacenter) => {
         // detect ipv6
         this.ipv6 = datacenter.ip.includes(":");
         this.httpVerison = datacenter.http;
@@ -71,15 +81,15 @@ export default class DomainItem extends Vue {
   loadPing(hostname: string, loadNumber = 0) {
     let timing = performance
       .getEntriesByType("resource")
-      .filter(timing => timing.name.includes(hostname))
-      .filter(timing => timing.name.includes(`load=${loadNumber}`))[0];
+      .filter((timing) => timing.name.includes(hostname))
+      .filter((timing) => timing.name.includes(`load=${loadNumber}`))[0];
     // @ts-ignore
     return Math.floor(timing.responseEnd - timing.startTime);
   }
   loadHostname(hostname: string, loadNumber = 0): Promise<TraceResponse> {
     return Axios.get(
       `https://${hostname}/cdn-cgi/trace?load=${loadNumber}`
-    ).then(response => {
+    ).then((response) => {
       let resp: TraceResponse = {
         fl: "",
         h: "",
@@ -92,7 +102,7 @@ export default class DomainItem extends Vue {
         loc: "",
         tls: "",
         sni: "",
-        warp: ""
+        warp: "",
       };
       response.data
         .split("\n")

src/components/Main.vue

@@ -9,6 +9,7 @@
           href="https://github.com/judge2020/cloudflare-connectivity-test/wiki/Explanation"
         >Explanation</a>
       </h2>
+      <h5 class="subtitle is-5">Note: all tests run at once, so this is effectively a <a href="https://medium.com/@datapath_io/what-is-acceptable-jitter-7e93c1e68f9b">jitter test</a>.</h5>
       <p class="subtitle">Test your website:</p>
       <form @submit.prevent="loadTestHostname(testHostname)">
         <div class="field has-addons has-addons-centered">
@@ -79,16 +80,17 @@
 </template>
 
 <script>
-import { Vue, Component, Prop, Model } from "vue-property-decorator";
+import { Options, Vue } from 'vue-class-component';
+
 import Axios from "axios";
 import DomainItem from "./DomainItem";
-@Component({
+@Options({
   components: {
     DomainItem
   }
 })
 export default class Main extends Vue {
-  @Model({ type: String }) testHostname;
+  testHostname = "";
   preloaded = false;
   iata = [];
   free = [
@@ -106,18 +108,16 @@ export default class Main extends Vue {
     "nodejs.org",
     "cdnjs.com",
     "getbootstrap.com",
-    "reactjs.org",
     "html5boilerplate.com",
     "d3js.org"
   ];
   business = [
-    "judge.sh",
+    "cloudflare-test-target.judge.sh",
     "www.mozilla.org",
     "domjh.net",
     "manfredi.io",
     "sontusdatos.org",
     "www.opentech.fund",
-    "cpj.org",
     "www.amnestyusa.org",
     "cdt.org",
     "www.counterextremism.com",

src/main.ts

@@ -1,8 +1,4 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app')
+createApp(App).mount('#app')

src/shims-vue.d.ts

@@ -1,4 +1,5 @@
 declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }