React experimental_useFormState: Un ghid complet pentru o gestionare îmbunătățită a formularelor

Ecosistemul React, aflat într-o continuă evoluție, introduce în mod constant instrumente inovatoare pentru a îmbunătăți experiența dezvoltatorului și performanța aplicației. Un astfel de progres este Hook-ul experimental_useFormState. Acest hook, aflat în prezent într-o etapă experimentală, oferă o abordare puternică și simplificată pentru gestionarea stării formularelor și gestionarea acțiunilor asincrone, în special atunci când este combinat cu componentele și acțiunile serverului React. Acest ghid va aprofunda complexitățile experimental_useFormState, explorând beneficiile, cazurile de utilizare și strategiile de implementare.

Ce este experimental_useFormState?

Hook-ul experimental_useFormState este conceput pentru a simplifica gestionarea formularelor în aplicațiile React. Acesta oferă o modalitate declarativă de a gestiona starea formularelor, erorile și trimiterile asincrone. Spre deosebire de metodele tradiționale care implică adesea actualizări manuale ale stării și o gestionare complexă a evenimentelor, experimental_useFormState simplifică acest proces, oferind un singur hook pentru a gestiona întregul ciclu de viață al formularului.

În esență, experimental_useFormState vă permite să asociați o valoare de stare cu o funcție care efectuează logica de trimitere a formularului. Această funcție, de obicei o acțiune server în contextul componentelor serverului React, este responsabilă pentru validarea datelor și efectuarea mutațiilor necesare. Hook-ul gestionează apoi starea execuției acestei funcții, oferind feedback utilizatorului despre starea formularului (de exemplu, încărcare, succes, eroare).

Beneficiile utilizării experimental_useFormState

• Logică de formular simplificată: Reduce codul boilerplate prin centralizarea gestionării stării formularului într-un singur hook.
• Performanță îmbunătățită: Optimizează randarea prin minimizarea actualizărilor inutile și prin valorificarea mutațiilor de date pe partea de server.
• Abordare declarativă: Promovează o bază de cod mai lizibilă și mai ușor de întreținut printr-un stil de programare declarativ.
• Integrare perfectă cu acțiunile serverului: Conceput pentru a funcționa perfect cu componentele și acțiunile serverului React, permițând preluarea și mutațiile eficiente ale datelor.
• Experiență îmbunătățită a utilizatorului: Oferă feedback clar și concis utilizatorului cu privire la starea formularului, îmbunătățind experiența generală a utilizatorului.

Cazuri de utilizare pentru experimental_useFormState

Hook-ul experimental_useFormState este deosebit de potrivit pentru scenariile care implică formulare complexe care necesită validare pe partea de server și mutații de date. Iată câteva cazuri de utilizare obișnuite:

• Formulare de autentificare: Gestionarea formularelor de înregistrare a utilizatorilor, de conectare și de resetare a parolei.
• Formulare de comerț electronic: Procesarea formularelor de finalizare a comenzii, actualizarea profilurilor utilizatorilor și gestionarea listărilor de produse.
• Sisteme de gestionare a conținutului (CMS): Crearea și editarea de articole, gestionarea rolurilor de utilizator și configurarea setărilor site-ului web.
• Platforme de social media: Postarea de actualizări, trimiterea de comentarii și gestionarea profilurilor utilizatorilor.
• Formulare de introducere a datelor: Captarea și validarea datelor din diverse surse, cum ar fi sondaje, formulare de feedback și informații despre clienți.

Exemplu de implementare: Un formular de contact simplu

Să ilustrăm utilizarea experimental_useFormState cu un exemplu practic: un formular de contact simplu. Acest formular va colecta numele, adresa de e-mail și mesajul utilizatorului, apoi va trimite datele unei acțiuni server pentru procesare.

1. Definirea acțiunii serverului

În primul rând, trebuie să definim o acțiune server care să gestioneze trimiterea formularului. Această acțiune va valida datele și va trimite o notificare prin e-mail.

