Universal HTML Application Loader (Stage 2)

Version: 1.0.6
Package: @kosmas10/html-app-loader

Overview

This is a universal Stage 2 loader for single-file HTML applications distributed via npm. It's part of a 3-stage loading architecture designed for maximum reliability and flexibility:

- Stage 1 (Bootstrap): Ultra-minimal HTML file that users install locally - never changes
- Stage 2 (This Package): Universal loader that handles complex HTML app loading - can be updated via npm
- Stage 3 (Application): Any HTML application (Chat & Verify, Folder Analyzer, etc.) - updates frequently

Purpose

This loader is completely generic and can load any single-file HTML application from npm, including:

- @kosmas10/chat-and-verify - Document chat with AI verification
- @kosmas10/folder-llm-analyzer - Batch LLM analysis tool
- @kosmas10/portal - Main launcher app
- Any other single-file HTML app you create

Key Features

- Universal: Works with any HTML application, not tied to a specific app
- Smart Defaults: Automatically infers the HTML filename from package name
- Flexible: Supports both npm packages and direct URLs
- Robust: Handles external dependencies, styles, and scripts
- Debuggable: Comprehensive console logging
- Updatable: Can be improved via npm without user action

Usage

$3

``
?app=@kosmas10/chat-and-verify
`

The loader will automatically:
1. Infer the file is chat-and-verify.html (from package name)
2. Load from: https://cdn.jsdelivr.net/npm/@kosmas10/chat-and-verify@latest/chat-and-verify.html

$3

`
?app=@kosmas10/my-package&appFile=custom.html
`

$3

`
?app=@kosmas10/chat-and-verify&appVersion=1.2.3
`

$3

`
?appUrl=http://localhost:8889/path/to/app.html
`

$3

`html


`

URL Parameters

| Parameter | Required | Description | Example |
|-----------|----------|-------------|---------|
| app | Yes* | npm package name | @kosmas10/chat-and-verify |
| appFile | No | HTML filename (auto-inferred if not provided) | custom.html |
| appVersion | No | Package version (defaults to latest) | 1.2.3 |
| appUrl | Yes* | Direct URL for local testing | http://localhost:8889/app.html |

\* Either app or appUrl must be provided

How It Works

1. Parse Parameters: Reads URL parameters to determine what to load
2. Fetch HTML: Downloads the HTML application from npm/CDN or direct URL
3. Parse Document: Uses DOMParser to extract head and body content
4. Inject Styles: Copies all