Installation Steps

To install the necessary npm packages, run the following command:

npm install

Usage

In order to create a bundle for experiments, you can run this command

npm run build

• Repo owner or admin
• Other community or team contact

ztLibrary

ztLibrary is a lightweight JavaScript library designed to help developers observe DOM changes, wait for elements to appear, handle conditional triggers, and manage cookies and storage. It is compatible with modern browsers and uses ES Modules.

Features

MutationObserver utilities

• Observe DOM changes efficiently.
• Track added/removed elements, attribute changes, and text content updates.

Element appearance utilities

• onAppearAll(selectors, callback, options): Wait until all selectors are present in the DOM.
• onAppearAny(selectors, callback, options): Wait until any selector is present in the DOM.

Conditional triggers

• triggerOn(config, callback): Execute callbacks based on DOM conditions, URL checks, timeouts, intervals, or logical AND/OR conditions.

Storage utilities

• localStorage: get, set, del
• sessionStorage: get, set, del

Cookie utilities

• utils.cookie.set(name, value, days): Set a cookie with optional expiration.
• utils.cookie.get(name): Get a cookie value.
• utils.cookie.del(name): Delete a cookie.

Object utilities

• patch(target, source): Merge properties from a source object into a target object.

Installation

import { ztLibrary } from './ztLibrary.js';

// Optionally, attach globally
window.ztLibrary = ztLibrary;

Usage Examples

Observing DOM Changes

const observer = ztLibrary.createObserver((node, mutationType) => {
  console.log('Mutation detected:', mutationType, node);
}, { childList: true, subtree: true });

Wait for Elements

ztLibrary.onAppearAll(['#header', '.menu'], elements => {
  console.log('All elements appeared:', elements);
});

ztLibrary.onAppearAny(['.modal', '.popup'], element => {
  console.log('One of the elements appeared:', element);
});

Trigger on Conditions

ztLibrary.triggerOn({
  condition: 'domElement',
  options: { selector: '#main-content', timeout: 5000 }
}, () => {
  console.log('Main content appeared!');
});

ztLibrary.triggerOn({
  condition: 'url',
  type: 'pass',
  options: { includes: '/dashboard' }
}, () => {
  console.log('User is on the dashboard page');
});

Cookies

ztLibrary.utils.cookie.set('userToken', 'abc123', 7);
const token = ztLibrary.utils.cookie.get('userToken');
ztLibrary.utils.cookie.del('userToken');

Local Storage

ztLibrary.utils.localStorage.set('theme', 'dark');
const theme = ztLibrary.utils.localStorage.get('theme');
ztLibrary.utils.localStorage.del('theme');

Patching Objects

const obj = { a: 1 };
ztLibrary.utils.patch(obj, { b: 2, c: 3 });
console.log(obj); // { a: 1, b: 2, c: 3 }

Logging

ztLibrary.setDebuggedMode(bool) Controlled via the localStorage key zt_debugger.

When enabled, logs info, warnings, and errors to the console for debugging purposes.

Analytics

ztLibrary.setAnalyticsDisabled(bool) You can disable analytics via the localStorage key zt_analytics.

Pipeline rules

There are some requirements that are needed to meet, the rules are:

• Branch Naming Conventions: Branches should be named according to one of the following patterns:

  • Branches should be named as one variation of:
    • root/.
    • development/exp-#+.#
    • release/exp-#+.#
    • hotfix/exp-#+.#
    • bugfix/exp-#+.#

• Linting Conventions: You can run the following commands to perform linting checks manually before committing changes:

  • To check JavaScript linting:

  npm run lint:js

  • To check SCSS linting:

  npm run lint:scss

• Running unit test You can run the following command

npm run test