@quietsapa/qsl 0.1.0

package/src/index.js

@@ -0,0 +1,47 @@
+/**
+ * QSL public entry point.
+ *
+ * Side-effect free: importing this module registers nothing and starts
+ * nothing. Compose what you need, then call `init()` yourself. For a
+ * batteries-included build see `src/presets/full.js`.
+ */
+
+export { default as core } from './core.js';
+export { default } from './core.js';
+
+export {
+    Script,
+    Stylesheet,
+    InlineScript,
+    InlineStyle,
+    Pixel,
+    Shadow,
+    HTML,
+} from './types.js';
+
+export {
+    default as conditions,
+    mediaQueryCondition,
+    languageCondition,
+    timezoneCondition,
+    urlCondition,
+    userAgentCondition,
+} from './plugins/conditions.js';
+
+export {
+    default as triggers,
+    loadTrigger,
+    idleTrigger,
+    domReadyTrigger,
+    delayTrigger,
+    hoverTrigger,
+    visibleTrigger,
+    appearsTrigger,
+    mediaQueryTrigger,
+} from './plugins/triggers.js';
+
+export { default as logger } from './plugins/logger.js';
+export { default as events } from './plugins/events.js';
+export { default as circ } from './plugins/circ.js';
+export { default as dynamic } from './plugins/dynamic.js';
+export { default as simpleEvents } from './plugins/simple-events.js';

package/src/plugins/circ.js

@@ -0,0 +1,59 @@
+/**
+ * Check for circular dependencies in flows and processes.
+ * @param {*} QSL 
+ */
+export default function(QSL) {
+    QSL.loadActions.add(function() {
+        /**
+         * Helper function to detect circular dependencies
+         */
+        const detectCircularDependency = (id, getDeps, visited = new Set()) => {
+            if (visited.has(id)) return true;
+            visited.add(id);
+            const deps = getDeps(id) || [];
+            for (const depId of deps) {
+                if (detectCircularDependency(depId, getDeps, new Set(visited))) return true;
+            }
+            return false;
+        };
+        
+        /**
+         * Check for circular dependencies in flows
+         */
+        const getFlowDeps = id => (this.flowOptions.get(this.normalizeFlowId(id))?.depends) || [];
+        for (const [fid, options] of this.flowOptions.entries()) {
+            if (Array.isArray(options.depends) && options.depends.length) {
+                if (detectCircularDependency(fid, getFlowDeps)) {
+                    this.log('CIRC_FLOW_DEP_SKIPPED', fid, options.depends);
+                    this.setFlowOptions({ status: this.FLOW_STATE.COMPLETED }, fid); /* Mark as completed */
+                }
+            }
+        }
+
+        /**
+         * Check for circular dependencies in processes
+         */
+        const getProcDeps = id => {
+            for (const flow of this.flows.values()) {
+                const proc = flow.find(p => p.id === id);
+                if (proc && Array.isArray(proc.depends)) return proc.depends.map(dep => this.PREFIX + dep);
+            }
+            return [];
+        };
+        for (const flow of this.flows.values()) {
+            for (const process of flow) {
+                if (Array.isArray(process.depends) && process.depends.length) {
+                    if (detectCircularDependency(process.id, getProcDeps)) {
+                        this.log('CIRC_PROCESS_DEP_SKIPPED', process.id, process.depends);
+                        process.condition = false; /* Turn off condition */
+                    }
+                }
+            }
+        }
+    });
+
+    if ( QSL.logger && QSL.logger.VERSION === 'qsl-logger' ) {
+        QSL.logger.LOG.CIRC_FLOW_DEP_SKIPPED = '[QSL] Circular flow dependency skipped:';
+        QSL.logger.LOG.CIRC_PROCESS_DEP_SKIPPED = '[QSL] Circular process dependency skipped:';
+    }
+}

package/src/plugins/conditions.js

