@hortonstudio/main 1.2.5 → 1.2.7

package/attributes-master/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - 'packages/*'
+  - '!packages/template'

package/attributes-master/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@finsweet/tsconfig",
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  }
+}

package/index.js

@@ -1,273 +1,162 @@
-// ver 1.2.4
+// ver 1.2.6
 
 const API_NAME = 'hsmain';
 
-console.log(`🟢 ${API_NAME} v1.2.4 initializing...`);
+console.log(`🟢 ${API_NAME} v1.2.6 initializing...`);
 console.log('🔍 DOM state:', document.readyState);
 console.log('🔍 Script URL:', import.meta.url);
 
-window[API_NAME] = window[API_NAME] || {};
-window[API_NAME].loaded = false
-
-// Dynamic module loader function (like Finsweet's approach)
-const loadModule = async (moduleName) => {
-    console.log(`📦 Loading module: ${moduleName}`);
-    const baseURL = new URL('./', import.meta.url).href;
-    console.log(`📂 Base URL: ${baseURL}`);
-    
-    switch (moduleName) {
-        case "data-hs-anim-text":
-            return import(new URL('./animations/text.js', import.meta.url).href);
-        case "data-hs-anim-hero":
-            return import(new URL('./animations/hero.js', import.meta.url).href);
-        case "data-hs-anim-transition":
-            return import(new URL('./animations/transition.js', import.meta.url).href);
-        case "data-hs-util-toc":
-            return import(new URL('./utils/toc.js', import.meta.url).href);
-        case "data-hs-util-progress":
-            return import(new URL('./utils/scroll-progress.js', import.meta.url).href);
-        case "data-hs-util-navbar":
-            return import(new URL('./utils/navbar.js', import.meta.url).href);
-        case "smooth-scroll":
-            return import(new URL('./autoInit/smooth-scroll.js', import.meta.url).href);
-        default:
-            console.error(`❌ Unsupported module: ${moduleName}`);
-            throw new Error(`HortonStudio module "${moduleName}" is not supported.`);
+// Main initialization function
+const initializeHsMain = () => {
+    // Handle existing API
+    if (window[API_NAME] && !Array.isArray(window[API_NAME]) && window[API_NAME].loaded) {
+        console.log('⚠️ API already loaded, skipping initialization');
+        return;
     }
-    
-    // Refresh Webflow after processing
-    setTimeout(() => {
-        if (window.Webflow && window.Webflow.ready) {
-            window.Webflow.ready();
-        }
-
-        // Run all registered post-Webflow callbacks (even without Webflow)
-        setTimeout(() => {
-            postWebflowCallbacks.forEach(callback => {
-                try {
-                    callback();
-                } catch (error) {
-                    console.error('Callback error:', error);
-                }
-            });
-            window[API_NAME].loaded = true;
-        }, 100);
-    }, 100);
-};
-
-const animationModules = {
-    "data-hs-anim-text": true,
-    "data-hs-anim-hero": true,
-    "data-hs-anim-transition": true
-};
 
-const utilityModules = {
-    "data-hs-util-toc": true,
-    "data-hs-util-progress": true,
-    "data-hs-util-navbar": true
-};
+    // Store any early API calls
+    const existingRequests = Array.isArray(window[API_NAME]) ? window[API_NAME] : [];
 
-// Modules that auto-initialize
-const autoInitModules = {
-    "smooth-scroll": true
-};
+    // Module definitions
+    const animationModules = {
+        "data-hs-anim-text": true,
+        "data-hs-anim-hero": true,
+        "data-hs-anim-transition": true
+    };
 
-// Store callbacks to run after Webflow.ready()
-const postWebflowCallbacks = [];
+    const utilityModules = {
+        "data-hs-util-toc": true,
+        "data-hs-util-progress": true,
+        "data-hs-util-navbar": true
+    };
 
-const findCurrentScriptTag = () => {
-    // Use import.meta.url like Finsweet does
-    const scripts = [...document.querySelectorAll(`script[data-hs-main][src="${import.meta.url}"]`)];
-    const fallbackScript = document.querySelector('script[data-hs-main]');
-    const found = scripts[0] || fallbackScript;
-    console.log(`🏷️ Script tag found:`, found);
-    console.log(`🏷️ Script attributes:`, found ? [...found.attributes].map(a => `${a.name}="${a.value}"`).join(' ') : 'none');
-    return found;
-};
+    const autoInitModules = {
+        "smooth-scroll": true
+    };
 
-const processModules = async (scriptTag) => {
-    console.log(`⚙️ Processing modules with script tag:`, scriptTag);
-    const modulePromises = [];
+    // All available modules
+    const allModules = { ...animationModules, ...utilityModules };
 
-    // Load manual modules based on attributes
-    const manualModules = Object.keys({ ...animationModules, ...utilityModules });
-    console.log(`🔍 Checking for manual modules:`, manualModules);
-    
-    for (const moduleName of manualModules) {
-        if (scriptTag && scriptTag.hasAttribute(moduleName)) {
-            console.log(`✅ Found attribute for: ${moduleName}`);
-            modulePromises.push(loadHsModule(moduleName));
+    // Dynamic module loader (like Finsweet)
+    const loadModule = async (moduleName) => {
+        console.log(`📦 Loading module: ${moduleName}`);
+        
+        switch (moduleName) {
+            case "data-hs-anim-text":
+                return import(new URL('./animations/text.js', import.meta.url).href);
+            case "data-hs-anim-hero":
+                return import(new URL('./animations/hero.js', import.meta.url).href);
+            case "data-hs-anim-transition":
+                return import(new URL('./animations/transition.js', import.meta.url).href);
+            case "data-hs-util-toc":
+                return import(new URL('./utils/toc.js', import.meta.url).href);
+            case "data-hs-util-progress":
+                return import(new URL('./utils/scroll-progress.js', import.meta.url).href);
+            case "data-hs-util-navbar":
+                return import(new URL('./utils/navbar.js', import.meta.url).href);
+            case "smooth-scroll":
+                return import(new URL('./autoInit/smooth-scroll.js', import.meta.url).href);
+            default:
+                console.error(`❌ Unsupported module: ${moduleName}`);
+                throw new Error(`${API_NAME} module "${moduleName}" is not supported.`);
         }
-    }
-
-    // Load auto-init modules
-    const autoModules = Object.keys(autoInitModules);
-    console.log(`🔄 Auto-loading modules:`, autoModules);
-    for (const moduleName of autoModules) {
-        modulePromises.push(loadHsModule(moduleName));
-    }
+    };
 
-    // Hide .transition elements if transition module is not loaded
-    if (!scriptTag || !scriptTag.hasAttribute('data-hs-anim-transition')) {
-        const transitionElements = document.querySelectorAll('.transition');
-        transitionElements.forEach(element => {
-            element.style.display = 'none';
+    // Webflow ready helper (like Finsweet)
+    const waitWebflowReady = async () => {
+        return new Promise((resolve) => {
+            window.Webflow ||= [];
+            window.Webflow.push(resolve);
         });
-    }
+    };
 
-    // Wait for ALL modules to finish loading
-    console.log(`⏳ Waiting for ${modulePromises.length} modules to load...`);
-    await Promise.all(modulePromises);
-    console.log(`✅ All modules loaded successfully`);
+    // DOM ready helper (like Finsweet)
+    const waitDOMReady = async () => {
+        return new Promise((resolve) => {
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', resolve);
+            } else {
+                resolve();
+            }
+        });
+    };
 
-    // Always refresh Webflow after all modules are loaded
-    refreshWebflow();
-};
+    // Find script tags (Finsweet approach)
+    const scripts = [...document.querySelectorAll(`script[type="module"][src="${import.meta.url}"]`)];
+    console.log(`📄 Found ${scripts.length} matching script tags`);
 
-const refreshWebflow = () => {
-    console.log(`🔄 Refreshing Webflow...`);
-    setTimeout(() => {
-        if (window.Webflow && window.Webflow.ready) {
-            console.log(`🌐 Calling Webflow.ready()`);
-            window.Webflow.ready();
-        } else {
-            console.log(`⚠️ Webflow not detected`);
+    // Module loading function
+    const loadHsModule = async (moduleName) => {
+        console.log(`🔄 loadHsModule called for: ${moduleName}`);
+        
+        const apiInstance = window[API_NAME];
+        
+        // Check if already processing
+        if (apiInstance.process.has(moduleName)) {
+            console.log(`⚠️ Module ${moduleName} already processing`);
+            return apiInstance.modules[moduleName]?.loading;
         }
-
-        // Run all registered post-Webflow callbacks (even without Webflow)
-        setTimeout(() => {
-            console.log(`🔄 Running ${postWebflowCallbacks.length} post-Webflow callbacks`);
-            postWebflowCallbacks.forEach((callback, index) => {
-                try {
-                    console.log(`📞 Executing callback ${index + 1}/${postWebflowCallbacks.length}`);
-                    callback();
-                } catch (error) {
-                    console.error(`❌ Callback ${index + 1} failed:`, error);
-                }
-            });
-            window[API_NAME].loaded = true;
-            console.log(`🎉 ${API_NAME} fully loaded and ready!`);
-        }, 100);
-    }, 100);
-};
-
-const loadHsModule = async (moduleName) => {
-    console.log(`🔄 loadHsModule called for: ${moduleName}`);
-    const apiInstance = window[API_NAME];
-
-    if (!apiInstance || !apiInstance.process) {
-        console.error(`❌ API not initialized properly:`, apiInstance);
-        throw new Error(`${API_NAME} API not initialized`);
-    }
-
-    if (apiInstance.process.has(moduleName)) {
-        console.log(`⚠️ Module ${moduleName} already processing, returning existing promise`);
-        return apiInstance.modules[moduleName]?.loading;
-    }
-
-    console.log(`➕ Adding ${moduleName} to process set`);
-    apiInstance.process.add(moduleName);
-
-    const moduleObj = apiInstance.modules[moduleName] || {};
-    apiInstance.modules[moduleName] = moduleObj;
-
-    moduleObj.loading = new Promise((resolve, reject) => {
-        moduleObj.resolve = resolve;
-        moduleObj.reject = reject;
-    });
-
-    try {
-        console.log(`📦 Importing ${moduleName}...`);
-        const { init, version } = await loadModule(moduleName);
-        console.log(`✅ ${moduleName} imported, version: ${version}`);
         
-        console.log(`🔧 Initializing ${moduleName}...`);
-        const initResult = await init();
-        const { result, destroy } = initResult || {};
-        console.log(`✅ ${moduleName} initialized:`, result);
-
-        moduleObj.version = version;
+        // Add to processing set
+        console.log(`➕ Adding ${moduleName} to process set`);
+        apiInstance.process.add(moduleName);
         
-        // Finsweet-style destroy and restart methods
-        moduleObj.destroy = () => {
-            destroy?.();
-            apiInstance.process.delete(moduleName);
-        };
+        // Create module object
+        const moduleObj = apiInstance.modules[moduleName] || {};
+        apiInstance.modules[moduleName] = moduleObj;
         
-        moduleObj.restart = () => {
-            moduleObj.destroy?.();
-            return apiInstance.load(moduleName);
-        };
-
-        moduleObj.resolve?.(result);
-        delete moduleObj.resolve;
-        delete moduleObj.reject;
-
-        return result;
-
-    } catch (error) {
-        console.error(`❌ Failed to load ${moduleName}:`, error);
-        moduleObj.reject?.(error);
-        apiInstance.process.delete(moduleName);
-        throw error;
-    }
-};
-
-const initializeAPI = () => {
-    console.log(`🚀 Initializing ${API_NAME} API...`);
-    
-    // Handle early API calls (like Finsweet)
-    const existingAPI = window[API_NAME];
-    console.log(`🔍 Existing API:`, existingAPI);
-    
-    if (existingAPI && !Array.isArray(existingAPI) && existingAPI.process) {
-        console.log(`⚡ API already initialized, processing...`);
-        processAPI();
-        return;
-    }
-    
-    const existingRequests = Array.isArray(existingAPI) ? existingAPI : [];
-    console.log(`📝 Existing queued requests:`, existingRequests);
-    
-    // Try multiple approaches to find the script tag
-    let scripts = [...document.querySelectorAll(`script[data-hs-main][src="${import.meta.url}"]`)];
-    console.log(`📄 Found ${scripts.length} script tags with exact src match`);
-    
-    // Fallback: find any script with data-hs-main
-    if (scripts.length === 0) {
-        scripts = [...document.querySelectorAll('script[data-hs-main]')];
-        console.log(`📄 Fallback: Found ${scripts.length} script tags with data-hs-main`);
-    }
-    
-    // Fallback: find script with similar src (same package name)
-    if (scripts.length === 0) {
-        scripts = [...document.querySelectorAll('script[src*="@hortonstudio/main"]')];
-        console.log(`📄 Fallback: Found ${scripts.length} script tags with @hortonstudio/main`);
-    }
-    
-    const scriptTag = scripts[0];
-    console.log(`🏷️ Using script tag:`, scriptTag);
-    if (scriptTag) {
-        console.log(`🏷️ Script src:`, scriptTag.src);
-        console.log(`🏷️ Script attributes:`, [...scriptTag.attributes].map(a => `${a.name}="${a.value}"`).join(' '));
-    }
-    
-    // Handle rich text blocks
-    const richTextBlocks = document.querySelectorAll('.w-richtext');
-    richTextBlocks.forEach(block => {
-        const images = block.querySelectorAll('img');
-        images.forEach(img => {
-            img.loading = 'eager';
+        // Create loading promise
+        moduleObj.loading = new Promise((resolve, reject) => {
+            moduleObj.resolve = resolve;
+            moduleObj.reject = reject;
         });
-    });
+        
+        try {
+            console.log(`📦 Importing ${moduleName}...`);
+            const { init, version } = await loadModule(moduleName);
+            console.log(`✅ ${moduleName} imported, version: ${version}`);
+            
+            console.log(`🔧 Initializing ${moduleName}...`);
+            const initResult = await init();
+            const { result, destroy } = initResult || {};
+            console.log(`✅ ${moduleName} initialized:`, result);
+            
+            moduleObj.version = version;
+            
+            // Add destroy and restart methods
+            moduleObj.destroy = () => {
+                destroy?.();
+                apiInstance.process.delete(moduleName);
+            };
+            
+            moduleObj.restart = () => {
+                moduleObj.destroy?.();
+                return apiInstance.load(moduleName);
+            };
+            
+            moduleObj.resolve?.(result);
+            delete moduleObj.resolve;
+            delete moduleObj.reject;
+            
+            return result;
+            
+        } catch (error) {
+            console.error(`❌ Failed to load ${moduleName}:`, error);
+            moduleObj.reject?.(error);
+            apiInstance.process.delete(moduleName);
+            throw error;
+        }
+    };
 
+    // Initialize API
     window[API_NAME] = {
         scripts,
         modules: {},
         process: new Set(),
         load: loadHsModule,
+        loaded: false,
         
-        // Push method for queuing (like Finsweet)
+        // Push method for queuing
         push(...requests) {
             for (let [moduleName, callback] of requests) {
                 if (typeof callback === 'function') {
@@ -284,21 +173,8 @@ const initializeAPI = () => {
                 this.modules[moduleName]?.destroy?.();
             }
         },
-
-        // API function for scripts to register post-initialization callbacks
-        afterReady: (callback) => {
-            if (typeof callback === 'function') {
-                postWebflowCallbacks.push(callback);
-            }
-        },
         
-        // Legacy alias for Webflow compatibility
-        afterWebflowReady: (callback) => {
-            if (typeof callback === 'function') {
-                postWebflowCallbacks.push(callback);
-            }
-        },
-
+        // Status method
         status(moduleName) {
             if (!moduleName) {
                 return {
@@ -316,73 +192,101 @@ const initializeAPI = () => {
         }
     };
 
-    processAPI();
-    
-    // Process any queued requests
-    window[API_NAME].push(...existingRequests);
-};
-
-const processAPI = () => {
-    // Check for auto mode
-    let autoMode = false;
-    for (let script of window[API_NAME].scripts || []) {
-        autoMode ||= script.getAttribute('data-hs-auto') === 'true';
+    // Process modules from script tags
+    const processScriptModules = () => {
+        console.log(`⚙️ Processing ${scripts.length} script tags`);
         
-        // Load modules based on script attributes
-        for (const moduleName of Object.keys({ ...animationModules, ...utilityModules })) {
-            if (script.hasAttribute(moduleName)) {
-                loadHsModule(moduleName);
-            }
-        }
-    }
-    
-    // Auto-discovery mode (scan DOM for attributes)
-    if (autoMode) {
-        document.fonts.ready.then(() => {
-            const foundModules = new Set();
-            const allElements = document.querySelectorAll('*');
+        for (const script of scripts) {
+            console.log(`🏷️ Processing script:`, script.src);
             
-            for (let element of allElements) {
-                for (let attrName of element.getAttributeNames()) {
-                    // Look for data-hs-[something] attributes
-                    const match = attrName.match(/^data-hs-([^-=]+)/)?.[1];
-                    if (match && attributeToModule[match]) {
-                        foundModules.add(attributeToModule[match]);
-                    }
+            // Check for auto mode
+            const autoMode = script.getAttribute('data-hs-auto') === 'true';
+            console.log(`🔍 Auto mode: ${autoMode}`);
+            
+            // Load modules based on script attributes
+            for (const moduleName of Object.keys(allModules)) {
+                if (script.hasAttribute(moduleName)) {
+                    console.log(`✅ Found attribute for: ${moduleName}`);
+                    loadHsModule(moduleName);
                 }
             }
             
-            for (let moduleName of foundModules) {
-                loadHsModule(moduleName);
+            // Auto-discovery mode
+            if (autoMode) {
+                waitDOMReady().then(() => {
+                    console.log(`🔍 Starting auto-discovery...`);
+                    const foundModules = new Set();
+                    const allElements = document.querySelectorAll('*');
+                    
+                    for (const element of allElements) {
+                        for (const attrName of element.getAttributeNames()) {
+                            // Look for data-hs-* attributes
+                            const match = attrName.match(/^(data-hs-(?:anim|util)-[^-=]+)/)?.[1];
+                            if (match && allModules[match]) {
+                                foundModules.add(match);
+                            }
+                        }
+                    }
+                    
+                    console.log(`🔍 Auto-discovered modules:`, [...foundModules]);
+                    for (const moduleName of foundModules) {
+                        loadHsModule(moduleName);
+                    }
+                });
             }
-        });
-    }
-    
-    // Always load auto-init modules
-    for (const moduleName of Object.keys(autoInitModules)) {
-        try {
+        }
+        
+        // Always load auto-init modules
+        console.log(`🔄 Loading auto-init modules:`, Object.keys(autoInitModules));
+        for (const moduleName of Object.keys(autoInitModules)) {
             loadHsModule(moduleName);
-        } catch (error) {
-            console.error(`❌ Failed to load auto-init module ${moduleName}:`, error);
         }
-    }
-    
-    // Hide .transition elements if transition module is not loaded
-    const hasTransition = window[API_NAME].scripts?.some(script => 
-        script.hasAttribute('data-hs-anim-transition')
-    );
-    if (!hasTransition) {
-        const transitionElements = document.querySelectorAll('.transition');
-        transitionElements.forEach(element => {
-            element.style.display = 'none';
+        
+        // Hide .transition elements if transition module is not loaded
+        const hasTransition = scripts.some(script => script.hasAttribute('data-hs-anim-transition'));
+        if (!hasTransition) {
+            const transitionElements = document.querySelectorAll('.transition');
+            transitionElements.forEach(element => {
+                element.style.display = 'none';
+            });
+        }
+    };
+
+    // Handle rich text blocks
+    const richTextBlocks = document.querySelectorAll('.w-richtext');
+    richTextBlocks.forEach(block => {
+        const images = block.querySelectorAll('img');
+        images.forEach(img => {
+            img.loading = 'eager';
         });
-    }
+    });
+
+    // Main initialization
+    const initializeMain = async () => {
+        console.log(`🚀 Starting main initialization...`);
+        
+        // Process script modules
+        processScriptModules();
+        
+        // Wait for Webflow
+        console.log(`⏳ Waiting for Webflow...`);
+        await waitWebflowReady();
+        console.log(`✅ Webflow ready`);
+        
+        // Mark as loaded
+        window[API_NAME].loaded = true;
+        console.log(`🎉 ${API_NAME} fully loaded and ready!`);
+    };
+
+    // Process any early requests
+    console.log(`📝 Processing ${existingRequests.length} early requests`);
+    window[API_NAME].push(...existingRequests);
+
+    // Start initialization
+    initializeMain().catch(error => {
+        console.error(`❌ Failed to initialize ${API_NAME}:`, error);
+    });
 };
 
-if (document.readyState === 'loading') {
-    console.log(`⏳ DOM still loading, waiting for DOMContentLoaded...`);
-    document.addEventListener('DOMContentLoaded', initializeAPI);
-} else {
-    console.log(`✅ DOM ready, initializing immediately`);
-    initializeAPI();
-}
+// Run initialization
+initializeHsMain();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "main": "index.js",
   "type": "module",
   "scripts": {