@jsdevs-sp/queue-hook - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

lib/index.js

 const queues = {};
 
+export const getQueues = () => queues;
+
+export const getQueuesByKey = key => queues[key];
+
 export function useQueue(key, queue) {
-  const keys = Object.keys(queue);
-  queues[key] = { promises: [] };
+  queues[key] = queue;
 
-  const total = keys.length;
-  let position = 0;
-
   return {
@@ -15,59 +15,25 @@ loadQueue,
 
-  function createPromise(options) {
-    if (/\.json/.test(options.url)) {
-      return new Promise((resolve, reject) => {
-        fetch(options.url)
-          .then(response => response.json())
-          .then(resolve)
-          .catch(reject);
-      });
-    }
-
-    if (/\.jpg|jpeg|png|gif|svg/.test(options.url)) {
-      return new Promise((resolve, reject) => {
-        const image = new Image();
-        image.onload = () => resolve(image);
-        image.onabort = reject;
-        image.oncancel = reject;
-
-        image.src = options.url;
-      });
-    }
+  async function loadQueue(callback) {
+    const create = await import('./create');
+    queue.forEach(async item => item.data = await create.promise(item));
+    callback(queue);
   }
 
-  function loadQueue(onComplete) {
-    queues[key].promises = keys.map(k => createPromise(queue[k]));
+  async function loadQueueByItem(callback) {
+    const create = await import('./create');
+    let position = 0;
 
-    Promise.all(queues[key].promises)
-      .then((results) => {
-        queues[key].data = {};
-        results.forEach((result, i) => {
-          queues[key].data[keys[i]] = result;
-        });
-        onComplete(queues[key]);
-      })
-      .catch(error => console.error(`Error: ${error.message}`));
-  }
+    queue.forEach(async item => {
+      item.data = await create.promise(item);
 
-  function loadQueueByItem(onItemComplete) {
-    keys.forEach((k, i) => {
-      queues[key].promises[i] = createPromise(queue[k])
-        .then((result) => {
-          if (!queues[key].data) queues[key].data = {};
-          queues[key].data[keys[i]] = result;
-          position++;
+      position++;
 
-          onItemComplete({
-            item: result,
-            key: keys[i],
-            progress: position / total,
-            position,
-          });
-        })
-        .catch(error => console.error(error));
+      callback({
+        item,
+        progress: position / queue.length,
+        position,
+        total: queue.length
+      });
     });
   }
-}
-
-export const getQueues = () => queues;
-export const getQueuesByKey = key => queues[key];
+}

main.js

@@ -0,4 +1,5 @@
+// import { useQueue, getQueues, getQueuesByKey } from "https://cdn.jsdelivr.net/npm/@jsdevs-sp/queue-hook@0.0.2/lib/index.js";
 import { useQueue, getQueues, getQueuesByKey } from "./lib/index.js";
 
-function main() {
+async function main() {
   const outputEl = document.querySelector('.output');
@@ -17,7 +18,7 @@ const progressEl = document.querySelector('.progress');
 
-  loadQueueByItem(({ item, key, progress, position }) => {
-    console.log('onItemComplete', key, item, progress);
+  loadQueueByItem(({ item, progress, position, total }) => {
+    console.log('onItemComplete', item, progress);
     outputEl.innerHTML = `
       ${outputEl.innerHTML}
-      <p>${position}/${Object.keys(manifest.default).length} - ${key}</p>
+      <p>${position}/${total} - ${item.key}</p>
     `;
@@ -24,0 +25,0 @@ progressEl.textContent = `${progress * 100}%`;

manifest.js

@@ -1,11 +0,14 @@
-export default {
-  foo: {
+export default [
+  {
+    key: 'foo',
     url: 'mock/foo.json',
   },
-  bar: {
+  {
+    key: 'bar',
     url: 'mock/bar.json',
   },
-  image: {
+  {
+    key: 'image',
     url: 'mock/image.jpg',
-  },
-}
+  }
+]

package.json

 {
   "name": "@jsdevs-sp/queue-hook",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "",
   "author": "JSDevs SP",
   "license": "MIT",
-  "scripts": {
-    "publish": "npm publish --access=public"
-  },
   "directories": {
@@ -11,0 +8,0 @@ "lib": "lib"

README.md

@@ -1,1 +0,80 @@
-# queue-hook
+# queue-hook
+
+## Import
+
+### Web Modules
+
+```
+<script type="module">
+  import { useQueue, getQueues, getQueuesByKey } from "https://cdn.jsdelivr.net/npm/@jsdevs-sp/queue-hook@0.0.2/lib/index.js";
+</script>
+```
+
+### Node Modules
+
+```npm install --save @jsdevs-sp/queue-hook```
+
+```import { useQueue, getQueues, getQueuesByKey } from  "@jsdevs-sp/queue-hook"```
+
+## Usage
+
+### Manifest
+
+```
+const manifest = [
+  {
+    key: 'foo',
+    url: 'mock/foo.json',
+  },
+  {
+    key: 'bar',
+    url: 'mock/bar.json',
+  },
+  {
+    key: 'image',
+    url: 'mock/image.jpg',
+  }
+]
+
+```
+
+### loadQueue
+
+```
+import { useQueue } from  "@jsdevs-sp/queue-hook;
+
+const { loadQueue } = useQueue('preload', manifest);
+
+loadQueue((queue) => {
+  console.log('onComplete:', queue);
+});
+
+```
+
+### loadQueueByItem
+
+```
+import { useQueue } from  "@jsdevs-sp/queue-hook;
+
+const { loadQueueByItem } = useQueue('preload', manifest);
+
+loadQueueByItem(({ item, progress, position }) => {
+  console.log('onItemComplete', item, progress, position);
+});
+```
+
+### getQueuesByKey
+
+```
+import { getQueuesByKey } from  "@jsdevs-sp/queue-hook;
+
+getQueuesByKey('preload')
+```
+
+### getQueues
+
+```
+import { getQueues } from  "@jsdevs-sp/queue-hook;
+
+getQueues()
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5771752

increased by0.03%

Number of package files

15

increased by36.36%

Lines of code

96

increased by2.13%

Number of lines in readme file

80

increased by7900%

No dependency changes