```javascript // app/actions.js 'use server'; import { revalidatePath } from 'next/cache'; import { sendEmail } from './utils/email'; // Exemplu de funcție de trimitere a e-mailurilor export async function submitContactForm(prevState, formData) { const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); // Validare de bază if (!name || !email || !message) { return 'Vă rugăm să completați toate câmpurile.'; } try { await sendEmail({ to: 'admin@example.com', // Înlocuiți cu adresa dvs. de e-mail de administrator subject: 'Trimitere nouă a formularului de contact', text: `Nume: ${name}\nEmail: ${email}\nMesaj: ${message}`, }); revalidatePath('/'); // Revalidați pagina principală sau calea relevantă return 'Vă mulțumim pentru mesaj!'; } catch (error) { console.error('Eroare la trimiterea e-mailului:', error); return 'A apărut o eroare. Vă rugăm să încercați din nou mai târziu.'; } } ```

Explicație:

• Directiva 'use server' indică faptul că această funcție ar trebui să fie executată pe server.
• Funcția primește starea anterioară (prevState) și datele formularului (formData) ca argumente.
• Extrage numele, adresa de e-mail și mesajul din datele formularului.
• Efectuează o validare de bază pentru a se asigura că toate câmpurile obligatorii sunt completate.
• Utilizează o funcție asincronă sendEmail (pe care va trebui să o implementați separat) pentru a trimite notificarea prin e-mail. Aceasta ar putea utiliza un serviciu precum SendGrid, Mailgun sau AWS SES.
• revalidatePath('/') forțează Next.js să reia datele pentru pagina principală, asigurându-se că orice modificări relevante sunt reflectate imediat.
• Returnează un mesaj de succes sau de eroare pentru a actualiza starea formularului.

2. Implementarea componentei React

Acum, să creăm componenta React care utilizează experimental_useFormState pentru a gestiona starea formularului și a gestiona trimiterea.

