rt-package-name is a lightweight JavaScript utility that with:
- Automatic dependency loading (no manual installs)
- Zero-config defaults (works out of the box)
- Attribute-driven configuration
- Support for multiple instances
- A clean global API under
window.rt<PackageName> - Defensive fallbacks to avoid runtime crashes
- Clear console logs for debugging and verification
Primary dependency (GitHub): https://github.com/author/repo
- 1. Installation
- 2. Quick Start
- 3. Activation Rules
- 4. Configuration (HTML Attributes)
- 5. Multiple Instances
- 6. Global API
- 7. Console Logging
- 8. Troubleshooting
- 9. License
<script src="https://cdn.jsdelivr.net/npm/@rethink-js/rt-<package-name>@latest/dist/index.min.js"></script>npm install @rethink-js/rt-<package-name>Then bundle or load dist/index.min.js as appropriate for your build setup.
Add the script to your page. With no configuration provided, rt-<package-name> will:
- Auto-initialize itself when applicable
- Load required dependencies dynamically
- Apply safe defaults
- Expose the global API
Example:
<script src="https://cdn.jsdelivr.net/npm/@rethink-js/rt-<package-name>@latest/dist/index.min.js"></script>Note: If you do not provide any
rt-<package-name>-*attributes, the library runs using its internal defaults.
The library activates when any of the following are true:
- A root attribute exists (e.g.
rt-<package-name>on<html>or<body>) - One or more instance elements are detected
- No explicit opt-out is defined (auto-enable fallback)
If none are found, the library may defensively attach itself to a sensible default to ensure functionality.
<body rt-<package-name></body><body
rt-<package-name>
rt-<package-name>-option-a="value"
rt-<package-name>-option-b="value"
></body>| Attribute | Description |
|---|---|
rt-<package-name> |
Enables root behavior |
rt-<package-name>-id |
Optional identifier |
rt-<package-name>-enabled |
Enable / disable |
rt-<package-name>-debug |
Enable console logging |
(Add / remove rows as required per package.)
<div
rt-<package-name>-instance
rt-<package-name>-id="example"
></div>| Attribute | Description |
|---|---|
rt-<package-name>-instance |
Marks instance element |
rt-<package-name>-id |
Instance identifier |
<body
rt-<package-name>
rt-<package-name>-options-json='{"key":"value"}'
></body>Used for advanced or dependency-specific configuration that doesn’t warrant individual attributes.
| Attribute | Description |
|---|---|
rt-<package-name>-src |
Override dependency CDN |
rt-<package-name>-observe-resize |
Enable ResizeObserver |
rt-<package-name>-observe-mutations |
Enable MutationObserver |
rt-<package-name> supports multiple independent instances on the same page.
Each instance:
- Has its own configuration
- Is registered internally
- Can be controlled individually via the API
Once initialized:
window.rt<PackageName>;| Method | Description |
|---|---|
ids() |
Returns instance IDs |
get(id) |
Get instance |
start(id?) |
Start |
stop(id?) |
Stop |
toggle(id?) |
Toggle |
destroy(id?) |
Cleanup |
If a root instance exists, it may also be exposed directly:
window.<dependencyName>;When enabled, the library logs:
- Instance ID
- Target element
- Resolved configuration
- Dependency load status
This makes debugging transparent and predictable.
- Ensure the correct
rt-*attribute exists - Confirm the script loaded successfully
- Check console logs for resolved config
- Verify CDN URLs
- Ensure network access
- Override source via attribute if required
- Check for conflicting scripts
- Verify attribute spelling
- Confirm instance isolation
MIT License
Package: @rethink-js/rt-<package-name>
GitHub: https://github.com/Rethink-JS/rt-package-name
by Rethink JS
https://github.com/Rethink-JS