Ga naar hoofdinhoud

Shared runtime

De shared runtime bevat gedrag dat meerdere formulieren kunnen hergebruiken.

Twee belangrijke onderdelen waren:

  • herbruikbare shared functions
  • controle op render-timing

Herbruikbare shared functions​

Shared functions staan in shared/functions.js.

Een vereenvoudigd voorbeeld:

window.disableButton =
  window.disableButton ||
  function disableButton(button) {
    if (!button) return;
    button.disabled = true;
  };

Een formulier-specifieke module kan dit gedrag vervolgens hergebruiken:

if (isAddBlock()) {
  const submitButton = document.querySelector(".submit-button");
  disableButton(submitButton);
}

Waarom geselecteerde helpers globaal beschikbaar maken?​

De Planon-scripts worden dynamisch geladen in plaats van gebundeld zoals in een traditionele SPA.

De globale shared-laag maakt geselecteerde utilities beschikbaar voor los geladen formuliermodules.

shared/functions.js
        │
        ├── FORM_001.js
        ├── FORM_002.js
        └── FORM_003.js

Omgaan met asynchroon renderen​

Sommige Planon-elementen bestaan nog niet wanneer JavaScript al start.

script start
    │
    ├── veld bestaat nog niet
    │
    ▼
Planon rendert veld later

Directe DOM-toegang kan daardoor mislukken.

Shared timing helper​

window.waitForElement = function (selector, timeout = 5000) {
  return new Promise((resolve, reject) => {
    const startedAt = Date.now();

    const timer = setInterval(() => {
      const element = document.querySelector(selector);

      if (element) {
        clearInterval(timer);
        resolve(element);
        return;
      }

      if (Date.now() - startedAt > timeout) {
        clearInterval(timer);
        reject(new Error(`Element not found: ${selector}`));
      }
    }, 100);
  });
};

Gebruik:

waitForElement(".example-field").then(() => {
  runFormLogic();
});

Waarom timing centraliseren?​

Zonder shared helper gaan individuele formulieren vaak hun eigen delays of pollinglogica maken.

Met één timingutility:

veel formulieren
   ↓
één timingstrategie
   ↓
voorspelbaarder gedrag