fix(MdCore): remove all async/await from codebase

.babelrc

@@ -1,17 +1,11 @@
 {
   "presets": [
-    "es2015",
-    "stage-3",
-    [
-      "env",
-      {
-        "modules": false,
-        "useBuiltIns": false
-      }
-    ]
+    "@babel/preset-es2015",
+    "@babel/preset-env"
   ],
   "plugins": [
-    "syntax-dynamic-import"
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-object-rest-spread"
   ],
   "ignore": [
     "dist/*.js"

ROADMAP.md

@@ -38,11 +38,11 @@ The release strategy will be like this:
   - [X] Multiple themes
   - [x] CSS Variables
   - [ ] CSS-only themes
-- [ ] SSR Support - `NEW`
+- [X] SSR Support - `NEW`
   - [X] Basic Support
 
 ### Components
-- [ ] MdAutocomplete - `NEW API`
+- [X] MdAutocomplete - `NEW API`
 - [X] MdApp - `NEW`
   - [X] Documentation
   - [X] Reusable App Shell component
@@ -79,8 +79,8 @@ The release strategy will be like this:
   - [X] Prompt
   - [X] Custom
 - [X] MdDivider
-- [ ] MdDrawer - `NEW API`
-  - [ ] Documentation
+- [X] MdDrawer - `NEW API`
+  - [X] Documentation
   - [x] Deprecate md-sidenav
   - [X] Persistent - `NEW`
   - [X] Permanent  - `NEW`
@@ -92,8 +92,8 @@ The release strategy will be like this:
   - [X] Deprecate whiteframe component
   - [X] Elevation classes
 - [X] MdEmptyState - `NEW`
-- [ ] MdField - `NEW API`
-  - [ ] Documentation
+- [X] MdField - `NEW API`
+  - [X] Documentation
   - [X] Change md-input-container to md-field
   - [X] Input/Textarea
   - [X] Checkbox
@@ -102,8 +102,8 @@ The release strategy will be like this:
   - [X] File - `NEW API`
   - [x] Select
 - [X] MdIcon
-- [ ] MdLayout - `NEW API`
-  - [ ] Documentation
+- [X] MdLayout - `NEW API`
+  - [X] Documentation
   - [X] Deprecate layout component
   - [X] New flexbox/responsive/class-based grid
 - [ ] MdList - `NEW API`
@@ -112,26 +112,26 @@ The release strategy will be like this:
   - [X] Expansion
   - [X] Input Controls
 - [X] MdMenu - `NEW API`
-- [ ] MdProgress - `NEW API`
-  - [ ] Documentation
-  - [ ] Spinner
-  - [ ] Bar
-  - [ ] 0%/100% progress
-  - [ ] Indeterminate state
+- [X] MdProgress - `NEW API`
+  - [X] Documentation
+  - [X] Spinner
+  - [X] Bar
+  - [X] 0%/100% progress
+  - [X] Indeterminate state
 - [X] MdRadio
 - [ ] MdRipple - `NEW API`
   - [ ] Documentation
   - [X] New ripple
   - [ ] Abstract component
   - [ ] Performance improvements
-- [ ] MdSnackbar
-  - [ ] Documentation
+- [X] MdSnackbar
+  - [X] Documentation
   - [X] Themed Snackbar
 - [X] MdSpeedDial - `NEW API`
   - [X] Click Action
   - [X] Multiple Effects
-- [ ] MdSteppers - `NEW API`
-  - [ ] Documentation
+- [X] MdSteppers - `NEW API`
+  - [X] Documentation
   - [X] Horizontal
   - [X] Vertical
 - [X] MdSubheader
@@ -146,8 +146,8 @@ The release strategy will be like this:
   - [x] Selection
   - [ ] Pagination
   - [x] Alternate Header
-- [ ] MdTabs
-  - [ ] Documentation
+- [X] MdTabs
+  - [X] Documentation
   - [X] Router integration - `NEW`
   - [X] Router Sync - `NEW`
   - [X] Symple way to trigger active tab
@@ -160,15 +160,15 @@ The release strategy will be like this:
   - [ ] Guide
   - [ ] Extending Vue Material
   - [ ] Third Party Components
-- [ ] About
+- [X] About
 - [ ] Changelog
 - [ ] Components summary
 - [ ] Contribute
-- [ ] Getting Started
+- [X] Getting Started
 - [ ] Migration Guide
-- [ ] Static docs
-- [ ] Themes
-  - [ ] Configuration
+- [X] Static docs
+- [X] Themes
+  - [X] Configuration
   - [ ] Dynamic Themes
 - [ ] UI Elements summary
 

build/docs/webpack.js

@@ -29,7 +29,7 @@ const componentExampleLoader = require.resolve('../loaders/component-example-loa
 const webpackConfig = {
   entry: {
     app: [
-      'babel-polyfill',
+      '@babel/polyfill',
       './docs/app/index.js',
       './build/docs/offline.js'
     ]

build/loaders/component-example-loader.js

@@ -5,7 +5,7 @@ const path = require('path')
 const compiler = require('vue-template-compiler')
 const { resolvePath } = require('../config')
 const { transform } = require('babel-core')
-const transpile = code => transform(code, {extends: resolvePath('.babelrc')}).code
+const transpile = code => transform(code).code
 const { getIndentedSource } = require('../../docs/app/mixins/codeSource')
 
 function camelCaseToDash (str) {

build/local/webpack.js

@@ -12,7 +12,7 @@ export default {
   devtool: 'cheap-module-eval-source-map',
   entry: {
     docs: [
-      'babel-polyfill',
+      '@babel/polyfill',
       './docs/app/index.js',
       './build/local/client'
     ]

docs/app/components/CodeBlock.vue

@@ -59,13 +59,13 @@
         }
       }
     },
-    async mounted () {
-      await this.$nextTick()
+    mounted () {
+      this.$nextTick().then(() => {
+        this.reindentSource()
+        this.enableCopy()
 
-      this.reindentSource()
-      this.enableCopy()
-
-      highlight.highlightBlock(this.$refs.block)
+        highlight.highlightBlock(this.$refs.block)
+      })
     }
   }
 </script>

docs/app/template/MainNavContent.vue

@@ -86,21 +86,22 @@
       }
     },
     methods: {
-      async scrollActiveItemIntoView () {
-        await this.$nextTick()
-
-        const activeEl = this.$el.querySelector('.router-link-exact-active')
-
-        if (activeEl) {
-          activeEl.scrollIntoView({
-            behavior: 'smooth'
-          })
-        }
+      scrollActiveItemIntoView () {
+        this.$nextTick().then(() => {
+          const activeEl = this.$el.querySelector('.router-link-exact-active')
+
+          if (activeEl) {
+            activeEl.scrollIntoView({
+              behavior: 'smooth'
+            })
+          }
+        })
       }
     },
-    async mounted () {
-      await this.$nextTick()
-      window.setTimeout(this.scrollActiveItemIntoView, 700)
+    mounted () {
+      this.$nextTick().then(() => {
+        window.setTimeout(this.scrollActiveItemIntoView, 700)
+      })
     }
   }
 </script>

package.json

@@ -43,18 +43,19 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@babel/cli": "^7.0.0-beta.38",
+    "@babel/core": "^7.0.0-beta.38",
+    "@babel/node": "^7.0.0-beta.38",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.38",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.38",
+    "@babel/polyfill": "^7.0.0-beta.38",
+    "@babel/preset-env": "^7.0.0-beta.38",
+    "@babel/preset-es2015": "^7.0.0-beta.38",
     "autoprefixer": "^7.1.6",
     "avoriaz": "^6.0.1",
     "axios": "^0.17.0",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.1",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-3": "^6.24.1",
+    "babel-loader": "8.0.0-beta.0",
     "chalk": "^2.3.0",
     "clipboard": "^1.7.1",
     "commitizen": "^2.9.6",

src/components/MdApp/MdAppDrawer.vue

@@ -47,14 +47,15 @@
         return 0
       }
     },
-    async mounted () {
-      await this.$nextTick()
-      this.drawerElement = this.$children[0]
-      this.MdApp.drawer.width = this.getDrawerWidth()
-      this.MdApp.drawer.active = this.visible
-      this.MdApp.drawer.mode = this.mode
-      this.MdApp.drawer.submode = this.submode
-      this.MdApp.drawer.initialWidth = this.$el.offsetWidth
+    mounted () {
+      this.$nextTick().then(() => {
+        this.drawerElement = this.$children[0]
+        this.MdApp.drawer.width = this.getDrawerWidth()
+        this.MdApp.drawer.active = this.visible
+        this.MdApp.drawer.mode = this.mode
+        this.MdApp.drawer.submode = this.submode
+        this.MdApp.drawer.initialWidth = this.$el.offsetWidth
+      })
     }
   }
 </script>

src/components/MdAutocomplete/MdAutocomplete.vue

@@ -126,11 +126,13 @@
       mdOptions: {
         deep: true,
         immediate: true,
-        async handler () {
+        handler () {
           if (this.isPromise(this.mdOptions)) {
             this.isPromisePending = true
-            this.filteredAsyncOptions = await this.mdOptions
-            this.isPromisePending = false
+            this.mdOptions.then(options => {
+              this.filteredAsyncOptions = options
+              this.isPromisePending = false
+            })
           }
         }
       },
@@ -191,22 +193,27 @@
           this.$emit('md-changed', this.searchTerm)
         }
       },
-      async showOptions () {
+      showOptions () {
         if (this.showMenu) {
           return false
         }
 
         this.showMenu = true
-        await this.$nextTick()
-        this.triggerPopover = true
-        this.$emit('md-opened')
+        this.$nextTick().then(() => {
+          this.triggerPopover = true
+          this.$emit('md-opened')
+        })
       },
-      async hideOptions () {
-        await this.$nextTick()
-        this.showMenu = false
-        await this.$nextTick()
-        this.triggerPopover = false
-        this.$emit('md-closed')
+      hideOptions () {
+        const clearPopover = () => {
+          this.triggerPopover = false
+          this.$emit('md-closed')
+        }
+
+        this.$nextTick().then(() => {
+          this.showMenu = false
+          this.$nextTick().then(clearPopover)
+        })
       },
       selectItem (item, $event) {
         const content = $event.target.textContent.trim()

src/components/MdBottomBar/MdBottomBar.vue

@@ -114,18 +114,19 @@
     created () {
       this.MdBottomBar.type = this.mdType
     },
-    async mounted () {
-      await this.$nextTick()
+    mounted () {
+      this.$nextTick().then(() => {
+        if (this.mdSyncRoute) {
+          this.setActiveItemByRoute()
+        } else {
+          this.setActiveItemByIndex(0)
+        }
 
-      if (this.mdSyncRoute) {
-        this.setActiveItemByRoute()
-      } else {
-        this.setActiveItemByIndex(0)
-      }
+        window.setTimeout(() => {
+          this.setupWatchers()
+        }, 100)
+      })
 
-      window.setTimeout(() => {
-        this.setupWatchers()
-      }, 100)
     }
   })
 </script>