Title: Theory / Important / CS / Programming / JS / Mozilla / Module
Tags: seen_description declaration todo_declaration
On every note of this deck, unless a note says otherwise:
Page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

Name: A relative import
Definition: An import starting with "/", "./", or "../"
Page: https://www.typescriptlang.org/docs/handbook/module-resolution.html
Context: Typescript

Name: A non-relative import
Definition: An import which do not start with "/", "./", or "../"
Page: https://www.typescriptlang.org/docs/handbook/module-resolution.html
Context: Typescript
Example: ?

Extension: mjs
Description: module js file
Other fields (not shown on cards):
Page: https://www.typescriptlang.org/docs/handbook/module-resolution.html

Question: What to do if .mjs files are not executed
Answer: Ensure the server set Mime-type as text/javascript
Page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Answer2: or rename to js.

Instruction: export {foo1, ..., foon}
Effect: Ensure that the fooi's can be accessed from outside the module
Language: js

Instruction: export var/let/const/function foo
Page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Meaning: Ensure that foo can be accessed from outside the module
Language: js

Instruction: import {foo1, ..., foon} from 'plop'
Effect: Introduce the consts fooi to represents the value associated to fooi from module plop
Language: js
Assuming: the fooi's are exported in plop

Instruction: <script type="module" src="foo"></script>
Effect: Load the module at address foo
Language: html

Instruction: <script type="module">
  bar
</script>
Effect: Load bar as a JS module
Language: html

Question: difference between module and script
Answer: Automatically in strict mode
Page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Context: html, js
Answer2: All code is deferred
Answer3: Executed once even if referenced multiple time
Answer4: Only exported variable that are imported in the script/another module can be used

Name: A named export
Definition: An export which is not a default one.
Page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Context: html, js

Instruction: export default foo;
Effect: export foo under the name default
Language: js
Context: module
Name: default export

Instruction: import foo from bar
Effect: import {default as foo} from bar
Language: js
Context: module

Instruction: foo as bar
Effect: Take the value associated to foo and associate it to the variable/const bar
Language: js
Context: module import/export

Instruction: import * as Module from foo
Effect: create a name space Module which contains all elements exported by foo
Language: js
Context: module import/export

Instruction: export * from foo
Effect: Reexport all content of module foo as content of current module
Language: js
Context: module import/export

Instruction: export {bar1, ..., barn} from foo
Effect: Export the bari's from module foo from this module
Language: js
Context: module import/export

Question: Advanvtage of dynamic module loading over top-level loading
Answer: Loading only required modules diminishes loading time and data consumed
Page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Context: js

Question: Advantage of top-level module loading over dynamic loading
Answer: The page may freeze during the interaction during loading the data
Page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Context: js

Instruction: import(foo)
Language: js
Returns: A promise containing the module designed by address foo

Instruction: export default await foo;
Effect: similar as
export default foo
But foo is a promise, and the promise value is exported, and the importing module should wait until the promise is realized
Language: js
Name: Top level await
Intuition: The parent module can't execute until current module ends but can still import sibling modules