dphelper/docs/markdown/load.md

dphelper devtools for developers

# 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)

```javascript
// 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

```javascript
// 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

```javascript
// 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

```javascript
// 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

```javascript
// 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

```javascript
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*