@hortonstudio/main 1.2.1 → 1.2.3

package/index.js

@@ -1,13 +1,19 @@
-// ver 1.2.1
+// ver 1.2.3
 
 const API_NAME = 'hsmain';
 
+console.log(`🟢 ${API_NAME} v1.2.3 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":
@@ -25,8 +31,28 @@ const loadModule = async (moduleName) => {
         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.`);
     }
+    
+    // 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 = {
@@ -52,21 +78,32 @@ const postWebflowCallbacks = [];
 const findCurrentScriptTag = () => {
     // Use import.meta.url like Finsweet does
     const scripts = [...document.querySelectorAll(`script[data-hs-main][src="${import.meta.url}"]`)];
-    return scripts[0] || document.querySelector('script[data-hs-main]');
+    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
-    for (const moduleName of Object.keys({ ...animationModules, ...utilityModules })) {
+    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
-    for (const moduleName of Object.keys(autoInitModules)) {
+    const autoModules = Object.keys(autoInitModules);
+    console.log(`🔄 Auto-loading modules:`, autoModules);
+    for (const moduleName of autoModules) {
         modulePromises.push(loadHsModule(moduleName));
     }
 
@@ -79,38 +116,51 @@ const processModules = async (scriptTag) => {
     }
 
     // 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();
 };
 
 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`);
         }
 
         // Run all registered post-Webflow callbacks (even without Webflow)
         setTimeout(() => {
-            postWebflowCallbacks.forEach(callback => {
+            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.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] || {};
@@ -122,14 +172,26 @@ const loadHsModule = async (moduleName) => {
     });
 
     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 } = initResult || {};
+        const { result, destroy } = initResult || {};
+        console.log(`✅ ${moduleName} initialized:`, result);
 
         moduleObj.version = version;
-        moduleObj.restart = () => {
+        
+        // Finsweet-style destroy and restart methods
+        moduleObj.destroy = () => {
+            destroy?.();
             apiInstance.process.delete(moduleName);
-            return loadHsModule(moduleName);
+        };
+        
+        moduleObj.restart = () => {
+            moduleObj.destroy?.();
+            return apiInstance.load(moduleName);
         };
 
         moduleObj.resolve?.(result);
@@ -139,6 +201,7 @@ const loadHsModule = async (moduleName) => {
         return result;
 
     } catch (error) {
+        console.error(`❌ Failed to load ${moduleName}:`, error);
         moduleObj.reject?.(error);
         apiInstance.process.delete(moduleName);
         throw error;
@@ -146,10 +209,27 @@ const loadHsModule = async (moduleName) => {
 };
 
 const initializeAPI = () => {
-    const apiInstance = window[API_NAME];
-
-    const existingRequests = Array.isArray(apiInstance) ? apiInstance : [];
-    const scriptTag = findCurrentScriptTag();
+    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)) {
+        console.log(`⚡ API already initialized, processing...`);
+        processAPI();
+        return;
+    }
+    
+    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');
@@ -159,17 +239,33 @@ const initializeAPI = () => {
     });
 
     window[API_NAME] = {
-        scriptTag,
+        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);
-            } else {
             }
         },
         
@@ -177,7 +273,6 @@ const initializeAPI = () => {
         afterWebflowReady: (callback) => {
             if (typeof callback === 'function') {
                 postWebflowCallbacks.push(callback);
-            } else {
             }
         },
 
@@ -198,19 +293,69 @@ const initializeAPI = () => {
         }
     };
 
-    processModules(scriptTag);
+    processAPI();
+    
+    // Process any queued requests
+    window[API_NAME].push(...existingRequests);
+};
 
-    if (existingRequests.length > 0) {
-        existingRequests.forEach(request => {
-            if (typeof request === 'string') {
-                window[API_NAME].load(request);
+const processAPI = () => {
+    // Check for auto mode
+    let autoMode = false;
+    for (let script of window[API_NAME].scripts || []) {
+        autoMode ||= script.getAttribute('data-hs-auto') === 'true';
+        
+        // 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 (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]);
+                    }
+                }
             }
+            
+            for (let moduleName of foundModules) {
+                loadHsModule(moduleName);
+            }
+        });
+    }
+    
+    // Always load auto-init modules
+    for (const moduleName of Object.keys(autoInitModules)) {
+        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')
+    );
+    if (!hasTransition) {
+        const transitionElements = document.querySelectorAll('.transition');
+        transitionElements.forEach(element => {
+            element.style.display = 'none';
         });
     }
 };
 
 if (document.readyState === 'loading') {
+    console.log(`⏳ DOM still loading, waiting for DOMContentLoaded...`);
     document.addEventListener('DOMContentLoaded', initializeAPI);
 } else {
+    console.log(`✅ DOM ready, initializing immediately`);
     initializeAPI();
 }

package/package.json

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