Passa al contenuto principale

Webround Frontend Custom React Code

I componenti custom sono React standard compilati con Vite, montati come Web Components nel runtime di Webround.

Per tutto ciò che non è coperto qui: https://docs.webround.com

Struttura del componente​

Ogni componente riceve una prop wr con il contesto completo del sito. Usa sempre un default export.

const MyComponent = ({ wr }: { wr: Wr }) => {
  return <div>Hello</div>;
};
export default MyComponent;

Struttura dei file​

  • Root: src/
  • Pagine: src/pages/MyPage.tsx
  • Componenti: src/components/Hero.tsx
  • Stili globali: src/style.css
  • Importa tra file con path relativi: import Hero from "./Hero"

Non è obbligatorio usare questa struttura, ma è consigliato.

<a
  href={wr.utils.generateHref("/path")}
  onClick={(e) => {
    e.preventDefault();
    wr.utils.navigate(wr.utils.generateHref("/path"));
  }}
>
  Link
</a>
const host = document.querySelector('wr-src-{pagename}-{componentname}') as HTMLElement & { shadowRoot: ShadowRoot };
const target = host?.shadowRoot?.querySelector('#target-id') as HTMLElement | null;
const header = document.querySelector('wr-src-siteheader') as HTMLElement | null;
const headerHeight = header?.getBoundingClientRect().height ?? 0;
if (!target) return;
const top = target.getBoundingClientRect().top + window.scrollY - headerHeight;
window.scrollTo({ top, behavior: 'smooth' });

Nell'esempio, si suppone che i file siano organizzati con la struttura predefinita: src/page/Component.tsx, mentre l'header è posizionato sotto il file src/SiteHeader.tsx.

CSS​

  • Usa Tailwind v4
  • Le CSS variables del sito (--font-main, --brand-blue, ecc.) sono accessibili dentro il shadow DOM, ma devono essere definite in customStyle.css tramite la sidebar sinistra, alla voce "custom styles"
  • Le classi CSS del sito non cascadano nel shadow DOM
  • Se hai bisogno di utility class globali, definiscile in src/style.css mappandole sulle CSS variables, poi importa il file in ogni componente
  • Non importare customStyle.css

Editor safety​

Quando il codice viene eseguito nell'editor, il valore booleano wr.inEditor è impostato a true. Evita side effect nell'editor (fetch, analytics, scroll listener, timer):

if (wr.inEditor) return;

Form con Altcha​

const proof = await wr.utils.getAltchaChallenge();
const ok = await wr.utils.submitForm({ name, email, message }, [], proof);

Tipi SDK (prop wr)​

Scarica le definizioni complete dei tipi wr: https://docs.webround.com/wr.d.ts

Tips​

Dopo aver scritto codice React custom, salva e compila sempre. L'azione di compilazione avvia il processo di build, in modo che il JS bundled possa essere caricato nella pagina web. Attendi sempre il successo della compilazione e specifica il path nell'injection point dove vuoi visualizzare il codice React. Se avviene una nuova build, il ricaricamento della pagina è obbligatorio per visualizzare i Web Components aggiornati e non obsoleti.