@hortonstudio/main 1.2.4 → 1.2.6

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,19 +1,43 @@
-// ver 1.2.3
+// ver 1.2.5
 
 const API_NAME = 'hsmain';
 
-console.log(`🟢 ${API_NAME} v1.2.3 initializing...`);
+console.log(`🟢 ${API_NAME} v1.2.5 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
+// Prevent double initialization
+if (window[API_NAME] && !Array.isArray(window[API_NAME])) {
+    console.log('⚠️ API already initialized');
+    throw new Error(`${API_NAME} is already running.`);
+}
 
-// Dynamic module loader function (like Finsweet's approach)
+// Store any early API calls
+const existingRequests = Array.isArray(window[API_NAME]) ? window[API_NAME] : [];
+
+// Module definitions
+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
+};
+
+const autoInitModules = {
+    "smooth-scroll": true
+};
+
+// All available modules
+const allModules = { ...animationModules, ...utilityModules };
+
+// Dynamic module loader (like Finsweet)
 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":
@@ -32,150 +56,59 @@ const loadModule = async (moduleName) => {
             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.`);
+            throw new Error(`${API_NAME} module "${moduleName}" is not supported.`);
     }
-    
-    // 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
-};
-
-// Modules that auto-initialize
-const autoInitModules = {
-    "smooth-scroll": true
-};
-
-// Store callbacks to run after Webflow.ready()
-const postWebflowCallbacks = [];
-
-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 processModules = async (scriptTag) => {
-    console.log(`⚙️ Processing modules with script tag:`, scriptTag);
-    const modulePromises = [];
-
-    // 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));
-        }
-    }
-
-    // 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';
-        });
-    }
-
-    // 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`);
-
-    // Always refresh Webflow after all modules are loaded
-    refreshWebflow();
+// Webflow ready helper (like Finsweet)
+const waitWebflowReady = async () => {
+    return new Promise((resolve) => {
+        window.Webflow ||= [];
+        window.Webflow.push(resolve);
+    });
 };
 