@@ -0,0 +1,246 @@
+/**
+ * Media query condition handler
+ * @param {*} QSL 
+ */
+export function mediaQueryCondition(QSL) {
+    QSL.conditionHandlers.add(function(opt) {
+        if (typeof opt !== 'string' || !opt.startsWith('media:')) {
+            return null;
+        }
+        return !window.matchMedia(opt.slice('media:'.length)).matches;
+    });
+}
+
+/**
+ * Language condition handler
+ * @param {*} QSL 
+ */
+export function languageCondition(QSL) {
+    QSL.conditionHandlers.add(function(opt) {
+        if (typeof opt !== 'string' || !opt.startsWith('lang:')) {
+            return null;
+        }
+        const p = opt.split(':');
+        const t = p[1] || 'equals';
+        const v = p.slice(2).join(':');
+        const l = navigator.language || navigator.languages?.[0] || '';
+        
+        switch (t) {
+            case 'equals':
+            case 'is':
+                return l !== v;
+            case 'contains':
+                return !l.includes(v);
+            case 'startsWith':
+                return !l.startsWith(v);
+            case 'in':
+                const ls = v.split(',').map(ll => ll.trim());
+                return !ls.includes(l);
+            default:
+                return true; // Unknown type, fail condition
+        }
+    });
+}
+
+/**
+ * Timezone condition handler
+ * @param {*} QSL 
+ */
+export function timezoneCondition(QSL) {
+    QSL.conditionHandlers.add(function(opt) {
+        if (typeof opt !== 'string' || 
+            (!opt.startsWith('tz:') && !opt.startsWith('timezone:'))) {
+            return null;
+        }
+        const p = opt.split(':');
+        const t = p[1] || 'equals';
+        const v = p.slice(2).join(':');
+        
+        try {
+            const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            const o = -new Date().getTimezoneOffset() / 60;
+            
+            switch (t) {
+                case 'equals':
+                case 'is':
+                    return tz !== v;
+                case 'contains':
+                    return !tz.includes(v);
+                case 'offset':
+                    return o !== parseInt(v);
+                default:
+                    return true;
+            }
+        } catch (e) {
+            return true;
+        }
+    });
+}
+
+/**
+ * URL condition handler
+ * @param {*} QSL 
+ */
+export function urlCondition(QSL) {
+    QSL.conditionHandlers.add(function(opt) {
+        if (typeof opt !== 'string' || !opt.startsWith('url:')) {
+            return null;
+        }
+        const lc = window.location;
+        const hf = lc.href;
+        const pn = lc.pathname;
+        const se = lc.search;
+        const hn = lc.hostname;
+        
+        const p = opt.split(':');
+        const t = p[1];
+        const v = p.slice(2).join(':');
+        
+        if (!t) return true;
+        
+        switch (t) {
+            case 'contains':
+                return !hf.includes(v);
+            case 'path':
+                return !pn.includes(v);
+            case 'pathStartsWith':
+                return !pn.startsWith(v);
+            case 'pathEndsWith':
+                return !pn.endsWith(v);
+            case 'query':
+                if (se) {
+                    const q = new URLSearchParams(se);
+                    if (v.includes('=')) {
+                        const [key, val] = v.split('=');
+                        return q.get(key) !== val;
+                    } else {
+                        return !q.has(v);
+                    }
+                } else {
+                    return true;
+                }
+            case 'hostname':
+                return !hn.includes(v);
+            case 'matches':
+                try {
+                    return !(new RegExp(v)).test(hf);
+                } catch (e) {
+                    return true;
+                }
+            case 'pathMatches':
+                try {
+                    return !(new RegExp(v)).test(pn);
+                } catch (e) {
+                    return true; // Error parsing regex, fail condition
+                }
+            default:
+                return true;
+        }
+    });
+}
+
+/**
+ * User agent condition handler
+ * @param {*} QSL 
+ */
+export function userAgentCondition(QSL) {
+    QSL.conditionHandlers.add(function(opt) {
+        if (typeof opt !== 'string' || 
+            (!opt.startsWith('ua:') && !opt.startsWith('userAgent:'))) {
+            return null;
+        }
+        const p = opt.split(':');
+        const t = p[1] || 'contains';
+        const v = p.slice(2).join(':');
+        const ua = navigator.userAgent || '';
+        const uaLower = ua.toLowerCase();
+        const vLower = v.toLowerCase();
+
+        switch (t) {
+            case 'contains':
+                if (!uaLower.includes(vLower)) return true;
+                break;
+                
+            case 'equals':
+            case 'is':
+                if (ua !== v) return true;
+                break;
+                
+            case 'matches':
+                // Regex pattern matching
+                try {
+                    if (!(new RegExp(v, 'i')).test(ua)) return true;
+                } catch (e) {
+                    return true; // Error parsing regex, fail condition
+                }
+                break;
+                
+            case 'browser':
+                // Detect browser
+                const bMap = {
+                    'chrome': /chrome/i.test(ua) && !/edg|opr/i.test(ua),
+                    'firefox': /firefox/i.test(ua),
+                    'safari': /safari/i.test(ua) && !/chrome|chromium|edg|opr/i.test(ua),
+                    'edge': /edg/i.test(ua),
+                    'opera': /opr/i.test(ua),
+                    'ie': /msie|trident/i.test(ua),
+                    'chromium': /chromium/i.test(ua)
+                };
+                const bKey = vLower;
+                if (!bMap[bKey]) return true;
+                break;
+                
+            case 'device':
+                // Detect device type
+                const isM = /mobile|android|iphone|ipod|blackberry|iemobile|opera mini/i.test(ua);
+                const isT = /tablet|ipad|playbook|silk/i.test(ua) || (isM && /android/i.test(ua) && !/mobile/i.test(ua));
+                const isD = !isM && !isT;
+                
+                switch (vLower) {
+                    case 'mobile': if (!isM) return true; break;
+                    case 'tablet': if (!isT) return true; break;
+                    case 'desktop': if (!isD) return true; break;
+                    default: return true;
+                }
+                break;
+                
+            case 'os':
+            case 'platform':
+                // Detect operating system
+                const oMap = {
+                    'windows': /win/i.test(ua),
+                    'mac': /mac/i.test(ua),
+                    'ios': /iphone|ipad|ipod/i.test(ua),
+                    'android': /android/i.test(ua),
+                    'linux': /linux/i.test(ua) && !/android/i.test(ua),
+                    'unix': /unix/i.test(ua),
+                    'chromeos': /cros/i.test(ua)
+                };
+                if (!oMap[vLower]) return true;
+                break;
+                
+            default:
+                return true;
+        }
+        
+        // If we reach here, condition passed (none of the cases returned true)
+        return false;
+    });
+}
+
+export default function(QSL) {
+    // Media query handler
+    mediaQueryCondition(QSL);
+    
+    // Language handler
+    languageCondition(QSL);
+    
+    // Timezone handler
+    timezoneCondition(QSL);
+    
+    // URL handler
+    urlCondition(QSL);
+    
+    // User agent handler
+    userAgentCondition(QSL);
+}

