Uso de polyfill de Intersection Observer e imports dinámicos

Probablemente ustedes no tenga errores al ejecutar el dynamic import sin instalar la dependecia @babel/plugin-syntax-dynamic-import y es que el 4 de Julio de 2019 en la versión 7.5.0 de babel esta característica se añadió al paquete @babel/preset-env justo como sale en esta nota de release en el repo oficial babel en github.
 

Release 7.5.0 · babel/babel

me parece que el curso está teniendo un contenido muy bueno, el único problema es el tema del campo de visión del código. tener la consola y el lateral abiertos todo el rato dificulta un poco la legibilidad.

Para los que tienen un poco de duda sobre cómo se conecta el hook con el article…

1. Primero debemos entender que en el ListOfPhotoCard/index.js, estámos mapeando el array, es decir que estamos haciendo print 9 veces (o las que tengas en el array) del componente <PhotoCard/>

2. En PhotoCard estamos iniciando la const element utilizando useRef(null).

3. Con la prop ref estamos tomando el elemento del DOM y le estamos pasando element, por ende este no va a ser null sino será el elemento article.

4. En el useEffect estamos devolviendo una promesa la cual encadena el IntersectionObserver… Y a su vez estará observendo el element del punto #2 (es decir: estará observando el article).

Si aún tienes duda, quitale la prop ref al article (o cambiale el nombre) e intenta compilar…

Actualmente, en Junio 2020, ya el import dinámico está integrado a JS, no hace falta descargar los plugins.

Otra manera de preguntar por una key en un objeto puede ser:

'IntersectionObserver' in window

Eso te devolverá un boolean.

paquetes a instalar

npm i intersection-observer
npm i @babel/plugin-syntax-dynamic-import -D
npm i babel-eslint -D

No tuve necesitad de instalar @babel/plugin-syntax-dynamic-import , simplemente funcionó.

Si queremos crear un Hook personalizado y reutilizable, el codigo queda mas o menos asi:

import React, { useState, useRef, useEffect } from 'react'

export function useNearScreen() {
  const [show, setShow] = useState(false)
  
  const $element = useRef(null)
  
  useEffect(() => {
    Promise.resolve(
      typeof window.IntersectionObserver !== 'undefined' 
        ? window.IntersectionObserver
        : import('intersection-observer')
    )
      .then(() => {
        const observer = new window.IntersectionObserver(entries => {
          const { isIntersecting } = entries[0]
          if (isIntersecting) {
            setShow(true)
            observer.disconnect()
          }
        })
      
        observer.observe($element.current)
      })
  }, [$element])

  return { $element, show }
}

Y lo podemos utilizar de la siguiente manera

  const { $element, show } = useNearScreen()

  <Article ref={$element}>
          { show ? 'Hello world' : null }
  </Article>

Yo utilicé Async - Await en vez de Promises, así quedó mi código:
.

Se podria hacer con un assyc await en ves de una promesa con su .then

Recientemente salió ECMA 2020 y ya se pueden usar imports dinámicos tranquilamente de manera natural, sin necesidad de nada extra.

muy buena clase, el profesor explica muy rapido. Una maginifica solucion es el bajar la velocidad del video.

Link descargas de paquetes en la terminal de vsc.

npm install @babel/plugin-syntax-dynamic-import --save-dev

Qué horror 😦

Excelente curso, muy buena manera de explicar y sin dejar cabos sueltos jajaj buena la del linter!

Al dia de hoy no hace falta instalar el plugin, ya babel lo incluye.

Hola, les dejo el avance de mi repositorio hasta acá hecho en Nextjs:

https://github.com/danyel117/petgram-platzi/tree/lazyload

m,

Su consola de VSC hace que el código sea menos visible, si de por si hay pantallas muy chicas así se ven menos jaja, pero igual muy buen curso.

Me parece que actualmente ya no es necesario utilizar @babel para utilizar un import dinamico, el repositorio ofical nos dice que esta actualmente en la fase 4 del proceso TC39 y por lo tanto los Imports dinamicos ya se estan añadiendo oficialmente al ECMAscript Standard

Genial

Hola! Tengo una consulta, es lo mismo si valido que sea igual (==) a ‘undefined’ y no diferente. Cambia algo performe? Me resulta más intuitivo hacerlo de esta manera:

typeof window.IntersectionObserver == "undefined"
          ? import("intersection-observer")
          : window.IntersectionObserver

A pesar de haber instalado babel-eslint me sigue devolviendo
Unexpected token import

Que config adicional hay que hacer para que se hagan arreglos del código cuando se guarda, a mi nunca me pasa ni en este curso ni en el de Sparragus, que también lo explica, jaja que tristeza jajaja, y que buena clase, este curso esta matador.

Tengo muchos errores con webpack-dev-server alguien sabe como solucionar este problema, estoy trabajando con las versiones que usa el profe porque las actuales generan problemas

> [email protected]1.0.0 dev /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/segundo-intento/curso-platzi-react-avanzado
> webpack-dev-server

internal/modules/cjs/loader.js:968
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/segundo-intento/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/segundo-intento/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/segundo-intento/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected]1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/matespinosa09/.npm/_logs/2020-11-09T14_40_39_237Z-debug.log

Temas de compatibilidad resueltos de 0, esperanzador

En algunos casos el element.current viene undefined y se rompe la promesa. Yo tuve que agregar un early return cuando es undefined para evitar que se rompa.

Si no quieren utilizar promesas este sería el código en términos de async/await:

  useEffect(() => {
    (async () => {
      typeof window.IntersectionObserver !== 'undefined' ?
        window.IntersectionObserver :
        await import('intersection-observer');

      const observer = new window.IntersectionObserver((entries) => {
        const { isIntersecting } = entries[0];
        if (isIntersecting) {
          setShow(true);
          console.log('Sí');
          observer.disconnect();
        }
      });
      observer.observe(element.current);
    })();
  }, [element]);

excelente clase me gusto!!!

Muy interesante, tengo errores en mis practicas, bajare el proyecto de github y lo comparare para saber y aprender que hice mal. Gracias!! muy interesantes las clases. 😃

Justamente estaba usando los dynamic import en la empresa a la cual trabajo y no necesite la dependencia.