@hortonstudio/main 1.2.0 → 1.2.2

package/index.js

@@ -1,48 +1,77 @@
-// ver 1.1.34np
+// ver 1.2.2
 
 const API_NAME = 'hsmain';
 
 window[API_NAME] = window[API_NAME] || {};
 window[API_NAME].loaded = false
 
+// Dynamic module loader function (like Finsweet's approach)
+const loadModule = async (moduleName) => {
+    const baseURL = new URL('./', import.meta.url).href;
+    
+    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:
+            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 = {
-    "data-hs-anim-text": "./animations/text.js",
-    "data-hs-anim-hero": "./animations/hero.js",
-    "data-hs-anim-transition": "./animations/transition.js"
+    "data-hs-anim-text": true,
+    "data-hs-anim-hero": true,
+    "data-hs-anim-transition": true
 };
 
 const utilityModules = {
-    "data-hs-util-toc": "./utils/toc.js",
-    "data-hs-util-progress": "./utils/scroll-progress.js",
-    "data-hs-util-navbar": "./utils/navbar.js"
+    "data-hs-util-toc": true,
+    "data-hs-util-progress": true,
+    "data-hs-util-navbar": true
 };
 
 // Modules that auto-initialize
 const autoInitModules = {
-    "smooth-scroll": "./autoInit/smooth-scroll.js"
+    "smooth-scroll": true
 };
 
 // Store callbacks to run after Webflow.ready()
 const postWebflowCallbacks = [];
 
-const loadModule = (moduleName) => {
-    // Check manual modules first
-    let modulePath = animationModules[moduleName] || utilityModules[moduleName];
-
-    // Then check auto-init modules
-    if (!modulePath) {
-        modulePath = autoInitModules[moduleName];
-    }
-
-    if (!modulePath) {
-        throw new Error(`HortonStudio module "${moduleName}" is not supported.`);
-    }
-    return import(modulePath);
-};
-
 const findCurrentScriptTag = () => {
-    const scriptTag = document.querySelector('script[data-hs-main]');
-    return scriptTag || null;
+    // 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 processModules = async (scriptTag) => {
@@ -76,7 +105,6 @@ const processModules = async (scriptTag) => {
 };
 
 const refreshWebflow = () => {
-
     setTimeout(() => {
         if (window.Webflow && window.Webflow.ready) {
             window.Webflow.ready();
@@ -115,12 +143,19 @@ const loadHsModule = async (moduleName) => {
     try {
         const { init, version } = await loadModule(moduleName);
         const initResult = await init();
-        const { result } = initResult || {};
+        const { result, destroy } = initResult || {};
 
         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);
@@ -137,10 +172,18 @@ const loadHsModule = async (moduleName) => {
 };
 
 const initializeAPI = () => {
-    const apiInstance = window[API_NAME];
-
-    const existingRequests = Array.isArray(apiInstance) ? apiInstance : [];
-    const scriptTag = findCurrentScriptTag();
+    // Handle early API calls (like Finsweet)
+    const existingAPI = window[API_NAME];
+    if (existingAPI && !Array.isArray(existingAPI)) {
+        processAPI();
+        return;
+    }
+    
+    const existingRequests = Array.isArray(existingAPI) ? existingAPI : [];
+    const scripts = [...document.querySelectorAll(`script[data-hs-main][src="${import.meta.url}"]`)];
+    const scriptTag = scripts[0] || document.querySelector('script[data-hs-main]');
+    
+    // Handle rich text blocks
     const richTextBlocks = document.querySelectorAll('.w-richtext');
     richTextBlocks.forEach(block => {
         const images = block.querySelectorAll('img');
@@ -150,17 +193,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 {
             }
         },
         
@@ -168,7 +227,6 @@ const initializeAPI = () => {
         afterWebflowReady: (callback) => {
             if (typeof callback === 'function') {
                 postWebflowCallbacks.push(callback);
-            } else {
             }
         },
 
@@ -189,13 +247,61 @@ 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';
         });
     }
 };

package/package.json

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