package/src/plugins/dynamic.js

@@ -0,0 +1,59 @@
+/**
+ * Handle dynamic flow assignment when resources are added after load has started.
+ * @param {*} QSL 
+ */
+export default function(QSL) {
+    /**
+     * Handle dynamic flow assignment when resources are added after load has started.
+     */
+    QSL.addProcessFilters.add(function(flowId, config) {
+        if (this.hasStarted && !flowId) {
+            flowId = 'dynamic-' + Math.random().toString(36).slice(2);
+            config.paused = true;
+        }
+        return [flowId, config];
+    });
+
+    /**
+     * Filter out dynamic flows from initial processing.
+     */
+    QSL.flowIdFilters.add(function(flowIds) {
+        return flowIds.filter(fid => !fid.includes('dynamic'));
+    });
+
+    /**
+     * Process dynamic flows after all regular flows complete.
+     * Checks if all non-dynamic flows are completed, then processes dynamic flows.
+     */
+    QSL.completedFlowsActions.add(function(flowsDone, flows, flowOptions) {
+        if (!flowsDone || !flows || !flowOptions) return true;
+        
+        /**
+         * Check if all non-dynamic flows are completed
+         */
+        const nonDynamicFlowsDone = [...flowOptions.entries()]
+            .filter(([fid]) => !fid.includes('dynamic'))
+            .every(([, opt]) => opt.status === this.FLOW_STATE.COMPLETED);
+        
+        if (!nonDynamicFlowsDone) return false;
+        
+        /**
+         * Process dynamic flows
+         */
+        const dynamicFlowIds = [...flows.keys()].filter(fid => fid.includes('dynamic'));
+        if (dynamicFlowIds.length === 0) return true;
+        
+        for (const dynamicFlowId of dynamicFlowIds) {
+            const dynamicOptions = flowOptions.get(dynamicFlowId);
+            
+            if (dynamicOptions && dynamicOptions.status !== this.FLOW_STATE.COMPLETED) {
+                if (dynamicOptions.status === this.FLOW_STATE.READY) {
+                    this.setFlowOptions({ status: this.FLOW_STATE.RUNNING }, dynamicFlowId);
+                    this.runFlow(dynamicFlowId);
+                }
+                return false;
+            }
+        }
+        return true;
+    });
+}

