importar biblioteca JS de terceiros em código aberto LWC

Aug 16 2020

Depois de perder uma quantidade significativa de tempo em como importar o jQuery, consegui 2 maneiras em HTML com caminho local ou CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

IN JS com caminho local ou CDN:

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

Mas, infelizmente, os dois métodos acima não funcionam no LWC e não há documentação disponível sobre como fazer o mesmo.

A abordagem abaixo funciona bem na minha página index.html para importar jQuery no meu projeto lwc.

<script src="./resources/js/jquery-3.5.1.min.js"></script>

Eu também perdi muitas horas em como importar CSS em lwc, pois não há documentação disponível sobre como importar CSS de terceiros também, mas de alguma forma consegui importar css usando o código abaixo

constructor() {

    super();

    const styles = document.createElement('link');
    styles.href = './resources/css/bootstrap.css';
    styles.rel = 'stylesheet';
    this.template.appendChild(styles);
}

Então, tentei uma abordagem semelhante para importar JS e isso não dá nenhum erro no log do console, mas o mesmo não funciona, tentei no construtor e no connectedCallback, mas sem sorte.

connectedCallback() {
        const jq = document.createElement('SCRIPT');
        jq.src = './resources/js/jquery-3.5.1.min.js';
        jq.type = 'text/javascript';
        this.template.appendChild(jq);
    }

se alguém tiver alguma idéia sobre como importar a biblioteca JS em código aberto LWC, por favor, me avise, ficaria muito grato por sua ajuda.

Respostas

1 salesforce-sas Aug 16 2020 at 22:52

Considere as receitas do LWC de código aberto

  1. Primeiro você precisa instalar o jQuery no aplicativo da web lwc usando npm install jquery. OU qualquer outra biblioteca que você deseja usar. Após a instalação, você verá o arquivo na node_modulespasta

  2. Agora, você só precisa obter essa variável de biblioteca sempre que precisar. Observe que embora você possa usar jquery, você não pode identificar os elementos diretamente. ou seja, você não pode usar jQuery('p'), em vez disso, deve usar jq(this.template.querySelector('p')).

Abaixo está o exemplo do hello world nas mesmas receitas de amostra:

hello.html:

<template>
    
    <button onclick={hide}>Hide</button>
    <button onclick={show}>Show</button>
    
    <p>If you click on the "Hide" button, I will disappear.</p>
    
    <ui-card title="Hello">
        <div>
            Hello, {greeting}!
        </div>

        <recipe-view-source source="recipe/hello" slot="footer">
            Bind an HTML element to a component property.
        </recipe-view-source>
    </ui-card>
</template>

hello.js:

import { LightningElement } from 'lwc';

export default class Hello extends LightningElement {
    greeting = 'World';
    
    connectedCallback(){
        window.jq = require('jQuery');
    }

    hide(){
        jq(this.template.querySelector('p')).hide();
    }

    show(){
        jq(this.template.querySelector('p')).show();
    }
}

Como muitas bibliotecas usam $como padrão, eu apenas costumo usar jqpara jquery.

Resultado: