Buenas tardes a todos,

Quiero compartir mi experiencia con este tema, ya que estoy trabajando en un proyecto que esta compuesto de Web Components con StencilJS en el que tenia que incluir la funcionalidad de librerias de JS vanilla. Entonces vamos a ello:

Para este ejemplo tenia que utilizar la libreria EnlighterJS, El componente Web debe mostrar dos columnas, una de ellas debe mostrar descripciones del codigo fuente que esta en la segunda columna.

Aquí dejo un ejemplo de como deberia verse

Empezamos creando el nuevo componente. Guardamos la libreria JS dentro de nuestro proyecto, en mi caso lo coloque en la carpeta de utils.

Creamos un nuevo archivo desc.d.ts dentro de la carpetasrc con el que vamos a definirle un modulo que representará a la libreria de JS.

import _enlighterjs from '../www/lib/enlighterjs.min.js';

declare global {
    const EnlighterJS: typeof _enlighterjs;
}

En la linea 1 se debe especificar donde estarán la libreria alojada. Desde la linea 3 a la 5 se define el nombre del modulo que va utilizar dentro de nuestros componentes .tsx.

Aun que la libreria esta en utilstenemos que modificar el stencil.config.tspara indicarle el compilador que copie las librerias a libcada vez que hacemos cambios. Y se hace de esta manera.

 {
      type: 'www',
      serviceWorker: null, // disable service workers
      copy: [
        {
          src: 'utils/enlighterjs.min.js',
          dest: 'lib/enlighterjs.min.js'
        },
        {
          src: 'utils/enlighterjs.min.css',
          dest: 'lib/enlighterjs.min.css'
        }
      ]
    },

Muy bien, con lo anterior le hemos dicho a StencilJS que va utilizar unas librerias que estan ubicadas en liby que se va accesar a ellas por medio de nuestro modulo EnlighterJS.

A continuación debemos agregar la libreria a nuestro index.html <script src="/lib/enlighterjs.min.js"></script>.

Ahora solo queda utilizar el codigo que nos ofrece la libreria en nuestro componente. De la siguiente manera.

import { Component, Host, h,Prop,Listen } from '@stencil/core'; 

@Component({
  tag: 'gcx-full-code',
  styleUrl: 'gcx-full-code.css',
  shadow: false,
})
export class GcxFullCode {
  @Prop() html:HTMLElement; 
  codeElement!:HTMLElement;  

  customFunction(param) {
    EnlighterJS.enlight(this.codeElement, {
      language: 'java',
      theme: 'bootstrap4',
      textOverflow: 'scroll', 
    });

  }

  componentDidRender(){
    EnlighterJS.init('pre', 'code', {
      language: 'java',
      theme: 'bootstrap4'
    }); 
  }

  render() {
    if(this.html){


      return ( 
          <pre id="code" ref={(el) => this.codeElement= el as HTMLElement}  innerHTML={this.html.innerHTML} />
      );
    }else{

      return (
        <Host> 
        </Host>
      );
    }
  }

}

En la lina 33 se crear una referencia al objeto <pre> con el que despues en la linea 13 se pueden ejecutar acciones utilizando la liberia de JS.

Algunas cosas a conciderar, aun no consigo migrar la carpeta lib cuando compilo el componente y me toca copiarla a mano cuando quiero utilizar el componente en otro proyecto.