package/src/plugins/events.js

@@ -0,0 +1,218 @@
+/**
+ * Track events when a process completes.
+ * @param {*} QSL 
+ */
+export default function(QSL) {
+    const customEvents = new Map();
+    const processElementMap = new WeakMap();
+    let documentListener = null;
+    let windowListener = null;
+    let isIntercepting = false;
+
+    /**
+     * Normalize script URL for comparison (remove protocol, domain, query params, hash).
+     * @param {string} url - Script URL or path
+     * @returns {string} - Normalized path
+     */
+    const normalizeScriptPath = (u) => {
+        if (!u) return '';
+        try {
+            return u.includes('://') ? new URL(u).pathname : u.split('?')[0].split('#')[0];
+        } catch (e) {
+            return u.split('?')[0].split('#')[0];
+        }
+    };
+
+    /**
+     * Initialize event interception when QSL loads.
+     */
+    QSL.loadActions.add(function() {
+        if (isIntercepting) return;
+        
+        documentListener = document.addEventListener;
+        windowListener = window.addEventListener;
+        isIntercepting = true;
+
+        const iterator = (type, eventType, changeEventName) => {
+            let currentScriptId = null;
+            let targetFlowId = null;
+            
+            /**
+             * Priority 1: Check document.currentScript for current process ID and flow ID.
+             */
+            if (document.currentScript) {
+                const processElement = processElementMap.get(document.currentScript);
+                if (processElement) {
+                    currentScriptId = processElement.processId;
+                    targetFlowId = processElement.flowId;
+                }
+            }
+            
+            /**
+             * Priority 2: Check currentProcessPerFlow map for current process ID and flow ID.
+             */
+            if (!currentScriptId && this.currentProcessPerFlow.size) {
+                for (const [flowId, processId] of this.currentProcessPerFlow) {
+                    if (processId) {
+                        currentScriptId = processId;
+                        targetFlowId = flowId;
+                        break;
+                    }
+                }
+            }
+            
+            /**
+             * Priority 3: Use Error stack trace only when currentScript is null.
+             */
+            if (!currentScriptId) {
+                const stack = new Error().stack;
+                if (stack) {
+                    const lines = stack.split('\n');
+                    // Skip first 2 lines (Error and iterator function)
+                    for (let i = 2; i < lines.length; i++) {
+                        const match = lines[i].match(/([^()\s]+\.js(?:\?[^:)]*)?):\d+(?::\d+)?/);
+                        if (match) {
+                            const file = match[1];
+                            const qIndex = file.indexOf('?');
+                            const stackFile = qIndex === -1 ? file.trim() : file.slice(0, qIndex).trim();
+                            
+                            if (stackFile) {
+                                // Normalize: remove query/hash, extract pathname from URL
+                                const qIdx = stackFile.indexOf('?');
+                                const hIdx = stackFile.indexOf('#');
+                                const endIdx = qIdx === -1 ? (hIdx === -1 ? stackFile.length : hIdx) : (hIdx === -1 ? qIdx : Math.min(qIdx, hIdx));
+                                let normalizedFile = stackFile.slice(0, endIdx);
+                                try {
+                                    if (normalizedFile.includes('://')) {
+                                        normalizedFile = new URL(normalizedFile).pathname;
+                                    }
+                                } catch (e) {}
+                                const lastSlash = normalizedFile.lastIndexOf('/');
+                                const fileName = lastSlash === -1 ? normalizedFile : normalizedFile.slice(lastSlash + 1);
+                                
+                                for (const [flowId, processes] of this.flows) {
+                                    for (const process of processes) {
+                                        if (process.src && process.type === 'script') {
+                                            const normalizedSrc = normalizeScriptPath(process.src);
+                                            const srcLastSlash = normalizedSrc.lastIndexOf('/');
+                                            const srcFileName = srcLastSlash === -1 ? normalizedSrc : normalizedSrc.slice(srcLastSlash + 1);
+                                            
+                                            if (normalizedFile === normalizedSrc || (fileName && fileName === srcFileName)) {
+                                                currentScriptId = process.id;
+                                                targetFlowId = flowId;
+                                                break;
+                                            }
+                                        }
+                                    }
+                                    if (currentScriptId) break;
+                                }
+                                if (currentScriptId) break;
+                            }
+                        }
+                    }
+                }
+            }
+            
+            /**
+             * If current script ID and flow ID are found, track event.
+             * Only change event name if event already fired (changeEventName = true).
+             */
+            if (currentScriptId && targetFlowId) {
+                const flow = this.flows.get(targetFlowId);
+                const process = flow?.find(p => p.id === currentScriptId || p.id === this.PREFIX + currentScriptId);
+                
+                if (process) {
+                    const shouldFireEvents = process.fireEvents !== false && (this.flowOptions.get(targetFlowId)?.fireEvents !== false);
+                    if (shouldFireEvents) {
+                        const eventName = `${type}:${process.id}`;
+                        if (!customEvents.has(process.id)) customEvents.set(process.id, []);
+                        const events = customEvents.get(process.id);
+                        if (!events.some(e => e.name === eventName)) events.push({ type: eventType, name: eventName });
+                        if (changeEventName) type = eventName;
+                    }
+                }
+            }
+            return type;
+        };
+
+        document.addEventListener = (type, listener, opts) => {
+            if (type === 'DOMContentLoaded' && this.LIFECYCLE.DOMREADY) {
+                const trackedType = iterator.call(this, type, this.EVENTS.DOMREADY, true);
+                if (trackedType !== type) {
+                    type = trackedType;
+                    queueMicrotask(() => document.dispatchEvent(new Event(trackedType)));
+                }
+            }
+            return documentListener.call(document, type, listener, opts);
+        };
+
+        window.addEventListener = (type, listener, opts) => {
+            if (type === 'load' && this.LIFECYCLE.LOADED) {
+                const trackedType = iterator.call(this, type, this.EVENTS.LOADED, true);
+                if (trackedType !== type) {
+                    type = trackedType;
+                    queueMicrotask(() => window.dispatchEvent(new Event(trackedType)));
+                }
+            }
+            return windowListener.call(window, type, listener, opts);
+        };
+    });
+
+    /**
+     * Provide handler callbacks for process execution.
+     * Register process elements in processElementMap.
+     */
+    QSL.handlerCallbacksFilters.add(function(process) {
+        return {
+            registerProcessElement: (el, config) => {
+                processElementMap.set(el, { flowId: config.flowId, processId: config.id });
+            }
+        };
+    });
+
+    /**
+     * Fire tracked events when a process completes.
+     * Use processCompleteActions instead of patching execute.
+     */
+    QSL.processCompleteActions.add(function(process) {
+        const events = customEvents.get(process.id);
+        if (events && Array.isArray(events)) {
+            for (const event of events) {
+                if (event.type === this.EVENTS.DOMREADY) {
+                    if (this.LIFECYCLE.DOMREADY) {
+                        document.dispatchEvent(new Event(event.name));
+                    } else {
+                        document.addEventListener('DOMContentLoaded', () => {
+                            document.dispatchEvent(new Event(event.name));
+                        }, { once: true });
+                    }
+                } else if (event.type === this.EVENTS.LOADED) {
+                    if (this.LIFECYCLE.LOADED) {
+                        window.dispatchEvent(new Event(event.name));
+                    } else {
+                        window.addEventListener('load', () => {
+                            window.dispatchEvent(new Event(event.name));
+                        }, { once: true });
+                    }
+                }
+            }
+        }
+    });
+
+    /**
+     * Cleanup: restore original addEventListener functions on reset.
+     * Use resetActions instead of patching reset.
+     */
+    QSL.resetActions.add(function() {
+        if (isIntercepting && documentListener && windowListener) {
+            document.addEventListener = documentListener;
+            window.addEventListener = windowListener;
+            isIntercepting = false;
+        }
+    });
+
+    /**
+     * Store custom events map.
+     */
+    QSL.customEvents = customEvents;
+}

