use-asset - npm Package Compare versions

Comparing version 1.0.4 to 2.0.0-alpha-00

.size-snapshot.json

 {
   "index.js": {
-    "bundled": 2655,
-    "minified": 1209,
-    "gzipped": 534,
+    "bundled": 2827,
+    "minified": 1300,
+    "gzipped": 575,
     "treeshaked": {
       "rollup": {
-        "code": 24,
-        "import_statements": 24
+        "code": 14,
+        "import_statements": 14
       },
       "webpack": {
-        "code": 1771
+        "code": 1843
       }
@@ -17,6 +17,6 @@ }
   "index.cjs.js": {
-    "bundled": 6165,
-    "minified": 3439,
-    "gzipped": 1289
+    "bundled": 6129,
+    "minified": 3361,
+    "gzipped": 1278
   }
 }

dist/index.cjs.js

@@ -6,2 +6,3 @@ 'use strict';
 var deepEqual = require('fast-deep-equal');
+var react = require('react');
 
@@ -12,3 +13,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } it = o[Symbol.iterator](); return it.next.bind(it); }
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
@@ -18,4 +19,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-var globalCache = [];
 
+var createCache = function createCache() {
+  return [];
+};
+
 function handleAsset(fn, cache, args, lifespan, preload) {
@@ -90,4 +94,2 @@ if (lifespan === void 0) {
   }
-
-  var cache = [];
   return {
@@ -103,3 +105,3 @@ /**
 
-      return handleAsset(fn, cache, args, lifespan);
+      return handleAsset(fn, react.unstable_getCacheForType(createCache), args, lifespan);
     },
@@ -111,3 +113,3 @@ preload: function preload() {
 
-      return void handleAsset(fn, cache, args, lifespan, true);
+      return void handleAsset(fn, react.unstable_getCacheForType(createCache), args, lifespan, true);
     },
@@ -119,6 +121,6 @@ clear: function clear() {
 
-      return _clear.apply(void 0, [cache].concat(args));
+      return _clear.apply(void 0, [react.unstable_getCacheForType(createCache)].concat(args));
     },
     peek: function peek() {
-      var _cache$find;
+      var _getCacheForType$find;
 
@@ -129,5 +131,5 @@ for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
 
-      return (_cache$find = cache.find(function (entry) {
+      return (_getCacheForType$find = react.unstable_getCacheForType(createCache).find(function (entry) {
         return deepEqual__default['default'](args, entry.args);
-      })) == null ? void 0 : _cache$find.response;
+      })) == null ? void 0 : _getCacheForType$find.response;
     }
@@ -142,3 +144,3 @@ };
 
-  return handleAsset(fn, globalCache, args, useAsset.lifespan);
+  return handleAsset(fn, react.unstable_getCacheForType(createCache), args, useAsset.lifespan);
 }
@@ -153,3 +155,3 @@
 
-  return _clear.apply(void 0, [globalCache].concat(args));
+  return _clear.apply(void 0, [react.unstable_getCacheForType(createCache)].concat(args));
 };
@@ -162,7 +164,7 @@
 
-  return void handleAsset(fn, globalCache, args, useAsset.lifespan, true);
+  return void handleAsset(fn, react.unstable_getCacheForType(createCache), args, useAsset.lifespan, true);
 };
 
 useAsset.peek = function () {
-  var _globalCache$find;
+  var _getCacheForType$find2;
 
@@ -173,5 +175,5 @@ for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
 
-  return (_globalCache$find = globalCache.find(function (entry) {
+  return (_getCacheForType$find2 = react.unstable_getCacheForType(createCache).find(function (entry) {
     return deepEqual__default['default'](args, entry.args);
-  })) == null ? void 0 : _globalCache$find.response;
+  })) == null ? void 0 : _getCacheForType$find2.response;
 };
@@ -178,0 +180,0 @@

dist/index.js

 import deepEqual from 'fast-deep-equal';
+import { unstable_getCacheForType } from 'react';
 
-const globalCache = [];
+const createCache = () => [];
 
@@ -51,3 +52,2 @@ function handleAsset(fn, cache, args, lifespan = 0, preload = false) {
 function createAsset(fn, lifespan = 0) {
-  const cache = [];
   return {
@@ -58,9 +58,9 @@ /**
      */
-    read: (...args) => handleAsset(fn, cache, args, lifespan),
-    preload: (...args) => void handleAsset(fn, cache, args, lifespan, true),
-    clear: (...args) => clear(cache, ...args),
+    read: (...args) => handleAsset(fn, unstable_getCacheForType(createCache), args, lifespan),
+    preload: (...args) => void handleAsset(fn, unstable_getCacheForType(createCache), args, lifespan, true),
+    clear: (...args) => clear(unstable_getCacheForType(createCache), ...args),
     peek: (...args) => {
-      var _cache$find;
+      var _getCacheForType$find;
 
-      return (_cache$find = cache.find(entry => deepEqual(args, entry.args))) == null ? void 0 : _cache$find.response;
+      return (_getCacheForType$find = unstable_getCacheForType(createCache).find(entry => deepEqual(args, entry.args))) == null ? void 0 : _getCacheForType$find.response;
     }
@@ -71,3 +71,3 @@ };
 function useAsset(fn, ...args) {
-  return handleAsset(fn, globalCache, args, useAsset.lifespan);
+  return handleAsset(fn, unstable_getCacheForType(createCache), args, useAsset.lifespan);
 }
@@ -77,12 +77,12 @@
 
-useAsset.clear = (...args) => clear(globalCache, ...args);
+useAsset.clear = (...args) => clear(unstable_getCacheForType(createCache), ...args);
 
-useAsset.preload = (fn, ...args) => void handleAsset(fn, globalCache, args, useAsset.lifespan, true);
+useAsset.preload = (fn, ...args) => void handleAsset(fn, unstable_getCacheForType(createCache), args, useAsset.lifespan, true);
 
 useAsset.peek = (...args) => {
-  var _globalCache$find;
+  var _getCacheForType$find2;
 
-  return (_globalCache$find = globalCache.find(entry => deepEqual(args, entry.args))) == null ? void 0 : _globalCache$find.response;
+  return (_getCacheForType$find2 = unstable_getCacheForType(createCache).find(entry => deepEqual(args, entry.args))) == null ? void 0 : _getCacheForType$find2.response;
 };
 
 export { createAsset, useAsset };

package.json

 {
   "name": "use-asset",
-  "version": "1.0.4",
+  "version": "2.0.0-alpha-00",
   "description": "A data fetching strategy for React Suspense",
@@ -36,39 +36,39 @@ "main": "dist/index.cjs",
   "devDependencies": {
-    "@babel/core": "7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-transform-modules-commonjs": "7.12.1",
-    "@babel/plugin-transform-parameters": "7.12.1",
-    "@babel/plugin-transform-runtime": "7.12.10",
-    "@babel/plugin-transform-template-literals": "7.12.1",
-    "@babel/preset-env": "7.12.11",
-    "@babel/preset-react": "7.12.10",
-    "@babel/preset-typescript": "^7.12.7",
-    "@rollup/plugin-babel": "^5.2.2",
-    "@rollup/plugin-node-resolve": "^11.1.0",
-    "@types/jest": "^26.0.20",
-    "@types/node": "^14.14.21",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-test-renderer": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.13.0",
-    "@typescript-eslint/parser": "^4.13.0",
-    "eslint": "^7.18.0",
-    "eslint-config-prettier": "^6.13.0",
+    "@babel/core": "7.15.5",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-modules-commonjs": "7.15.4",
+    "@babel/plugin-transform-parameters": "7.15.4",
+    "@babel/plugin-transform-runtime": "7.15.0",
+    "@babel/plugin-transform-template-literals": "7.14.5",
+    "@babel/preset-env": "7.15.4",
+    "@babel/preset-react": "7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^17.0.20",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-test-renderer": "^17.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.31.0",
+    "@typescript-eslint/parser": "^4.31.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jest": "^24.4.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.3",
-    "prettier": "^2.2.1",
-    "react": "^17.0.1",
-    "rollup": "^2.36.2",
+    "husky": "^7.0.2",
+    "lint-staged": "^11.1.2",
+    "prettier": "^2.3.2",
+    "react": "^0.0.0-experimental-031abd24b-20210907",
+    "rollup": "^2.56.3",
     "rollup-plugin-size-snapshot": "^0.12.0",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.1.3"
+    "typescript": "^4.4.2"
   },
   "peerDependencies": {
-    "react": ">=17.0"
+    "react": ">=18.0"
   },
@@ -75,0 +75,0 @@ "dependencies": {

readme.md

@@ -24,3 +24,5 @@ <p align="left">
 
+// Create a cached source
 const asset = createAsset(async (id, version) => {
+  // Any async task can run in here, fetch requests, parsing, workers, promises, ...
   const res = await fetch(`https://hacker-news.firebaseio.com/${version}/item/${id}.json`)
@@ -31,3 +33,5 @@ return await res.json()
 function Post({ id }) {
-  const { by, title } = asset.read(id, "v0")
+  // Then read from it ...
+  const { by, title } = asset.read(id, "v0") // As many cache keys as you need
+  // By the time we're here the async data has resolved
   return <div>{title} by {by}</div>
@@ -37,3 +41,3 @@ }
 function App() {
-  <Suspense fallback={null}>
+  <Suspense fallback={<div>loading...</div>}>
     <Post id={10000} />
@@ -83,3 +87,8 @@ </Suspense>
 function Post({ id }) {
-  const { by, title } = useAsset(fn, id)
+  const { by, title } = useAsset(async (id, version) => {
+    // Any async task can run in here, fetch requests, parsing, workers, promises, ...
+    const res = await fetch(`https://hacker-news.firebaseio.com/${version}/item/${id}.json`)
+    return await res.json()
+  }, id, "v0") // As many cache keys as you need
+  // By the time we're here the async data has resolved
   return <div>{title} by {by}</div>
@@ -89,3 +98,3 @@ }
 function App() {
-  <Suspense fallback={null}>
+  <Suspense fallback={<div>loading...</div>}>
     <Post id={1000} />
@@ -92,0 +101,0 @@ ```

rollup.config.js

 import path from 'path'
 import babel from '@rollup/plugin-babel'
 import resolve from '@rollup/plugin-node-resolve'
-import { terser } from 'rollup-plugin-terser'
-import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
 
@@ -17,3 +15,17 @@ const root = process.platform === 'win32' ? path.resolve('/') : '/'
   presets: [
-    ['@babel/preset-env', { loose: true, modules: false, targets }],
+    [
+      '@babel/preset-env',
+      {
+        include: [
+          '@babel/plugin-proposal-optional-chaining',
+          '@babel/plugin-proposal-nullish-coalescing-operator',
+          '@babel/plugin-proposal-numeric-separator',
+          '@babel/plugin-proposal-logical-assignment-operators',
+        ],
+        bugfixes: true,
+        loose: true,
+        modules: false,
+        targets,
+      },
+    ],
     '@babel/preset-react',
@@ -31,4 +43,3 @@ '@babel/preset-typescript',
     plugins: [
-      babel(getBabelOptions({ useESModules: true }, '>1%, not dead, not ie 11, not op_mini all')),
-      sizeSnapshot(),
+      babel(getBabelOptions({ useESModules: true }, '> 1%, not dead, not ie 11, not op_mini all')),
       resolve({ extensions }),
@@ -41,4 +52,4 @@ ],
     external,
-    plugins: [babel(getBabelOptions({ useESModules: false })), sizeSnapshot(), resolve({ extensions })],
+    plugins: [babel(getBabelOptions({ useESModules: false })), resolve({ extensions })],
   },
 ]

src/index.ts

 import deepEqual from 'fast-deep-equal'
+// @ts-ignore
+import { unstable_getCacheForType as getCacheForType } from 'react'
 
@@ -12,3 +14,3 @@ type PromiseCache<Response, Args extends any[]> = {
 
-const globalCache: PromiseCache<any, any[]>[] = []
+const createCache = () => [] as PromiseCache<any, any[]>[]
 
@@ -77,6 +79,7 @@ function handleAsset<Response, Args extends any[]>(
      */
-    read: (...args: Args): Response => handleAsset(fn, cache, args, lifespan) as Response,
-    preload: (...args: Args): void => void handleAsset(fn, cache, args, lifespan, true),
-    clear: (...args: Args) => clear(cache, ...args),
-    peek: (...args: Args): void | Response => cache.find((entry) => deepEqual(args, entry.args))?.response,
+    read: (...args: Args): Response => handleAsset(fn, getCacheForType(createCache), args, lifespan) as Response,
+    preload: (...args: Args): void => void handleAsset(fn, getCacheForType(createCache), args, lifespan, true),
+    clear: (...args: Args) => clear(getCacheForType(createCache), ...args),
+    peek: (...args: Args): void | Response =>
+      getCacheForType(createCache).find((entry: any) => deepEqual(args, entry.args))?.response,
   }
@@ -86,12 +89,17 @@ }
 function useAsset<Response, Args extends any[]>(fn: PromiseFn<Response, Args>, ...args: Args): Response {
-  return handleAsset(fn, globalCache as PromiseCache<Response, Args>[], args, useAsset.lifespan) as Response
+  return handleAsset(
+    fn,
+    getCacheForType(createCache) as PromiseCache<Response, Args>[],
+    args,
+    useAsset.lifespan
+  ) as Response
 }
 
 useAsset.lifespan = 0
-useAsset.clear = <Args extends any[]>(...args: Args) => clear(globalCache, ...args)
+useAsset.clear = <Args extends any[]>(...args: Args) => clear(getCacheForType(createCache), ...args)
 useAsset.preload = <Response, Args extends any[]>(fn: PromiseFn<Response, Args>, ...args: Args) =>
-  void handleAsset(fn, globalCache as PromiseCache<Response, Args>[], args, useAsset.lifespan, true)
+  void handleAsset(fn, getCacheForType(createCache) as PromiseCache<Response, Args>[], args, useAsset.lifespan, true)
 useAsset.peek = <Response, Args extends any[]>(...args: Args) =>
-  globalCache.find((entry) => deepEqual(args, entry.args))?.response as Response
+  getCacheForType(createCache).find((entry: any) => deepEqual(args, entry.args))?.response as Response
 
 export { createAsset, useAsset }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

185647

increased by0.98%

Lines of code

479

increased by4.59%

Number of lines in readme file

131

increased by7.38%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes