loadResources()

Load resources dynamically one time.

loadResources() — Sniper Resource Loader

SniperJs can automatically load CSS and JavaScript from a configuration file named:

sniper.config.json

---

📄 Config File Structure

{
  "autoLoad": false, // If true (default), keyless resources load on page load.
  "css": [
    "background.css", //keyless resource
    "style.css"
  ],
  "scripts": {
    "home": [
      "script.js" //keyed resource 
    ],
    "contact": [
      "contact.js" 
    ],
    "about": "../about.js",
    "dashboard": [
      {
        "src": "../client.js",
        "defer": true,
        "async": false,
        "type": "module",
        "id": "deferred-script",
        //... all other script attributes can be passed here too
        "position": "bottom" // bottom or top. this will determine where the resource will be placed, default is bottom.
      },
      {
      "src":"/stats.js"
      }
    ]
  }
}

---

⭐ How Auto Loading Works

• If autoLoad is not false (default = true) → all keyless resources are loaded automatically.

• Keyless = resources placed directly in:

  • "css": [...]

  • "scripts": "main.js"

  • "scripts": ["main.js"]

Example of keyless:

"scripts": "main.js"

or

"scripts": ["..."]

---

🔧 Usage Patterns

1. Load resources by a single key

This will run all the resources specified under home

<!--in your html file. -->
<script>
    loadResources("home"); 
</script>

2. Load resources by multiple keys

This will run all the resources specified under home and dashabord

<!--in your html file. -->
<script>
  loadResources(["home", "dashboard"]);
</script>

3. Load ALL keyed resources

This will run all the resources without a key. However, autoload is already doing this automatically, so this will not be necessary except the autoLoad is set to false.

<!--in your html file. -->
<script>
  loadResources();
</script>

---

4: Conditional loading

<!--in your html file. -->
<script>
    if (user.isLoggedIn) {
        loadResources("dashboard");
    }
</script>

---

✨ Notes

• Designed for simplicity and flexibility — beginners can use it immediately.

• Supports:

  • async, defer, type, id, ... etc, position

  • objects, arrays, keyless scripts, CSS

• Automatically resolves relative paths.