refactor: add typescript [ECO-1017]

package.json

@@ -1,12 +1,12 @@
 {
   "name": "contentstack-vuejs-starter-app",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "A simple starter app build using VueJS and Contentstack",
   "author": "Contentstack",
   "license": "MIT",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --port 3000",
+    "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
@@ -15,9 +15,11 @@
     "@contentstack/live-preview-utils": "^1.0.1",
     "@contentstack/utils": "^1.1.1",
     "contentstack": "^3.15.0",
+    "core-js": "^3.8.3",
     "moment": "^2.29.2",
     "register-service-worker": "^1.7.1",
     "vue": "^3.2.27",
+    "vue-class-component": "^8.0.0-0",
     "vue-json-pretty": "^1.8.2",
     "vue-json-tree-viewer": "^1.0.2",
     "vue-meta": "^2.4.0",
@@ -26,16 +28,22 @@
     "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-pwa": "^4.5.12",
-    "@vue/cli-service": "~4.5.0",
+    "@types/node": "^17.0.34",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
     "@vue/compiler-sfc": "^3.2.27",
+    "@vue/eslint-config-typescript": "^9.1.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.0.0"
+    "eslint-plugin-vue": "^8.0.3",
+    "typescript": "~4.5.5"
   },
   "eslintConfig": {
     "root": true,
@@ -45,10 +53,10 @@
     "extends": [
       "plugin:vue/vue3-essential",
       "eslint:recommended",
-      "plugin:prettier/recommended"
+      "@vue/typescript/recommended"
     ],
     "parserOptions": {
-      "parser": "babel-eslint"
+      "ecmaVersion": 2020
     },
     "rules": {}
   },
@@ -66,7 +74,8 @@
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "not dead"
+    "not dead",
+    "not ie 11"
   ],
   "prettier": {
     "singleQuote": true,

src/App.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import Header from '@/components/Header.vue';
-import Footer from '@/components/Footer.vue';
+import Header from '@/components/HeaderContent.vue';
+import Footer from '@/components/FooterContent.vue';
 
 export default {
   name: 'App',

src/components/AboutSectionBucket.vue

@@ -34,8 +34,17 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: ['data']
-};
+<script lang="ts">
+
+import { defineComponent, PropType } from 'vue'
+import Data  from '../typescript/data'
+
+export default defineComponent({
+  props: {
+    data:{
+      required: true,
+      type: Object as PropType<Data>
+    }
+  }
+});
 </script>

src/components/BlogBanner.vue

@@ -16,10 +16,19 @@
   </div>
 </template>
 
-<script>
-import Devtools from '../components/Devtools.vue';
-export default {
-  props: ['data'],
+<script lang="ts">
+
+import { defineComponent, PropType } from 'vue';
+import Devtools from './DevTools.vue';
+import Data from '../typescript/data'
+
+export default defineComponent({
+  props:{
+    data:{
+      required: true,
+      type: Object as PropType<Data>
+    }
+  },
   components: { Devtools }
-};
+});
 </script>

src/components/BlogSection.vue

@@ -37,8 +37,17 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: ['data']
-};
-</script>
+<script lang="ts">
+
+import Data from '../typescript/data';
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+  props:{
+    data:{
+      required: true,
+      type: Object as PropType<Data>
+    }
+  }
+});
+</script>

src/components/Devtools.vue

@@ -44,9 +44,37 @@
     </div>
   </div>
 </template>
