Home

Welcome to the Scripts Loader Wiki

Overview

The Scripts Loader Wiki acts as your comprehensive guide to efficiently managing and dynamically loading JavaScript files within web applications. This lightweight library simplifies script management, adeptly handles dependencies, and seamlessly integrates external scripts. Its flexible loading strategies promise a reliable solution to manage script loading complexities, empowering developers in their web application development process.

Note

While the library supports TypeScript during development, the released version includes only JavaScript files and a map file. This ensures ease of use without additional dependencies or frameworks.

Purpose

Ever experienced the frustration of repeatedly pressing Ctrl + F5 on a website, only for certain JavaScript files that refuse to load? The Scripts Loader is a reliable solution to this common issue faced during script loading via HTML. The challenge often arises from the JavaScript files—while some stand independently, others depend on additional files for proper execution. This variation in dependencies leads to inconsistent behavior, causing script failures that disrupt entire web applications. Our library encounters these challenges head-on, ensuring seamless and dependable script loading without the bother of missing dependencies.

With innate support for both JSON and XML syntaxes, integrating and utilizing this library becomes effortlessly intuitive. Its user-friendly design empowers developers to manage and load scripts effortlessly, simplifying even the most complex dependencies. Bid farewell to wrestle with intricate script loading processes—the Scripts Loader streamlines integration, offering a dependable and streamlined solution.

Why No CSS Support?

Curious why CSS support isn't part of this library. Unlike JavaScript files that demand precise dependency handling, CSS files, dynamically loaded, tend to be more self-contained. Typically, CSS files don't heavily rely on external dependencies for their functionality; they can often resolve themselves even if additional dependencies aren't explicitly specified.

By focusing specifically on JavaScript loading and dependency management, our library addresses the critical challenges associated with script loading, maintaining simplicity, and effectiveness in handling intricate JavaScript dependencies.

Installation

Download

Access our latest release files directly from this GitHub repository.

Contents

Download and extract it, you'll find a structure like this:

scripts-loader
├── scripts-loader.d.ts
├── scripts-loader.d.ts.map
├── scripts-loader.js
├── scripts-loader.js.map
├── scripts-loader.min.js
└── scripts-loader.min.js.map

Link

For direct access:

https://cdn.jsdelivr.net/gh/Mubarrat/scripts-loader@1.x/dist/scripts-loader.js

For the minimized version:

https://cdn.jsdelivr.net/gh/Mubarrat/scripts-loader@1.x/dist/scripts-loader.min.js

npm Installation

Visit our package page.

Implementation and Result

Implementation

[
  {
    "name": "JQuery",
    "sources": [
      "/lib/jquery/jquery.min.js",
      "https://code.jquery.com/jquery-3.7.1.min.js",
      "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"
    ]
  },
  {
    "name": "Masonry",
    "sources": [
      "/lib/masonry/masonry.pkgd.min.js",
      "https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"
    ]
  },
  {
    "name": "Showdown",
    "sources": [
      "/lib/showdown/showdown.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"
    ]
  },
  {
    "name": "Self",
    "source": "/js/site.js",
    "dependencies": [
      "JQuery",
      "Masonry"
    ]
  }
]

Result

flowchart TD
    ScriptsLoader((Scripts-Loader))
    JQuery[JQuery]
    Masonry[Masonry]
    Showdown[Showdown]
    Self[Self]
    CompletedJQuery{{Completed}}
    CompletedMasonry{{Completed}}
    CompletedShowdown{{Completed}}
    CompletedSelf{{Completed}}
    FailedJQuery{{Failed}}
    FailedMasonry{{Failed}}
    FailedShowdown{{Failed}}
    FailedSelf{{Failed}}

    ScriptsLoader --> JQuery
    ScriptsLoader --> Masonry
    ScriptsLoader --> Showdown

    JQuery --> LoadJQuery1["/lib/jquery/jquery.min.js"]
    LoadJQuery1 --> |Found| CompletedJQuery
    LoadJQuery1 --> |Not Found| LoadJQuery2["https://code.jquery.com/jquery-3.7.1.min.js"]
    LoadJQuery2 --> |Found| CompletedJQuery
    LoadJQuery2 --> |Not Found| LoadJQuery3["https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"]
    LoadJQuery3 --> |Found| CompletedJQuery
    LoadJQuery3 --> |Not Found| FailedJQuery

    CompletedJQuery --> Self

    Masonry --> LoadMasonry1["/lib/masonry/masonry.pkgd.min.js"]
    LoadMasonry1 --> |Found| CompletedMasonry
    LoadMasonry1 --> |Not Found| LoadMasonry2["https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"]
    LoadMasonry2 --> |Found| CompletedMasonry
    LoadMasonry2 --> |Not Found| FailedMasonry

    CompletedMasonry --> Self

    Showdown --> LoadShowdown1["/lib/showdown/showdown.min.js"]
    LoadShowdown1 --> |Found| CompletedShowdown
    LoadShowdown1 --> |Not Found| LoadShowdown2["https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"]
    LoadShowdown2 --> |Found| CompletedShowdown
    LoadShowdown2 --> |Not Found| FailedShowdown

    Self --> LoadSelf1["/js/site.js"]
    LoadSelf1 --> |Found| CompletedSelf
    LoadSelf1 --> |Not Found| FailedSelf

Loading

Schemas for IDE Use

Developers working within Integrated Development Environments (IDEs) can benefit from structured formats enhancing the editing experience:

