load

Dynamic file and script loading utilities for managing modules, components, and resources.

Functions

Function	Description	Example
all	Load all files from glob object	dphelper.load.all(import.meta.glob('./**/*.ts'))
file	Load a specific file	dphelper.load.file(path)
fileToElement	Load file content into element	dphelper.load.fileToElement('#target', '/content.html')
script	Dynamically load scripts	dphelper.load.script(['/app.js'])
toJson	Create JSON from folder glob	dphelper.load.toJson(glob, 'routes')

Description

Dynamic loading utilities:

• Module Loading - Load ES modules via Vite/esbuild

• File Loading - Fetch and inject content

• Script Loading - Dynamic script injection

• Caching - Optional result caching

Usage Examples

Load All Modules (Vite)

// Load all TypeScript modules from folder
dphelper.load.all(
  import.meta.glob('./components/*.ts', { eager: true }),
  'components'
);

// Components are now loaded and cached
console.log(window.components); // ['./components/Button.ts', ...]

Load File to Element

// Load HTML content into element
await dphelper.load.fileToElement('#content', '/partials/home.html');

// Loads home.html and inserts into #content
// Content is sanitized for XSS protection

Dynamic Script Loading

// Load multiple scripts
dphelper.load.script([
  'https://cdn.example.com/lib1.js',
  'https://cdn.example.com/lib2.js'
], 'body');

// Scripts load asynchronously
// Appended to specified element (default: html)

Create JSON from Glob

// Create route registry from folder
dphelper.load.toJson(
  import.meta.glob('./routes/*.ts'),
  'routes'
);

// Creates window.routes as JSON object
// Keys are file paths, values are modules

Advanced Usage

Component Lazy Loading

// Load components on demand
async function loadComponent(name) {
  const modules = import.meta.glob('./components/*.vue');
  const loader = modules[`./components/${name}.vue`];

  if (loader) {
    return await loader();
  }

  throw new Error(`Component ${name} not found`);
}

// Usage
const Button = await loadComponent('Button');

Dynamic Module Loading

class ModuleLoader {
  constructor(basePath) {
    this.basePath = basePath;
  }

  async load(moduleName) {
    const modules = import.meta.glob('./modules/*.js');
    const key = `./modules/${moduleName}.js`;

    if (modules[key]) {
      return await modules[key]();
    }

    return null;
  }

  loadAll() {
    dphelper.load.all(
      import.meta.glob('./modules/*.js', { eager: true }),
      'allModules'
    );
  }
}

Details

• Author: Dario Passariello

• Version: 0.0.3

• Creation Date: 20210101

• Last Modified: 20260228

• Environment: Client-side only (browser)

---

Automatically generated document