@omega.js/web 0.1.0

package/core/js/core/lazy-loading.js

@@ -0,0 +1,479 @@
+import omega from '@omega.js/client';
+import { mapSrcset } from '__main_assets__/js/libs/srcset.js';
+
+// Lazy Loading Module
+export default function () {
+  // Constants
+  const TRANSPARENT_PLACEHOLDER = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+  // Configuration
+  const config = omega.config.lazyLoading.config;
+
+  // Track loaded elements to avoid reprocessing
+  const loadedElements = new WeakSet();
+
+  // IntersectionObserver instance
+  let observer = null;
+
+  // Whether a URL is a first-party asset this build owns — the ONLY kind a
+  // cache buster belongs on (#368).
+  //
+  // ⚠️ Mirrors `isLocal()` in `packages/web/src/cachebreak-html.js`, the
+  // build-time half of the same rule: a `?cb=` on a `data:` URI corrupts the
+  // payload, and one on an external URL rewrites somebody else's URL.
+  function isLocalUrl(url) {
+    const value = String(url).trim();
+    if (!value) return false;
+    if (/^(https?:)?\/\//i.test(value)) return false;
+    if (/^(data|blob|mailto|tel|javascript):/i.test(value)) return false;
+
+    return true;
+  }
+
+  // Helper function to add cache buster to URLs
+  function addCacheBuster(url) {
+    if (!isLocalUrl(url)) return url;
+
+    const urlObj = new URL(url, window.location.href);
+    urlObj.searchParams.set('cb', omega.config.buildTime);
+    return urlObj.toString();
+  }
+
+  // Wait for DOM to be ready
+  omega.dom().ready().then(() => {
+    initLazyLoading();
+  });
+
+  function initLazyLoading() {
+    // Check if IntersectionObserver is supported
+    if (!('IntersectionObserver' in window)) {
+      // Load all images immediately
+      loadAllImages();
+
+      // Stop initialization
+      return;
+    }
+
+    // Create the observer
+    observer = new IntersectionObserver(handleIntersection, {
+      rootMargin: config.rootMargin,
+      threshold: config.threshold
+    });
+
+    // Start observing elements
+    observeElements();
+
+    // Re-observe on dynamic content changes
+    setupMutationObserver();
+  }
+
+  function handleIntersection(entries, observer) {
+    entries.forEach(entry => {
+      if (!entry.isIntersecting) {
+        return; // Element is not in view, skip
+      }
+
+      // Element is in view, process it
+      const element = entry.target;
+
+      // Stop observing this element
+      observer.unobserve(element);
+
+      // Check if this is a video/audio parent with lazy sources
+      const tagName = element.tagName.toLowerCase();
+      if ((tagName === 'video' || tagName === 'audio') && element.dataset.lazySourcesReady) {
+        // Load all lazy sources for this video/audio
+        const $sources = element.querySelectorAll('source[data-lazy]');
+        $sources.forEach($source => loadElement($source));
+      } else {
+        // Load the element normally
+        loadElement(element);
+      }
+    });
+  }
+
+  function loadElement(element) {
+    // Skip if already loaded
+    if (loadedElements.has(element)) {
+      return;
+    }
+
+    // Mark as loading
+    element.classList.remove(config.errorClass);
+    element.classList.add(config.loadingClass);
+
+    // Get the lazy attribute value
+    const lazyValue = element.getAttribute('data-lazy');
+    if (!lazyValue) {
+      markAsLoaded(element);
+      return;
+    }
+
+    // Parse the lazy attribute (find first space)
+    const spaceIndex = lazyValue.indexOf(' ');
+    if (spaceIndex <= 0) {
+      markAsError(`Invalid format: ${lazyValue}`, element);
+      return;
+    }
+
+    const type = lazyValue.slice(0, spaceIndex).trim();
+    const value = lazyValue.slice(spaceIndex + 1).trim();
+
+    // Validate value exists
+    if (!value) {
+      markAsError(`Empty value in data-lazy: ${lazyValue}`, element);
+      return;
+    }
+
+    // Log
+    /* @dev-only:start */
+    {
+      // console.log('Lazy-loading:', type, value, 'for element:', element);
+    }
+    /* @dev-only:end */
+
+    // Remove data-lazy immediately to prevent duplicate processing
+    element.removeAttribute('data-lazy');
+
+    // Load based on type
+    switch(type) {
+      case '@src':
+        loadSrc(element, value);
+        break;
+      case '@srcset':
+        loadSrcset(element, value);
+        break;
+      case '@bg':
+        loadBackground(element, value);
+        break;
+      case '@class':
+        loadClass(element, value);
+        break;
+      case '@html':
+        loadHtml(element, value);
+        break;
+      case '@script':
+        loadScript(element, value);
+        break;
+      default:
+        markAsError(`Unknown lazy load type: ${type}`, element);
+    }
+  }
+
+  function loadSrc(element, value) {
+    const tagName = element.tagName.toLowerCase();
+
+    // Add cache buster to URL (skip for iframes - external embeds don't support it)
+    if (tagName !== 'iframe') {
+      value = addCacheBuster(value);
+    }
+
+    // For images, test load first
+    if (tagName === 'img') {
+      // Set a transparent placeholder to prevent broken image icon
+      element.src = TRANSPARENT_PLACEHOLDER;
+
+      const tempImg = new Image();
+
+      tempImg.onload = () => {
+        element.src = value;
+        markAsLoaded(element);
+      };
+
+      tempImg.onerror = () => {
+        markAsError(`Failed to load image: ${value}`, element);
+      };
+
+      tempImg.src = value;
+
+      // Handle already cached images
+      if (tempImg.complete && tempImg.naturalHeight !== 0) {
+        tempImg.onload();
+      }
+    }
+    // For iframes and videos, just set src directly
+    else if (tagName === 'iframe' || tagName === 'video') {
+      element.src = value;
+
+      // Listen for load/error events
+      const loadEvent = tagName === 'video' ? 'loadeddata' : 'load';
+
+      element.addEventListener(loadEvent, () => {
+        markAsLoaded(element);
+      }, { once: true });
+
+      element.addEventListener('error', () => {
+        markAsError(`Failed to load ${element.tagName.toLowerCase()}: ${value}`, element);
+      }, { once: true });
+
+      // For video, trigger load
+      if (tagName === 'video') {
+        element.load();
+      }
+    }
+    // For source elements inside video/audio tags
+    else if (tagName === 'source') {
+      element.src = value;
+
+      // Find parent video or audio element
+      const $parent = element.closest('video, audio');
+      if ($parent) {
+        // Load the parent to pick up the new source
+        $parent.load();
+
+        // Find video container (if exists) to remove loading state
+        const $container = $parent.closest('[data-lazy-load-container]');
+
+        // Listen for parent's load event
+        $parent.addEventListener('loadeddata', () => {
+          markAsLoaded(element);
+
+          // Remove loading state from container
+          if ($container) {
+            $container.classList.remove(config.loadingClass);
+            $container.classList.add(config.loadedClass);
+          }
+        }, { once: true });
+
+        $parent.addEventListener('error', () => {
+          markAsError(`Failed to load source: ${value}`, element);
+
+          // Remove loading state from container on error too
+          if ($container) {
+            $container.classList.remove(config.loadingClass);
+            $container.classList.add(config.errorClass);
+          }
+        }, { once: true });
+      } else {
+        // No parent found, just mark as loaded
+        markAsLoaded(element);
+      }
+    }
+    // For other elements, just set src
+    else {
+      // Generic src setting
+      element.src = value;
+      markAsLoaded(element);
+    }
+  }
+
+  function loadSrcset(element, value) {
+    const tagName = element.tagName.toLowerCase();
+
+    // Add cache buster to each URL in srcset. The candidates are read with the
+    // srcset GRAMMAR, never `value.split(',')` (#367): a candidate URL may
+    // legally contain a comma (a `data:` payload, a `?w=100,200` query), and
+    // this is the lane the build passes defer `data-srcset` to.
+    value = mapSrcset(value, addCacheBuster);
+
+    if (tagName === 'img') {
+      // Test load with srcset
+      const tempImg = new Image();
+
+      tempImg.onload = () => {
+        element.srcset = value;
+        markAsLoaded(element);
+      };
+
+      tempImg.onerror = () => {
+        markAsError(`Failed to load image: ${value}`, element);
+      };
+
+      tempImg.srcset = value;
+    } else if (tagName === 'source') {
+      // For source elements, just set srcset
+      element.srcset = value;
+
+      // Force parent picture to re-evaluate
+      const picture = element.closest('picture');
+      if (picture) {
+        const img = picture.querySelector('img');
+        if (img && img.src) {
+          img.src = img.src;
+        }
+      }
+
+      markAsLoaded(element);
+    } else {
+      // Generic srcset
+      element.srcset = value;
+      markAsLoaded(element);
+    }
+  }
+
+  function loadBackground(element, value) {
+    // Add cache buster to URL
+    value = addCacheBuster(value);
+
+    // Test load background image
+    const tempImg = new Image();
+
+    tempImg.onload = () => {
+      element.style.backgroundImage = `url('${value}')`;
+      markAsLoaded(element);
+    };
+
+    tempImg.onerror = () => {
+      markAsError(`Failed to load background image: ${value}`, element);
+    };
+
+    tempImg.src = value;
+  }
+
+  function loadHtml(element, value) {
+    element.innerHTML = value;
+    markAsLoaded(element);
+  }
+
+  function loadScript(element, value) {
+    try {
+      const data = JSON.parse(value);
+      const { src, attributes } = data;
+
+      if (!src) {
+        markAsError('No src provided in @script data', element);
+        return;
+      }
+
+      // Add cache buster to script src
+      const busteredSrc = addCacheBuster(src);
+
+      const scriptOptions = {
+        src: busteredSrc,
+        attributes,
+        parent: element,
+      };
+
+      omega.dom().loadScript(scriptOptions)
+        .then(() => {
+          markAsLoaded(element);
+        })
+        .catch((error) => {
+          markAsError(`Failed to load script: ${src} - ${error.message}`, element);
+        });
+
+    } catch (error) {
+      markAsError(`Failed to parse @script JSON: ${error.message}`, element);
+    }
+  }
+
+  function loadClass(element, value) {
+    // Check if this is an animation class
+    const isAnimation = value.includes('animation-');
+
+    // Handle animations specially
+    if (isAnimation) {
+      // First, add a no-fade class to prevent fade-in animation from the "lazy-loaded" CSS class
+      element.classList.add('lazy-loaded-no-fade');
+
+      // Check if page is still loading (set on page load, removed after initial render)
+      const isPageLoading = document.documentElement.getAttribute('data-page-loading') === 'true';
+
+      if (isPageLoading) {
+        // Check if element is already in viewport
+        const rect = element.getBoundingClientRect();
+        const isInInitialViewport = rect.top < window.innerHeight && rect.bottom >= 0;
+
+        // Skip animation if element is already visible on initial page load
+        if (isInInitialViewport) {
+          markAsLoaded(element);
+          return;
+        }
+      }
+    }
+
+    // Split value by spaces to support multiple classes
+    const classes = value.split(/\s+/).filter(c => c);
+
+    // Normal processing: add the class(es)
+    element.classList.add(...classes);
+    markAsLoaded(element);
+  }
+
+  function markAsLoaded(element) {
+    loadedElements.add(element);
+    element.classList.remove(config.loadingClass);
+    element.classList.add(config.loadedClass);
+  }
+
+  function markAsError(error, element) {
+    loadedElements.add(element);
+    element.classList.remove(config.loadingClass);
+    element.classList.add(config.errorClass);
+
+    console.error('Failed to lazy load element', error, element);
+  }
+
+  function observeElements() {
+    // Find all elements matching our selector
+    const elements = document.querySelectorAll(config.selector);
+
+    // Track which video/audio parents we've already set up
+    const observedParents = new Set();
+
+    elements.forEach(element => {
+      // Skip if already loaded
+      if (loadedElements.has(element)) {
+        return;
+      }
+
+      // For source elements in video/audio, observe the parent instead
+      const tagName = element.tagName.toLowerCase();
+      if (tagName === 'source') {
+        const $parent = element.closest('video, audio, picture');
+
+        // For picture elements, just observe the source normally
+        if ($parent && $parent.tagName.toLowerCase() === 'picture') {
+          observer.observe(element);
+          return;
+        }
+
+        // For video/audio, observe the parent and load all sources when it comes into view
+        if ($parent && !observedParents.has($parent)) {
+          observedParents.add($parent);
+          observer.observe($parent);
+
+          // Store reference to all lazy sources
+          $parent.dataset.lazySourcesReady = 'true';
+        }
+        return;
+      }
+
+      // Start observing normally
+      observer.observe(element);
+    });
+  }
+
+  function setupMutationObserver() {
+    // Quit if MutationObserver is not supported
+    if (!('MutationObserver' in window)) {
+      /* @dev-only:start */
+      {
+        console.warn('MutationObserver not supported, lazy loading will not update with dynamic content');
+      }
+      /* @dev-only:end */
+      return;
+    }
+
+    // Watch for new elements added to the DOM
+    const mutationObserver = new MutationObserver(() => {
+      // Simply re-scan for new elements matching our selector
+      observeElements();
+    });
+
+    // Start observing the document body for changes
+    mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  function loadAllImages() {
+    // Fallback for browsers without IntersectionObserver
+    const elements = document.querySelectorAll(config.selector);
+    elements.forEach(element => {
+      loadElement(element);
+    });
+  }
+
+};

package/core/js/core/motion.js

@@ -0,0 +1,28 @@
+/**
+ * Motion Module
+ * Registers the shared @omega.js/client motion engine (reveals, count-ups, word
+ * rotators, marquees, scroll watchers — see core/css/motion/_index.scss for
+ * the attribute contract) on the omega library.
+ *
+ * It does NOT start the engine: that happens in core/js/first-paint.js, well
+ * before this bundle exists (#585 — booting reveals from here meant the hero
+ * waited on firebase/auth/analytics init). This module only adopts the running
+ * instance so `omega.library().motion.scan(el)` keeps working.
+ */
+import omega from '@omega.js/client';
+
+// Module
+export default () => {
+  // Loud, at the break point: first-paint.js always runs before this bundle
+  // exists, so a missing instance is a broken build (a dropped asset entry, a
+  // head that stopped loading the script). Seating `undefined` would only
+  // surface later, as a bare TypeError inside somebody's scan() call.
+  if (!window.__omegaMotion) {
+    throw new Error('[@omega.js/web:motion] window.__omegaMotion is missing — core/js/first-paint.js never ran');
+  }
+
+  // Register on the omega library for programmatic access (omega.library().motion.scan(el))
+  omega._library.motion = window.__omegaMotion;
+
+  console.log('Motion module loaded');
+};

package/core/js/core/query-strings.js

@@ -0,0 +1,146 @@
+import omega from '@omega.js/client';
+
+// The utm set and the ad-platform click ids read off the landing URL.
+const UTM_PARAMS = [
+  'utm_source',
+  'utm_medium',
+  'utm_campaign',
+  'utm_term',
+  'utm_content'
+];
+
+const CLICK_ID_PARAMS = [
+  'fbclid',
+  'gclid',
+  'gbraid',
+  'wbraid',
+  'ttclid',
+  'msclkid',
+  'twclid'
+];
+
+// Query Strings Module
+export default function () {
+  // Process query strings when DOM is ready
+  omega.dom().ready().then(() => {
+    processQueryStrings();
+  });
+
+  function processQueryStrings() {
+    // Get URL parameters
+    const urlParams = new URLSearchParams(window.location.search);
+
+    // Get current attribution data
+    const attribution = omega.storage().get('attribution', {});
+
+    // Fold a pre-first/last blob into the new shape before anything reads it
+    migrateLegacyAttribution(attribution);
+
+    // Process affiliate/referral parameters
+    processAffiliateParams(urlParams, attribution);
+
+    // Process this visit's touch (utm tags, click ids, landing context)
+    processTouch(urlParams, attribution);
+
+    // Save updated attribution
+    omega.storage().set('attribution', attribution);
+  }
+
+  function processAffiliateParams(urlParams, attribution) {
+    // Check for aff or ref parameter
+    const affParam = urlParams.get('aff') || urlParams.get('ref');
+
+    // Quit if no affiliate parameter
+    if (!affParam) {
+      return;
+    }
+
+    // Save affiliate data to attribution object
+    attribution.affiliate = {
+      code: affParam,
+      timestamp: new Date().toISOString(),
+      url: window.location.href,
+      page: window.location.pathname
+    };
+  }
+
+  function processTouch(urlParams, attribution) {
+    const touch = buildTouch(urlParams);
+
+    // First touch is written ONCE, on the first visit ever seen — an organic or
+    // direct landing counts, so every user carries a referrer and a landing url.
+    if (!attribution.first) {
+      attribution.first = touch;
+    }
+
+    // Last touch moves only for a TAGGED visit: an untagged page view later on
+    // must never erase the campaign that brought the user in. No expiry — the
+    // timestamps carry any read-time lookback window.
+    if (isTagged(touch)) {
+      attribution.last = { ...touch };
+    }
+  }
+
+  function buildTouch(urlParams) {
+    const tags = collectParams(urlParams, UTM_PARAMS);
+    const clickIds = collectParams(urlParams, CLICK_ID_PARAMS);
+
+    return {
+      ...(tags ? { tags: tags } : {}),
+      ...(clickIds ? { clickIds: clickIds } : {}),
+      referrer: document.referrer || null,
+      url: window.location.href,
+      page: window.location.pathname,
+      timestamp: new Date().toISOString()
+    };
+  }
+
+  // Collect the params that are present; null when the family is absent entirely,
+  // so an untagged visit carries no empty `tags`/`clickIds` husk.
+  function collectParams(urlParams, names) {
+    const collected = {};
+
+    names.forEach(name => {
+      const value = urlParams.get(name);
+      if (value) {
+        collected[name] = value;
+      }
+    });
+
+    return Object.keys(collected).length > 0 ? collected : null;
+  }
+
+  function isTagged(touch) {
+    return !!(touch.tags || touch.clickIds);
+  }
+
+  // One-time fold of the pre-first/last blob ({ utm, affiliate }) into the
+  // structured shape. Idempotent: the legacy key is dropped on the first run,
+  // and `affiliate` was always top level, so it carries over untouched.
+  function migrateLegacyAttribution(attribution) {
+    const legacy = attribution.utm;
+
+    if (!legacy) {
+      return;
+    }
+
+    delete attribution.utm;
+
+    // A blob that already has a first touch has been migrated — drop the leftover
+    // key and leave the newer touches alone.
+    if (attribution.first) {
+      return;
+    }
+
+    const touch = {
+      ...(legacy.tags && Object.keys(legacy.tags).length > 0 ? { tags: legacy.tags } : {}),
+      referrer: null,
+      url: legacy.url || null,
+      page: legacy.page || null,
+      timestamp: legacy.timestamp || null
+    };
+
+    attribution.first = touch;
+    attribution.last = { ...touch };
+  }
+}

package/core/js/core/service-worker.js

@@ -0,0 +1,28 @@
+// Service Worker Core Library
+export default function ({ options } = {}) {
+  // Cache visited pages
+  if (!('serviceWorker' in navigator) || !navigator.serviceWorker.controller) {
+    console.warn('Service Worker not available or not controlled by a Service Worker.');
+    return;
+  }
+
+  // Setup the service worker to cache the current page
+  const currentPage = options.paths.pagePath || '/';
+  const channel = new MessageChannel();
+
+  // Listen for messages from the service worker
+  channel.port1.onmessage = (event) => {
+    if (event.data.status === 'success') {
+      console.log('Page cached for offline use:', currentPage);
+    }
+  };
+
+  // Log the caching action
+  // console.log(`Caching page for offline use: ${currentPage}`);
+
+  // Send message to service worker to cache the current page
+  navigator.serviceWorker.controller.postMessage({
+    command: 'update-cache',
+    payload: { pages: [currentPage] }
+  }, [channel.port2]);
+};