-<script>
+
+<script lang="ts">
+
+interface Header {
+  local: string;
+  logo: string;
+  navigation_menu: [];
+  notification_bar: string;
+  title: string;
+}
+
+interface Footer {
+  local: string;
+  logo: string;
+  copyright: string;
+  navigation: [];
+  social: string;
+  title: string;
+}
+
+interface Response {
+    page?: string;
+    blog_post?: string;
+    headers: Header;
+    footer: Footer;
+}
+
 import '@alenaksu/json-viewer';
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   data() {
     return {
       messageCopy: 'Copy',
@@ -57,22 +85,23 @@ export default {
   computed: {
     response() {
       const { header, footer, page, blogPost } = this.$store.state;
-      const response = {
+      const response: Response = {
         headers: header,
         footer: footer
       };
+
       page && (response.page = page);
       blogPost && (response.blog_post = blogPost);
-      const jsonData = this.filterObject(response);
+      const jsonData: any = this.filterObject(response);
       return jsonData;
     }
   },
   methods: {
-    copyObject: function(response) {
+    copyObject: function(response: string) {
       navigator.clipboard.writeText(response);
       this.componentKey++;
     },
-    filterObject: function(inputObject) {
+    filterObject: function(inputObject: any) {
       const unWantedProps = [
         'uid',
         '_version',
@@ -104,6 +133,6 @@ export default {
         this.componentKey = 0;
       }, 300);
   }
-};
+});
 </script>
 <style></style>

src/components/Footer.vue → src/components/FooterContent.vue

@@ -46,12 +46,20 @@
   </footer>
 </template>
 
-<script>
+<script lang="ts">
+
+interface navFooterList {
+  title: string;
+  url: string;
+}
+
+import { defineComponent } from 'vue';
 import Stack from '../plugins/contentstack';
 import { onEntryChange } from '../plugins/contentstack';
+import Links from '../typescript/data'
 
-export default {
-  name: 'Footer',
+export default defineComponent({
+  name: 'FooterContent',
   data() {
     return {
       data: null
@@ -66,14 +74,15 @@ export default {
         contentTypeUid: 'footer',
         jsonRtePath: ['copyright']
       });
-      let responsePages = await Stack.getEntries({
+      let responsePages: [navFooterList] = await Stack.getEntries({
         contentTypeUid: 'page'
       });
+
       let navFooterList = response[0].navigation.link;
       if (responsePages.length !== response.length) {
         responsePages.forEach(entry => {
           const fFound = response[0].navigation.link.find(
-            link => link.title === entry.title
+            (link: Links) => link.title === entry.title
           );
           if (!fFound) {
             navFooterList.push({ title: entry.title, href: entry.url });
@@ -91,5 +100,5 @@ export default {
       }
     });
   }
-};
+});
 </script>

src/components/Header.vue → src/components/HeaderContent.vue

@@ -50,13 +50,21 @@
   </header>
 </template>
 
-<script>
+<script lang="ts">
+
+interface navHeaderList {
+  title: string;
+  url: string;
+}
+
+import { defineComponent } from 'vue';
 import Stack from '../plugins/contentstack';
 import { onEntryChange } from '../plugins/contentstack';
-import Tooltip from '../components/Tooltip';
+import Tooltip from '../components/ToolTip.vue';
+import Links from '../typescript/data'
 
-export default {
-  name: 'Header',
+export default defineComponent({
+  name: 'HeaderContent',
   components: {
     Tooltip
   },
@@ -75,14 +83,14 @@ export default {
         referenceFieldPath: `navigation_menu.page_reference`,
         jsonRtePath: ['notification_bar.announcement_text']
       });
-      let responsePages = await Stack.getEntries({
+      let responsePages: [navHeaderList] = await Stack.getEntries({
         contentTypeUid: 'page'
       });
       let navHeaderList = response[0].navigation_menu;
       if (responsePages.length !== response.length) {
         responsePages.forEach(entry => {
           const hFound = response[0].navigation_menu.find(
-            navLink => navLink.label === entry.title
+            (navLink: Links) => navLink.label === entry.title
           );
 
           if (!hFound) {
@@ -104,5 +112,5 @@ export default {
       }
     });
   }
-};
+});
 </script>

src/components/HeroBanner.vue

@@ -31,8 +31,26 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: ['data', 'title']
-};
+<script lang="ts">
+
+interface Title {
+  title: string;
+}
+
+import Data from '../typescript/data';
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+
+  props:{
+    data:{
+      required: true,
+      type: Object as PropType<Data>
+    },
+    title:{
+      required: true,
+      type: Object as PropType<Title>
+    }
+  }
+});
 </script>