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

Author: marcos-hotmart

.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()