@koine/react 2.0.0-alpha.4 → 2.0.0-beta.10

package/hooks/useAsyncFn.js

@@ -1,41 +1,56 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAsyncFn = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var useMountedState_1 = require("./useMountedState");
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
- */
-function useAsyncFn(fn, deps, initialState) {
-    if (deps === void 0) { deps = []; }
-    if (initialState === void 0) { initialState = { loading: false }; }
-    var lastCallId = (0, react_1.useRef)(0);
-    var isMounted = (0, useMountedState_1.useMountedState)();
-    var _a = (0, react_1.useState)(initialState), state = _a[0], set = _a[1];
-    var callback = (0, react_1.useCallback)(function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        var callId = ++lastCallId.current;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useAsyncFn: function() {
+        return useAsyncFn;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useMountedState = require("./useMountedState");
+function useAsyncFn(fn, deps = [], initialState = {
+    loading: false
+}) {
+    const lastCallId = (0, _react.useRef)(0);
+    const isMounted = (0, _useMountedState.useMountedState)();
+    const [state, set] = (0, _react.useState)(initialState);
+    const callback = (0, _react.useCallback)((...args)=>{
+        const callId = ++lastCallId.current;
         if (!state.loading) {
-            set(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { loading: true })); });
+            set((prevState)=>({
+                    ...prevState,
+                    loading: true
+                }));
         }
-        return fn.apply(void 0, args).then(function (value) {
-            isMounted() &&
-                callId === lastCallId.current &&
-                set({ value: value, loading: false });
+        return fn(...args).then((value)=>{
+            isMounted() && callId === lastCallId.current && set({
+                value,
+                loading: false
+            });
             return value;
-        }, function (error) {
-            isMounted() &&
-                callId === lastCallId.current &&
-                set({ error: error, loading: false });
+        }, (error)=>{
+            isMounted() && callId === lastCallId.current && set({
+                error,
+                loading: false
+            });
             return error;
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
-    return [state, callback];
+    return [
+        state,
+        callback
+    ];
 }
-exports.useAsyncFn = useAsyncFn;
-exports.default = useAsyncFn;
+const _default = useAsyncFn;

package/hooks/useAsyncFn.mjs

@@ -1,37 +1,39 @@
-import { __assign } from "tslib";
-import { useCallback, useRef, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import { useMountedState } from "./useMountedState";
 /**
  * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
- */
-export function useAsyncFn(fn, deps, initialState) {
-    if (deps === void 0) { deps = []; }
-    if (initialState === void 0) { initialState = { loading: false }; }
-    var lastCallId = useRef(0);
-    var isMounted = useMountedState();
-    var _a = useState(initialState), state = _a[0], set = _a[1];
-    var callback = useCallback(function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        var callId = ++lastCallId.current;
+ */ export function useAsyncFn(fn, deps = [], initialState = {
+    loading: false
+}) {
+    const lastCallId = useRef(0);
+    const isMounted = useMountedState();
+    const [state, set] = useState(initialState);
+    const callback = useCallback((...args)=>{
+        const callId = ++lastCallId.current;
         if (!state.loading) {
-            set(function (prevState) { return (__assign(__assign({}, prevState), { loading: true })); });
+            set((prevState)=>({
+                    ...prevState,
+                    loading: true
+                }));
         }
-        return fn.apply(void 0, args).then(function (value) {
-            isMounted() &&
-                callId === lastCallId.current &&
-                set({ value: value, loading: false });
+        return fn(...args).then((value)=>{
+            isMounted() && callId === lastCallId.current && set({
+                value,
+                loading: false
+            });
             return value;
-        }, function (error) {
-            isMounted() &&
-                callId === lastCallId.current &&
-                set({ error: error, loading: false });
+        }, (error)=>{
+            isMounted() && callId === lastCallId.current && set({
+                error,
+                loading: false
+            });
             return error;
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
-    return [state, callback];
+    return [
+        state,
+        callback
+    ];
 }
 export default useAsyncFn;

package/hooks/useDateLocale.js

@@ -1,41 +1,51 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDateLocale = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-/**
- * Dynamically import the date-fns correct locale
- *
- * Inspired by:
- * @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
- */
-function useDateLocale(locale, defaultLocale) {
-    var _this = this;
-    if (defaultLocale === void 0) { defaultLocale = "en"; }
-    var _a = (0, react_1.useState)(), data = _a[0], setData = _a[1];
-    var _b = (0, react_1.useState)(defaultLocale), current = _b[0], setCurrent = _b[1];
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useDateLocale: function() {
+        return useDateLocale;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = require("react");
+function useDateLocale(locale, defaultLocale = "en") {
+    const [data, setData] = (0, _react.useState)();
+    const [current, setCurrent] = (0, _react.useState)(defaultLocale);
     // const [ready, setReady] = useState(false);
     // If the user changes the locale listen to the change and import the locale that is now required.
-    (0, react_1.useEffect)(function () {
-        var importLocaleFile = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-            var localeToSet;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, Promise.resolve().then(function () { return tslib_1.__importStar(require("date-fns/locale/en-US/index.js")); })];
-                    case 1:
-                        localeToSet = _a.sent();
-                        setCurrent(locale || current);
-                        setData(localeToSet.default);
-                        return [2 /*return*/];
-                }
-            });
-        }); };
+    (0, _react.useEffect)(()=>{
+        const importLocaleFile = async ()=>{
+            // This webpack option stops all of the date-fns files being imported and chunked.
+            // NB: this makes unnecessary numerous webpack chunks in applications
+            // that do not even use this hook, so we comment out the webpack dynamic
+            // import and its magic comment
+            // const localeToSet = await import(
+            //   /FIXME: * webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
+            //   `date-fns/locale/${locale}/index.js`,
+            // );
+            const localeToSet = await Promise.resolve(`date-fns/locale/en-US/index.js`).then((p)=>/*#__PURE__*/ _interop_require_wildcard._(require(p)));
+            setCurrent(locale || current);
+            setData(localeToSet.default);
+        // setReady(true);
+        };
         // If the locale has not yet been loaded.
         if (locale !== current) {
             importLocaleFile();
         }
-    }, [locale, current]);
+    }, [
+        locale,
+        current
+    ]);
     return data;
 }
-exports.useDateLocale = useDateLocale;
-exports.default = useDateLocale;
+const _default = useDateLocale;

package/hooks/useDateLocale.mjs

@@ -1,37 +1,37 @@
-import { __awaiter, __generator } from "tslib";
 import { useEffect, useState } from "react";
 /**
  * Dynamically import the date-fns correct locale
  *
  * Inspired by:
  * @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
- */
-export function useDateLocale(locale, defaultLocale) {
-    var _this = this;
-    if (defaultLocale === void 0) { defaultLocale = "en"; }
-    var _a = useState(), data = _a[0], setData = _a[1];
-    var _b = useState(defaultLocale), current = _b[0], setCurrent = _b[1];
+ */ export function useDateLocale(locale, defaultLocale = "en") {
+    const [data, setData] = useState();
+    const [current, setCurrent] = useState(defaultLocale);
     // const [ready, setReady] = useState(false);
     // If the user changes the locale listen to the change and import the locale that is now required.
-    useEffect(function () {
-        var importLocaleFile = function () { return __awaiter(_this, void 0, void 0, function () {
-            var localeToSet;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, import("date-fns/locale/en-US/index.js")];
-                    case 1:
-                        localeToSet = _a.sent();
-                        setCurrent(locale || current);
-                        setData(localeToSet.default);
-                        return [2 /*return*/];
-                }
-            });
-        }); };
+    useEffect(()=>{
+        const importLocaleFile = async ()=>{
+            // This webpack option stops all of the date-fns files being imported and chunked.
+            // NB: this makes unnecessary numerous webpack chunks in applications
+            // that do not even use this hook, so we comment out the webpack dynamic
+            // import and its magic comment
+            // const localeToSet = await import(
+            //   /FIXME: * webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
+            //   `date-fns/locale/${locale}/index.js`,
+            // );
+            const localeToSet = await import(`date-fns/locale/en-US/index.js`);
+            setCurrent(locale || current);
+            setData(localeToSet.default);
+        // setReady(true);
+        };
         // If the locale has not yet been loaded.
         if (locale !== current) {
             importLocaleFile();
         }
-    }, [locale, current]);
+    }, [
+        locale,
+        current
+    ]);
     return data;
 }
 export default useDateLocale;

package/hooks/useFirstMountState.js

@@ -1,17 +1,28 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFirstMountState = void 0;
-var react_1 = require("react");
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
- */
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useFirstMountState: function() {
+        return useFirstMountState;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _react = require("react");
 function useFirstMountState() {
-    var isFirst = (0, react_1.useRef)(true);
+    const isFirst = (0, _react.useRef)(true);
     if (isFirst.current) {
         isFirst.current = false;
         return true;
     }
     return isFirst.current;
 }
-exports.useFirstMountState = useFirstMountState;
-exports.default = useFirstMountState;
+const _default = useFirstMountState;

package/hooks/useFirstMountState.mjs

@@ -1,9 +1,8 @@
 import { useRef } from "react";
 /**
  * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
- */
-export function useFirstMountState() {
-    var isFirst = useRef(true);
+ */ export function useFirstMountState() {
+    const isFirst = useRef(true);
     if (isFirst.current) {
         isFirst.current = false;
         return true;

package/hooks/useFixedOffset.js

@@ -1,31 +1,37 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFixedOffset = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var injectCss_1 = tslib_1.__importDefault(require("@koine/dom/injectCss"));
-var calculateFixedOffset_1 = tslib_1.__importDefault(require("@koine/dom/calculateFixedOffset"));
-var listenResizeDebounced_1 = tslib_1.__importDefault(require("@koine/dom/listenResizeDebounced"));
-var _each_1 = tslib_1.__importDefault(require("@koine/dom/$each"));
-var debounce_1 = tslib_1.__importDefault(require("@koine/utils/debounce"));
-var useIsomorphicLayoutEffect_1 = tslib_1.__importDefault(require("./useIsomorphicLayoutEffect"));
-var inject = function (value) {
-    (0, injectCss_1.default)("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useFixedOffset: function() {
+        return useFixedOffset;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _react = require("react");
+const _debounce = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/debounce"));
+const _$each = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/$each"));
+const _calculateFixedOffset = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/calculateFixedOffset"));
+const _injectCss = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/injectCss"));
+const _listenResizeDebounced = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/listenResizeDebounced"));
+const _useIsomorphicLayoutEffect = /*#__PURE__*/ _interop_require_default._(require("./useIsomorphicLayoutEffect"));
+const inject = (value)=>{
+    (0, _injectCss.default)("useFixedOffset", `html{scroll-padding-top: ${value}px}`);
 };
-/**
- * # Use fixed offset
- *
- * Maybe use [ResizeObserver polyfill](https://github.com/juggle/resize-observer)
- *
- * @see https://web.dev/resize-observer/
- *
- * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
- */
 function useFixedOffset(selector) {
-    var fixedOffset = (0, react_1.useRef)(0);
-    (0, useIsomorphicLayoutEffect_1.default)(function () {
-        var update = function () {
-            var newFixedOffset = (0, calculateFixedOffset_1.default)();
+    const fixedOffset = (0, _react.useRef)(0);
+    (0, _useIsomorphicLayoutEffect.default)(()=>{
+        const update = ()=>{
+            const newFixedOffset = (0, _calculateFixedOffset.default)();
             fixedOffset.current = newFixedOffset;
             // inject this CSS make the hashed deeplinks position the scroll at the
             // right offset
@@ -34,29 +40,28 @@ function useFixedOffset(selector) {
         update();
         if (ResizeObserver) {
             // const elements = $$("[data-fixed]");
-            var observer_1 = new ResizeObserver(function (entries) {
-                var newFixedOffset = 0;
-                entries.forEach(function (entry) {
+            const observer = new ResizeObserver((entries)=>{
+                let newFixedOffset = 0;
+                entries.forEach((entry)=>{
                     newFixedOffset += entry.contentRect.height;
                 });
                 fixedOffset.current = newFixedOffset;
-                var updateOnResize = (0, debounce_1.default)(function () { return inject(newFixedOffset); }, 400, true);
+                const updateOnResize = (0, _debounce.default)(()=>inject(newFixedOffset), 400, true);
                 updateOnResize();
             });
-            (0, _each_1.default)(selector || "[data-fixed]", function ($el) {
-                if (observer_1)
-                    observer_1.observe($el);
+            (0, _$each.default)(selector || "[data-fixed]", ($el)=>{
+                if (observer) observer.observe($el);
             });
-            return function () {
-                observer_1 === null || observer_1 === void 0 ? void 0 : observer_1.disconnect();
+            return ()=>{
+                observer?.disconnect();
             };
-        }
-        else {
-            var listener = (0, listenResizeDebounced_1.default)(0, update);
+        } else {
+            const listener = (0, _listenResizeDebounced.default)(0, update);
             return listener;
         }
-    }, [selector]);
+    }, [
+        selector
+    ]);
     return fixedOffset;
 }
-exports.useFixedOffset = useFixedOffset;
-exports.default = useFixedOffset;
+const _default = useFixedOffset;

package/hooks/useFixedOffset.mjs

@@ -1,12 +1,12 @@
 import { useRef } from "react";
-import injectCss from "@koine/dom/injectCss";
+import debounce from "@koine/utils/debounce";
+import $each from "@koine/dom/$each";
 import calculateFixedOffset from "@koine/dom/calculateFixedOffset";
+import injectCss from "@koine/dom/injectCss";
 import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
-import $each from "@koine/dom/$each";
-import debounce from "@koine/utils/debounce";
 import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
-var inject = function (value) {
-    injectCss("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
+const inject = (value)=>{
+    injectCss("useFixedOffset", `html{scroll-padding-top: ${value}px}`);
 };
 /**
  * # Use fixed offset
@@ -16,12 +16,11 @@ var inject = function (value) {
  * @see https://web.dev/resize-observer/
  *
  * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
- */
-export function useFixedOffset(selector) {
-    var fixedOffset = useRef(0);
-    useIsomorphicLayoutEffect(function () {
-        var update = function () {
-            var newFixedOffset = calculateFixedOffset();
+ */ export function useFixedOffset(selector) {
+    const fixedOffset = useRef(0);
+    useIsomorphicLayoutEffect(()=>{
+        const update = ()=>{
+            const newFixedOffset = calculateFixedOffset();
             fixedOffset.current = newFixedOffset;
             // inject this CSS make the hashed deeplinks position the scroll at the
             // right offset
@@ -30,28 +29,28 @@ export function useFixedOffset(selector) {
         update();
         if (ResizeObserver) {
             // const elements = $$("[data-fixed]");
-            var observer_1 = new ResizeObserver(function (entries) {
-                var newFixedOffset = 0;
-                entries.forEach(function (entry) {
+            const observer = new ResizeObserver((entries)=>{
+                let newFixedOffset = 0;
+                entries.forEach((entry)=>{
                     newFixedOffset += entry.contentRect.height;
                 });
                 fixedOffset.current = newFixedOffset;
-                var updateOnResize = debounce(function () { return inject(newFixedOffset); }, 400, true);
+                const updateOnResize = debounce(()=>inject(newFixedOffset), 400, true);
                 updateOnResize();
             });
-            $each(selector || "[data-fixed]", function ($el) {
-                if (observer_1)
-                    observer_1.observe($el);
+            $each(selector || "[data-fixed]", ($el)=>{
+                if (observer) observer.observe($el);
             });
-            return function () {
-                observer_1 === null || observer_1 === void 0 ? void 0 : observer_1.disconnect();
+            return ()=>{
+                observer?.disconnect();
             };
-        }
-        else {
-            var listener = listenResizeDebounced(0, update);
+        } else {
+            const listener = listenResizeDebounced(0, update);
             return listener;
         }
-    }, [selector]);
+    }, [
+        selector
+    ]);
     return fixedOffset;
 }
 export default useFixedOffset;

package/hooks/useFocus.js

@@ -1,16 +1,30 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFocus = void 0;
-var react_1 = require("react");
-/**
- * @see https://stackoverflow.com/a/54159564/1938970
- */
-var useFocus = function () {
-    var elementRef = (0, react_1.useRef)(null);
-    var setFocus = function () {
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useFocus: function() {
+        return useFocus;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _react = require("react");
+const useFocus = ()=>{
+    const elementRef = (0, _react.useRef)(null);
+    const setFocus = ()=>{
         elementRef.current && elementRef.current.focus();
     };
-    return [elementRef, setFocus];
+    return [
+        elementRef,
+        setFocus
+    ];
 };
-exports.useFocus = useFocus;
-exports.default = exports.useFocus;
+const _default = useFocus;

package/hooks/useFocus.mjs

@@ -1,12 +1,14 @@
 import { useRef } from "react";
 /**
  * @see https://stackoverflow.com/a/54159564/1938970
- */
-export var useFocus = function () {
-    var elementRef = useRef(null);
-    var setFocus = function () {
+ */ export const useFocus = ()=>{
+    const elementRef = useRef(null);
+    const setFocus = ()=>{
         elementRef.current && elementRef.current.focus();
     };
-    return [elementRef, setFocus];
+    return [
+        elementRef,
+        setFocus
+    ];
 };
 export default useFocus;