# Desarrollo de nuevos componentes en Javascript

Revisar el componente `src/js/components/ComponentExample.js` el cual debe siempre recibir un single `DomElement` y los metodos `init()` y `destroy()`.

La implementación en main.js -que es el archivo js de entrada para el bundler del CDN- debe tener la logica de importación dinámica para asegurar un *bundler* ligero como empaquetado final.

```js
// para componentes de una instancia unica en el DOM. 

// obtiene el elemento en el DOM según su identificador id="version"
const el = document.getElementById('version');
// solo si el elemento esta presente, se injecta la dependencia
  if (el) {
    import('./components/ComponentExample').then((Library) => {
      const ComponentExample = Library.default;
        // se guarda en la variable global window para su posible manipulación posterior
        window.componentInstance = new ComponentExample(el);
        window.componentInstance.init();
    });
  }
```

```js
// para componentes de una multiple instancia en el DOM.

// obtiene el elemento en el DOM según su identificador class class="component-example"
  const els = document.getElementsByClassName('component-example');
// solo si el elemento esta presente, se injecta la dependencia
  if (els) {
    import('./components/ComponentExample').then((Library) => {
      const ComponentExample = Library.default;
      window.componentInstances = [];
      for (let i = 0; i < els.length; i += 1) {
        // se guarda en la variable global window para su posible manipulación posterior
        window.componentInstances[i] = new ComponentExample(els[i]);
        window.componentInstances[i].init();
      }
    });
  }
```