dopant 5.0.4 → 6.0.0

package/README.md

@@ -1,31 +1,60 @@
-The aerogel-weight & dead-simple resource loader 🚚
----
-This package provides a **lightweight** dynamic resource loader for the web browsers.
-
-## Prerequisites
-
-* Node.js `>= 20.0.0`
-
-## Installation
-
-```bash
-npm install dopant --save
-```
-
-### Usage
-
-```javascript
-import dopant from 'dopant';
-
-dopant([
-  '//somewhe.re/assets/css/layout.css',
-  '//somewhe.re/assets/js/main.cjs',
-]).then(() => console.log('pow!'));
-
-dopant('//somewhe.re/assets/js/lib.js')
-  .then(() => dopant('//somewhe.re/assets/js/main.js'))
-  .finally(() => console.log('pow!'));
-
-dopant('//somewhe.re/assets/js/index.mjs')
-  .then(() => console.log('pow!'));
-```
+The aerogel-weight & dead-simple resource loader 🚚
+---
+This package provides a **lightweight** dynamic resource loader for web browsers.
+
+## Abstract
+
+* Promise-based API ⏳
+* Parallel by default, ordered when required ⚡
+* Supports all `<link>` relations (`preconnect`, `preload`, `stylesheet`, etc.) 🔗
+* Supports all `<script>` types (`importmap`, `module`, `nomodule`, etc.) 📃
+* Zero dependencies 🗽
+
+## Prerequisites
+
+* Node.js `>= 20.0.0`
+
+## Installation
+
+```bash
+npm install dopant --save
+```
+
+### Usage
+
+```javascript
+import dopant from 'dopant';
+
+await dopant(
+  '/assets/css/layout.css',
+  '/assets/js/main.js',
+  ['/assets/js/importmap.js', { type: 'importmap' }],
+  ['/assets/js/module.js', { defer: true, type: 'module' }],
+  [
+    '/assets/webfonts/font.woff2',
+    {
+      as: 'font',
+      rel: 'preload',
+      type: 'font/woff2',
+    }
+  ],
+);
+```
+
+### API
+
+#### `dopant(...resources)`
+
+* `...resources` **{string | [string, attrs]}** Resources w/wo extra attributes to load into the web page
+* **Returns:** Promise that resolves to a list of resolutions
+
+### Behavior
+
+* CSS files default to `rel="stylesheet"`
+* If `rel` is provided, a `<link>` element is created
+* Otherwise, a `<script>` element is created
+* Scripts default to `async: true` (unless overridden or `defer: true` is set)
+
+---
+
+For more details, please check tests in the repository.

package/dist/index.cjs