1. JSON Schema

   • JSON format schema for validation and code hinting in compatible IDEs.

2. XSD Schema

   • XSD format schema aiding XML-based editing environments, facilitating validation and autocomplete functionalities.

These schemas prove invaluable, ensuring script compatibility, validating configurations, and enhancing the overall development process within supported IDEs.

Rendering Mode

The Scripts Loader offers three distinct rendering modes, each with its approach and considerations regarding script loading and execution:

1. Document Injection

Document injection involves adding script tags directly to the DOM, enabling precise control over script loading and execution:

• Controlled Execution: Utilizes document.head and onload/onerror events for loading sequence control and error handling.
• Sequential Loading: Ensures scripts load synchronously, preserving the defined order and managing dependencies effectively.
• Security Emphasis: Minimizes XSS risks by specifying script sources within the code and avoiding dynamic loading from external sources.

2. AJAX Loading

AJAX loading entails fetching scripts from remote sources through asynchronous requests:

• Execution Mechanism: Employs methods like new Function() or eval() for executing fetched scripts, potentially posing security risks without proper validation.
• Asynchronous Loading: Allows parallel loading of scripts, potentially improving performance but necessitates careful handling of dependencies.
• Browser Compatibility: Might face constraints due to Cross-Origin Resource Sharing (CORS) policies, impacting compatibility across different browsers.

3. Fetching Added In Version 1.1.0

The "Fetching" mode combines the modern fetch() API with the potential use of the new Function() constructor for script execution:

• Modern API Integration: Leverages the fetch() API for making network requests, offering a cleaner promise-based syntax for handling requests and responses.
• Potential Script Execution: Might employ the new Function() constructor for executing fetched scripts, potentially posing security risks without proper validation.
• Asynchronous Nature: Operates asynchronously, allowing parallel loading of scripts and potentially enhancing performance.
• CORS Handling: Adheres to Cross-Origin Resource Sharing (CORS) policies, enabling secure data exchange between different origins.

Each rendering mode offers distinct advantages and considerations, with the choice between them depending on factors like security requirements, script complexity, and dependency management within your application.

Why Document Injection and Fetching Over AJAX Loading?

1. Execution Control and Loading Mechanism:

   • Document Injection:

     • Utilizes document.head and onload/onerror events for controlled script execution, ensuring defined order and synchronous loading.
     • Sequential loading ensures precise control over dependencies, mitigating asynchronous loading issues.

   • Fetching:

     • Leverages the modern fetch() API for making network requests and handling responses asynchronously.
     • Enables parallel script loading, potentially enhancing performance without compromising dependency management.

   • AJAX Loading:

     • Utilizes methods like new Function() or eval() for script execution fetched via AJAX, potentially posing security risks without proper validation.
     • Asynchronous loading allows parallel loading but might lead to dependency challenges.

2. Security Considerations:

   • Document Injection:

     • Reduces XSS attack surface by specifying script sources within the code, avoiding dynamic loading from external sources.
     • Minimizes potential security threats due to controlled, synchronous loading.

   • Fetching:

     • Adheres to CORS policies, ensuring secure data exchange between origins.
     • Requires validation for scripts, potentially enhancing security by allowing controlled execution.

   • AJAX Loading:

     • May pose higher security risks if script validation is not stringent, potentially leading to vulnerabilities.

3. Browser Compatibility and Ease of Implementation:

   • Document Injection:

     • Exhibits better compatibility across various browsers, operating within the webpage's origin.
     • Offers a simplified code structure, aiding readability, and maintenance, particularly with complex dependencies.

   • Fetching:

     • Provides modern support across browsers and network environments, maintaining compatibility and adapting to evolving standards.
     • Employs a cleaner, more intuitive, promise-based syntax for handling network requests and responses.

   • AJAX Loading:

     • Might face constraints due to Cross-Origin Resource Sharing (CORS) policies, impacting compatibility across different browsers.
     • Involves potentially intricate code for handling asynchronous loading scenarios, requiring careful management of dependencies.

Prioritizing document injection and fetching over AJAX loading ensures better script control, minimized security risks, enhanced cross-browser compatibility, and improved performance possibilities within web applications.

Side-By-Side Comparison:

Criteria	Document Injection	AJAX Loading	Fetching Mode
Execution Control	Uses document.head and onload/onerror for controlled execution and error handling.	Utilizes methods like new Function() or eval() for script execution, potentially posing security risks.	Leverages the modern fetch() API for making network requests and handling responses and may use new Function().
Loading Mechanism	Sequential loading ensures scripts execute in a defined order, managing dependencies effectively.	Asynchronous loading allows parallel loading but might lead to dependency issues.	Operates asynchronously, enabling parallel script loading, and offers enhanced performance possibilities.
Security Consideration	Mitigates XSS risks by specifying script sources within code, reducing XSS attack surface.	May pose higher security risks if script validation is not stringent.	Adheres to CORS policies, ensuring secure data exchange between origins and may require validation for scripts.
Browser Compatibility	Typically exhibits better compatibility across browsers, operating within the webpage's origin.	Might face constraints due to Cross-Origin Resource Sharing (CORS) policies.	Offers modern support across various browsers and network environments.
Code Complexity	Simpler code structure aids readability and maintenance, particularly with complex dependencies.	Might involve more intricate code for handling asynchronous loading scenarios.	Provides a cleaner, more intuitive, promise-based syntax for handling network requests and responses.