package/src/plugins/logger.js

@@ -0,0 +1,56 @@
+export default function(QSL) {
+
+    QSL.initActions.add(function() {
+        
+        QSL.logger = {
+            VERSION: 'qsl-logger',
+            LOG: {
+                LOGGER_LOADED: '[QSL] Logger loaded',
+                LOGGER_LOAD_ERROR: '[QSL] Logger load error:',
+                UNKNOWN_TYPE: '[QSL] Unknown type:',
+                PROCESS_STARTED: '[QSL] Process started:',
+                PROCESS_COMPLETED: '[QSL] Process completed:',
+                PROCESS_FAILED: '[QSL] Process failed:',
+                STYLESHEET_STARTED: '[QSL] Stylesheet loading:',
+                STYLESHEET_LOADED: '[QSL] Stylesheet loaded:',
+                STYLESHEET_FAILED: '[QSL] Stylesheet failed to load:',
+                INLINE_SCRIPT_STARTED: '[QSL] Inline script loading:',
+                INLINE_SCRIPT_SUCCESS: '[QSL] Inline script loaded:',
+                INLINE_SCRIPT_ERROR: '[QSL] Inline script load error:',
+                INLINE_STYLE_STARTED: '[QSL] Inline style loading:',
+                INLINE_STYLE_SUCCESS: '[QSL] Inline style loaded:',
+                INLINE_STYLE_ERROR: '[QSL] Inline style load error:',
+                IMAGE_STARTED: '[QSL] Image pixel loading:',
+                IMAGE_LOADED: '[QSL] Image pixel loaded:',
+                IMAGE_FAILED: '[QSL] Image pixel failed:',
+                SHADOW_STARTED: '[QSL] Shadow element loading:',
+                SHADOW_SUCCESS: '[QSL] Shadow element loaded:',
+                SHADOW_FAILED: '[QSL] Shadow element failed:',
+                HTML_STARTED: '[QSL] HTML element loading:',
+                HTML_SUCCESS: '[QSL] HTML element loaded:',
+                HTML_FAILED: '[QSL] HTML element failed:',
+                PRELOAD_ERROR: '[QSL] Preload error:',
+                FLOW_DEP_SKIPPED: '[QSL] Flow dependency missed:',
+                DEP_NOT_FOUND: '[QSL] Dependency not found:',
+                RESET: '[QSL] Global reset',
+                ALL_COMPLETED: '[QSL] Loading is completed',
+            },
+            log(type, ...args) {
+                if (this.LOG[type]) {
+                    console.log(this.LOG[type], ...args, { timestamp: Date.now() });
+                } else {
+                    console.log('[QSL] ' + type, ...args);
+                }
+            },
+            error(type, ...args) {
+                if (this.LOG[type]) {
+                    console.error(this.LOG[type], ...args);
+                } else {
+                    console.error('[QSL] ' + type, ...args);
+                }
+            }
+        };
+        
+    });
+
+}

package/src/plugins/simple-events.js

@@ -0,0 +1,6 @@
+export default function(QSL) {
+    QSL.allCompleteActions.add(function() {
+        document.dispatchEvent(new Event('DOMContentLoaded'));
+        window.dispatchEvent(new Event('load'));
+    });
+}