@slimr/react 2.1.45

package/README.md

@@ -0,0 +1,120 @@
+# 🪶 @slimr/react [![npm package](https://img.shields.io/npm/v/@slimr/react.svg?style=flat-square)](https://npmjs.org/package/@slimr/react)
+
+A collection of useful 1st and third party react components, hooks, and util. Includes several other @slimr libs for convenience
+
+## Context
+
+`@slimr` is a set of slim React (hence '@slimr') libs:
+
+- [@slimr/css](https://www.npmjs.com/package/@slimr/css) - Framework agnostic css-in-js features inspired by the popular Emotion lib
+- [@slimr/forms](https://www.npmjs.com/package/@slimr/forms) - A minimalistic form hook
+- [@slimr/hooks](https://www.npmjs.com/package/@slimr/hooks) - A collection of useful 1st and third party react hooks
+- [@slimr/markdown](https://www.npmjs.com/package/@slimr/markdown) - A simple component and slim markdown-to-html parser
+- [@slimr/mdi-paths](https://www.npmjs.com/package/@slimr/mdi-paths) - A basic Icon component and Material Design icon svg paths, code-split by path.
+- [@slimr/router](https://www.npmjs.com/package/@slimr/router) - A novel React-web router that supports stack routing
+- [@slimr/styled](https://www.npmjs.com/package/@slimr/styled) - css-in-js features inspired by the popular styled-components and Chakra-UI libs
+- [@slimr/swr](https://www.npmjs.com/package/@slimr/swr) - A React hook for fetching data that supports stale-while-refresh eager rendering
+- [@slimr/util](https://www.npmjs.com/package/@slimr/util) - Framework agnostic Javascript polyfills
+
+## Setup
+
+- Install using normal methods (`npm i`, `yarn i`, ...etc)
+- There is a known conflict with vitest, which you can resolve by adding the following to `vite.config.js`
+
+```javascript
+export default defineConfig({
+  test: {
+    deps: {
+      inline: ['@slimr/hooks'],
+    },
+  },
+})
+```
+
+## API
+
+### Bundled from other libs
+
+- [@slimr/forms](https://www.npmjs.com/package/@slimr/forms) - A minimalistic form hook
+- [@slimr/hooks](https://www.npmjs.com/package/@slimr/hooks) - A collection of useful 1st and third party react hooks
+- [@slimr/markdown](https://www.npmjs.com/package/@slimr/markdown) - A simple component and slim markdown-to-html parser
+- [@slimr/router](https://www.npmjs.com/package/@slimr/router) - A novel React-web router that supports stack routing
+- [@slimr/styled](https://www.npmjs.com/package/@slimr/styled) - css-in-js features inspired by the popular styled-components and Chakra-UI libs
+- [@slimr/swr](https://www.npmjs.com/package/@slimr/swr) - A React hook for fetching data that supports stale-while-refresh eager rendering
+- [@slimr/util](https://www.npmjs.com/package/@slimr/util) - Framework agnostic Javascript polyfills
+- [react-use](https://www.npmjs.com/package/react-use) - an excellent collection of hooks
+
+### useDeepCompareMemo and useShallowCompareMemo
+
+like react-use's useDeepEffects, but for memos
+
+### useForm, FormError
+
+A hook and custom Error from [@slimr/forms](https://www.npmjs.com/package/@slimr/forms), which returns a Form component and reactive form state.
+
+```tsx
+import {FormError, useForm} from '@slimr/forms'
+import {formToValues} from '@slimr/util'
+
+function MyForm() {
+  const { Form, submitting, submitted, accepted, errors} = useForm()
+
+  const onSubmit = async (e: React.FormEventHandler<HTMLFormElement> => {
+    const vals = formToJson(e.target as HTMLFormElement)
+    const errors: Record<string, string> = {}
+    if (!vals.name) {
+      errors.name = 'Name is required'
+    }
+    if (!vals.terms) {
+      errors.checkbox = 'You must agree to the terms'
+    }
+    if (Object.keys(errors).length) {
+      throw new FormError(errors)
+    }
+  }
+
+  return (
+    <Form onSubmit={onSubmit}>
+      <input disabled={submitting || accepted} name="name" />
+      <div>{errors.name}<div>
+      <input disabled={submitting || accepted} name="terms" type="checkbox" />
+      <div>{errors.terms}<div>
+      <button type="submit">Submit</button>
+      <button type="reset">Reset</button>
+    </Form>
+  )
+}
+```
+
+### useSet2
+
+Returns a set-like object that intercepts the setter function to trigger re-renders on change. Also adds a toggle and reset method. `@slimr/hooks` also exports a `useSet` from `react-use`, which is similar but has a different, less desirable (imho) pattern.
+
+```typescript
+function MyComponent() {
+  const optionalInitialValue = new Set()
+  const [set1, set1Setters] = useSet(optionalInitialValue)
+  const set2 = useSet2(optionalInitialValue)
+
+  // Use set2 like you would a vanilla JS Set
+```
+
+### useSWR
+
+A hook that accepts a function callback, calls the function and returns a reactive callback state. Uses a cache and will return the cache value if available while waiting for the callback to complete, then update the return on complete. This is often called 'stale-while-refresh' and abbreviated as 'SWR', hence the name of the hook. Source is in [@slimr/swr](https://www.npmjs.com/package/@slimr/swr)
+
+```tsx
+import {useSWR} from `@slimr/swr`
+
+function MyComponent({ page }: number) {
+  const { result, loading, refresh} = useSWR(() => getPageData(page), [page], {throttle: Infinity})
+  if (loading) return null
+  return (
+    <section>
+      <h1>{result.title}</h1>
+      <p>{result.description}</h1>
+      <button onClick={refresh}>Refresh</button>
+    </section>
+  )
+}
+```

package/cjs/@types/global.d.ts

@@ -0,0 +1 @@
+type Fnc = (...args: any) => any

package/cjs/index.d.ts

@@ -0,0 +1,9 @@
+export * from '@slimr/forms';
+export * from '@slimr/markdown';
+export * from '@slimr/router';
+export * from '@slimr/styled';
+export * from '@slimr/swr';
+export * from '@slimr/util';
+export * from 'react-use';
+export * from './useMemos.js';
+export * from './useSet2.js';

package/cjs/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("@slimr/forms"), exports);
+__exportStar(require("@slimr/markdown"), exports);
+__exportStar(require("@slimr/router"), exports);
+__exportStar(require("@slimr/styled"), exports);
+__exportStar(require("@slimr/swr"), exports);
+__exportStar(require("@slimr/util"), exports);
+__exportStar(require("react-use"), exports);
+__exportStar(require("./useMemos.js"), exports);
+__exportStar(require("./useSet2.js"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA4B;AAC5B,kDAA+B;AAC/B,gDAA6B;AAC7B,gDAA6B;AAC7B,6CAA0B;AAC1B,8CAA2B;AAC3B,4CAAyB;AAEzB,gDAA6B;AAC7B,+CAA4B"}

package/cjs/index.ts

@@ -0,0 +1,10 @@
+export * from '@slimr/forms'
+export * from '@slimr/markdown'
+export * from '@slimr/router'
+export * from '@slimr/styled'
+export * from '@slimr/swr'
+export * from '@slimr/util'
+export * from 'react-use'
+
+export * from './useMemos.js'
+export * from './useSet2.js'

package/cjs/useMemos.d.ts

@@ -0,0 +1,14 @@
+type Fnc = (...args: any[]) => any;
+/**
+ * Like useMemo, but does a deep compare instead default compare
+ * to avoid misfires. Is more expensive than useMemo though,
+ * so use it intensionally.
+ */
+export declare function useDeepCompareMemo(callback: Fnc, varsToWatch: any[]): any;
+/**
+ * Like useMemo, but does a shallow compare instead default compare
+ * to avoid misfires. Is more expensive than useMemo though, but
+ * less than useDeepCompareMemo, so use it intentionally.
+ */
+export declare function useShallowCompareMemo(callback: Fnc, varsToWatch: any[]): any;
+export {};

package/cjs/useMemos.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useShallowCompareMemo = exports.useDeepCompareMemo = void 0;
+const util_1 = require("@slimr/util");
+const react_1 = require("react");
+/**
+ * Like useMemo, but does a deep compare instead default compare
+ * to avoid misfires. Is more expensive than useMemo though,
+ * so use it intensionally.
+ */
+function useDeepCompareMemo(callback, varsToWatch) {
+    const [lastSeenProps, setLastSeenProps] = (0, react_1.useState)(varsToWatch);
+    (0, react_1.useEffect)(() => {
+        if ((0, util_1.areNotEqualDeep)(varsToWatch, lastSeenProps)) {
+            setLastSeenProps(varsToWatch);
+        }
+    }, varsToWatch);
+    return (0, react_1.useMemo)(callback, [lastSeenProps]);
+}
+exports.useDeepCompareMemo = useDeepCompareMemo;
+/**
+ * Like useMemo, but does a shallow compare instead default compare
+ * to avoid misfires. Is more expensive than useMemo though, but
+ * less than useDeepCompareMemo, so use it intentionally.
+ */
+function useShallowCompareMemo(callback, varsToWatch) {
+    const [lastSeenProps, setLastSeenProps] = (0, react_1.useState)(varsToWatch);
+    (0, react_1.useEffect)(() => {
+        if ((0, util_1.areNotEqualDeep)(varsToWatch, lastSeenProps)) {
+            setLastSeenProps(varsToWatch);
+        }
+    }, varsToWatch);
+    return (0, react_1.useMemo)(callback, [lastSeenProps]);
+}
+exports.useShallowCompareMemo = useShallowCompareMemo;
+//# sourceMappingURL=useMemos.js.map

package/cjs/useMemos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMemos.js","sourceRoot":"","sources":["../src/useMemos.ts"],"names":[],"mappings":";;;AAAA,sCAA2C;AAC3C,iCAAkD;AAIlD;;;;GAIG;AACH,SAAgB,kBAAkB,CAAC,QAAa,EAAE,WAAkB;IAClE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,WAAW,CAAC,CAAA;IAC/D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,IAAA,sBAAe,EAAC,WAAW,EAAE,aAAa,CAAC,EAAE;YAC/C,gBAAgB,CAAC,WAAW,CAAC,CAAA;SAC9B;IACH,CAAC,EAAE,WAAW,CAAC,CAAA;IACf,OAAO,IAAA,eAAO,EAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;AAC3C,CAAC;AARD,gDAQC;AAED;;;;GAIG;AACH,SAAgB,qBAAqB,CAAC,QAAa,EAAE,WAAkB;IACrE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,WAAW,CAAC,CAAA;IAC/D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,IAAA,sBAAe,EAAC,WAAW,EAAE,aAAa,CAAC,EAAE;YAC/C,gBAAgB,CAAC,WAAW,CAAC,CAAA;SAC9B;IACH,CAAC,EAAE,WAAW,CAAC,CAAA;IACf,OAAO,IAAA,eAAO,EAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;AAC3C,CAAC;AARD,sDAQC"}

package/cjs/useMemos.ts

@@ -0,0 +1,34 @@
+import {areNotEqualDeep} from '@slimr/util'
+import {useEffect, useMemo, useState} from 'react'
+
+type Fnc = (...args: any[]) => any
+
+/**
+ * Like useMemo, but does a deep compare instead default compare
+ * to avoid misfires. Is more expensive than useMemo though,
+ * so use it intensionally.
+ */
+export function useDeepCompareMemo(callback: Fnc, varsToWatch: any[]) {
+  const [lastSeenProps, setLastSeenProps] = useState(varsToWatch)
+  useEffect(() => {
+    if (areNotEqualDeep(varsToWatch, lastSeenProps)) {
+      setLastSeenProps(varsToWatch)
+    }
+  }, varsToWatch)
+  return useMemo(callback, [lastSeenProps])
+}
+
+/**
+ * Like useMemo, but does a shallow compare instead default compare
+ * to avoid misfires. Is more expensive than useMemo though, but
+ * less than useDeepCompareMemo, so use it intentionally.
+ */
+export function useShallowCompareMemo(callback: Fnc, varsToWatch: any[]) {
+  const [lastSeenProps, setLastSeenProps] = useState(varsToWatch)
+  useEffect(() => {
+    if (areNotEqualDeep(varsToWatch, lastSeenProps)) {
+      setLastSeenProps(varsToWatch)
+    }
+  }, varsToWatch)
+  return useMemo(callback, [lastSeenProps])
+}

package/cjs/useSet2.d.ts

@@ -0,0 +1,24 @@
+export interface UseSet2<T> extends Set<T> {
+    _add: Set<T>['add'];
+    _clear: Set<T>['clear'];
+    _delete: Set<T>['delete'];
+    toggle(v: T): void;
+    reset(): void;
+    _union(other: Set<T>): Set<T>;
+    union(other: Set<T>): Set<T>;
+}
+/**
+ * Returns a set-like object that intercepts the setter function to
+ * trigger re-renders on change. Also adds a toggle and reset method.
+ *
+ * @example
+ *
+ * ```typescript
+ * function MyComponent() {
+ *   const optionalInitialValue = new Set()
+ *   const set = useSet2(optionalInitialValue)
+
+ *   // ... Use set like you would a vanilla JS Set
+ * ```
+ */
+export declare function useSet2<T>(initial?: Set<T>): UseSet2<T>;

package/cjs/useSet2.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSet2 = void 0;
+const react_1 = require("react");
+const react_use_1 = require("react-use");
+/**
+ * Returns a set-like object that intercepts the setter function to
+ * trigger re-renders on change. Also adds a toggle and reset method.
+ *
+ * @example
+ *
+ * ```typescript
+ * function MyComponent() {
+ *   const optionalInitialValue = new Set()
+ *   const set = useSet2(optionalInitialValue)
+
+ *   // ... Use set like you would a vanilla JS Set
+ * ```
+ */
+function useSet2(initial = new Set()) {
+    const rerender = (0, react_use_1.useUpdate)();
+    const setRef = (0, react_1.useRef)(initial);
+    const set = setRef.current;
+    if (!set._add) {
+        set._add = set.add;
+        set.add = v => {
+            set._add(v);
+            rerender();
+            return set;
+        };
+        set._clear = set.clear;
+        set.clear = () => {
+            set._clear();
+            rerender();
+            return set;
+        };
+        set._delete = set.delete;
+        set.delete = v => {
+            const res = set._delete(v);
+            rerender();
+            return res;
+        };
+        set.reset = () => {
+            set._clear();
+            set._union(initial);
+            rerender();
+            return set;
+        };
+        set.toggle = v => {
+            if (set.has(v))
+                set._delete(v);
+            else
+                set._add(v);
+            rerender();
+            return set;
+        };
+        set._union = (other) => {
+            for (const elem of other) {
+                set._add(elem);
+            }
+            return set;
+        };
+        set.union = (other) => {
+            set._union(other);
+            rerender();
+            return set;
+        };
+    }
+    return set;
+}
+exports.useSet2 = useSet2;
+//# sourceMappingURL=useSet2.js.map

package/cjs/useSet2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSet2.js","sourceRoot":"","sources":["../src/useSet2.ts"],"names":[],"mappings":";;;AAAA,iCAA4B;AAC5B,yCAAmC;AAYnC;;;;;;;;;;;;;GAaG;AACH,SAAgB,OAAO,CAAI,UAAkB,IAAI,GAAG,EAAE;IACpD,MAAM,QAAQ,GAAG,IAAA,qBAAS,GAAE,CAAA;IAC5B,MAAM,MAAM,GAAG,IAAA,cAAM,EAAC,OAAgC,CAAC,CAAA;IACvD,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAA;IAE1B,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;QACb,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,CAAA;QAClB,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE;YACZ,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;YACX,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACZ,CAAC,CAAA;QAED,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,KAAK,CAAA;QACtB,GAAG,CAAC,KAAK,GAAG,GAAG,EAAE;YACf,GAAG,CAAC,MAAM,EAAE,CAAA;YACZ,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACZ,CAAC,CAAA;QAED,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,MAAM,CAAA;QACxB,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE;YACf,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;YAC1B,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACZ,CAAC,CAAA;QAED,GAAG,CAAC,KAAK,GAAG,GAAG,EAAE;YACf,GAAG,CAAC,MAAM,EAAE,CAAA;YACZ,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YACnB,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACZ,CAAC,CAAA;QAED,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE;YACf,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;gBAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;;gBACzB,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;YAChB,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACZ,CAAC,CAAA;QAED,GAAG,CAAC,MAAM,GAAG,CAAC,KAAa,EAAE,EAAE;YAC7B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;aACf;YACD,OAAO,GAAG,CAAA;QACZ,CAAC,CAAA;QAED,GAAG,CAAC,KAAK,GAAG,CAAC,KAAa,EAAE,EAAE;YAC5B,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACjB,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACZ,CAAC,CAAA;KACF;IAED,OAAO,GAAG,CAAA;AACZ,CAAC;AAxDD,0BAwDC"}

package/cjs/useSet2.ts

@@ -0,0 +1,84 @@
+import {useRef} from 'react'
+import {useUpdate} from 'react-use'
+
+export interface UseSet2<T> extends Set<T> {
+  _add: Set<T>['add']
+  _clear: Set<T>['clear']
+  _delete: Set<T>['delete']
+  toggle(v: T): void
+  reset(): void
+  _union(other: Set<T>): Set<T>
+  union(other: Set<T>): Set<T>
+}
+
+/**
+ * Returns a set-like object that intercepts the setter function to
+ * trigger re-renders on change. Also adds a toggle and reset method.
+ * 
+ * @example
+ * 
+ * ```typescript
+ * function MyComponent() {
+ *   const optionalInitialValue = new Set()
+ *   const set = useSet2(optionalInitialValue)
+
+ *   // ... Use set like you would a vanilla JS Set
+ * ```
+ */
+export function useSet2<T>(initial: Set<T> = new Set()) {
+  const rerender = useUpdate()
+  const setRef = useRef(initial as unknown as UseSet2<T>)
+  const set = setRef.current
+
+  if (!set._add) {
+    set._add = set.add
+    set.add = v => {
+      set._add(v)
+      rerender()
+      return set
+    }
+
+    set._clear = set.clear
+    set.clear = () => {
+      set._clear()
+      rerender()
+      return set
+    }
+
+    set._delete = set.delete
+    set.delete = v => {
+      const res = set._delete(v)
+      rerender()
+      return res
+    }
+
+    set.reset = () => {
+      set._clear()
+      set._union(initial)
+      rerender()
+      return set
+    }
+
+    set.toggle = v => {
+      if (set.has(v)) set._delete(v)
+      else set._add(v)
+      rerender()
+      return set
+    }
+
+    set._union = (other: Set<T>) => {
+      for (const elem of other) {
+        set._add(elem)
+      }
+      return set
+    }
+
+    set.union = (other: Set<T>) => {
+      set._union(other)
+      rerender()
+      return set
+    }
+  }
+
+  return set
+}

package/esm/@types/global.d.ts

@@ -0,0 +1 @@
+type Fnc = (...args: any) => any

package/esm/index.d.ts

@@ -0,0 +1,9 @@
+export * from '@slimr/forms';
+export * from '@slimr/markdown';
+export * from '@slimr/router';
+export * from '@slimr/styled';
+export * from '@slimr/swr';
+export * from '@slimr/util';
+export * from 'react-use';
+export * from './useMemos.js';
+export * from './useSet2.js';

package/esm/index.js

@@ -0,0 +1,10 @@
+export * from '@slimr/forms';
+export * from '@slimr/markdown';
+export * from '@slimr/router';
+export * from '@slimr/styled';
+export * from '@slimr/swr';
+export * from '@slimr/util';
+export * from 'react-use';
+export * from './useMemos.js';
+export * from './useSet2.js';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AAEzB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA"}

package/esm/index.ts

@@ -0,0 +1,10 @@
+export * from '@slimr/forms'
+export * from '@slimr/markdown'
+export * from '@slimr/router'
+export * from '@slimr/styled'
+export * from '@slimr/swr'
+export * from '@slimr/util'
+export * from 'react-use'
+
+export * from './useMemos.js'
+export * from './useSet2.js'

package/esm/useMemos.d.ts

@@ -0,0 +1,14 @@
+type Fnc = (...args: any[]) => any;
+/**
+ * Like useMemo, but does a deep compare instead default compare
+ * to avoid misfires. Is more expensive than useMemo though,
+ * so use it intensionally.
+ */
+export declare function useDeepCompareMemo(callback: Fnc, varsToWatch: any[]): any;
+/**
+ * Like useMemo, but does a shallow compare instead default compare
+ * to avoid misfires. Is more expensive than useMemo though, but
+ * less than useDeepCompareMemo, so use it intentionally.
+ */
+export declare function useShallowCompareMemo(callback: Fnc, varsToWatch: any[]): any;
+export {};

package/esm/useMemos.js

@@ -0,0 +1,31 @@
+import { areNotEqualDeep } from '@slimr/util';
+import { useEffect, useMemo, useState } from 'react';
+/**
+ * Like useMemo, but does a deep compare instead default compare
+ * to avoid misfires. Is more expensive than useMemo though,
+ * so use it intensionally.
+ */
+export function useDeepCompareMemo(callback, varsToWatch) {
+    const [lastSeenProps, setLastSeenProps] = useState(varsToWatch);
+    useEffect(() => {
+        if (areNotEqualDeep(varsToWatch, lastSeenProps)) {
+            setLastSeenProps(varsToWatch);
+        }
+    }, varsToWatch);
+    return useMemo(callback, [lastSeenProps]);
+}
+/**
+ * Like useMemo, but does a shallow compare instead default compare
+ * to avoid misfires. Is more expensive than useMemo though, but
+ * less than useDeepCompareMemo, so use it intentionally.
+ */
+export function useShallowCompareMemo(callback, varsToWatch) {
+    const [lastSeenProps, setLastSeenProps] = useState(varsToWatch);
+    useEffect(() => {
+        if (areNotEqualDeep(varsToWatch, lastSeenProps)) {
+            setLastSeenProps(varsToWatch);
+        }
+    }, varsToWatch);
+    return useMemo(callback, [lastSeenProps]);
+}
+//# sourceMappingURL=useMemos.js.map

package/esm/useMemos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMemos.js","sourceRoot":"","sources":["../src/useMemos.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAA;AAIlD;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAC,QAAa,EAAE,WAAkB;IAClE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IAC/D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,CAAC,WAAW,EAAE,aAAa,CAAC,EAAE;YAC/C,gBAAgB,CAAC,WAAW,CAAC,CAAA;SAC9B;IACH,CAAC,EAAE,WAAW,CAAC,CAAA;IACf,OAAO,OAAO,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;AAC3C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAAC,QAAa,EAAE,WAAkB;IACrE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IAC/D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,CAAC,WAAW,EAAE,aAAa,CAAC,EAAE;YAC/C,gBAAgB,CAAC,WAAW,CAAC,CAAA;SAC9B;IACH,CAAC,EAAE,WAAW,CAAC,CAAA;IACf,OAAO,OAAO,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;AAC3C,CAAC"}

package/esm/useMemos.ts

@@ -0,0 +1,34 @@
+import {areNotEqualDeep} from '@slimr/util'
+import {useEffect, useMemo, useState} from 'react'
+
+type Fnc = (...args: any[]) => any
+
+/**
+ * Like useMemo, but does a deep compare instead default compare
+ * to avoid misfires. Is more expensive than useMemo though,
+ * so use it intensionally.
+ */
+export function useDeepCompareMemo(callback: Fnc, varsToWatch: any[]) {
+  const [lastSeenProps, setLastSeenProps] = useState(varsToWatch)
+  useEffect(() => {
+    if (areNotEqualDeep(varsToWatch, lastSeenProps)) {
+      setLastSeenProps(varsToWatch)
+    }
+  }, varsToWatch)
+  return useMemo(callback, [lastSeenProps])
+}
+
+/**
+ * Like useMemo, but does a shallow compare instead default compare
+ * to avoid misfires. Is more expensive than useMemo though, but
+ * less than useDeepCompareMemo, so use it intentionally.
+ */
+export function useShallowCompareMemo(callback: Fnc, varsToWatch: any[]) {
+  const [lastSeenProps, setLastSeenProps] = useState(varsToWatch)
+  useEffect(() => {
+    if (areNotEqualDeep(varsToWatch, lastSeenProps)) {
+      setLastSeenProps(varsToWatch)
+    }
+  }, varsToWatch)
+  return useMemo(callback, [lastSeenProps])
+}

package/esm/useSet2.d.ts

@@ -0,0 +1,24 @@
+export interface UseSet2<T> extends Set<T> {
+    _add: Set<T>['add'];
+    _clear: Set<T>['clear'];
+    _delete: Set<T>['delete'];
+    toggle(v: T): void;
+    reset(): void;
+    _union(other: Set<T>): Set<T>;
+    union(other: Set<T>): Set<T>;
+}
+/**
+ * Returns a set-like object that intercepts the setter function to
+ * trigger re-renders on change. Also adds a toggle and reset method.
+ *
+ * @example
+ *
+ * ```typescript
+ * function MyComponent() {
+ *   const optionalInitialValue = new Set()
+ *   const set = useSet2(optionalInitialValue)
+
+ *   // ... Use set like you would a vanilla JS Set
+ * ```
+ */
+export declare function useSet2<T>(initial?: Set<T>): UseSet2<T>;

package/esm/useSet2.js

@@ -0,0 +1,68 @@
+import { useRef } from 'react';
+import { useUpdate } from 'react-use';
+/**
+ * Returns a set-like object that intercepts the setter function to
+ * trigger re-renders on change. Also adds a toggle and reset method.
+ *
+ * @example
+ *
+ * ```typescript
+ * function MyComponent() {
+ *   const optionalInitialValue = new Set()
+ *   const set = useSet2(optionalInitialValue)
+
+ *   // ... Use set like you would a vanilla JS Set
+ * ```
+ */
+export function useSet2(initial = new Set()) {
+    const rerender = useUpdate();
+    const setRef = useRef(initial);
+    const set = setRef.current;
+    if (!set._add) {
+        set._add = set.add;
+        set.add = v => {
+            set._add(v);
+            rerender();
+            return set;
+        };
+        set._clear = set.clear;
+        set.clear = () => {
+            set._clear();
+            rerender();
+            return set;
+        };
+        set._delete = set.delete;
+        set.delete = v => {
+            const res = set._delete(v);
+            rerender();
+            return res;
+        };
+        set.reset = () => {
+            set._clear();
+            set._union(initial);
+            rerender();
+            return set;
+        };
+        set.toggle = v => {
+            if (set.has(v))
+                set._delete(v);
+            else
+                set._add(v);
+            rerender();
+            return set;
+        };
+        set._union = (other) => {
+            for (const elem of other) {
+                set._add(elem);
+            }
+            return set;
+        };
+        set.union = (other) => {
+            set._union(other);
+            rerender();
+            return set;
+        };
+    }
+    return set;
+}
+//# sourceMappingURL=useSet2.js.map

package/esm/useSet2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSet2.js","sourceRoot":"","sources":["../src/useSet2.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAC5B,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAA;AAYnC;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,OAAO,CAAI,UAAkB,IAAI,GAAG,EAAE;IACpD,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAA;IAC5B,MAAM,MAAM,GAAG,MAAM,CAAC,OAAgC,CAAC,CAAA;IACvD,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAA;IAE1B,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;QACb,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,CAAA;QAClB,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE;YACZ,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;YACX,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACZ,CAAC,CAAA;QAED,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,KAAK,CAAA;QACtB,GAAG,CAAC,KAAK,GAAG,GAAG,EAAE;YACf,GAAG,CAAC,MAAM,EAAE,CAAA;YACZ,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACZ,CAAC,CAAA;QAED,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,MAAM,CAAA;QACxB,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE;YACf,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;YAC1B,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACZ,CAAC,CAAA;QAED,GAAG,CAAC,KAAK,GAAG,GAAG,EAAE;YACf,GAAG,CAAC,MAAM,EAAE,CAAA;YACZ,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YACnB,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACZ,CAAC,CAAA;QAED,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE;YACf,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;gBAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;;gBACzB,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;YAChB,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACZ,CAAC,CAAA;QAED,GAAG,CAAC,MAAM,GAAG,CAAC,KAAa,EAAE,EAAE;YAC7B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;aACf;YACD,OAAO,GAAG,CAAA;QACZ,CAAC,CAAA;QAED,GAAG,CAAC,KAAK,GAAG,CAAC,KAAa,EAAE,EAAE;YAC5B,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACjB,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACZ,CAAC,CAAA;KACF;IAED,OAAO,GAAG,CAAA;AACZ,CAAC"}

package/esm/useSet2.ts

@@ -0,0 +1,84 @@
+import {useRef} from 'react'
+import {useUpdate} from 'react-use'
+
+export interface UseSet2<T> extends Set<T> {
+  _add: Set<T>['add']
+  _clear: Set<T>['clear']
+  _delete: Set<T>['delete']
+  toggle(v: T): void
+  reset(): void
+  _union(other: Set<T>): Set<T>
+  union(other: Set<T>): Set<T>
+}
+
+/**
+ * Returns a set-like object that intercepts the setter function to
+ * trigger re-renders on change. Also adds a toggle and reset method.
+ * 
+ * @example
+ * 
+ * ```typescript
+ * function MyComponent() {
+ *   const optionalInitialValue = new Set()
+ *   const set = useSet2(optionalInitialValue)
+
+ *   // ... Use set like you would a vanilla JS Set
+ * ```
+ */
+export function useSet2<T>(initial: Set<T> = new Set()) {
+  const rerender = useUpdate()
+  const setRef = useRef(initial as unknown as UseSet2<T>)
+  const set = setRef.current
+
+  if (!set._add) {
+    set._add = set.add
+    set.add = v => {
+      set._add(v)
+      rerender()
+      return set
+    }
+
+    set._clear = set.clear
+    set.clear = () => {
+      set._clear()
+      rerender()
+      return set
+    }
+
+    set._delete = set.delete
+    set.delete = v => {
+      const res = set._delete(v)
+      rerender()
+      return res
+    }
+
+    set.reset = () => {
+      set._clear()
+      set._union(initial)
+      rerender()
+      return set
+    }
+
+    set.toggle = v => {
+      if (set.has(v)) set._delete(v)
+      else set._add(v)
+      rerender()
+      return set
+    }
+
+    set._union = (other: Set<T>) => {
+      for (const elem of other) {
+        set._add(elem)
+      }
+      return set
+    }
+
+    set.union = (other: Set<T>) => {
+      set._union(other)
+      rerender()
+      return set
+    }
+  }
+
+  return set
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@slimr/react",
+  "version": "2.1.45",
+  "author": "Brian Dombrowski",
+  "license": "ISC",
+  "private": false,
+  "sideEffects": false,
+  "keywords": [
+    "preact",
+    "react",
+    "swr"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bdombro/slimr.git"
+  },
+  "type": "module",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "exports": {
+    ".": {
+      "require": "./cjs/index.js",
+      "import": "./esm/index.js"
+    }
+  },
+  "scripts": {
+    "build": "run-p build:*",
+    "build:esm": "OUT=esm; tsc -d --outDir $OUT --noEmit false && cp -r src/* $OUT",
+    "build:cjs": "OUT=cjs; tsc -d -m commonjs --moduleResolution node --outDir $OUT --noEmit false && cp -r src/* $OUT",
+    "clean": "rm -rf esm cjs",
+    "prepack": "run-s build",
+    "start": "nodemon -w src -e '*' -x 'npm run build && cd ../demo && npm start'"
+  },
+  "dependencies": {
+    "@slimr/forms": "^4.1.42",
+    "@slimr/swr": "^2.1.33",
+    "@slimr/util": "^3.2.36",
+    "react-use": "17"
+  },
+  "peerDependencies": {
+    "@types/react": "^16.8  || ^17 || ^18",
+    "@types/react-dom": "^16.8  || ^17 || ^18",
+    "react": "^16.8  || ^17 || ^18",
+    "react-dom": "^16.8  || ^17 || ^18"
+  }
+}

package/src/@types/global.d.ts

@@ -0,0 +1 @@
+type Fnc = (...args: any) => any

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from '@slimr/forms'
+export * from '@slimr/markdown'
+export * from '@slimr/router'
+export * from '@slimr/styled'
+export * from '@slimr/swr'
+export * from '@slimr/util'
+export * from 'react-use'
+
+export * from './useMemos.js'
+export * from './useSet2.js'

package/src/useMemos.ts

@@ -0,0 +1,34 @@
+import {areNotEqualDeep} from '@slimr/util'
+import {useEffect, useMemo, useState} from 'react'
+
+type Fnc = (...args: any[]) => any
+
+/**
+ * Like useMemo, but does a deep compare instead default compare
+ * to avoid misfires. Is more expensive than useMemo though,
+ * so use it intensionally.
+ */
+export function useDeepCompareMemo(callback: Fnc, varsToWatch: any[]) {
+  const [lastSeenProps, setLastSeenProps] = useState(varsToWatch)
+  useEffect(() => {
+    if (areNotEqualDeep(varsToWatch, lastSeenProps)) {
+      setLastSeenProps(varsToWatch)
+    }
+  }, varsToWatch)
+  return useMemo(callback, [lastSeenProps])
+}
+
+/**
+ * Like useMemo, but does a shallow compare instead default compare
+ * to avoid misfires. Is more expensive than useMemo though, but
+ * less than useDeepCompareMemo, so use it intentionally.
+ */
+export function useShallowCompareMemo(callback: Fnc, varsToWatch: any[]) {
+  const [lastSeenProps, setLastSeenProps] = useState(varsToWatch)
+  useEffect(() => {
+    if (areNotEqualDeep(varsToWatch, lastSeenProps)) {
+      setLastSeenProps(varsToWatch)
+    }
+  }, varsToWatch)
+  return useMemo(callback, [lastSeenProps])
+}

package/src/useSet2.ts

@@ -0,0 +1,84 @@
+import {useRef} from 'react'
+import {useUpdate} from 'react-use'
+
+export interface UseSet2<T> extends Set<T> {
+  _add: Set<T>['add']
+  _clear: Set<T>['clear']
+  _delete: Set<T>['delete']
+  toggle(v: T): void
+  reset(): void
+  _union(other: Set<T>): Set<T>
+  union(other: Set<T>): Set<T>
+}
+
+/**
+ * Returns a set-like object that intercepts the setter function to
+ * trigger re-renders on change. Also adds a toggle and reset method.
+ * 
+ * @example
+ * 
+ * ```typescript
+ * function MyComponent() {
+ *   const optionalInitialValue = new Set()
+ *   const set = useSet2(optionalInitialValue)
+
+ *   // ... Use set like you would a vanilla JS Set
+ * ```
+ */
+export function useSet2<T>(initial: Set<T> = new Set()) {
+  const rerender = useUpdate()
+  const setRef = useRef(initial as unknown as UseSet2<T>)
+  const set = setRef.current
+
+  if (!set._add) {
+    set._add = set.add
+    set.add = v => {
+      set._add(v)
+      rerender()
+      return set
+    }
+
+    set._clear = set.clear
+    set.clear = () => {
+      set._clear()
+      rerender()
+      return set
+    }
+
+    set._delete = set.delete
+    set.delete = v => {
+      const res = set._delete(v)
+      rerender()
+      return res
+    }
+
+    set.reset = () => {
+      set._clear()
+      set._union(initial)
+      rerender()
+      return set
+    }
+
+    set.toggle = v => {
+      if (set.has(v)) set._delete(v)
+      else set._add(v)
+      rerender()
+      return set
+    }
+
+    set._union = (other: Set<T>) => {
+      for (const elem of other) {
+        set._add(elem)
+      }
+      return set
+    }
+
+    set.union = (other: Set<T>) => {
+      set._union(other)
+      rerender()
+      return set
+    }
+  }
+
+  return set
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}