@luigisbox/luma 0.0.0-stage → 0.2.0

package/src/main.ts

@@ -0,0 +1,493 @@
+// Entry of an integration: `integration/__integration.ts` hands its files to
+// startIntegration(). Folder = app:
+//
+//   integration/_global/        _config.ts _init.ts _translations.ts style-*.css template-*.ts
+//   integration/autocomplete/   _config.ts _init.ts _translations.ts style-*.css template-*.ts
+//   integration/search/         … + style-host.css (hides the host's listing while ours is shown)
+//   integration/plp/            … (templates fall back to search/)
+//   integration/recommender <name>/
+//
+// What this entry contains is only what must run on every page: configs and
+// inits, URL/DOM sensing, placement rules, and the triggers that decide when a
+// widget can run. Each widget's code, templates, styles and translations are
+// separate chunks, loaded on demand: autocomplete on the first interaction with
+// the search input, search / PLP when the URL is one of theirs, a recommender
+// when its placement is near the viewport or its trigger fires. A site without
+// a recommender config never downloads recommender code.
+
+import type { Api } from './api';
+import { health, mark, reportError } from './core/health';
+import type { T } from './core/i18n';
+import { failures, holdCss, MAX_FAILURES, painted, reserveCss } from './core/hold';
+import { hostStyle, LISTINGS, loadConfig, loadTranslations, widgetFiles, type IntegrationFiles } from './core/integration';
+import type { Templates } from './core/templates';
+import { plpAccepts, searchAccepts, searchReadQuery } from './core/routes';
+import { clearEarlyRules, earlyHold, plpRule, searchRule, writeEarlyRules, type EarlyRoute } from './core/early-rules';
+import { askChallenge, storedToken } from './api/token-key';
+import { loadDictionary } from './core/locales';
+import { keepDl } from './core/kept';
+import './core/boot-state'; // the page's state at boot, for lbx-place's reconciler
+import { onFlush, schedule } from './core/scheduler';
+import { onUrlChange, startSensing } from './core/sense';
+import { layered, setCss, whenApplied } from './core/styles';
+import type { ListingRoute } from './core/listings';
+import type { Reco } from './core/recommenders';
+import type { GlobalConfigType, LumaConfigType, Result } from './types';
+
+declare const __VERSION__: string;
+// Replaced at build time; the dev server (the loader's development mode) does not replace it.
+const VERSION = typeof __VERSION__ === 'string' ? __VERSION__ : 'dev';
+
+export type { IntegrationFiles };
+
+/** What a widget chunk gets: its config, the API, translations, templates and helpers. */
+export interface WidgetContext<C = any> {
+  /** Instance id; also the element's data-lbx value (recommenders: reco-<name>). */
+  id: string;
+  config: C;
+  global: GlobalConfigType;
+  api: Api;
+  t: T;
+  templates: Templates;
+  /** Integration CSS of the widget's folders (the widget decides where it goes: document or shadow root). */
+  styles: string[];
+  result: (hit: any) => Result;
+  /** Helpers every template scope gets. */
+  helpers: Record<string, unknown>;
+}
+
+export const startIntegration = async (files: IntegrationFiles) => {
+  const w = window as any;
+  // Luma's one global. The inline snippet may have made it before us (its early
+  // hold, `early`): ours goes into it. A copy already started has its `version`:
+  // a second copy must never double-bind.
+  if (w.__lbx?.version) return;
+  w.__lbx = Object.assign(w.__lbx ?? {}, { version: VERSION, health, bootedAt: performance.now() });
+  try {
+    // The floor (Baseline Widely available, built for
+    // Chrome/Edge 107, Firefox 104, Safari 16): our CSS is in @layer, which an older browser drops whole, while the
+    // host overrides (unlayered) would still hide the site's own widgets.
+    // There the site keeps its own.
+    const layers = typeof (window as any).CSSLayerBlockRule === 'function';
+    if (!layers) mark('off: no CSS cascade layers (below the browser floor)');
+    const config = layers ? await loadConfig(files, VERSION) : null;
+    if (config) {
+      w.__lbx.config = config;
+      // HTTPS only (secure contexts: HTTPS, or localhost). The rule came from
+      // the token's proof of work on crypto.subtle (secure contexts only);
+      // its solver is plain JS since (api/token.ts), the rule stands. Said
+      // once, with the fix; nothing starts and the site keeps its own UI.
+      if (!isSecureContext)
+        return void (reportError('boot', `not a secure context (${location.origin}): Luma runs on HTTPS pages only. Serve the site over HTTPS; Luma's widgets did not start (the site keeps its own).`), off());
+      return boot(config, files);
+    }
+  } catch (e) {
+    reportError('boot', e);
+  }
+  off();
+};
+
+/**
+ * Off (disabled, no key, not a secure context) or broken: nothing will claim
+ * an early hold, and the snippet must stop holding on later page views.
+ */
+const off = () => {
+  earlyHold()?.drop?.();
+  clearEarlyRules();
+};
+
+type Loaded = { mod: any; ctx: WidgetContext };
+/**
+ * Run a widget once it has loaded (the load reports its own failure; `onFail`
+ * puts its trigger back). Whatever the widget throws or rejects is reported,
+ * never thrown into the page.
+ */
+const run = (where: string, p: Promise<Loaded>, f: (m: Loaded) => unknown, onFail?: () => void) =>
+  p.then(f, () => onFail?.()).catch((e) => reportError(where, e));
+
+const modules = {
+  autocomplete: () => import('./widgets/autocomplete'),
+  search: () => import('./widgets/search'),
+  plp: () => import('./widgets/plp'),
+  recommender: () => import('./widgets/recommender'),
+};
+type Kind = keyof typeof modules;
+
+function boot(config: LumaConfigType, files: IntegrationFiles) {
+  const g = config._global;
+  const region = g.region ?? 'eu1';
+  // Nothing of ours goes into a <head> still being parsed (a whole-document
+  // React 18 would re-render the page): links, like our sheets, once <body> starts.
+  // The product image host, learnt from an earlier listing (widgets/listing/instant.ts).
+  let img: string | null = null;
+  try {
+    img = g.preconnectImages !== false ? localStorage.getItem('lbx:img') : null;
+  } catch {}
+  const api = `https://api.${region}.luigisbox.ai`;
+  const preconnect = (host: string, cors = true) => {
+    const pc = document.createElement('link');
+    pc.rel = 'preconnect';
+    pc.href = host;
+    if (cors) pc.crossOrigin = 'anonymous'; // fetch() with CORS; images are no-cors
+    pc.setAttribute('data-lbx', 'preconnect');
+    document.head.append(pc);
+  };
+  whenApplied(() => {
+    preconnect(`https://auth.${region}.luigisbox.ai`);
+    preconnect(api);
+    if (img) preconnect(img, false);
+  });
+  if ((document as any).prerendering) document.addEventListener('prerenderingchange', () => mark('prerendered page activated'), { once: true });
+  // Every widget needs the browser token: minted (a proof of work, off the
+  // main thread) as soon as one is wanted, a widget's load (a hover over the
+  // search input, a listing page, a recommender), in parallel with its chunks,
+  // else once the page has loaded and the browser is idle: ready before the
+  // first keystroke (minted on the click instead, the first suggestions came
+  // ~0.9 s later on a production storefront at 4x), without competing with the page's own
+  // loading. Cached for the session: the minting code (its own chunk) is
+  // loaded only when there is none yet.
+  let warmed = false;
+  const warm = () => {
+    if (warmed) return;
+    warmed = true;
+    if (storedToken(g)) return;
+    askChallenge(g); // while the minting code loads
+    import('./api/token').then((m) => m.warmToken(g)).catch((e) => reportError('token', e));
+  };
+  const afterLoad = (f: () => void) => {
+    const idle = () => (typeof requestIdleCallback === 'function' ? requestIdleCallback(f, { timeout: 2000 }) : setTimeout(f, 200));
+    if (document.readyState === 'complete') idle();
+    else addEventListener('load', idle, { once: true });
+  };
+  afterLoad(warm);
+  startSensing();
+
+  // Analytics starts once the page has loaded, or with the first widget (its
+  // setup then listens before a tile is clicked). Set up at the end of boot.
+  let analyticsWanted = false;
+  let startAnalytics = () => void (analyticsWanted = true);
+
+  // --- lazy widget loading: code + templates + styles + dictionaries in parallel
+  const locale = g.locale ?? 'en';
+  const loaded = new Map<string, Promise<Loaded>>();
+  const load = (kind: Kind, id: string, folders: readonly string[], app: any, scopes: readonly string[]) => {
+    if (loaded.has(id)) return loaded.get(id)!;
+    mark(`load ${id}`);
+    warm();
+    startAnalytics();
+    const support = import('./core/support');
+    const p = Promise.all([
+      modules[kind]() as Promise<any>,
+      support,
+      widgetFiles(kind, [...folders], files.templates),
+      widgetFiles(kind, [...folders], files.styles),
+      loadDictionary(locale),
+      loadTranslations(config, files, folders),
+      // Hooks only the widget calls (`_widget.ts`): run before its context is made.
+      support.then((s) => s.loadWidgetInits(config, files, folders, VERSION)),
+    ]).then(([mod, s, tpls, css, dict]) => {
+      if (mod.css) setCss(`default:${kind}`, layered(mod.css));
+      // Product pages on intent (default on, core/speculation.ts): our links come with the first widget.
+      if (g.speculation !== false) s.speculate(g, onUrlChange);
+      const ctx = s.widgetContext(s, config, { id, folders: [...folders], app, scopes: [...scopes] }, mod.templates, tpls, css, dict);
+      mark(`loaded ${id}`);
+      return { mod, ctx };
+    });
+    // A failed load (network, a blocked chunk) is not remembered: the next trigger tries again.
+    p.catch((e) => {
+      reportError(`load ${id}`, e);
+      loaded.delete(id);
+    });
+    loaded.set(id, p);
+    return p;
+  };
+
+  const hostCss = (folder: string) => hostStyle(files, folder);
+
+  // --- autocomplete: the first interaction with the search input loads it
+  const ac = config.autocomplete;
+  // The dropdown is a popover (top layer): without it (Safari < 17, Firefox < 125) the site keeps its own.
+  if (ac && !ac.disabled && g.inputSelector && 'showPopover' in HTMLElement.prototype) {
+    const css = hostCss('autocomplete');
+    const TYPES = ['pointerdown', 'focusin', 'input'];
+    const loadAc = () => load('autocomplete', 'autocomplete', ['_global', 'autocomplete'], ac, ['autocomplete']);
+    // The first keystroke must not wait for the chunk: fetch it (not start it)
+    // on a hover over the input (a visitor who never goes near it downloads nothing;
+    // on touch, the tap's pointerdown/focus below starts it).
+    // The API's connection again: the browser closes one unused for about 10 s,
+    // and a visitor who read the page longer would wait for a new one (a TCP
+    // and TLS setup, one to three round trips) before their first suggestions.
+    let near = false;
+    const reconnect = () => near || ((near = true), preconnect(api));
+    const prefetch = () => (reconnect(), void loadAc().catch(() => {}));
+    const hover = (e: Event) => {
+      const i = e.composedPath()[0];
+      if (i instanceof HTMLInputElement && i.matches(g.inputSelector!)) removeEventListener('pointerover', hover, true), prefetch();
+    };
+    addEventListener('pointerover', hover, true);
+    const listen = (on: boolean) => {
+      for (const t of TYPES) (on ? addEventListener : removeEventListener)(t, trigger, true);
+    };
+    let begun = false;
+    const begin = () => {
+      if (begun) return;
+      begun = true;
+      listen(false);
+      run(
+        'autocomplete',
+        loadAc(),
+        ({ mod, ctx }) => {
+          // Their suggestions are hidden only once ours run: a failed load or start leaves theirs.
+          mod.start(ctx);
+          if (css) setCss('host-autocomplete', css);
+        },
+        () => ((begun = false), listen(true)),
+      );
+    };
+    const isInput = (i: unknown): i is HTMLInputElement => i instanceof HTMLInputElement && i.matches(g.inputSelector!);
+    // composedPath: an input inside a shadow root reaches window retargeted to its host.
+    const trigger = (e: Event | { target: Element }) => {
+      if (!isInput(('composedPath' in e ? e.composedPath()[0] : null) ?? e.target)) return;
+      reconnect(); // a tap: no hover before it
+      begin();
+    };
+    // A touch screen has no hover: the chunk was fetched on the tap, and the
+    // phone sheet opened a download later, in one long task with the chunk's
+    // start (a production storefront at 4x CPU: 237 ms after the tap). Started once the page
+    // has loaded and the browser is idle, where the search input is on the
+    // page (its listeners, the sheet prepared: widgets/autocomplete): the tap
+    // opens it at once, the API reconnected then.
+    if (typeof matchMedia === 'function' && matchMedia('(hover: none)').matches) {
+      const ahead = () => {
+        if (!document.querySelector(g.inputSelector!) || begun) return;
+        const tap = (e: Event) => isInput(e.composedPath()[0]) && (removeEventListener('pointerdown', tap, true), reconnect());
+        addEventListener('pointerdown', tap, true);
+        begin();
+      };
+      const later = () => (typeof requestIdleCallback === 'function' ? requestIdleCallback(ahead, { timeout: 3000 }) : setTimeout(ahead, 500));
+      if (document.readyState === 'complete') later();
+      else addEventListener('load', later, { once: true });
+    }
+    listen(true);
+    // Already focused when we boot (the visitor was quick): load now.
+    if (document.activeElement instanceof HTMLInputElement && document.activeElement.matches(g.inputSelector)) trigger({ target: document.activeElement });
+  }
+
+  /** One widget's setup: if it throws, the others still start. */
+  const setUp = <X>(where: string, f: () => X): X | null => {
+    try {
+      return f();
+    } catch (e) {
+      reportError(where, e);
+      return null;
+    }
+  };
+
+  // A route's or a recommender's hook may accept the page only once content
+  // arrives after our boot or after an SPA's URL change (their data layer, the
+  // product): looked at again on reconciles for a while after the load and
+  // after each URL change, not for the page's life (a busy page reconciles
+  // every frame).
+  // A flag a timer clears, not a clock read per reconcile (a busy page reconciles every frame).
+  const LATE_MS = 10_000;
+  let recently = false;
+  let lateTimer = 0;
+  const late = () => {
+    recently = true;
+    clearTimeout(lateTimer);
+    lateTimer = window.setTimeout(() => (recently = false), LATE_MS);
+  };
+  late();
+  if (document.readyState !== 'complete') addEventListener('load', late, { once: true });
+  onUrlChange(late);
+  const recent = () => recently;
+
+  // --- listings: search results and category pages. Their boot (takeover,
+  // placement rule, the search request: core/listings.ts) is in lbx-nav,
+  // asked for with the listing's own chunks on a page of a route, so a page
+  // that is not one never downloads it. Until it is here, the entry holds
+  // their listing for it: it claims the early hold (stopping the snippet's
+  // timer), or writes the hold CSS itself before first paint and in the same
+  // task as an SPA's URL change into the route; the takeover continues that hold.
+  const routes: ListingRoute[] = [];
+  const search = config.search && !config.search.disabled ? config.search : null;
+  const plp = config.plp && !config.plp.disabled ? config.plp : null;
+  if (search) setUp('search', () => routes.push({ kind: 'search', cfg: search, accepts: searchAccepts(search), hostCss: hostCss('search') }));
+  if (plp) setUp('plp', () => routes.push({ kind: 'plp', cfg: plp, accepts: plpAccepts(plp), hostCss: hostCss('plp') }));
+  const early = earlyHold();
+  const loadListing = (kind: 'search' | 'plp') => {
+    const { folders, scopes } = LISTINGS[kind];
+    return load(kind, kind, folders, routes.find((r) => r.kind === kind)!.cfg, scopes);
+  };
+  /** Routes the entry holds now (their boot not here yet), and their fail-safes. */
+  const held = new Map<string, number>();
+  let ready = false;
+  let booting: Promise<unknown> | null = null;
+  let failedOn = '';
+  const unhold = (kind: string) => {
+    clearTimeout(held.get(kind));
+    held.delete(kind);
+    setCss(`host-${kind}`, null);
+    early?.drop?.();
+  };
+  const boot = () =>
+    (booting ??= Promise.all([import('./core/listings'), import('./core/reconciler')])
+      .then(([m, { addRule }]) => {
+        for (const t of held.values()) clearTimeout(t);
+        m.startListings(routes, { g, load: loadListing, run, held: new Set(held.keys()), addRule }, setUp);
+        held.clear();
+        ready = true;
+      })
+      .catch((e) => {
+        reportError('listings', e);
+        for (const kind of [...held.keys()]) unhold(kind);
+        booting = null; // the next URL change into a route tries again
+        failedOn = location.href;
+      }));
+  /** The page is (now) one of a route's: hold it if it is ours to take, and ask for its code. */
+  let last: URL | null = null;
+  const enter = (u: URL, spa: boolean) => {
+    const prev = last;
+    last = u;
+    if (ready) return;
+    let any = false;
+    for (const r of routes) {
+      if (!r.accepts(u)) {
+        if (held.has(r.kind)) unhold(r.kind);
+        continue;
+      }
+      any = true;
+      // Theirs shows at once where we failed too often; a server-rendered page holds nothing.
+      // Moving within the route (their filters) keeps what is shown.
+      if (held.has(r.kind) || (spa && prev && r.accepts(prev)) || failures(r.kind) >= MAX_FAILURES || document.querySelector(`lbx-${r.kind}[data-lbx-ssr], template[data-lbx-ssr="${r.kind}"]`)) continue;
+      const claimed = !spa && !!early?.claim?.(r.kind);
+      if (!claimed && !spa && painted()) continue; // booted after first paint: theirs stays until ours renders
+      // Ours too where the early hold is claimed: with the height ours had on this
+      // URL (a reload restores scroll before our results exist), at boot.
+      setCss(`host-${r.kind}`, `${holdCss(r.hostCss, r.cfg.reserveSelector!)}${reserveCss(r.cfg.reserveSelector!)}`);
+      held.set(r.kind, window.setTimeout(() => !ready && unhold(r.kind), r.cfg.holdTimeoutMs ?? 4000));
+    }
+    if (!any) return;
+    // A listing's first request waits for the token: minted from now, not from
+    // its load (which waits for <body>: category pages showed ~0.26 s later).
+    warm();
+    boot();
+    // The widget's chunks in parallel with its boot (the same load the listing starts: cached).
+    // Loading adds modulepreload links to <head>: not while it is being parsed.
+    for (const r of routes) if (r.accepts(u)) whenApplied(() => void loadListing(r.kind).catch(() => {}));
+  };
+  enter(new URL(location.href), false);
+  onUrlChange((u) => enter(u, true));
+  // A page of a listing route's URL shape whose hook accepts it only later
+  // (their data layer, after our boot): its token from now, not from then
+  // (a production storefront's category pages: ~0.3 s sooner).
+  if (routes.some((r) => r.cfg.urlMatch && setUp(`${r.kind} urlMatch`, () => new RegExp(r.cfg.urlMatch!).test(location.pathname)))) warm();
+  // A route whose hook reads the page (an `active()` on their data layer or a
+  // node) may accept it only once the page has that: looked at again on
+  // reconciles (while `recent()`) until the listings' boot is asked for (a failed one: on the next URL).
+  if (routes.length) onFlush(() => recent() && !booting && failedOn !== location.href && enter(new URL(location.href), false));
+  // Results ready on Enter: the first input into the search field loads the prefetch-while-typing chunk.
+  if (search && routes.some((r) => r.kind === 'search') && search.prefetchWhileTyping !== false && g.inputSelector) {
+    const first = (e: Event) => {
+      const i = e.composedPath?.()[0] ?? e.target;
+      if (!(i instanceof HTMLInputElement) || !i.matches(g.inputSelector!)) return;
+      removeEventListener('input', first, true);
+      import('./widgets/search/speculate').then((m) => m.startSpeculation(g, search, i)).catch((err) => reportError('search prefetch', err));
+    };
+    addEventListener('input', first, true);
+  }
+  // A hold no route of ours continues (stale rules, a URL the snippet
+  // over-matched) ends now, not at its timeout; a held route's ends with its takeover.
+  if (!held.size) whenApplied(() => early?.drop?.());
+  // Rules for the inline early-hold snippet's next hard load (src/core/early-rules.ts).
+  // Dev bundles boot late (unbundled modules): a longer snippet timeout there.
+  // A route failing this session gets no rule: the snippet must not hold it on every page view.
+  const ok = (kind: string) => routes.some((r) => r.kind === kind) && failures(kind) < MAX_FAILURES;
+  writeEarlyRules(
+    [search && ok('search') ? searchRule(search, hostCss('search')) : null, plp && ok('plp') ? plpRule(plp, hostCss('plp')) : null].filter((r): r is EarlyRoute => !!r),
+    VERSION === 'dev' ? 6000 : 1500,
+  );
+
+  // --- recommenders: their triggers and placement (core/recommenders.ts, in
+  // lbx-place with the reconciler) load on a page an inline one's urlMatch /
+  // active() accepts (looked at again on URL changes and reconciles), and at
+  // boot where a popup one is configured (its trigger may fire on any page).
+  const recos: Reco[] = [];
+  const pages: ((u: URL) => boolean)[] = [];
+  /** Our recommenders by name, and the pages each runs on: where ours runs, the site's of that name is not tracked. */
+  const recoPages = new Map<string, (u: URL) => boolean>();
+  for (const [name, rc] of Object.entries(config.recommenders ?? {})) {
+    if (rc.disabled) continue;
+    const id = `reco-${name}`;
+    const folders = ['_global', `recommender ${name}`];
+    // style-host.css of the folder: e.g. hides the host's own box our widget replaces
+    // (scoped by our element's state, so it is inert where the widget is not).
+    const css = hostCss(`recommender ${name}`);
+    if (css) setCss(`host-${id}`, css);
+    // The popup is a popover (top layer): without the API there is no popup.
+    if (rc.confirm && !('showPopover' in HTMLElement.prototype)) continue;
+    recos.push({ id, rc, get: () => load('recommender', id, folders, rc, ['recommender']) });
+    const re = !rc.confirm && rc.urlMatch ? setUp(id, () => new RegExp(rc.urlMatch!)) : null;
+    pages.push(rc.confirm ? () => true : (u) => (rc.active ? rc.active(u) : !re || re.test(u.pathname)));
+    recoPages.set(name, pages[pages.length - 1]);
+  }
+  if (recos.length) {
+    let asked = false;
+    let failedOn = '';
+    const check = () => {
+      if (asked || failedOn === location.href) return;
+      const u = new URL(location.href);
+      if (!pages.some((p, i) => setUp(`${recos[i].id} active`, () => p(u)))) return;
+      asked = true;
+      import('./core/recommenders')
+        .then((m) => m.startRecommenders(recos, run, setUp))
+        .catch((e) => {
+          reportError('recommenders', e);
+          asked = false;
+          failedOn = location.href;
+        });
+    };
+    check();
+    onUrlChange(check);
+    onFlush(() => recent() && check());
+  }
+
+  // --- analytics (src/analytics, lbx-analytics): where the integration has an
+  // _analytics.ts (nothing is sent that it does not say), every page once it
+  // has loaded or with the first widget (its chains on our tiles listen then).
+  // Without one, `analytics: false`: our tiles queue nothing (core/tiles.ts).
+  if (!Object.keys(files.analytics ?? {}).length) g.analytics = false;
+  if (g.analytics !== false) {
+    const here = () => new URL(location.href);
+    const readQ = search ? searchReadQuery(search) : null;
+    const owns = (s: string) => {
+      if (s === 'autocomplete') return !!(ac && !ac.disabled && g.inputSelector);
+      if (s === 'search') return routes.some((r) => r.kind === 'search' && r.accepts(here()));
+      const reco = s.startsWith('recommender:') ? recoPages.get(s.slice(12)) : undefined;
+      return !!reco && !!setUp(`${s} active`, () => reco(here()));
+    };
+    const visit = (u: URL) => {
+      const r = routes.find((x) => x.accepts(u));
+      return !r ? null : r.kind === 'plp' ? `plp:${u.origin}${u.pathname}` : `search:${u.origin}${u.pathname}?${readQ?.(u) ?? ''}`;
+    };
+    let started = false;
+    /** Analytics listens (the setup has run). Until then, a page left keeps its dataLayer pushes for the next one's (core/kept.ts), up to `kept`. */
+    let live = false;
+    let kept = 0;
+    addEventListener('pagehide', () => {
+      if (!live && !(document as any).prerendering) kept = keepDl(g.dataLayer ?? 'dataLayer', kept);
+    });
+    startAnalytics = () => {
+      if (started) return;
+      started = true;
+      import('./analytics/start')
+        .then((m) => m.start({ config, files: files.analytics ?? {}, owns, visit, onUrlChange, kept: () => kept }))
+        .then(() => (live = true))
+        .catch((e) => reportError('analytics', e));
+    };
+    if (analyticsWanted) startAnalytics();
+    else afterLoad(() => startAnalytics());
+  }
+
+  schedule();
+}