-const refreshWebflow = () => {
-    console.log(`🔄 Refreshing Webflow...`);
-    setTimeout(() => {
-        if (window.Webflow && window.Webflow.ready) {
-            console.log(`🌐 Calling Webflow.ready()`);
-            window.Webflow.ready();
+// DOM ready helper (like Finsweet)
+const waitDOMReady = async () => {
+    return new Promise((resolve) => {
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', resolve);
         } else {
-            console.log(`⚠️ Webflow not detected`);
+            resolve();
         }
-
-        // 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);
+    });
 };
 
+// Find script tags (Finsweet approach)
+const scripts = [...document.querySelectorAll(`script[type="module"][src="${import.meta.url}"]`)];
+console.log(`📄 Found ${scripts.length} matching script tags`);
+
+// Module loading function
 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`);
-    }
-
+    
+    // Check if already processing
     if (apiInstance.process.has(moduleName)) {
-        console.log(`⚠️ Module ${moduleName} already processing, returning existing promise`);
+        console.log(`⚠️ Module ${moduleName} already processing`);
         return apiInstance.modules[moduleName]?.loading;
     }
-
+    
+    // Add to processing set
     console.log(`➕ Adding ${moduleName} to process set`);
     apiInstance.process.add(moduleName);
-
+    
+    // Create module object
     const moduleObj = apiInstance.modules[moduleName] || {};
     apiInstance.modules[moduleName] = moduleObj;
-
+    
+    // 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);
@@ -185,10 +118,10 @@ const loadHsModule = async (moduleName) => {
         const initResult = await init();
         const { result, destroy } = initResult || {};
         console.log(`✅ ${moduleName} initialized:`, result);
-
+        
         moduleObj.version = version;
         
-        // Finsweet-style destroy and restart methods
+        // Add destroy and restart methods
         moduleObj.destroy = () => {
             destroy?.();
             apiInstance.process.delete(moduleName);
@@ -198,13 +131,13 @@ const loadHsModule = async (moduleName) => {
             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);
@@ -213,146 +146,102 @@ const loadHsModule = async (moduleName) => {
     }
 };
 
-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;
-    }
+// Initialize API
+window[API_NAME] = {
+    scripts,
+    modules: {},
+    process: new Set(),
+    load: loadHsModule,
+    loaded: false,
     
-    const existingRequests = Array.isArray(existingAPI) ? existingAPI : [];
-    console.log(`📝 Existing queued requests:`, existingRequests);
-    
-    const scripts = [...document.querySelectorAll(`script[data-hs-main][src="${import.meta.url}"]`)];
-    const scriptTag = scripts[0] || document.querySelector('script[data-hs-main]');
-    console.log(`📄 Found ${scripts.length} script tags with exact src match`);
-    console.log(`🏷️ Using script tag:`, scriptTag);
-    
-    // Handle rich text blocks
-    const richTextBlocks = document.querySelectorAll('.w-richtext');
-    richTextBlocks.forEach(block => {
-        const images = block.querySelectorAll('img');
-        images.forEach(img => {
-            img.loading = 'eager';
-        });
-    });
-
-    window[API_NAME] = {
-        scripts,
-        modules: {},
-        process: new Set(),
-        load: loadHsModule,
-        
-        // Push method for queuing (like Finsweet)
-        push(...requests) {
-            for (let [moduleName, callback] of requests) {
-                if (typeof callback === 'function') {
-                    this.modules[moduleName]?.loading?.then(callback);
-                } else {
-                    this.load(moduleName);
-                }
-            }
-        },
-        
-        // Destroy all modules
-        destroy() {
-            for (let moduleName in this.modules) {
-                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) => {
+    // Push method for queuing
+    push(...requests) {
+        for (let [moduleName, callback] of requests) {
             if (typeof callback === 'function') {
-                postWebflowCallbacks.push(callback);
-            }
-        },
-
-        status(moduleName) {
-            if (!moduleName) {
-                return {
-                    loaded: Object.keys(this.modules),
-                    loading: [...this.process],
-                    animations: Object.keys(animationModules),
-                    utilities: Object.keys(utilityModules),
-                    autoInit: Object.keys(autoInitModules)
-                };
+                this.modules[moduleName]?.loading?.then(callback);
+            } else {
+                this.load(moduleName);
             }
+        }
+    },
+    
+    // Destroy all modules
+    destroy() {
+        for (let moduleName in this.modules) {
+            this.modules[moduleName]?.destroy?.();
+        }
+    },
+    
+    // Status method
+    status(moduleName) {
+        if (!moduleName) {
             return {
-                loaded: !!this.modules[moduleName],
-                loading: this.process.has(moduleName)
+                loaded: Object.keys(this.modules),
+                loading: [...this.process],
+                animations: Object.keys(animationModules),
+                utilities: Object.keys(utilityModules),
+                autoInit: Object.keys(autoInitModules)
             };
         }
-    };
-
-    processAPI();
-    
-    // Process any queued requests
-    window[API_NAME].push(...existingRequests);
+        return {
+            loaded: !!this.modules[moduleName],
+            loading: this.process.has(moduleName)
+        };
+    }
 };
 
-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`);
+    
+    for (const script of scripts) {
+        console.log(`🏷️ Processing script:`, script.src);
+        
+        // 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({ ...animationModules, ...utilityModules })) {
+        for (const moduleName of Object.keys(allModules)) {
             if (script.hasAttribute(moduleName)) {
+                console.log(`✅ Found attribute for: ${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 (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]);
+        
+        // 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);
+                        }
                     }
                 }
-            }
-            
-            for (let moduleName of foundModules) {
-                loadHsModule(moduleName);
-            }
-        });
+                
+                console.log(`🔍 Auto-discovered modules:`, [...foundModules]);
+                for (const moduleName of foundModules) {
+                    loadHsModule(moduleName);
+                }
+            });
+        }
     }
     
     // Always load auto-init modules
+    console.log(`🔄 Loading auto-init modules:`, Object.keys(autoInitModules));
     for (const moduleName of Object.keys(autoInitModules)) {
-        try {
-            loadHsModule(moduleName);
-        } catch (error) {
-            console.error(`❌ Failed to load auto-init module ${moduleName}:`, error);
-        }
+        loadHsModule(moduleName);
     }
     
     // Hide .transition elements if transition module is not loaded
-    const hasTransition = window[API_NAME].scripts?.some(script => 
-        script.hasAttribute('data-hs-anim-transition')
-    );
+    const hasTransition = scripts.some(script => script.hasAttribute('data-hs-anim-transition'));
     if (!hasTransition) {
         const transitionElements = document.querySelectorAll('.transition');
         transitionElements.forEach(element => {
@@ -361,10 +250,37 @@ const processAPI = () => {
     }
 };
 
-if (document.readyState === 'loading') {
-    console.log(`⏳ DOM still loading, waiting for DOMContentLoaded...`);
-    document.addEventListener('DOMContentLoaded', initializeAPI);
-} else {
-    console.log(`✅ DOM ready, initializing immediately`);
-    initializeAPI();
-}
+// 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);
+});

package/package.json

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