@theorem/react - npm Package Compare versions

Comparing version 1.6.1 to 1.7.0

CHANGELOG.md

@@ -0,1 +1,5 @@
+# 1.7.0
+
+- Support IE11 syntactically
+
 # 1.6.1
@@ -2,0 +6,0 @@

dist/ActionArea/ActionArea.js

@@ -7,5 +7,5 @@ "use strict";
 exports.ActionArea = void 0;
-const react_1 = __importDefault(require("react"));
-const lib_1 = require("../lib");
-const baseStyles = lib_1.scopedStyles("ActionArea-base", {
+var react_1 = __importDefault(require("react"));
+var lib_1 = require("../lib");
+var baseStyles = lib_1.scopedStyles("ActionArea-base", {
     background: "none",
@@ -25,3 +25,3 @@ border: "none",
 });
-const disabledStyles = lib_1.scopedStyles("ActionArea-disabled", {
+var disabledStyles = lib_1.scopedStyles("ActionArea-disabled", {
     pointerEvents: "none",
@@ -33,18 +33,20 @@ // Must explicitly change the cursor to defualt. Otherwise, when "pointer-events: none"
 function ActionArea(props) {
-    const { action, children } = props;
-    const className = props.className || "";
-    const button = function (opts) {
-        const { onClick, onMouseDown, type } = opts;
-        return (react_1.default.createElement("button", { className: `${baseStyles} ${className}`, onClick: onClick, onMouseDown: onMouseDown, type: type || "button" }, children));
+    var action = props.action, children = props.children;
+    var className = props.className || "";
+    var button = function (opts) {
+        var onClick = opts.onClick, onMouseDown = opts.onMouseDown, type = opts.type;
+        return (react_1.default.createElement("button", { className: baseStyles + " " + className, onClick: onClick, onMouseDown: onMouseDown, type: type || "button" }, children));
     };
-    const span = function (extraClassName = "") {
-        return (react_1.default.createElement("span", { className: `${baseStyles} ${disabledStyles} ${className} ${extraClassName}` }, children));
+    var span = function (extraClassName) {
+        if (extraClassName === void 0) { extraClassName = ""; }
+        return (react_1.default.createElement("span", { className: baseStyles + " " + disabledStyles + " " + className + " " + extraClassName }, children));
     };
-    const link = function (url, opts = {}) {
-        const currentPath = props.currentPath ||
+    var link = function (url, opts) {
+        if (opts === void 0) { opts = {}; }
+        var currentPath = props.currentPath ||
             (typeof location !== "undefined" ? location.pathname : "");
-        const { download, newWindow } = opts;
+        var download = opts.download, newWindow = opts.newWindow;
         if (url === currentPath && !download)
             return span("current");
-        return (react_1.default.createElement("a", { className: `${baseStyles} ${className}`, download: download, href: url, rel: newWindow ? "noopener" : undefined, target: newWindow ? "_blank" : undefined }, children));
+        return (react_1.default.createElement("a", { className: baseStyles + " " + className, download: download, href: url, rel: newWindow ? "noopener" : undefined, target: newWindow ? "_blank" : undefined }, children));
     };
@@ -51,0 +53,0 @@ if (action === "disabled")

dist/ErrorBoundary.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -7,24 +20,27 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.ErrorBoundary = void 0;
-const react_1 = __importDefault(require("react"));
-class ErrorBoundary extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.state = { error: undefined };
-        this.reset = () => {
-            this.setState({ error: undefined });
+var react_1 = __importDefault(require("react"));
+var ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { error: undefined };
+        _this.reset = function () {
+            _this.setState({ error: undefined });
         };
+        return _this;
     }
-    componentDidCatch(error) {
+    ErrorBoundary.prototype.componentDidCatch = function (error) {
         this.props.reportError(error);
-        this.setState({ error });
-    }
-    render() {
+        this.setState({ error: error });
+    };
+    ErrorBoundary.prototype.render = function () {
         if (this.state.error) {
-            const Component = this.props.component;
+            var Component = this.props.component;
             return react_1.default.createElement(Component, { reset: this.reset });
         }
         return this.props.children;
-    }
-}
+    };
+    return ErrorBoundary;
+}(react_1.default.Component));
 exports.ErrorBoundary = ErrorBoundary;
 //# sourceMappingURL=ErrorBoundary.js.map

dist/lib/css/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.scopedStyles = exports.globalCss = void 0;
-let counter = 0;
+var counter = 0;
 function objectToString(selector, obj) {
-    const body = Object.entries(obj)
-        .map(([property, value]) => {
+    var body = Object.entries(obj)
+        .map(function (_a) {
+        var property = _a[0], value = _a[1];
         if (typeof value === "object")
             return "";
-        const cssProperty = property.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
-        const cssValue = typeof value === "number" ? `${value}px` : value;
-        return `${cssProperty}:${cssValue}`;
+        var cssProperty = property.replace(/[A-Z]/g, function (c) { return "-" + c.toLowerCase(); });
+        var cssValue = typeof value === "number" ? value + "px" : value;
+        return cssProperty + ":" + cssValue;
     })
-        .filter((row) => row)
+        .filter(function (row) { return row; })
         .join(";");
-    const nested = Object.entries(obj)
-        .map(([property, value]) => {
+    var nested = Object.entries(obj)
+        .map(function (_a) {
+        var property = _a[0], value = _a[1];
         if (typeof value !== "object")
@@ -22,10 +24,10 @@ return "";
             ? property.replace(/&/g, selector)
-            : `selector ${property}`, value);
+            : "selector " + property, value);
     })
         .join("");
-    return `${selector}{${body}}${nested}`;
+    return selector + "{" + body + "}" + nested;
 }
 function globalCss(window, css) {
-    const doc = window.document;
-    const s = doc.createElement("style");
+    var doc = window.document;
+    var s = doc.createElement("style");
     s.innerHTML = css;
@@ -37,6 +39,6 @@ doc.head.appendChild(s);
     counter += 1;
-    const name = `${prefix}-${counter}`;
-    const w = win || (typeof window === "undefined" ? undefined : window);
+    var name = prefix + "-" + counter;
+    var w = win || (typeof window === "undefined" ? undefined : window);
     if (typeof w !== "undefined") {
-        const style = w.document.createElement("style");
+        var style = w.document.createElement("style");
         style.innerText = objectToString("." + name, styles);
@@ -43,0 +45,0 @@ w.document.head.appendChild(style);

dist/lib/css/run.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.run = void 0;
-const _1 = require(".");
+var _1 = require(".");
 function run(prefix, input) {
     var _a;
-    const appendedChildren = [];
-    const head = {
-        appendChild: (child) => {
+    var appendedChildren = [];
+    var head = {
+        appendChild: function (child) {
             appendedChildren.push(child);
@@ -14,10 +14,10 @@ return child;
     };
-    const document = {
-        createElement: (tagName) => ({ tagName }),
+    var document = {
+        createElement: function (tagName) { return ({ tagName: tagName }); },
         head: head,
     };
-    const w = {
+    var w = {
         document: document,
     };
-    const window = w;
+    var window = w;
     _1.scopedStyles(prefix, input, window);
@@ -24,0 +24,0 @@ return (_a = appendedChildren[0]) === null || _a === void 0 ? void 0 : _a.innerText;

dist/routing/clean.js

@@ -5,6 +5,6 @@ "use strict";
 function clean(hrefWithoutOrigin) {
-    const m = hrefWithoutOrigin.match(/^(\/[^?#]*)(.*)$/);
+    var m = hrefWithoutOrigin.match(/^(\/[^?#]*)(.*)$/);
     if (!m)
-        throw new Error(`Unexpected href ${hrefWithoutOrigin}`);
-    const [, path, query] = m;
+        throw new Error("Unexpected href " + hrefWithoutOrigin);
+    var path = m[1], query = m[2];
     return (path.replace(/\/{2,}/g, "/").replace(/(.)\/$/g, "$1") +
@@ -11,0 +11,0 @@ query.replace(/[?#&=]+$/g, ""));

dist/routing/clicks.js

@@ -12,3 +12,3 @@ "use strict";
 function handleLinkClicks(f) {
-    const handler = function (e) {
+    var handler = function (e) {
         if (e.button !== 0)
@@ -20,6 +20,6 @@ return;
             return;
-        const link = findLink(e.target);
+        var link = findLink(e.target);
         if (!link)
             return;
-        const url = new URL(link.href);
+        var url = new URL(link.href);
         // External links including other procols like mailto
@@ -32,5 +32,5 @@ if (url.origin !== location.origin)
     document.addEventListener("click", handler);
-    return () => document.removeEventListener("click", handler);
+    return function () { return document.removeEventListener("click", handler); };
 }
 exports.handleLinkClicks = handleLinkClicks;
 //# sourceMappingURL=clicks.js.map

dist/routing/computeUrl.js

@@ -7,10 +7,10 @@ "use strict";
         return input;
-    const base = baseUrl || new URL(location.href);
+    var base = baseUrl || new URL(location.href);
     if (input.match(/^\/(?!\/)/)) {
-        const path = input;
+        var path = input;
         return new URL(base.origin + path);
     }
-    throw new Error(`Invalid path ${input}`);
+    throw new Error("Invalid path " + input);
 }
 exports.computeUrl = computeUrl;
 //# sourceMappingURL=computeUrl.js.map

dist/routing/init.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initRouting = void 0;
-const clicks_1 = require("./clicks");
-const clean_1 = require("./clean");
-const navigate_1 = require("./navigate");
+var clicks_1 = require("./clicks");
+var clean_1 = require("./clean");
+var navigate_1 = require("./navigate");
 function initClean() {
     function cleanIfNeeded() {
-        const hrefWithoutOrigin = location.href.substr(location.origin.length);
+        var hrefWithoutOrigin = location.href.substr(location.origin.length);
         if (hrefWithoutOrigin !== clean_1.clean(hrefWithoutOrigin))
@@ -27,6 +27,6 @@ navigate_1.navigate(clean_1.clean(hrefWithoutOrigin), { replace: true });
     window.addEventListener("popstate", function () {
-        const hash = location.hash;
+        var hash = location.hash;
         if (!hash)
             return;
-        const el = document.querySelector(hash);
+        var el = document.querySelector(hash);
         if (!el)
@@ -33,0 +33,0 @@ return;

dist/routing/navigate.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.navigate = void 0;
-const computeUrl_1 = require("./computeUrl");
+var computeUrl_1 = require("./computeUrl");
 function detectReplace(url) {
     return location.href === url.href;
 }
-function navigate(pathOrUrl, options = {}) {
+function navigate(pathOrUrl, options) {
     var _a;
-    const url = computeUrl_1.computeUrl(pathOrUrl);
+    if (options === void 0) { options = {}; }
+    var url = computeUrl_1.computeUrl(pathOrUrl);
     if (url.origin !== location.origin) {
@@ -15,4 +16,4 @@ window.location.href = url.href;
     }
-    const urlWithoutOrigin = url.href.substr(url.origin.length);
-    const replace = (_a = options.replace) !== null && _a !== void 0 ? _a : detectReplace(url);
+    var urlWithoutOrigin = url.href.substr(url.origin.length);
+    var replace = (_a = options.replace) !== null && _a !== void 0 ? _a : detectReplace(url);
     if (replace)
@@ -19,0 +20,0 @@ window.history.replaceState(null, "", urlWithoutOrigin);

dist/routing/queryParams.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useQueryParam = void 0;
-const navigate_1 = require("./navigate");
+var navigate_1 = require("./navigate");
 function queryParam(name) {
     return queryParams().get(name) || "";
 }
-const queryParams = () => new URLSearchParams(location.search);
+var queryParams = function () { return new URLSearchParams(location.search); };
 function useQueryParam(name) {
-    const link = function (value) {
-        const u = new URL(location.href);
+    var link = function (value) {
+        var u = new URL(location.href);
         u.hash = "";
@@ -16,3 +16,3 @@ u.searchParams.set(name, value);
     };
-    const setter = (value) => navigate_1.navigate(link(value));
+    var setter = function (value) { return navigate_1.navigate(link(value)); };
     setter.link = link;
@@ -19,0 +19,0 @@ return [queryParam(name), setter];

dist/routing/Redirect.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Redirect = void 0;
-const react_1 = require("react");
-const navigate_1 = require("./navigate");
+var react_1 = require("react");
+var navigate_1 = require("./navigate");
 function Redirect(props) {
-    const { to } = props;
-    react_1.useEffect(() => navigate_1.navigate(to, { replace: true }), [to]);
+    var to = props.to;
+    react_1.useEffect(function () { return navigate_1.navigate(to, { replace: true }); }, [to]);
     return null;
@@ -10,0 +10,0 @@ }

dist/routing/useRerenderOnRouting.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRerenderOnRouting = void 0;
-const react_1 = require("react");
+var react_1 = require("react");
 function useRerenderOnRouting() {
-    const [, setPath] = react_1.useState(location.href);
-    react_1.useEffect(() => {
-        const f = () => setPath(location.href);
+    var _a = react_1.useState(location.href), setPath = _a[1];
+    react_1.useEffect(function () {
+        var f = function () { return setPath(location.href); };
         window.addEventListener("popstate", f);
-        return () => window.removeEventListener("popstate", f);
+        return function () { return window.removeEventListener("popstate", f); };
     }, []);
@@ -12,0 +12,0 @@ }

dist/smartOutline.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.smartOutline = void 0;
-const lib_1 = require("./lib");
-const globalWindow = typeof window === "undefined" ? undefined : window;
+var lib_1 = require("./lib");
+var globalWindow = typeof window === "undefined" ? undefined : window;
 function smartOutline(win) {
-    const w = win || globalWindow;
+    var w = win || globalWindow;
     if (!w)
         return;
-    const doc = w.document;
-    lib_1.globalCss(w, `
-    body.pointer-interaction *,
-    body.pointer-interaction *::before,
-    body.pointer-interaction *::after {
-      outline: 0 !important
-    }
-  `);
-    window.addEventListener("keydown", (e) => {
-        const body = doc.querySelector("body");
+    var doc = w.document;
+    lib_1.globalCss(w, "\n    body.pointer-interaction *,\n    body.pointer-interaction *::before,\n    body.pointer-interaction *::after {\n      outline: 0 !important\n    }\n  ");
+    window.addEventListener("keydown", function (e) {
+        var body = doc.querySelector("body");
         if (!body)
@@ -26,4 +20,4 @@ return;
     });
-    window.addEventListener("mousedown", () => {
-        const body = doc.querySelector("body");
+    window.addEventListener("mousedown", function () {
+        var body = doc.querySelector("body");
         if (!body)
@@ -30,0 +24,0 @@ return;

dist/Spinner/index.js

@@ -26,11 +26,11 @@ "use strict";
 exports.Spinner = void 0;
-const react_1 = __importStar(require("react"));
-const react_nano_spinner_1 = __importDefault(require("react-nano-spinner"));
-const useRerender_1 = require("../useRerender");
+var react_1 = __importStar(require("react"));
+var react_nano_spinner_1 = __importDefault(require("react-nano-spinner"));
+var useRerender_1 = require("../useRerender");
 function Spinner(props) {
-    const { children, fullScreen, timeoutMs } = props;
-    const contents = children || react_1.default.createElement(react_nano_spinner_1.default, null);
+    var children = props.children, fullScreen = props.fullScreen, timeoutMs = props.timeoutMs;
+    var contents = children || react_1.default.createElement(react_nano_spinner_1.default, null);
     useRerender_1.useRerenderEvery(1000);
-    const [mountedAt] = react_1.useState(Date.now());
-    const timeout = timeoutMs !== null && timeoutMs !== void 0 ? timeoutMs : 60000;
+    var mountedAt = react_1.useState(Date.now())[0];
+    var timeout = timeoutMs !== null && timeoutMs !== void 0 ? timeoutMs : 60000;
     if (mountedAt + timeout < Date.now())
@@ -37,0 +37,0 @@ throw new Error("Spinner is taking too long");

dist/UnderConstruction.js

@@ -7,5 +7,5 @@ "use strict";
 exports.UnderConstruction = void 0;
-const react_1 = __importDefault(require("react"));
-const lib_1 = require("./lib");
-const outer = lib_1.scopedStyles("UnderConstruction", {
+var react_1 = __importDefault(require("react"));
+var lib_1 = require("./lib");
+var outer = lib_1.scopedStyles("UnderConstruction", {
     cursor: "not-allowed",
@@ -16,7 +16,7 @@ "&:active": {
 });
-const inner = lib_1.scopedStyles("UnderConstruction", {
+var inner = lib_1.scopedStyles("UnderConstruction", {
     pointerEvents: "none",
 });
 function UnderConstruction(props) {
-    const { children } = props;
+    var children = props.children;
     return (react_1.default.createElement("div", { className: outer },
@@ -23,0 +23,0 @@ react_1.default.createElement("div", { className: inner }, children)));

dist/useCatchAsync.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCatchAsync = void 0;
-const useCrash_1 = require("./useCrash");
-const infinitePromise = new Promise(() => { });
+var useCrash_1 = require("./useCrash");
+var infinitePromise = new Promise(function () { });
 function useCatchAsync() {
-    const crash = useCrash_1.useCrash();
+    var crash = useCrash_1.useCrash();
     return function (f) {
-        return (...args) => f(...args).catch(function (err) {
-            crash(err);
-            return infinitePromise;
-        });
+        return function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            return f.apply(void 0, args).catch(function (err) {
+                crash(err);
+                return infinitePromise;
+            });
+        };
     };
@@ -14,0 +20,0 @@ }

dist/useCheckStableIdentity.js

@@ -7,5 +7,5 @@ "use strict";
 exports.useCheckStableIdentity = void 0;
-const react_1 = __importDefault(require("react"));
+var react_1 = __importDefault(require("react"));
 function useCheckStableIdentity(params) {
-    const prev = react_1.default.useRef({});
+    var prev = react_1.default.useRef({});
     Object.keys(params).forEach(function (key) {
@@ -12,0 +12,0 @@ if (params[key] !== prev.current[key]) {

dist/useClickOutside.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useClickOutside = void 0;
-const react_1 = require("react");
-const useCallback_1 = require("./useCallback");
+var react_1 = require("react");
+var useCallback_1 = require("./useCallback");
 function useClickOutside(f) {
-    const ref = react_1.useRef({});
-    react_1.useEffect(() => {
-        const handleExternalClick = (event) => {
-            const el = event.target;
-            const areas = ref.current;
-            const isInAreas = Object.keys(areas).some((k) => {
-                const area = areas[k];
+    var ref = react_1.useRef({});
+    react_1.useEffect(function () {
+        var handleExternalClick = function (event) {
+            var el = event.target;
+            var areas = ref.current;
+            var isInAreas = Object.keys(areas).some(function (k) {
+                var area = areas[k];
                 return area === null || area === void 0 ? void 0 : area.contains(el);
@@ -20,11 +20,11 @@ });
         document.addEventListener("click", handleExternalClick);
-        return () => document.removeEventListener("click", handleExternalClick);
+        return function () { return document.removeEventListener("click", handleExternalClick); };
     }, [f, ref]);
-    const additionalArea = useCallback_1.useCallback((name) => (el) => {
+    var additionalArea = useCallback_1.useCallback(function (name) { return function (el) {
         ref.current[name] = el;
-    }, [ref]);
-    const main = useCallback_1.useCallback((el) => additionalArea("main")(el), [
+    }; }, [ref]);
+    var main = useCallback_1.useCallback(function (el) { return additionalArea("main")(el); }, [
         additionalArea,
     ]);
-    const res = main;
+    var res = main;
     res.additionalArea = additionalArea;
@@ -31,0 +31,0 @@ return res;

dist/useCrash.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCrash = void 0;
-const react_1 = require("react");
-const useCallback_1 = require("./useCallback");
+var react_1 = require("react");
+var useCallback_1 = require("./useCallback");
 function useCrash() {
     // https://github.com/facebook/react/issues/14981#issuecomment-468460187
-    const [, setState] = react_1.useState(null);
-    return useCallback_1.useCallback((err) => setState(() => {
-        throw err;
-    }), [setState]);
+    var _a = react_1.useState(null), setState = _a[1];
+    return useCallback_1.useCallback(function (err) {
+        return setState(function () {
+            throw err;
+        });
+    }, [setState]);
 }
 exports.useCrash = useCrash;
 //# sourceMappingURL=useCrash.js.map

dist/useRerender.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRerenderEvery = exports.useRerender = void 0;
-const react_1 = require("react");
+var react_1 = require("react");
 function useRerender() {
-    const [, rerender] = react_1.useReducer((i) => i + 1, 0);
+    var _a = react_1.useReducer(function (i) { return i + 1; }, 0), rerender = _a[1];
     return rerender;
@@ -11,6 +11,6 @@ }
 function useRerenderEvery(ms) {
-    const rerender = useRerender();
-    react_1.useEffect(() => {
-        const i = setInterval(rerender, ms);
-        return () => clearInterval(i);
+    var rerender = useRerender();
+    react_1.useEffect(function () {
+        var i = setInterval(rerender, ms);
+        return function () { return clearInterval(i); };
     }, [ms, rerender]);
@@ -17,0 +17,0 @@ }

dist/useUniqueId.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useUniqueId = void 0;
-const react_1 = require("react");
-let idCounter = 0;
+var react_1 = require("react");
+var idCounter = 0;
 function useUniqueId() {
@@ -7,0 +7,0 @@ idCounter += 1;

package.json

 {
   "name": "@theorem/react",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "Theorem React tools",
@@ -5,0 +5,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

55989

increased by7.52%

Number of package files

88

increased by1.15%

Lines of code

802

increased by9.56%

No dependency changes