From 771ef303f8d4e95743b05ac7e96aabfdc932a729 Mon Sep 17 00:00:00 2001 From: vplentinax Date: Tue, 7 Jul 2020 12:16:44 -0400 Subject: [PATCH 1/9] dynamic --- .../03-modules-dynamic-imports/article.md | 54 +++++++++---------- .../say.view/index.html | 6 +-- .../say.view/say.js | 6 +-- 3 files changed, 32 insertions(+), 34 deletions(-) diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md index e48144a3e..163dad307 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -1,61 +1,59 @@ -# Dynamic imports +# Importaciones dinámicas -Export and import statements that we covered in previous chapters are called "static". The syntax is very simple and strict. +Las declaraciones de exportación e importación que cubrimos en capítulos anteriores se denominan "estáticas". La sintaxis es muy simple y estricta. Primero, no podemos generar dinámicamente ningún parámetro de `import`. -First, we can't dynamically generate any parameters of `import`. - -The module path must be a primitive string, can't be a function call. This won't work: +La ruta del módulo debe ser una cadena primitiva, no puede ser una llamada de función. Esto no funcionará: ```js -import ... from *!*getModuleName()*/!*; // Error, only from "string" is allowed +import ... from *!*getModuleName()*/!*; // Error, from sólo permite "string" ``` -Second, we can't import conditionally or at run-time: +En segundo lugar, no podemos importar condicionalmente o en tiempo de ejecución: ```js if(...) { - import ...; // Error, not allowed! + import ...; // Error, no permitido! } { - import ...; // Error, we can't put import in any block + import ...; // Error, no podemos poner importación en ningún bloque. } ``` -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 into one file by special tools, unused exports can be removed ("tree-shaken"). That's possible only because the structure of imports/exports is simple and fixed. +Esto se debe a que `import`/`export` proporcionan una columna vertebral para la estructura del código. Eso es algo bueno, ya que la estructura del código se puede analizar, los módulos se pueden reunir y agrupar en un archivo mediante herramientas especiales, las exportaciones no utilizadas se pueden eliminar("tree-shaken"). Eso es posible solo porque la estructura de las importaciones / exportaciones es simple y fija. -But how can we import a module dynamically, on-demand? +Pero, ¿cómo podemos importar un módulo dinámicamente, a petición? -## The import() expression +## La expresión import() -The `import(module)` expression loads the module and returns a promise that resolves into a module object that contains all its exports. It can be called from any place in the code. +La expresión `import(module)` carga el módulo y devuelve una promesa que se resuelve en un objeto de módulo que contiene todas sus exportaciones. Se puede llamar desde cualquier lugar del código. -We can use it dynamically in any place of the code, for instance: +Podemos usarlo dinámicamente en cualquier lugar del código, por ejemplo: ```js -let modulePath = prompt("Which module to load?"); +let modulePath = prompt("¿Qué modulo cargar?"); import(modulePath) .then(obj => ) .catch(err => ) ``` -Or, we could use `let module = await import(modulePath)` if inside an async function. +O, podríamos usar `let module = await import(modulePath)` si está dentro de una función asíncrona. -For instance, if we have the following module `say.js`: +Por ejemplo, si tenemos el siguiente módulo `say.js`: ```js // 📁 say.js export function hi() { - alert(`Hello`); + alert(`Hola`); } export function bye() { - alert(`Bye`); + alert(`Adiós`); } ``` -...Then dynamic import can be like this: +...Entonces la importación dinámica puede ser así: ```js let {hi, bye} = await import('./say.js'); @@ -64,35 +62,35 @@ hi(); bye(); ``` -Or, if `say.js` has the default export: +O, si `say.js` tiene la exportación predeterminada: ```js // 📁 say.js export default function() { - alert("Module loaded (export default)!"); + alert("Módulo cargado (export default)!"); } ``` -...Then, in order to access it, we can use `default` property of the module object: +...Luego, para acceder a él, podemos usar la propiedad `default` del objeto del módulo: ```js let obj = await import('./say.js'); let say = obj.default; -// or, in one line: let {default: say} = await import('./say.js'); +// o, en una línea: let {default: say} = await import('./say.js'); say(); ``` -Here's the full example: +Aquí está el ejemplo completo: [codetabs src="say" current="index.html"] ```smart -Dynamic imports work in regular scripts, they don't require `script type="module"`. +Las importaciones dinámicas funcionan en scripts normales, no requieren `script type =" module "`. ``` ```smart -Although `import()` looks like a function call, it's a special syntax that just happens to use parentheses (similar to `super()`). +Aunque `import ()` parece una llamada de función, es una sintaxis especial que solo usa paréntesis (similar a `super ()`). -So we can't copy `import` to a variable or use `call/apply` with it. It's not a function. +Por lo tanto, no podemos copiar `import` a una variable o usar `call / apply` con ella. No es una función. ``` diff --git 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 index 80909cf94..2a3002d17 100644 --- 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 @@ -2,9 +2,9 @@ diff --git 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 index cff234b7c..24010b827 100644 --- 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 @@ -1,11 +1,11 @@ export function hi() { - alert(`Hello`); + alert(`Hola`); } export function bye() { - alert(`Bye`); + alert(`Adiós`); } export default function() { - alert("Module loaded (export default)!"); + alert("Módulo cargado (export default)!"); } From c86efda67afa6b6579ebda2fb40d7ec1b419dd49 Mon Sep 17 00:00:00 2001 From: Valentina VP <34555644+vplentinax@users.noreply.github.com> Date: Tue, 7 Jul 2020 12:20:57 -0400 Subject: [PATCH 2/9] arreglo lineas --- 1-js/13-modules/03-modules-dynamic-imports/article.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md index 163dad307..56c26c701 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -1,6 +1,8 @@ # Importaciones dinámicas -Las declaraciones de exportación e importación que cubrimos en capítulos anteriores se denominan "estáticas". La sintaxis es muy simple y estricta. Primero, no podemos generar dinámicamente ningún parámetro de `import`. +Las declaraciones de exportación e importación que cubrimos en capítulos anteriores se denominan "estáticas". La sintaxis es muy simple y estricta. + +Primero, no podemos generar dinámicamente ningún parámetro de `import`. La ruta del módulo debe ser una cadena primitiva, no puede ser una llamada de función. Esto no funcionará: From dc1e27253d6977d020723a8d9f32afb88879d9bd Mon Sep 17 00:00:00 2001 From: Valentina VP <34555644+vplentinax@users.noreply.github.com> Date: Wed, 8 Jul 2020 23:18:55 -0400 Subject: [PATCH 3/9] Update 1-js/13-modules/03-modules-dynamic-imports/article.md Co-authored-by: joaquinelio --- 1-js/13-modules/03-modules-dynamic-imports/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md index 56c26c701..24ecccc72 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -14,7 +14,7 @@ En segundo lugar, no podemos importar condicionalmente o en tiempo de ejecución ```js if(...) { - import ...; // Error, no permitido! + import ...; // ¡Error, no permitido! } { From 70ab7b5a710d21d8d89496d64bdfdad955752c8b Mon Sep 17 00:00:00 2001 From: Valentina VP <34555644+vplentinax@users.noreply.github.com> Date: Wed, 8 Jul 2020 23:19:03 -0400 Subject: [PATCH 4/9] Update 1-js/13-modules/03-modules-dynamic-imports/article.md Co-authored-by: joaquinelio --- 1-js/13-modules/03-modules-dynamic-imports/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md index 24ecccc72..1fc4ba4d9 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -22,7 +22,7 @@ if(...) { } ``` -Esto se debe a que `import`/`export` proporcionan una columna vertebral para la estructura del código. Eso es algo bueno, ya que la estructura del código se puede analizar, los módulos se pueden reunir y agrupar en un archivo mediante herramientas especiales, las exportaciones no utilizadas se pueden eliminar("tree-shaken"). Eso es posible solo porque la estructura de las importaciones / exportaciones es simple y fija. +Esto se debe a que `import`/`export` proporcionan una columna vertebral para la estructura del código. Eso es algo bueno, ya que la estructura del código se puede analizar, los módulos se pueden reunir y agrupar en un archivo mediante herramientas especiales, las exportaciones no utilizadas se pueden eliminar ("tree-shaken"). Eso es posible solo porque la estructura de las importaciones / exportaciones es simple y fija. Pero, ¿cómo podemos importar un módulo dinámicamente, a petición? From a949997b540a186a2a236470eb4d045ea1dce45b Mon Sep 17 00:00:00 2001 From: Valentina VP <34555644+vplentinax@users.noreply.github.com> Date: Wed, 8 Jul 2020 23:19:20 -0400 Subject: [PATCH 5/9] Update 1-js/13-modules/03-modules-dynamic-imports/article.md Co-authored-by: joaquinelio --- 1-js/13-modules/03-modules-dynamic-imports/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md index 1fc4ba4d9..a1a957361 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -92,7 +92,7 @@ Las importaciones dinámicas funcionan en scripts normales, no requieren `script ``` ```smart -Aunque `import ()` parece una llamada de función, es una sintaxis especial que solo usa paréntesis (similar a `super ()`). +Aunque `import()` parece una llamada de función, es una sintaxis especial que solo usa paréntesis (similar a `super ()`). Por lo tanto, no podemos copiar `import` a una variable o usar `call / apply` con ella. No es una función. ``` From 9165035f7def5ca93f05eec87e1e82704d59035c Mon Sep 17 00:00:00 2001 From: Valentina VP <34555644+vplentinax@users.noreply.github.com> Date: Wed, 8 Jul 2020 23:19:29 -0400 Subject: [PATCH 6/9] Update 1-js/13-modules/03-modules-dynamic-imports/article.md Co-authored-by: joaquinelio --- 1-js/13-modules/03-modules-dynamic-imports/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md index a1a957361..4dc3d64f0 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -94,5 +94,5 @@ Las importaciones dinámicas funcionan en scripts normales, no requieren `script ```smart Aunque `import()` parece una llamada de función, es una sintaxis especial que solo usa paréntesis (similar a `super ()`). -Por lo tanto, no podemos copiar `import` a una variable o usar `call / apply` con ella. No es una función. +Por lo tanto, no podemos copiar `import` a una variable o usar `call/apply` con ella. No es una función. ``` From fdb87aeab9e6fc3090efa5aca4875e1924b0181d Mon Sep 17 00:00:00 2001 From: Valentina VP <34555644+vplentinax@users.noreply.github.com> Date: Wed, 8 Jul 2020 23:19:39 -0400 Subject: [PATCH 7/9] Update 1-js/13-modules/03-modules-dynamic-imports/say.view/index.html Co-authored-by: joaquinelio --- 1-js/13-modules/03-modules-dynamic-imports/say.view/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git 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 index 2a3002d17..0a4493cf4 100644 --- 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 @@ -2,7 +2,7 @@ From 7e303642aa06e8c6dbe395d997c02bfb3ceddc77 Mon Sep 17 00:00:00 2001 From: Valentina VP <34555644+vplentinax@users.noreply.github.com> Date: Wed, 8 Jul 2020 23:19:57 -0400 Subject: [PATCH 9/9] Update 1-js/13-modules/03-modules-dynamic-imports/article.md Co-authored-by: joaquinelio --- 1-js/13-modules/03-modules-dynamic-imports/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md index 4dc3d64f0..4b8a2ff35 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -88,7 +88,7 @@ Aquí está el ejemplo completo: [codetabs src="say" current="index.html"] ```smart -Las importaciones dinámicas funcionan en scripts normales, no requieren `script type =" module "`. +Las importaciones dinámicas funcionan en scripts normales, no requieren `script type="module"`. ``` ```smart