react-solid-flow - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

CHANGELOG.md

@@ -8,2 +8,8 @@ # managed-timeout changelog
 
+## [0.2.3] - 2023-02-20
+### Changed
+- `typeof function` being used instead of `instanceOf Function` in checks inside the
+  code to avoid potential [issue with Jest](https://github.com/facebook/jest/issues/6329)
+### Security
+- devDependencies versions bump
 
@@ -10,0 +16,0 @@ ## [0.2.2] - 2023-01-25

dist/components/Await.d.ts

@@ -1,3 +0,2 @@
-import React from 'react';
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { ResourceLike } from "../models/Resource";
@@ -15,3 +14,3 @@ interface AwaitProps<T> {
 /** Component for displaying a Resource */
-export declare function Await<T>(props: AwaitProps<T>): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare function Await<T>(props: AwaitProps<T>): ReactElement | null;
 export {};

dist/hooks/useResource.d.ts

 import type { Resource } from "../models/Resource";
-export declare type ResourceReturn<T, TArgs extends readonly unknown[]> = [
+export type ResourceReturn<T, TArgs extends readonly unknown[]> = [
     Resource<T>,
@@ -28,3 +28,3 @@ {
 ];
-export declare type ResourceOptions<T> = {
+export type ResourceOptions<T> = {
     /** Initial value for the resource */
@@ -31,0 +31,0 @@ initialValue?: Awaited<T> | (() => Awaited<T>);

dist/hooks/useResourceReducer.d.ts

 import { Resource } from "../models/Resource";
 export declare function useResourceReducer<T>(initialValue?: Awaited<T> | (() => Awaited<T>), skipFirstRun?: boolean): [Resource<T>, import("react").Dispatch<Action<T>>];
-declare type Action<T> = {
+type Action<T> = {
     type: "PEND";
@@ -5,0 +5,0 @@ } | {

dist/models/Resource.d.ts

@@ -9,3 +9,3 @@ export interface ResourceLike<T> {
 }
-export declare type ResourceState = "unresolved" | "pending" | "ready" | "refreshing" | "errored";
+export type ResourceState = "unresolved" | "pending" | "ready" | "refreshing" | "errored";
 export declare class Resource<T> implements ResourceLike<T> {
@@ -12,0 +12,0 @@ loading: boolean;

dist/react-solid-flow.umd.js

@@ -1,1 +0,1 @@
-(function(o,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react-dom"],t):(o=typeof globalThis<"u"?globalThis:o||self,t(o["react-solid-flow"]={},o.React,o.ReactDOM))})(this,function(o,t,h){"use strict";var Q=Object.defineProperty;var W=(o,t,h)=>t in o?Q(o,t,{enumerable:!0,configurable:!0,writable:!0,value:h}):o[t]=h;var f=(o,t,h)=>(W(o,typeof t!="symbol"?t+"":t,h),h);function y(e){return e==null?null:t.isValidElement(e)?e:t.createElement(t.Fragment,null,e)}function T({children:e,each:r,fallback:n=null}){if(!Array.isArray(r)||!r.length||e==null)return y(n);if(typeof e!="function")return t.createElement(t.Fragment,null,r.map((u,l)=>t.createElement(t.Fragment,{key:l},e)));const a=[];for(let u=0;u<r.length;u++){const l=e(r[u],u);l!=null&&(!t.isValidElement(l)||!l.key?a.push(t.createElement(t.Fragment,{key:u},l)):a.push(l))}return a.length?t.createElement(t.Fragment,null,a):y(n)}function m(e,...r){return e instanceof Function?y(e(...r)):y(e)}function D({fallback:e=null,...r}){return r.when?m(r.children,r.when):y(e)}function P(e){for(const r of t.Children.toArray(e.children))if(t.isValidElement(r)&&r.props.when)return r;return y(e.fallback)}function k({when:e,children:r}){return e?m(r,e):null}class N extends t.Component{constructor(n){super(n);f(this,"state",{error:void 0});this.resetError=this.resetError.bind(this)}static getDerivedStateFromError(n){return{error:n}}componentDidCatch(n,a){var u,l;(l=(u=this.props).onCatch)==null||l.call(u,n,a),this.setState({error:n})}resetError(){this.setState({error:void 0})}render(){return this.state.error===void 0?this.props.children:this.props.fallback instanceof Function?this.props.fallback(this.state.error,this.resetError):this.props.fallback}}const L=t.forwardRef,V=L(function({component:r,...n},a){return r?t.createElement(r,{...n,ref:a}):null});function M({mount:e,...r}){const n=e==null||e instanceof Element||e instanceof DocumentFragment?e:document.querySelector(e);return n?h.createPortal(r.children,n):null}function O(e){return e.for.loading?m(e.fallback):e.for.error!=null?m(e.catch,e.for.error):m(e.children,e.for.data)}class d{constructor(r,n){f(this,"loading");f(this,"data");f(this,"error");f(this,"state");f(this,"latest");this.data=r==null?void 0:r.data,this.error=r==null?void 0:r.error,this.loading=!!(r!=null&&r.loading),this.data!==void 0?this.latest=this.data:this.latest=n==null?void 0:n.latest,this.state=d.getState(this)}static from(r,n){const a=r instanceof Promise;return new d(a?{loading:!0}:{data:r,loading:!!n})}static getState(r){return r.data!==void 0&&r.loading?"refreshing":r.loading?"pending":r.error!==void 0?"errored":r.data!==void 0?"ready":"unresolved"}}class j extends Error{constructor(n="The operation was aborted."){super(n);f(this,"name","AbortError");f(this,"code",20)}}class F extends Error{constructor(){super(...arguments);f(this,"name","NullishError")}}function p(e,r){return t.useReducer(J,[e,r],q)}function q(e){const[r,n=!1]=e,a=r instanceof Function?r():r;return d.from(a,!n)}function J(e,r){switch(r==null?void 0:r.type){case"PEND":return new d({loading:!0,error:void 0,data:e.data},e);case"RESOLVE":return new d({...e,loading:!1,error:void 0,data:r.payload},e);case"SYNC-RESULT":return new d({loading:!1,error:void 0,data:r.payload},e);case"REJECT":return new d({loading:!1,error:r.payload??new F("resource rejected with a nullish error",{cause:r.payload}),data:void 0},e);default:return e}}function U(e,r=[],{initialValue:n,onCompleted:a,onError:u,skipFirstRun:l=!1,skip:v=!1,skipFnMemoization:B}={}){const i=t.useRef(),C=t.useRef(l),[z,E]=p(n,v||l),I=t.useCallback(s=>{var c;(c=i.current)==null||c.abort(),i.current=new AbortController,E({type:"SYNC-RESULT",payload:s})},[E]),b=t.useCallback((s,...c)=>{let w;const S=i.current;try{if(S==null)throw new Error("resource state error, abort controller is null during the fetch operation");return w=e(...c,{signal:S.signal,refetching:s}),w instanceof Promise?K(w):E({type:"SYNC-RESULT",payload:w}),w}catch(A){if(E({type:"REJECT",payload:A}),s)throw A;return}async function K(A){E({type:"PEND"});try{const g=await A;if(S!==i.current)return;E({type:"RESOLVE",payload:g}),a==null||a(g)}catch(g){if(Y(g)||S!==i.current)return;E({type:"REJECT",payload:g}),u==null||u(g)}}},B?[e]:[]),G=t.useCallback((...s)=>{var c;return(c=i.current)==null||c.abort(),i.current=new AbortController,b(!0,...s)},[b]),H=t.useCallback(s=>{var c;(c=i.current)==null||c.abort(s)},[]);return t.useEffect(()=>{C.current=l,i.current||(i.current=new AbortController)},[l]),t.useEffect(()=>{if(C.current){C.current=!1;return}if(!v)return b(!1,...r),()=>{var s;(s=i.current)==null||s.abort(),i.current=new AbortController}},[...r,v,b]),[z,{mutate:I,refetch:G,abort:H}]}function Y(e){return e!=null&&e.name==="AbortError"}o.AbortError=j,o.Await=O,o.Dynamic=V,o.ErrorBoundary=N,o.For=T,o.Match=k,o.NullishError=F,o.Portal=M,o.Resource=d,o.Show=D,o.Switch=P,o.useResource=U,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(o,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react-dom"],t):(o=typeof globalThis<"u"?globalThis:o||self,t(o["react-solid-flow"]={},o.React,o.ReactDOM))})(this,function(o,t,h){"use strict";var Q=Object.defineProperty;var W=(o,t,h)=>t in o?Q(o,t,{enumerable:!0,configurable:!0,writable:!0,value:h}):o[t]=h;var f=(o,t,h)=>(W(o,typeof t!="symbol"?t+"":t,h),h);function y(e){return e==null?null:t.isValidElement(e)?e:t.createElement(t.Fragment,null,e)}function D({children:e,each:r,fallback:n=null}){if(!Array.isArray(r)||!r.length||e==null)return y(n);if(typeof e!="function")return t.createElement(t.Fragment,null,r.map((u,l)=>t.createElement(t.Fragment,{key:l},e)));const a=[];for(let u=0;u<r.length;u++){const l=e(r[u],u);l!=null&&(!t.isValidElement(l)||!l.key?a.push(t.createElement(t.Fragment,{key:u},l)):a.push(l))}return a.length?t.createElement(t.Fragment,null,a):y(n)}function m(e,...r){return y(typeof e=="function"?e(...r):e)}function F({fallback:e=null,...r}){return r.when?m(r.children,r.when):y(e)}function P(e){for(const r of t.Children.toArray(e.children))if(t.isValidElement(r)&&r.props.when)return r;return y(e.fallback)}function k({when:e,children:r}){return e?m(r,e):null}class N extends t.Component{constructor(n){super(n);f(this,"state",{error:void 0});this.resetError=this.resetError.bind(this)}static getDerivedStateFromError(n){return{error:n}}componentDidCatch(n,a){var u,l;(l=(u=this.props).onCatch)==null||l.call(u,n,a),this.setState({error:n})}resetError(){this.setState({error:void 0})}render(){return this.state.error===void 0?this.props.children:typeof this.props.fallback=="function"?this.props.fallback(this.state.error,this.resetError):this.props.fallback}}const p=t.forwardRef,L=p(function({component:r,...n},a){return r?t.createElement(r,{...n,ref:a}):null});function V({mount:e,...r}){const n=e==null||e instanceof Element||e instanceof DocumentFragment?e:document.querySelector(e);return n?h.createPortal(r.children,n):null}function M(e){return e.for.loading?m(e.fallback):e.for.error!=null?m(e.catch,e.for.error):m(e.children,e.for.data)}class d{constructor(r,n){f(this,"loading");f(this,"data");f(this,"error");f(this,"state");f(this,"latest");this.data=r==null?void 0:r.data,this.error=r==null?void 0:r.error,this.loading=!!(r!=null&&r.loading),this.data!==void 0?this.latest=this.data:this.latest=n==null?void 0:n.latest,this.state=d.getState(this)}static from(r,n){const a=r instanceof Promise;return new d(a?{loading:!0}:{data:r,loading:!!n})}static getState(r){return r.data!==void 0&&r.loading?"refreshing":r.loading?"pending":r.error!==void 0?"errored":r.data!==void 0?"ready":"unresolved"}}class O extends Error{constructor(n="The operation was aborted."){super(n);f(this,"name","AbortError");f(this,"code",20)}}class T extends Error{constructor(){super(...arguments);f(this,"name","NullishError")}}function j(e,r){return t.useReducer(J,[e,r],q)}function q(e){const[r,n=!1]=e,a=typeof r=="function"?r():r;return d.from(a,!n)}function J(e,r){switch(r==null?void 0:r.type){case"PEND":return new d({loading:!0,error:void 0,data:e.data},e);case"RESOLVE":return new d({...e,loading:!1,error:void 0,data:r.payload},e);case"SYNC-RESULT":return new d({loading:!1,error:void 0,data:r.payload},e);case"REJECT":return new d({loading:!1,error:r.payload??new T("resource rejected with a nullish error",{cause:r.payload}),data:void 0},e);default:return e}}function U(e,r=[],{initialValue:n,onCompleted:a,onError:u,skipFirstRun:l=!1,skip:v=!1,skipFnMemoization:B}={}){const i=t.useRef(),C=t.useRef(l),[z,E]=j(n,v||l),I=t.useCallback(s=>{var c;(c=i.current)==null||c.abort(),i.current=new AbortController,E({type:"SYNC-RESULT",payload:s})},[E]),b=t.useCallback((s,...c)=>{let w;const S=i.current;try{if(S==null)throw new Error("resource state error, abort controller is null during the fetch operation");return w=e(...c,{signal:S.signal,refetching:s}),w instanceof Promise?K(w):E({type:"SYNC-RESULT",payload:w}),w}catch(A){if(E({type:"REJECT",payload:A}),s)throw A;return}async function K(A){E({type:"PEND"});try{const g=await A;if(S!==i.current)return;E({type:"RESOLVE",payload:g}),a==null||a(g)}catch(g){if(Y(g)||S!==i.current)return;E({type:"REJECT",payload:g}),u==null||u(g)}}},B?[e]:[]),G=t.useCallback((...s)=>{var c;return(c=i.current)==null||c.abort(),i.current=new AbortController,b(!0,...s)},[b]),H=t.useCallback(s=>{var c;(c=i.current)==null||c.abort(s)},[]);return t.useEffect(()=>{C.current=l,i.current||(i.current=new AbortController)},[l]),t.useEffect(()=>{if(C.current){C.current=!1;return}if(!v)return b(!1,...r),()=>{var s;(s=i.current)==null||s.abort(),i.current=new AbortController}},[...r,v,b]),[z,{mutate:I,refetch:G,abort:H}]}function Y(e){return e!=null&&e.name==="AbortError"}o.AbortError=O,o.Await=M,o.Dynamic=L,o.ErrorBoundary=N,o.For=D,o.Match=k,o.NullishError=T,o.Portal=V,o.Resource=d,o.Show=F,o.Switch=P,o.useResource=U,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package.json

 {
   "name": "react-solid-flow",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "license": "MIT",
@@ -10,3 +10,4 @@ "scripts": {
     "test": "vitest --run --coverage",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "prepack": "npm run lint && npm run test && npm run build"
   },
@@ -23,20 +24,20 @@ "repository": {
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
-    "@vitejs/plugin-react": "^3.0.1",
-    "@vitest/coverage-c8": "^0.27.1",
-    "eslint": "^8.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@typescript-eslint/parser": "^5.52.0",
+    "@vitejs/plugin-react": "^3.1.0",
+    "@vitest/coverage-c8": "^0.28.5",
+    "eslint": "^8.34.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-plugin-react": "^7.32.0",
-    "jsdom": "^21.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "jsdom": "^21.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4",
-    "vite-plugin-dts": "^1.7.1",
-    "vitest": "^0.27.1"
+    "typescript": "^4.9.5",
+    "vite": "^4.1.3",
+    "vite-plugin-dts": "^1.7.3",
+    "vitest": "^0.28.5"
   },
@@ -79,2 +80,2 @@ "keywords": [
   }
-}
+}

README.md

@@ -40,3 +40,7 @@ # react-solid-flow
 }): ReactElement | null;
+```
 
+```tsx
+import { For } from "react-solid-flow";
+
 <For each={collection} fallback="list is empty!">
@@ -68,3 +72,7 @@ {(i) => <li key={i.id}>{i.name}</li>}
 }): ReactElement | null;
+```
 
+```tsx
+import { Show } from "react-solid-flow";
+
 <Show when={parentSeen === 'mom'} fallback={<h3>nevermind...</h3>}>
@@ -89,3 +97,7 @@ <h2>Hi mom!</h2>
 }): ReactElement | null;
+```
 
+```tsx
+import { Switch, Match } from "react-solid-flow";
+
 <Switch fallback={<h3>nevermind...</h3>}>
@@ -118,3 +130,7 @@ <Match when={parentSeen === "mom"}>
 }> {}
+```
 
+```tsx
+import { ErrorBoundary } from "react-solid-flow";
+
 <ErrorBoundary fallback={(err, reset) => (
@@ -164,2 +180,3 @@ <div className="panel-danger">
 ```tsx
+import { Await, useResource } from "react-solid-flow";
 // See description of useResource hook bellow.
@@ -187,2 +204,5 @@ const [ resource ] = useResource(() => fetch(`/api/v1/employees`).then(r => sr.json()));
 ): ReactElement | null;
+```
+```tsx
+import { Dynamic } from "react-solid-flow";
 
@@ -210,3 +230,7 @@ <Dynamic component={isLink ? "a" : "span"} title="Foo" {...someOtherProps}>
 }): ReactPortal | null;
+```
 
+```tsx
+import { Portal } from "react-solid-flow";
+
 <Portal mount="#modal-container-id">
@@ -238,2 +262,4 @@ <dialog>
 ```tsx
+import { useResource } from "react-solid-flow";
+
 const [{ data, error, loading }] = useResouce(
@@ -240,0 +266,0 @@ (id, { signal }) => fetch(`/api/v1/employee/${id}`, { signal }).json(r => {

src/helpers/pause.ts

@@ -13,3 +13,3 @@ interface PauseOpts {
     const to = setTimeout(() => {
-      if (signal?.removeEventListener instanceof Function) {
+      if (typeof signal?.removeEventListener === "function") {
         signal.removeEventListener("abort", abortHandler);
@@ -27,3 +27,3 @@ }
 
-    if (signal?.addEventListener instanceof Function) {
+    if (typeof signal?.addEventListener === "function") {
       signal.addEventListener("abort", abortHandler, { once: true });
@@ -30,0 +30,0 @@ }

src/helpers/renderProp.ts

@@ -8,3 +8,3 @@ import type { ReactElement, ReactNode } from "react";
 ): ReactElement | null {
-  if (prop instanceof Function) {
+  if (typeof prop === "function") {
     return nodeToElement(prop(...args));
@@ -11,0 +11,0 @@ }

src/hooks/useResourceReducer.ts

@@ -21,3 +21,3 @@ import { Resource } from "../models/Resource";
   const [ val, skip = false] = init;
-  const value = val instanceof Function ? val() : val;
+  const value = (typeof val === "function") ? (val as () => Awaited<T>)() : val;
   return Resource.from(value, !skip);
@@ -24,0 +24,0 @@ }

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

104961

increased by0.73%

Number of lines in readme file

448

increased by6.16%

Worsened metrics

Lines of code

2284

decreased by-0.04%

No dependency changes