@@ -5,46 +5,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = (...args) => {
-  if (!args.length) {
-    throw new TypeError('Missing required arguments');
-  }
-  args = args.flat();
-  const {
-    head
-  } = document;
-  for (let i = 0, j = args.length - 1; i <= j; i++) {
-    const ext = args[i].split('?')[0].substring((~-args[i].lastIndexOf('.') >>> 0) + 2).toLowerCase();
-    let el;
-    if (ext === 'css') {
-      el = document.createElement('link');
-      el.href = args[i];
-      el.rel = 'stylesheet';
-    } else if (ext.match(/^c?js/)) {
-      el = document.createElement('script');
-      el.async = true;
-      el.src = args[i];
-    } else if (ext === 'mjs') {
-      el = document.createElement('script');
-      el.async = true;
-      el.src = args[i];
-      el.type = 'module';
-    } else {
-      args[i] = `Unsupported file type or extension: ${args[i]}`;
-      console.warn(args[i]);
+  return Promise.allSettled(args.map(async it => {
+    const [url, attrs = {}] = Array.isArray(it) ? it : [it];
+    if (url?.constructor !== String || attrs?.constructor !== Object) {
+      throw new TypeError('Invalid input');
     }
-    args[i] = el && new Promise((resolve, reject) => {
-      el.onerror = ev => {
-        reject((head.removeChild(ev.target), ev));
-      };
-      el.onload = ev => {
-        resolve((ev.target.onload = ev.target.onerror = void 0, ev));
-      };
-      head.appendChild(el);
+    const isLink = attrs.rel || /\.\bcss\b/i.test(url);
+    const el = document.createElement(isLink ? 'link' : 'script');
+    if (/\bimportmap\b|\bspeculationrules\b/i.test(attrs.type)) {
+      const res = await fetch(url);
+      if (!res.ok) {
+        throw new Error(`Failed to fetch importmap: ${url}`);
+      }
+      el.textContent = await res.text();
+      el.type = attrs.type;
+      document.head.append(el);
+      return el;
+    }
+    Object.assign(el, isLink ? {
+      ...attrs,
+      href: url,
+      rel: attrs.rel || 'stylesheet'
+    } : {
+      ...attrs,
+      async: attrs.async ?? !attrs.defer,
+      src: url
+    });
+    return new Promise((res, rej) => {
+      el.onerror = ev => (ev.target.remove(), rej(ev.target));
+      el.onload = ev => res(ev.target);
+      document.head.append(el);
     });
-  }
-  return Promise.allSettled(args).then(results => results.reduce((acc, val) => {
-    val.status === 'rejected' ? console.error(val.reason) : acc.push(val.value);
-    return acc;
-  }, []));
+  }));
 };
 exports.default = _default;

package/package.json

@@ -11,13 +11,12 @@
   "devDependencies": {
     "@babel/cli": "^7.28.6",
     "@babel/core": "^7.29.0",
-    "@babel/eslint-parser": "^7.28.6",
     "@babel/preset-env": "^7.29.0",
     "c8": "^10.1.3",
-    "eslint": "^9.39.2",
-    "eslint-config-ultra-refined": "^3.8.5",
+    "eslint": "^10.0.0",
+    "eslint-config-ultra-refined": "^4.0.1",
     "mocha": "^11.7.5",
-    "playwright-chromium": "^1.58.1"
+    "playwright-chromium": "^1.58.2"
   },
   "engines": {
     "node": ">=20.0.0"
@@ -52,5 +51,5 @@
     "test:cover": "npm test && c8 report --reporter=lcov --reporter=text"
   },
   "type": "module",
-  "version": "5.0.4"
+  "version": "6.0.0"
 }

package/src/index.js

@@ -1,55 +1,49 @@
-export default (...args) => {
-  if (!args.length) {
-    throw new TypeError('Missing required arguments');
-  }
-
-  args = args.flat();
-
-  const { head } = document;
-
-  for (let i = 0, j = args.length - 1; i <= j; i++) {
-    const ext = args[i]
-      .split('?')[0]
-      .substring((~-args[i].lastIndexOf('.') >>> 0) + 2)
-      .toLowerCase();
-    let el;
-
-    if (ext === 'css') {
-      el = document.createElement('link');
-      el.href = args[i];
-      el.rel = 'stylesheet';
-    } else if (ext.match(/^c?js/)) {
-      el = document.createElement('script');
-      el.async = true;
-      el.src = args[i];
-    } else if (ext === 'mjs') {
-      el = document.createElement('script');
-      el.async = true;
-      el.src = args[i];
-      el.type = 'module';
-    } else {
-      args[i] = `Unsupported file type or extension: ${ args[i] }`;
-      console.warn(args[i]);
-    }
-
-    args[i] = el && new Promise((resolve, reject) => {
-      el.onerror = (ev) => {
-        reject((head.removeChild(ev.target), ev));
-      };
-
-      el.onload = (ev) => {
-        resolve((ev.target.onload = ev.target.onerror = void 0, ev));
-      };
-
-      head.appendChild(el);
-    });
-  }
-
-  return Promise.allSettled(args).then((results) => results.reduce((acc, val) => {
-    val.status === 'rejected'
-    ? console.error(val.reason)
-    : acc.push(val.value);
-
-    return acc;
-  }, []));
-};
+export default (...args) => {
+  return Promise.allSettled(
+    args.map(async (it) => {
+      const [url, attrs = {}] = Array.isArray(it) ? it : [it];
+
+      if (url?.constructor !== String || attrs?.constructor !== Object) {
+        throw new TypeError('Invalid input');
+      }
+
+      const isLink = attrs.rel || /\.\bcss\b/i.test(url);
+      const el = document.createElement(isLink ? 'link' : 'script');
+
+      if (/\bimportmap\b|\bspeculationrules\b/i.test(attrs.type)) {
+        const res = await fetch(url);
+
+        if (!res.ok) {
+          throw new Error(`Failed to fetch importmap: ${ url }`);
+        }
+
+        el.textContent = await res.text();
+        el.type = attrs.type;
+        document.head.append(el);
+
+        return el;
+      }
+
+      Object.assign(
+        el,
+        isLink
+        ? {
+          ...attrs,
+          href: url,
+          rel: attrs.rel || 'stylesheet',
+        }
+        : {
+          ...attrs,
+          async: attrs.async ?? !attrs.defer,
+          src: url,
+        },
+      );
+
+      return new Promise((res, rej) => {
+        el.onerror = (ev) => (ev.target.remove(), rej(ev.target));
+        el.onload = (ev) => res(ev.target);
+        document.head.append(el);
+      });
+    }),
+  );
+};