```javascript 'use client'; import { experimental_useFormState as useFormState } from 'react'; import { submitContactForm } from './actions'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); return (

Nume:

Email:

Mesaj: </div> <button type="submit">Trimite</button> {state && <p>{state}</p>} </form> ); } export default ContactForm; ``` <p><b>Explicație:</b></p> <ul> <li>Directiva <code>'use client'</code> indică faptul că această componentă este o componentă client.</li> <li>Importăm <code>experimental_useFormState</code> ca <code>useFormState</code> pentru concizie și acțiunea <code>submitContactForm</code>.</li> <li>Apelăm <code>useFormState</code>, transmițând acțiunea <code>submitContactForm</code> și o stare inițială de <code>null</code>.</li> <li>Hook-ul returnează starea curentă (<code>state</code>) și o funcție (<code>formAction</code>) care declanșează trimiterea formularului.</li> <li>Atașăm funcția <code>formAction</code> la propunerea <code>action</code> a elementului <code>form</code>. Acest lucru este crucial pentru ca React să gestioneze corect trimiterea formularului.</li> <li>Formularul include câmpuri de intrare pentru nume, adresă de e-mail și mesaj, precum și un buton de trimitere.</li> <li>Linia <code>{state && <p>{state}</p>}</code> afișează starea curentă (mesajul de succes sau de eroare) utilizatorului.</li> </ul> <h3>3. Configurare serviciului dvs. de trimitere a e-mailurilor (exemplu sendEmail)</h3> <p>Va trebui să implementați funcția <code>sendEmail</code>. Iată un exemplu folosind Nodemailer cu un cont Gmail (Notă: Utilizarea Gmail direct în producție este în general descurajată. Utilizați un serviciu de e-mail dedicat, cum ar fi SendGrid, Mailgun sau AWS SES pentru mediile de producție.):</p> ```javascript // app/utils/email.js import nodemailer from 'nodemailer'; export async function sendEmail({ to, subject, text }) { // Creați un obiect de transportator folosind Gmail SMTP const transporter = nodemailer.createTransport({ service: 'gmail', auth: { user: 'your_gmail_address@gmail.com', // Înlocuiți cu adresa dvs. Gmail pass: 'your_gmail_password', // Înlocuiți cu parola Gmail sau parola aplicației }, }); // Definiți opțiunile de e-mail const mailOptions = { from: 'your_gmail_address@gmail.com', to: to, subject: subject, text: text, }; // Trimite e-mailul try { await transporter.sendMail(mailOptions); console.log('E-mail trimis cu succes'); } catch (error) { console.error('Eroare la trimiterea e-mailului:', error); throw error; // Re-aruncați eroarea pentru a fi capturată în acțiunea serverului } } ``` <p><b>Notă importantă de securitate:</b> Nu vă angajați niciodată parola Gmail reală direct în baza dvs. de cod! Utilizați variabile de mediu pentru a stoca informații sensibile. Pentru utilizarea în producție, generați o parolă de aplicație special pentru Nodemailer și evitați utilizarea parolei Gmail principale. Serviciile dedicate de trimitere a e-mailurilor oferă o livrabilitate și o securitate mai bune în comparație cu utilizarea directă a Gmail.</p> <h3>4. Rularea exemplului</h3> <p>Asigurați-vă că aveți instalate dependențele necesare:</p> ```bash npm install nodemailer ``` <p>sau</p> ```bash yarn add nodemailer ``` <p>Apoi, rulați serverul de dezvoltare Next.js:</p> ```bash npm run dev ``` <p>sau</p> ```bash yarn dev ``` <p>Deschideți browserul și navigați la pagina care conține componenta <code>ContactForm</code>. Completați formularul și trimiteți-l. Ar trebui să vedeți fie mesajul de succes, fie un mesaj de eroare afișat sub formular. Verificați căsuța de e-mail pentru a verifica dacă e-mailul a fost trimis cu succes.</p> <h2>Utilizare avansată și considerații</h2> <h3>1. Gestionarea stărilor de încărcare</h3> <p>Pentru a oferi o experiență mai bună utilizatorului, este important să indicați când formularul este trimis. În timp ce <code>experimental_useFormState</code> nu expune direct o stare de încărcare, puteți gestiona acest lucru manual folosind hook-ul <code>useTransition</code> din React împreună cu <code>formAction</code>.</p> ```javascript 'use client'; import { experimental_useFormState as useFormState, useTransition } from 'react'; import { submitContactForm } from './actions'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); const [isPending, startTransition] = useTransition(); const handleSubmit = async (formData) => { startTransition(() => { formAction(formData); }); }; return ( <form action={handleSubmit}> <div> <label htmlFor="name">Nume:</label> <input type="text" id="name" name="name" required /> </div> <div> <label htmlFor="email">Email:</label> <input type="email" id="email" name="email" required /> </div> <div> <label htmlFor="message">Mesaj:</label> <textarea id="message" name="message" rows="4" required /> </div> <button type="submit" disabled={isPending}> {isPending ? 'Se trimite...' : 'Trimite'} </button> {state && <p>{state}</p>} </form> ); } export default ContactForm; ``` <p>În acest exemplu:</p> <ul> <li>Importăm <code>useTransition</code> din 'react'.</li> <li>Apelăm <code>useTransition</code> pentru a obține starea <code>isPending</code> și funcția <code>startTransition</code>.</li> <li>Împachetăm apelul la <code>formAction</code> în interiorul <code>startTransition</code>. Aceasta îi spune lui React să trateze trimiterea formularului ca o tranziție, permițându-i să fie întreruptă dacă este necesar.</li> <li>Dezactivăm butonul de trimitere în timp ce <code>isPending</code> este adevărat și modificăm textul butonului în "Se trimite...".</li> </ul> <h3>2. Gestionarea erorilor și validarea</h3> <p>Gestionarea robustă a erorilor este crucială pentru a oferi o experiență bună utilizatorului. Acțiunea serverului ar trebui să efectueze o validare amănunțită și să returneze mesaje de eroare informative clientului. Componenta client poate afișa apoi aceste mesaje utilizatorului.</p> <p><b>Validare pe partea de server:</b> Validați întotdeauna datele pe server pentru a preveni introducerea rău intenționată și pentru a asigura integritatea datelor. Utilizați biblioteci precum Zod sau Yup pentru validarea schemei.</p> <p><b>Validare pe partea de client (opțional):</b> În timp ce validarea pe partea de server este esențială, validarea pe partea de client poate oferi feedback imediat utilizatorului și poate îmbunătăți experiența utilizatorului. Cu toate acestea, validarea pe partea de client nu ar trebui să fie niciodată considerată ca fiind singura sursă de adevăr.</p> <h3>3. Actualizări optimiste</h3> <p>Actualizările optimiste pot face ca aplicația dvs. să se simtă mai receptivă prin actualizarea imediată a interfeței utilizator ca și cum trimiterea formularului a fost reușită, chiar înainte ca serverul să o confirme. Cu toate acestea, fiți pregătit să gestionați erorile și să reveniți la modificări dacă trimiterea nu reușește.</p> <p>Cu <code>experimental_useFormState</code>, puteți implementa actualizări optimiste prin actualizarea stării locale pe baza datelor formularului înainte de a apela <code>formAction</code>. Dacă acțiunea serverului nu reușește, puteți reveni la modificări pe baza mesajului de eroare returnat de hook.</p> <h3>4. Revalidare și caching</h3> <p>Componentele și acțiunile serverului React valorifică caching-ul pentru a îmbunătăți performanța. Atunci când o trimitere de formular modifică datele, este important să revalidați cache-ul pentru a vă asigura că interfața utilizator reflectă cele mai recente modificări.</p> <p>Funcțiile <code>revalidatePath</code> și <code>revalidateTag</code> din <code>next/cache</code> pot fi utilizate pentru a invalida anumite părți ale cache-ului. În exemplul <code>submitContactForm</code>, <code>revalidatePath('/')</code> este utilizat pentru a revalida pagina principală după o trimitere reușită a formularului.</p> <h3>5. Internaționalizare (i18n)</h3> <p>Atunci când construiți aplicații pentru un public global, internaționalizarea (i18n) este crucială. Aceasta implică adaptarea aplicației dvs. la diferite limbi, regiuni și preferințe culturale.</p> <p>Pentru formulare, aceasta înseamnă furnizarea de etichete localizate, mesaje de eroare și reguli de validare. Utilizați biblioteci i18n precum <code>next-intl</code> sau <code>react-i18next</code> pentru a gestiona traducerile și pentru a formata datele în funcție de setările regionale ale utilizatorului.</p> <p>Exemplu folosind <code>next-intl</code>:</p> ```javascript // i18n.js (exemplu) import { createTranslator } from 'next-intl'; const messages = { en: { ContactForm: { NameLabel: 'Name', EmailLabel: 'Email', MessageLabel: 'Message', SubmitButton: 'Submit', SuccessMessage: 'Thank you for your message!', ErrorMessage: 'An error occurred. Please try again later.', NameRequired: 'Name is required', EmailRequired: 'Email is required', MessageRequired: 'Message is required', }, }, es: { ContactForm: { NameLabel: 'Nombre', EmailLabel: 'Correo electrónico', MessageLabel: 'Mensaje', SubmitButton: 'Enviar', SuccessMessage: '¡Gracias por tu mensaje!', ErrorMessage: 'Ocurrió un error. Inténtalo de nuevo más tarde.', NameRequired: 'El nombre es obligatorio', EmailRequired: 'El correo electrónico es obligatorio', MessageRequired: 'El mensaje es obligatorio', }, }, // Adăugați mai multe limbi după cum este necesar }; export async function getTranslations(locale) { return createTranslator({ locale, messages }); } ``` ```javascript // ContactForm.js 'use client'; import { experimental_useFormState as useFormState, useTransition } from 'react'; import { submitContactForm } from './actions'; import { useLocale, useTranslations } from 'next-intl'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); const [isPending, startTransition] = useTransition(); const t = useTranslations('ContactForm'); const handleSubmit = async (formData) => { startTransition(() => { formAction(formData); }); }; return ( <form action={handleSubmit}> <div> <label htmlFor="name">{t('NameLabel')}:</label> <input type="text" id="name" name="name" required /> </div> <div> <label htmlFor="email">{t('EmailLabel')}:</label> <input type="email" id="email" name="email" required /> </div> <div> <label htmlFor="message">{t('MessageLabel')}:</label> <textarea id="message" name="message" rows="4" required /> </div> <button type="submit" disabled={isPending}> {isPending ? 'Se trimite...' : t('SubmitButton')} </button> {state && <p>{state === 'Thank you for your message!' ? t('SuccessMessage') : t('ErrorMessage')}</p>} </form> ); } export default ContactForm; ``` <h3>6. Accesibilitate (a11y)</h3> <p>Accesibilitatea este crucială pentru a vă asigura că aplicația dvs. este utilizabilă de toată lumea, inclusiv de persoanele cu dizabilități. Luați în considerare următoarele instrucțiuni de accesibilitate atunci când construiți formulare:</p> <ul> <li><b>Utilizați HTML semantic:</b> Utilizați elemente HTML adecvate, cum ar fi <code><label></code>, <code><input></code> și <code><textarea></code>, pentru a oferi structură și semnificație formularului dvs.</li> <li><b>Furnizați etichete pentru toate câmpurile formularului:</b> Asociați etichetele cu câmpurile formularului utilizând atributul <code>for</code> de pe elementul <code><label></code> și atributul <code>id</code> de pe câmpul formularului.</li> <li><b>Utilizați atribute ARIA:</b> Utilizați atribute ARIA pentru a oferi informații suplimentare despre structura și comportamentul formularului tehnologiilor de asistare.</li> <li><b>Asigurați un contrast de culoare suficient:</b> Utilizați un contrast de culoare suficient între text și culorile de fundal pentru a asigura lizibilitatea pentru persoanele cu deficiențe de vedere.</li> <li><b>Furnizați navigare cu tastatura:</b> Asigurați-vă că utilizatorii pot naviga prin formular folosind doar tastatura.</li> <li><b>Testați cu tehnologii de asistare:</b> Testați formularul cu tehnologii de asistare, cum ar fi cititoarele de ecran, pentru a vă asigura că este accesibil persoanelor cu dizabilități.</li> </ul> <h2>Considerații globale și cele mai bune practici</h2> <h3>1. Fusuri orare</h3> <p>Când aveți de-a face cu date și ore în formulare, este important să luați în considerare fusurile orare. Stocați datele și orele în format UTC pe server și convertiți-le la fusul orar local al utilizatorului pe client.</p> <h3>2. Valute</h3> <p>Când aveți de-a face cu valori monetare în formulare, este important să gestionați corect valutele. Utilizați o bibliotecă de formatare a valutei pentru a formata valorile în funcție de setările regionale ale utilizatorului și pentru a afișa simbolul valutei corespunzător.</p> <h3>3. Adrese</h3> <p>Formatele adreselor variază semnificativ în diferite țări. Utilizați o bibliotecă care acceptă formate internaționale de adrese pentru a vă asigura că utilizatorii își pot introduce corect adresele.</p> <h3>4. Numere de telefon</h3> <p>Formatele numerelor de telefon variază, de asemenea, în diferite țări. Utilizați o bibliotecă de formatare a numerelor de telefon pentru a formata numerele de telefon în funcție de setările regionale ale utilizatorului și pentru a valida dacă sunt numere de telefon valide.</p> <h3>5. Confidențialitatea datelor și conformitatea</h3> <p>Fiți atenți la reglementările privind confidențialitatea datelor, cum ar fi GDPR și CCPA, atunci când colectați și procesați datele formularului. Obțineți consimțământul utilizatorilor înainte de a colecta datele lor și oferiți-le posibilitatea de a accesa, modifica și șterge datele lor.</p> <h2>Concluzie</h2> <p>Hook-ul <code>experimental_useFormState</code> oferă o abordare promițătoare pentru simplificarea gestionării formularelor în aplicațiile React. Prin valorificarea acțiunilor serverului și prin adoptarea unui stil declarativ, dezvoltatorii pot construi formulare mai eficiente, mai ușor de întreținut și mai ușor de utilizat. Deși se află încă într-o etapă experimentală, <code>experimental_useFormState</code> are un potențial semnificativ pentru simplificarea fluxurilor de lucru ale formularelor și îmbunătățirea experienței generale de dezvoltare React. Urmând cele mai bune practici prezentate în acest ghid, puteți valorifica în mod eficient puterea <code>experimental_useFormState</code> pentru a construi soluții de formulare robuste și scalabile pentru aplicațiile dvs.</p> <p>Nu uitați să fiți întotdeauna la curent cu cea mai recentă documentație React și cu discuțiile comunității pe măsură ce API-ul evoluează de la experimental la stabil.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormState</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">gestionarea formularelor</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">starea formularelor</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">API experimental</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">formulare React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">acțiuni server</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Hook React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">optimizarea formularelor</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">formulare asincrone</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">mutații de date</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">actualizări UI</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0}; $RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>