Core Extensions — Weblisk

Lazy Islands

Scroll down — the widget below loads its script only when visible (check console).

Waiting to enter viewport...

<div id="lazy-target"
  style="min-height:60px;border:2px dashed var(--wl-border);
         border-radius:8px;display:flex;align-items:center;
         justify-content:center;font-size:0.85rem">
  Waiting to enter viewport...
</div>

import { lazyEnhance } from 'weblisk/core/lazy-island.js';

lazyEnhance('#lazy-target', () => {
  const el = document.getElementById('lazy-target');
  el.style.borderColor = 'var(--success, green)';
  el.style.borderStyle = 'solid';
  el.innerHTML = '<strong>Lazy island loaded!</strong>';
  return Promise.resolve();
}, { rootMargin: '50px' });

Error Boundaries

Click to trigger an error inside a boundary — it catches it gracefully.

No errors yet.

<button class="btn btn-sm" id="btn-error">Trigger Error</button>
<div id="error-target">No errors yet.</div>

import { enhance } from 'weblisk';
import { boundary } from 'weblisk/core/error.js';

enhance('#demo-error', (el, { $ }) => {
  const btn = $('#btn-error');
  const target = $('#error-target');

  btn.addEventListener('click', () => {
    target.innerHTML = '';
    const throwingEl = document.createElement('div');
    throwingEl.id = 'temp-error-demo';
    target.appendChild(throwingEl);

    boundary('#temp-error-demo', () => {
      throw new Error('Intentional demo error!');
    }, {
      fallback: '<div><strong>Error caught!</strong></div>',
      retry: false,
      onError: (err) => console.log('Caught:', err.message)
    });
  });
});

Web Workers

Offload heavy computation to a Web Worker — main thread stays smooth.

Ready...

import { enhance } from 'weblisk';
import { offload } from 'weblisk/core/worker.js';

enhance('#demo-worker', (el, { $ }) => {
  const output = $('#output-worker');
  const btn = $('#btn-worker');

  const fib = offload(function (n) {
    function f(n) { return n <= 1 ? n : f(n - 1) + f(n - 2); }
    return f(n);
  });

  btn.addEventListener('click', async () => {
    output.textContent = 'Computing on Web Worker...';
    const start = performance.now();
    const result = await fib(40);
    const elapsed = (performance.now() - start).toFixed(1);
    output.textContent = `fib(40) = ${result}\nTime: ${elapsed}ms`;
  });
});

Task Scheduler

Priority-based scheduling using scheduler.postTask → rIC → rAF fallback.

Ready...

import { enhance } from 'weblisk';
import { scheduleTask } from 'weblisk/core/scheduler.js';

enhance('#demo-scheduler', (el, { $ }) => {
  const output = $('#output-scheduler');
  const btn = $('#btn-scheduler');

  btn.addEventListener('click', async () => {
    output.textContent = 'Scheduling 3 tasks...\n';
    const log = [];

    await Promise.all([
      scheduleTask(() => { log.push('[3] background'); }, 'background'),
      scheduleTask(() => { log.push('[2] user-visible'); }, 'user-visible'),
      scheduleTask(() => { log.push('[1] user-blocking'); }, 'user-blocking'),
    ]);

    output.textContent += log.join('\n') + '\n\nDone — tasks executed by priority';
  });
});