@hortonstudio/main 1.9.11 → 1.9.20

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false
+}

package/README.md

@@ -0,0 +1,146 @@
+# @hortonstudio/main
+
+**Version:** 2.0.0
+
+Auto-initializing JavaScript library for Webflow sites with animations, accessibility, and utility functions.
+
+---
+
+## Installation
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@hortonstudio/main@2/dist/bootstrap.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hortonstudio/main@2/dist/main.js"></script>
+```
+
+**Local Development:**
+
+```html
+<!-- Local dev with HMR (run: npm run dev) -->
+<script src="http://localhost:5173/public/bootstrap.js"></script>
+<script type="module" src="http://localhost:5173/index.ts"></script>
+```
+
+---
+
+## Configuration
+
+### SPA Mode (Barba.js, Swup, etc.)
+
+For single-page applications, add `data-hs-spa="true"` to disable automatic link interception:
+
+```html
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/@hortonstudio/main@2/dist/main.js"
+  data-hs-spa="true"
+></script>
+```
+
+Then dispatch events from your router:
+
+```javascript
+// Example: Barba.js integration
+barba.hooks.before(() => {
+  window.dispatchEvent(new CustomEvent('hsmain:transition-exit'));
+});
+
+barba.hooks.after(() => {
+  window.dispatchEvent(new CustomEvent('hsmain:transition-enter'));
+});
+```
+
+---
+
+## API Usage
+
+### Manual Module Loading
+
+```javascript
+// Load a single module
+window.hsmain.load('counter');
+
+// With callback
+window.hsmain.push([
+  'counter',
+  () => {
+    console.log('Counter module ready');
+  },
+]);
+```
+
+### Lifecycle Hooks
+
+```javascript
+// Execute code after all modules load
+window.hsmain.afterReady(() => {
+  console.log('Library fully initialized');
+});
+
+// Check module status
+const status = window.hsmain.status('counter');
+console.log(status); // { loaded: true, loading: false }
+```
+
+### Cleanup
+
+```javascript
+// Destroy all modules (useful for SPA navigation)
+window.hsmain.destroy();
+
+// Reinitialize everything
+await window.hsmain.reinitialize();
+```
+
+---
+
+## Architecture
+
+- **TypeScript:** Full type safety with TypeScript source
+- **Vite Bundled:** Optimized build with code splitting (~24kb gzipped total)
+- **Config-driven:** Centralized configuration in `config.json`
+- **SPA Compatible:** Works with Barba.js, Swup, and other routers
+- **Memory Safe:** Proper cleanup tracking for observers and event handlers
+- **Phase-based Loading:** Optimized initialization sequence
+
+---
+
+## Module Documentation
+
+Each module has its own README with detailed usage instructions:
+
+- **Animations:** `src/modules/default/` - Counter, comparison sliders, marquee
+- **Navigation:** `src/modules/default/navbar/` - Dropdowns and mobile menus
+- **Transitions:** `src/modules/transition/` - Page transitions with namespace support
+- **Forms:** `src/modules/structure/functions/form/` - Custom selects and form enhancements
+- **Accessibility:** `src/modules/default/functions/accordion/` - ARIA attributes
+- **Utilities:** `src/modules/structure/` - Year replacement, TOC, pagination, site settings
+
+---
+
+## Development
+
+### Build
+
+```bash
+npm run build
+```
+
+### Type Checking
+
+```bash
+npm run type-check
+```
+
+### Linting
+
+```bash
+npm run lint
+npm run format
+```
+
+---
+
+## License
+
+ISC

package/eslint.config.js

@@ -0,0 +1,32 @@
+import tsParser from '@typescript-eslint/parser';
+import tsPlugin from '@typescript-eslint/eslint-plugin';
+import prettierConfig from 'eslint-config-prettier';
+
+export default [
+  {
+    files: ['**/*.ts'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tsPlugin,
+    },
+    rules: {
+      ...tsPlugin.configs.recommended.rules,
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+  prettierConfig,
+];

package/index.ts

@@ -0,0 +1,275 @@
+import config from '@config';
+
+const API_NAME = config._global.apiName;
+
+const initializeHsMain = async () => {
+  if (window[API_NAME] && !Array.isArray(window[API_NAME]) && window[API_NAME].loaded) {
+    return;
+  }
+
+  // Add initialized class to HTML element immediately
+  document.documentElement.classList.add(config._global.classes.initialized);
+
+  const queuedModules = Array.isArray(window[API_NAME]) ? window[API_NAME] : [];
+
+  const moduleMap = {
+    normalize: () => import('./src/modules/normalize/normalize.ts'),
+    structure: () => import('./src/modules/structure/structure.ts'),
+    default: () => import('./src/modules/default/default.ts'),
+    animations: () => import('./src/animations/animations.ts'),
+  };
+
+  let scripts = [...document.querySelectorAll(`script[type="module"][src="${import.meta.url}"]`)];
+
+  if (scripts.length === 0) {
+    scripts = [
+      ...document.querySelectorAll('script[type="module"][src*="@hortonstudio/main"]'),
+    ].filter((script) => {
+      const scriptSrc = script.src;
+      const currentSrc = import.meta.url;
+      const scriptPackage = scriptSrc.match(/@hortonstudio\/main(@[\d.]+)?/)?.[0];
+      const currentPackage = currentSrc.match(/@hortonstudio\/main(@[\d.]+)?/)?.[0];
+      return (
+        scriptPackage &&
+        currentPackage &&
+        scriptPackage.split('@')[0] === currentPackage.split('@')[0]
+      );
+    });
+  }
+
+  // Read settings from script tag attributes
+  const settings = {
+    isSPA: scripts.some((script) => script.getAttribute('data-hs-spa') === 'true'),
+  };
+
+  // Define 3-phase initialization system
+  const PHASES = {
+    normalize: {
+      modules: ['normalize'],
+      parallel: false, // Sequential execution critical for DOM fixes
+    },
+    structure: {
+      modules: ['structure'],
+      parallel: false, // Must complete before default
+    },
+    default: {
+      modules: ['default', 'animations'],
+      parallel: true, // Run default and animations synchronously
+      waitForIx3: true, // Wait for Webflow IX3 before starting
+    },
+  };
+
+  const loadModule = async (moduleName) => {
+    const instance = window[API_NAME];
+    if (instance.process.has(moduleName)) {
+      return instance.modules[moduleName]?.loading;
+    }
+
+    instance.process.add(moduleName);
+
+    const moduleData = instance.modules[moduleName] || {};
+    instance.modules[moduleName] = moduleData;
+
+    moduleData.loading = new Promise((resolve, reject) => {
+      moduleData.resolve = resolve;
+      moduleData.reject = reject;
+    });
+
+    let destroy;
+    try {
+      const { init } = await moduleMap[moduleName]();
+      const result = await init();
+      const resultData = result || {};
+      destroy = resultData.destroy;
+      const initResult = resultData.result;
+
+      moduleData.destroy = () => {
+        destroy?.();
+        instance.process.delete(moduleName);
+      };
+      moduleData.restart = () => {
+        moduleData.destroy?.();
+        instance.load(moduleName);
+      };
+
+      moduleData.resolve?.(initResult);
+      delete moduleData.resolve;
+      delete moduleData.reject;
+
+      return initResult;
+    } catch (error) {
+      destroy?.();
+      moduleData.reject?.(error);
+      instance.process.delete(moduleName);
+      throw error;
+    }
+  };
+
+  // Helper to load and execute a phase
+  const executePhase = async (phaseName) => {
+    const phase = PHASES[phaseName];
+
+    // Download all modules in parallel
+    await Promise.allSettled(phase.modules.map((name) => moduleMap[name]()));
+
+    // Execute based on parallel setting
+    if (phase.parallel) {
+      const initPromises = phase.modules.map((name) => loadModule(name));
+      await Promise.allSettled(initPromises);
+    } else {
+      // Sequential execution
+      for (const name of phase.modules) {
+        await loadModule(name);
+      }
+    }
+  };
+
+  // Trigger DOM ready event
+  const triggerDomReady = () => {
+    const event = new CustomEvent('hsmain:dom-ready');
+    window.dispatchEvent(event);
+  };
+
+  // Wait for Webflow IX3 to be ready
+  const waitForIx3 = async () => {
+    return new Promise((resolve) => {
+      const checkIx3 = () => {
+        const htmlElement = document.documentElement;
+        const hasIx3 = htmlElement.classList.contains('w-mod-ix3');
+
+        if (hasIx3) {
+          resolve(true);
+        } else {
+          setTimeout(checkIx3, 50);
+        }
+      };
+      checkIx3();
+    });
+  };
+
+  // Initialize all modules in 3 phases
+  const initializeInPhases = async () => {
+    // Phase 1: Normalize (critical DOM fixes)
+    await executePhase('normalize');
+
+    // Phase 2: Structure (DOM modifications)
+    await executePhase('structure');
+
+    // Wait for IX3 if needed for Phase 3
+    if (PHASES.default.waitForIx3) {
+      await waitForIx3();
+    }
+
+    // Phase 3: Default + Transition (parallel with 50ms transition delay)
+    await executePhase('default');
+
+    // Trigger DOM ready after everything initialized
+    triggerDomReady();
+  };
+
+  const readyCallbacks = [];
+
+  window[API_NAME] = {
+    scripts,
+    settings,
+    modules: {},
+    process: new Set(),
+    load: loadModule,
+    loaded: false,
+    push(...items) {
+      for (const [moduleName, callback] of items) {
+        if (typeof callback === 'function') {
+          this.modules[moduleName]?.loading?.then(callback);
+        } else {
+          this.load(moduleName);
+        }
+      }
+    },
+    destroy() {
+      for (const moduleName in this.modules) {
+        this.modules[moduleName]?.destroy?.();
+      }
+    },
+    async reinitialize() {
+      // Complete teardown
+      this.loaded = false;
+      this.destroy();
+      this.modules = {};
+      this.process = new Set();
+
+      // Re-scan for modules including in w-embeds
+      await this.scanForEmbedModules();
+
+      // Use same phased initialization flow
+      await initializeInPhases();
+
+      // Wait for IX3 to be ready before marking as loaded
+      await waitForIx3();
+      this.loaded = true;
+    },
+    async scanForEmbedModules() {
+      const embeds = document.querySelectorAll('.w-embed');
+      embeds.forEach((embed) => {
+        const scripts = embed.querySelectorAll('script[data-hs-module]');
+        scripts.forEach((script) => {
+          // Extract module info from data attributes
+          const moduleType = script.getAttribute('data-hs-module-type');
+          const moduleName = script.getAttribute('data-hs-module');
+
+          if (moduleType && moduleName) {
+            const moduleKey = `data-hs-${moduleType}-${moduleName}`;
+            if (moduleMap[moduleKey]) {
+              this.load(moduleKey);
+            }
+          }
+        });
+      });
+    },
+    afterReady(callback) {
+      if (typeof callback === 'function') {
+        if (this.loaded) {
+          callback();
+        } else {
+          readyCallbacks.push(callback);
+        }
+      }
+    },
+    status(moduleName) {
+      if (moduleName) {
+        return {
+          loaded: !!this.modules[moduleName],
+          loading: this.process.has(moduleName),
+        };
+      }
+      return {
+        loaded: Object.keys(this.modules),
+        loading: [...this.process],
+        phases: PHASES,
+      };
+    },
+  };
+
+  const finalize = async () => {
+    window[API_NAME].push(...queuedModules);
+
+    // Run phased initialization
+    await initializeInPhases();
+
+    // Wait for IX3 to be ready before firing callbacks
+    await waitForIx3();
+
+    window[API_NAME].loaded = true;
+    readyCallbacks.forEach((callback) => {
+      try {
+        callback();
+      } catch {
+        // Silent error handling
+      }
+    });
+    readyCallbacks.length = 0; // Clear array after execution
+  };
+
+  finalize().catch(() => {});
+};
+
+initializeHsMain();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.9.11",
+  "version": "1.9.20",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",
@@ -13,6 +13,23 @@
   "author": "Horton Studio",
   "license": "ISC",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src/**/*.ts index.ts",
+    "format": "prettier --write \"**/*.{ts,js,json,md}\"",
+    "build:strict": "tsc --noEmit && vite build"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
+    "@typescript-eslint/parser": "^8.46.4",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "prettier": "^3.6.2",
+    "terser": "^5.44.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.2",
+    "vite-plugin-compression": "^0.5.1"
   }
 }

package/public/bootstrap.js

@@ -0,0 +1,16 @@
+/**
+ * Bootstrap stub for @hortonstudio/main
+ * Initializes the API before the main bundle loads
+ * This prevents race conditions and allows users to queue module loads
+ */
+(function () {
+  'use strict';
+
+  // Get API name from config (defaults to 'hsmain')
+  const API_NAME = 'hsmain';
+
+  // Initialize API if not already present
+  if (!window[API_NAME]) {
+    window[API_NAME] = [];
+  }
+})();

package/src/animations/animations.ts

@@ -0,0 +1,93 @@
+/**
+ * Animations Orchestrator
+ *
+ * Conditionally loads animation modules based on DOM presence.
+ * Uses dynamic imports for tree-shaking - only bundles animations that exist on the page.
+ *
+ * Architecture:
+ * - Runs synchronously with default phase (Phase 3)
+ * - Scans DOM for animation attributes
+ * - Dynamically imports only the animations found
+ * - Exposes rescan() for SPA page transitions
+ *
+ * @version 2.0.0
+ */
+
+import config from '@config';
+
+export async function init() {
+  const activeModules = new Map();
+  const CONFIG_ROOT = 'animations';
+  const moduleConfig = config[CONFIG_ROOT];
+
+  /**
+   * Scan DOM and initialize animations that exist on the page
+   */
+  async function scanAndInitialize() {
+    const results = [];
+
+    // Counter Animation
+    if (document.querySelector('[data-hs-anim="counter"]')) {
+      if (!activeModules.has('counter')) {
+        try {
+          const { init } = await import('./functions/counter/counter.ts');
+          const instance = await init(moduleConfig.counter);
+          activeModules.set('counter', instance);
+          results.push({ name: 'counter', status: 'loaded' });
+        } catch (error) {
+          console.error('[animations] Failed to load counter:', error);
+          results.push({ name: 'counter', status: 'failed' });
+        }
+      } else {
+        results.push({ name: 'counter', status: 'already-loaded' });
+      }
+    }
+
+    // Add more animation checks here as you create them:
+    // if (document.querySelector('[data-hs-hamburger="squeeze"]')) { ... }
+    // if (document.querySelector('[data-hs-scroll-reveal]')) { ... }
+
+    return results;
+  }
+
+  // Initial scan on page load
+  const initialResults = await scanAndInitialize();
+
+  // Log what was loaded
+  const loaded = initialResults.filter((r) => r.status === 'loaded');
+  if (loaded.length > 0) {
+    console.log(
+      `[animations] Loaded ${loaded.length} animation(s):`,
+      loaded.map((r) => r.name).join(', ')
+    );
+  }
+
+  return {
+    result: `animations initialized (${loaded.length} active)`,
+    rescan: async () => {
+      // Rescan for new animations after SPA navigation
+      const results = await scanAndInitialize();
+      const newlyLoaded = results.filter((r) => r.status === 'loaded');
+      if (newlyLoaded.length > 0) {
+        console.log(
+          `[animations] Rescanned and loaded ${newlyLoaded.length} new animation(s):`,
+          newlyLoaded.map((r) => r.name).join(', ')
+        );
+      }
+      return results;
+    },
+    destroy: () => {
+      // Destroy all active animation modules
+      activeModules.forEach((instance, name) => {
+        try {
+          if (instance?.destroy) {
+            instance.destroy();
+          }
+        } catch (error) {
+          console.error(`[animations] Error destroying ${name}:`, error);
+        }
+      });
+      activeModules.clear();
+    },
+  };
+}