-
-
Notifications
You must be signed in to change notification settings - Fork 224
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ES2022: Top-level await proposal #1365
Comments
主なユースケースtc39/proposal-top-level-await: top-level
(async function main(){
})();
// awaiting.mjs
import { process } from "./some-module.mjs";
let output;
export default (async () => {
const dynamic = await import(computedModuleSpecifier);
const data = await fetch(url);
output = process(dynamic.default, data);
})();
export { output }; 後者のユースケースは、普通に関数をexportした方が圧倒的に良いので、扱いたくない。 // awaiting.mjs
import { process } from "./some-module.mjs";
let output;
export const fetch = async () => {
const dynamic = await import(computedModuleSpecifier);
const data = await fetch(url);
return process(dynamic.default, data);
} あとは、コンソールでもDynamic ImportをTop-Levelにかけるのは、これのおかげなはず。 > await import(`/i18n/${navigator.language}`); mainをなくせるのはいいけど、正直なくてもそこまで困らない。 |
Dynamic ImportのユースケースがないとTop-Level awaitって機能しにくいな。 |
import confetti from 'https://cdn.skypack.dev/canvas-confetti';
confetti(); うーん、でもブラウザは元々URLをimportできるから、別にDynamic Import自体は関係ないか。 const confetti = await import('https://cdn.skypack.dev/canvas-confetti');
confetti.default(); こう書けても何も嬉しくない… const version = "1.0.0"
const confetti = await import(`https://cdn.skypack.dev/canvas-confetti@${version}`);
confetti.default(); みたいなケースぐらいか。 |
こちらは 結局 |
Top-Level await 仕様的には
という仕組みなっている。 https://tc39.es/proposal-top-level-await/#sec-parsemodule
https://tc39.es/proposal-top-level-await/#sec-source-text-module-record-execute-module
https://tc39.es/proposal-top-level-await/#_ref_103
https://tc39.es/proposal-top-level-await/#sec-async-function-definitions |
仕様的に見ると
という表現になりそう。(FormalParametersとかは細かいことなので特に明記はしないけど) |
問題はModuleという表現は https://jsprimer.net/basic/module/#module なので、非同期より後にあるんだよなー <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>top-level-await-dynamic-import in script</title>
</head>
<body>
<script>
console.log("script context");
const confetti = await import('https://cdn.skypack.dev/canvas-confetti');
confetti.default();
</script>
</body>
</html> はエラーで動かない
|
Top-Level awaitはScriptじゃなくてModuleじゃないと実行できない。 evalだとModuleじゃないのでTop-Level awaitが利用できない
|
Top-level await proposal
対応がいる。
await
の説明あんまりユースケースでは使ってないので、詳しくは触れないかも。
CDNとかDynamic Importと合わせた場合 と コンソールが一番のユースケースな気はする。
Originally posted by @azu in #1337 (comment)
The text was updated successfully, but these errors were encountered: