move generators

2019-03-07 13:51:21 +03:00 · 2019-03-07 13:51:21 +03:00 · 5bca8a5ee2
commit 5bca8a5ee2
parent 890b57b75b
37 changed files with 2 additions and 0 deletions
--- a/1-js/13-modules/03-modules-dynamic-imports/article.md
+++ b/1-js/13-modules/03-modules-dynamic-imports/article.md
@ -0,0 +1,54 @@
+
+# Dynamic imports
+
+Export and import statements that we covered in previous chaters are called "static".
+
+What's because they are indeed static. The syntax is very strict.
+
+First, we can't dynamicaly generate any parameters of `import`.
+
+The module path must be a primitive string, can't be a function call. This won't work:
+
+```js
+import ... from *!*getModuleName()*/!*; // Error, only from "string" is allowed
+```
+
+Second, we can't import conditionally or at run-time:
+
+```js
+if(...) {
+  import ...; // Error, not allowed!
+}
+
+{
+  import ...; // Error, we can't put import in any block
+}
+```
+
+That's because, import/export aim to provide a backbone for the code structure. That's a good thing, as code structure can be analyzed, modules can be gathered and bundled together, unused exports can be removed (tree-shaken). That's possible only because everything is fixed.
+
+But how do we import a module dynamically, on-demand?
+
+## The import() function
+
+The `import(module)` function can be called from anywhere. It returns a promise that resolves into a module object.
+
+The usage pattern looks like this:
+
+```js run
+let modulePath = prompt("Module path?");
+
+import(modulePath)
+  .then(obj => <module object>)
+  .catch(err => <loading error, no such module?>)
+```
+
+Or, we could use `let module = await import(modulePath)` if inside an async function.
+
+Like this:
+
+[codetabs src="say" current="index.html"]
+
+So, dynamic imports are very simple to use.
+
+Also, dynamic imports work in regular scripts, they don't require `script type="module"`.
--- a/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html
+++ b/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html
@ -0,0 +1,10 @@
+<!doctype html>
+<script>
+  async function load() {
+    let say = await import('./say.js');
+    say.hi(); // Hello!
+    say.bye(); // Bye!
+    say.default(); // Module loaded (export default)!
+  }
+</script>
+<button onclick="load()">Click me</button>
--- a/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js
+++ b/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js
@ -0,0 +1,11 @@
+export function hi() {
+  alert(`Hello`);
+}
+
+export function bye() {
+  alert(`Bye`);
+}
+
+export default function() {
+  alert("Module loaded (export default)!");
+}