{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/vue-component-compiler/issues/55","repository_url":"https://api.github.com/repos/vuejs/vue-component-compiler","labels_url":"https://api.github.com/repos/vuejs/vue-component-compiler/issues/55/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue-component-compiler/issues/55/comments","events_url":"https://api.github.com/repos/vuejs/vue-component-compiler/issues/55/events","html_url":"https://github.com/vuejs/vue-component-compiler/issues/55","id":293251670,"number":55,"title":"Compatibility for more Async / await patterns","user":{"login":"ch-luke","id":20023331,"avatar_url":"https://avatars1.githubusercontent.com/u/20023331?v=4","gravatar_id":"","url":"https://api.github.com/users/ch-luke","html_url":"https://github.com/ch-luke","followers_url":"https://api.github.com/users/ch-luke/followers","following_url":"https://api.github.com/users/ch-luke/following{/other_user}","gists_url":"https://api.github.com/users/ch-luke/gists{/gist_id}","starred_url":"https://api.github.com/users/ch-luke/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ch-luke/subscriptions","organizations_url":"https://api.github.com/users/ch-luke/orgs","repos_url":"https://api.github.com/users/ch-luke/repos","events_url":"https://api.github.com/users/ch-luke/events{/privacy}","received_events_url":"https://api.github.com/users/ch-luke/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":11,"created_at":"2018-01-31T17:47:30Z","updated_at":"2018-05-25T11:16:55Z","closed_at":"2018-03-24T15:40:39Z","author_association":"NONE","body":"Would allow you to dynamically imports all your modules.\r\n\r\n````js\r\n<template>\r\n  <div class=\"your html code\"></div>  \r\n</template>\r\n\r\n<!-- Option 1 -->\r\n<script>\r\n(async () => {\r\n  const { exportName } = await import('importName');\r\n\r\n  export default {\r\n    // component details\r\n  };\r\n})();\r\n</script>\r\n\r\n<!-- Option 2 -->\r\n<script>\r\nexport default (async () => {\r\n  const { exportName } = await import('importName');\r\n\r\n  return {\r\n    // component details\r\n  };\r\n})();\r\n</script>\r\n````"},"comment":{"url":"https://api.github.com/repos/vuejs/vue-component-compiler/issues/comments/392021845","html_url":"https://github.com/vuejs/vue-component-compiler/issues/55#issuecomment-392021845","issue_url":"https://api.github.com/repos/vuejs/vue-component-compiler/issues/55","id":392021845,"user":{"login":"ch-luke","id":20023331,"avatar_url":"https://avatars1.githubusercontent.com/u/20023331?v=4","gravatar_id":"","url":"https://api.github.com/users/ch-luke","html_url":"https://github.com/ch-luke","followers_url":"https://api.github.com/users/ch-luke/followers","following_url":"https://api.github.com/users/ch-luke/following{/other_user}","gists_url":"https://api.github.com/users/ch-luke/gists{/gist_id}","starred_url":"https://api.github.com/users/ch-luke/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ch-luke/subscriptions","organizations_url":"https://api.github.com/users/ch-luke/orgs","repos_url":"https://api.github.com/users/ch-luke/repos","events_url":"https://api.github.com/users/ch-luke/events{/privacy}","received_events_url":"https://api.github.com/users/ch-luke/received_events","type":"User","site_admin":false},"created_at":"2018-05-25T11:16:55Z","updated_at":"2018-05-25T11:16:55Z","author_association":"NONE","body":"@yyx990803, thanks for your response. Yes took that into account, but the snippet really does not work.\r\n\r\nI do see something here. As you mentioned , components are synchronise and introducing async to any part of it will alter the load sequence . You are suggesting using reactivity as a solution, but by design that is a post-fix band aid approach and believe there is a better way. \r\n\r\nSo I am suggesting we use async/await to keep components synchronise and ensure the load order of the lifecycle stages . E.g. \r\n\r\n```js\r\n\r\n// About to load the component\r\nif (hasAsync(comp)) {\r\n  // Load stages in order\r\n  await loadMethods()\r\n  await loadBeforeCreated()\r\n  await loadCreated()\r\n\r\n  ...\r\n\r\n  // Shouldn't we also introduce a asyncMethods tag for non load critical\r\n  // code such as button clicks. This will be lazy loaded and not waited for\r\n  loadAsyncMethods()\r\n} else {\r\n  // Load component normally\r\n}\r\n\r\n```"}}
{"actor":{"display_login":"ch-luke"}}