@code-hike/mini-browser - npm Package Compare versions

Comparing version 0.0.0-a3f5be4 to 0.0.0-b57b267

dist/buttons.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 declare function Back(): JSX.Element;
@@ -3,0 +2,0 @@ declare function Forward(): JSX.Element;

dist/index.cjs.js

@@ -7,2 +7,4 @@ 'use strict';
 var miniFrame = require('@code-hike/mini-frame');
+var utils = require('@code-hike/utils');
+var useSpring = require('use-spring');
 
@@ -51,2 +53,25 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function __read(o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+}
+
+function __spread() {
+    for (var ar = [], i = 0; i < arguments.length; i++)
+        ar = ar.concat(__read(arguments[i]));
+    return ar;
+}
+
 function Back() {
@@ -69,62 +94,96 @@ return (React__default['default'].createElement("svg", { fill: "currentColor", preserveAspectRatio: "xMidYMid meet", height: "1em", viewBox: "13 10 14 23", style: { marginLeft: "0.2em", marginRight: "1em", color: "#999" } },
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+function TitleBar(_a) {
+    var url = _a.url, linkUrl = _a.linkUrl, classes = _a.classes;
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(miniFrame.FrameButtons, { classes: classes }),
+        React__default['default'].createElement(Back, null),
+        React__default['default'].createElement(Forward, null),
+        React__default['default'].createElement("input", { value: url || "", readOnly: true }),
+        React__default['default'].createElement(Open, { href: linkUrl })));
+}
 
-var css = ".ch-mini-browser{height:100%}.ch-mini-browser .ch-frame-content iframe,.ch-mini-browser .ch-frame-content video{border:none;position:absolute;height:100%;width:100%}.ch-mini-browser .ch-title-bar input{height:1.4em;font-size:1em;border-radius:.5em;border:none;box-shadow:none;flex:1;padding:0 10px;color:#544}";
-n(css,{"singleTag":true});
+function useSteps(steps) {
+    return React__default['default'].useMemo(function () {
+        if (!steps) {
+            return [{ zoom: 1 }];
+        }
+        return steps.map(function (step) {
+            var _a = transformUrl(step.url, step.loadUrl, step.prependOrigin), displayUrl = _a.displayUrl, loadUrl = _a.loadUrl;
+            return {
+                zoom: step.zoom || 1,
+                displayUrl: displayUrl,
+                loadUrl: loadUrl,
+                children: step.children,
+            };
+        });
+    }, [steps]);
+}
+function transformUrl(url, loadUrl, prependOrigin) {
+    var currentOrigin = typeof window !== "undefined" ? window.origin : "";
+    var displayUrl = url && prependOrigin === true
+        ? currentOrigin + url
+        : url;
+    return { displayUrl: displayUrl, loadUrl: loadUrl || displayUrl };
+}
 
-var MiniBrowser = React__default['default'].forwardRef(MiniBrowserWithRef);
+var MiniBrowserHike = React__default['default'].forwardRef(MiniBrowserWithRef);
+var c = utils.classNamesWithPrefix("");
 function MiniBrowserWithRef(_a, ref) {
-    var _b = _a.url, url = _b === void 0 ? "" : _b, children = _a.children, _c = _a.progress, progress = _c === void 0 ? 0 : _c, _d = _a.backward, backward = _d === void 0 ? false : _d, _e = _a.zoom, zoom = _e === void 0 ? 1 : _e, ogSteps = _a.steps, loadUrl = _a.loadUrl, prependOrigin = _a.prependOrigin, props = __rest(_a, ["url", "children", "progress", "backward", "zoom", "steps", "loadUrl", "prependOrigin"]);
-    var steps = useSteps(ogSteps, {
+    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, _c = _a.backward, ogSteps = _a.steps, _d = _a.classes, classes = _d === void 0 ? {} : _d, props = __rest(_a, ["progress", "backward", "steps", "classes"]);
+    var steps = useSteps(ogSteps);
+    // TODO readability and optional
+    var X = 50;
+    var t = progress - Math.floor(progress);
+    var x = t <= 0.5 ? -X * t : X - X * t;
+    var o = Math.abs(t - 0.5) * 2;
+    // const stepIndex = backward
+    //   ? Math.floor(progress)
+    //   : Math.ceil(progress)
+    var stepIndex = Math.round(progress);
+    var _e = steps[stepIndex], zoom = _e.zoom, displayUrl = _e.displayUrl, loadUrl = _e.loadUrl, children = _e.children;
+    return (React__default['default'].createElement(miniFrame.MiniFrame, __assign({}, props, { zoom: zoom, className: c("ch-mini-browser", classes) + " " + (props.className || ""), style: __assign({ transform: "translateX(" + x + "px)", opacity: o * o }, props.style), classes: classes, titleBar: React__default['default'].createElement(TitleBar, { url: displayUrl, linkUrl: loadUrl, classes: classes }) }), children || React__default['default'].createElement("iframe", { ref: ref, src: loadUrl })));
+}
+
+function MiniBrowser(_a) {
+    var url = _a.url, loadUrl = _a.loadUrl, prependOrigin = _a.prependOrigin, children = _a.children, zoom = _a.zoom, rest = __rest(_a, ["url", "loadUrl", "prependOrigin", "children", "zoom"]);
+    var _b = __read(useSteps$1({
         url: url,
+        loadUrl: loadUrl,
+        prependOrigin: prependOrigin,
         children: children,
         zoom: zoom,
-        loadUrl: loadUrl,
-        prependOrigin: prependOrigin,
-    });
-    var stepIndex = backward
-        ? Math.floor(progress)
-        : Math.ceil(progress);
-    var currentStep = steps[stepIndex];
-    return (React__default['default'].createElement(miniFrame.MiniFrame, __assign({}, props, { zoom: currentStep.zoom, className: "ch-mini-browser " + (props.className || ""), titleBar: React__default['default'].createElement(Bar, { url: currentStep.url, linkUrl: currentStep.loadUrl }) }), currentStep.children || (React__default['default'].createElement("iframe", { ref: ref, src: currentStep.loadUrl }))));
+    }), 2), steps = _b[0], progress = _b[1];
+    return (React__default['default'].createElement(MiniBrowserHike, __assign({}, rest, { steps: steps, progress: progress })));
 }
-function useSteps(ogSteps, ogDefaults) {
-    var defaults = transformStep(ogDefaults);
-    var zoom = defaults.zoom, url = defaults.url, children = defaults.children, loadUrl = defaults.loadUrl, prependOrigin = defaults.prependOrigin;
-    return React__default['default'].useMemo(function () {
-        if (!ogSteps) {
-            return [defaults];
+function useSteps$1(_a) {
+    var url = _a.url, loadUrl = _a.loadUrl, prependOrigin = _a.prependOrigin, children = _a.children, zoom = _a.zoom;
+    var _b = __read(React__default['default'].useState({
+        target: 0,
+        steps: [
+            { url: url, loadUrl: loadUrl, prependOrigin: prependOrigin, children: children, zoom: zoom },
+        ],
+    }), 2), state = _b[0], setState = _b[1];
+    React__default['default'].useEffect(function () {
+        var last = state.steps[state.steps.length - 1];
+        if (last.url !== url ||
+            last.loadUrl !== loadUrl ||
+            last.prependOrigin !== prependOrigin ||
+            last.children !== children ||
+            last.zoom !== zoom) {
+            setState(function (s) { return ({
+                target: s.target + 1,
+                steps: __spread(s.steps, [
+                    { url: url, loadUrl: loadUrl, prependOrigin: prependOrigin, children: children, zoom: zoom },
+                ]),
+            }); });
         }
-        else {
-            return ogSteps.map(function (s) {
-                var step = transformStep(__assign({ prependOrigin: prependOrigin }, s));
-                return __assign(__assign({ zoom: zoom,
-                    url: url,
-                    children: children }, step), { loadUrl: step.loadUrl || step.url || loadUrl });
-            });
-        }
-    }, [ogSteps, zoom, url, children, loadUrl, prependOrigin]);
+    }, [url, loadUrl, prependOrigin, children, zoom]);
+    var _c = __read(useSpring.useSpring(state.target, {
+        stiffness: 100,
+        decimals: 3,
+    }), 1), progress = _c[0];
+    return [state.steps, progress];
 }
-function Bar(_a) {
-    var url = _a.url, linkUrl = _a.linkUrl;
-    return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement(miniFrame.FrameButtons, null),
-        React__default['default'].createElement(Back, null),
-        React__default['default'].createElement(Forward, null),
-        React__default['default'].createElement("input", { value: url || "", readOnly: true }),
-        React__default['default'].createElement(Open, { href: linkUrl })));
-}
-function transformStep(step) {
-    var currentOrigin = typeof window !== "undefined" ? window.origin : "";
-    var url = step.url && step.prependOrigin === true
-        ? currentOrigin + step.url
-        : step.url;
-    var loadUrl = step.loadUrl || url;
-    var transformed = __assign(__assign({}, step), { loadUrl: loadUrl });
-    if (step.url) {
-        transformed.url = url;
-    }
-    return transformed;
-}
 
 exports.MiniBrowser = MiniBrowser;
+exports.MiniBrowserHike = MiniBrowserHike;

dist/index.d.ts

@@ -1,2 +0,4 @@
-import { MiniBrowser } from "./mini-browser";
-export { MiniBrowser };
+import { MiniBrowserHike, MiniBrowserHikeProps } from "./mini-browser-hike";
+import { MiniBrowser, MiniBrowserProps } from "./mini-browser";
+import "./index.scss";
+export { MiniBrowser, MiniBrowserProps, MiniBrowserHike, MiniBrowserHikeProps, };

dist/index.esm.js

 import React from 'react';
-import { MiniFrame, FrameButtons } from '@code-hike/mini-frame';
+import { FrameButtons, MiniFrame } from '@code-hike/mini-frame';
+import { classNamesWithPrefix } from '@code-hike/utils';
+import { useSpring } from 'use-spring';
 
@@ -42,2 +44,25 @@ /*! *****************************************************************************
 
+function __read(o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+}
+
+function __spread() {
+    for (var ar = [], i = 0; i < arguments.length; i++)
+        ar = ar.concat(__read(arguments[i]));
+    return ar;
+}
+
 function Back() {
@@ -60,62 +85,95 @@ return (React.createElement("svg", { fill: "currentColor", preserveAspectRatio: "xMidYMid meet", height: "1em", viewBox: "13 10 14 23", style: { marginLeft: "0.2em", marginRight: "1em", color: "#999" } },
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+function TitleBar(_a) {
+    var url = _a.url, linkUrl = _a.linkUrl, classes = _a.classes;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FrameButtons, { classes: classes }),
+        React.createElement(Back, null),
+        React.createElement(Forward, null),
+        React.createElement("input", { value: url || "", readOnly: true }),
+        React.createElement(Open, { href: linkUrl })));
+}
 
-var css = ".ch-mini-browser{height:100%}.ch-mini-browser .ch-frame-content iframe,.ch-mini-browser .ch-frame-content video{border:none;position:absolute;height:100%;width:100%}.ch-mini-browser .ch-title-bar input{height:1.4em;font-size:1em;border-radius:.5em;border:none;box-shadow:none;flex:1;padding:0 10px;color:#544}";
-n(css,{"singleTag":true});
+function useSteps(steps) {
+    return React.useMemo(function () {
+        if (!steps) {
+            return [{ zoom: 1 }];
+        }
+        return steps.map(function (step) {
+            var _a = transformUrl(step.url, step.loadUrl, step.prependOrigin), displayUrl = _a.displayUrl, loadUrl = _a.loadUrl;
+            return {
+                zoom: step.zoom || 1,
+                displayUrl: displayUrl,
+                loadUrl: loadUrl,
+                children: step.children,
+            };
+        });
+    }, [steps]);
+}
+function transformUrl(url, loadUrl, prependOrigin) {
+    var currentOrigin = typeof window !== "undefined" ? window.origin : "";
+    var displayUrl = url && prependOrigin === true
+        ? currentOrigin + url
+        : url;
+    return { displayUrl: displayUrl, loadUrl: loadUrl || displayUrl };
+}
 
-var MiniBrowser = React.forwardRef(MiniBrowserWithRef);
+var MiniBrowserHike = React.forwardRef(MiniBrowserWithRef);
+var c = classNamesWithPrefix("");
 function MiniBrowserWithRef(_a, ref) {
-    var _b = _a.url, url = _b === void 0 ? "" : _b, children = _a.children, _c = _a.progress, progress = _c === void 0 ? 0 : _c, _d = _a.backward, backward = _d === void 0 ? false : _d, _e = _a.zoom, zoom = _e === void 0 ? 1 : _e, ogSteps = _a.steps, loadUrl = _a.loadUrl, prependOrigin = _a.prependOrigin, props = __rest(_a, ["url", "children", "progress", "backward", "zoom", "steps", "loadUrl", "prependOrigin"]);
-    var steps = useSteps(ogSteps, {
+    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, _c = _a.backward, ogSteps = _a.steps, _d = _a.classes, classes = _d === void 0 ? {} : _d, props = __rest(_a, ["progress", "backward", "steps", "classes"]);
+    var steps = useSteps(ogSteps);
+    // TODO readability and optional
+    var X = 50;
+    var t = progress - Math.floor(progress);
+    var x = t <= 0.5 ? -X * t : X - X * t;
+    var o = Math.abs(t - 0.5) * 2;
+    // const stepIndex = backward
+    //   ? Math.floor(progress)
+    //   : Math.ceil(progress)
+    var stepIndex = Math.round(progress);
+    var _e = steps[stepIndex], zoom = _e.zoom, displayUrl = _e.displayUrl, loadUrl = _e.loadUrl, children = _e.children;
+    return (React.createElement(MiniFrame, __assign({}, props, { zoom: zoom, className: c("ch-mini-browser", classes) + " " + (props.className || ""), style: __assign({ transform: "translateX(" + x + "px)", opacity: o * o }, props.style), classes: classes, titleBar: React.createElement(TitleBar, { url: displayUrl, linkUrl: loadUrl, classes: classes }) }), children || React.createElement("iframe", { ref: ref, src: loadUrl })));
+}
+
+function MiniBrowser(_a) {
+    var url = _a.url, loadUrl = _a.loadUrl, prependOrigin = _a.prependOrigin, children = _a.children, zoom = _a.zoom, rest = __rest(_a, ["url", "loadUrl", "prependOrigin", "children", "zoom"]);
+    var _b = __read(useSteps$1({
         url: url,
+        loadUrl: loadUrl,
+        prependOrigin: prependOrigin,
         children: children,
         zoom: zoom,
-        loadUrl: loadUrl,
-        prependOrigin: prependOrigin,
-    });
-    var stepIndex = backward
-        ? Math.floor(progress)
-        : Math.ceil(progress);
-    var currentStep = steps[stepIndex];
-    return (React.createElement(MiniFrame, __assign({}, props, { zoom: currentStep.zoom, className: "ch-mini-browser " + (props.className || ""), titleBar: React.createElement(Bar, { url: currentStep.url, linkUrl: currentStep.loadUrl }) }), currentStep.children || (React.createElement("iframe", { ref: ref, src: currentStep.loadUrl }))));
+    }), 2), steps = _b[0], progress = _b[1];
+    return (React.createElement(MiniBrowserHike, __assign({}, rest, { steps: steps, progress: progress })));
 }
-function useSteps(ogSteps, ogDefaults) {
-    var defaults = transformStep(ogDefaults);
-    var zoom = defaults.zoom, url = defaults.url, children = defaults.children, loadUrl = defaults.loadUrl, prependOrigin = defaults.prependOrigin;
-    return React.useMemo(function () {
-        if (!ogSteps) {
-            return [defaults];
+function useSteps$1(_a) {
+    var url = _a.url, loadUrl = _a.loadUrl, prependOrigin = _a.prependOrigin, children = _a.children, zoom = _a.zoom;
+    var _b = __read(React.useState({
+        target: 0,
+        steps: [
+            { url: url, loadUrl: loadUrl, prependOrigin: prependOrigin, children: children, zoom: zoom },
+        ],
+    }), 2), state = _b[0], setState = _b[1];
+    React.useEffect(function () {
+        var last = state.steps[state.steps.length - 1];
+        if (last.url !== url ||
+            last.loadUrl !== loadUrl ||
+            last.prependOrigin !== prependOrigin ||
+            last.children !== children ||
+            last.zoom !== zoom) {
+            setState(function (s) { return ({
+                target: s.target + 1,
+                steps: __spread(s.steps, [
+                    { url: url, loadUrl: loadUrl, prependOrigin: prependOrigin, children: children, zoom: zoom },
+                ]),
+            }); });
         }
-        else {
-            return ogSteps.map(function (s) {
-                var step = transformStep(__assign({ prependOrigin: prependOrigin }, s));
-                return __assign(__assign({ zoom: zoom,
-                    url: url,
-                    children: children }, step), { loadUrl: step.loadUrl || step.url || loadUrl });
-            });
-        }
-    }, [ogSteps, zoom, url, children, loadUrl, prependOrigin]);
+    }, [url, loadUrl, prependOrigin, children, zoom]);
+    var _c = __read(useSpring(state.target, {
+        stiffness: 100,
+        decimals: 3,
+    }), 1), progress = _c[0];
+    return [state.steps, progress];
 }
-function Bar(_a) {
-    var url = _a.url, linkUrl = _a.linkUrl;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(FrameButtons, null),
-        React.createElement(Back, null),
-        React.createElement(Forward, null),
-        React.createElement("input", { value: url || "", readOnly: true }),
-        React.createElement(Open, { href: linkUrl })));
-}
-function transformStep(step) {
-    var currentOrigin = typeof window !== "undefined" ? window.origin : "";
-    var url = step.url && step.prependOrigin === true
-        ? currentOrigin + step.url
-        : step.url;
-    var loadUrl = step.loadUrl || url;
-    var transformed = __assign(__assign({}, step), { loadUrl: loadUrl });
-    if (step.url) {
-        transformed.url = url;
-    }
-    return transformed;
-}
 
-export { MiniBrowser };
+export { MiniBrowser, MiniBrowserHike };

dist/index.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@code-hike/mini-frame')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@code-hike/mini-frame'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.foo = {}, global.React, global.miniFrame));
-}(this, (function (exports, React, miniFrame) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@code-hike/mini-frame'), require('@code-hike/utils'), require('use-spring')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@code-hike/mini-frame', '@code-hike/utils', 'use-spring'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ch = {}, global.React, global.miniFrame, global.utils, global.useSpring));
+}(this, (function (exports, React, miniFrame, utils, useSpring) { 'use strict';
 
@@ -49,2 +49,25 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+        }
+        catch (error) { e = { error: error }; }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"])) m.call(i);
+            }
+            finally { if (e) throw e.error; }
+        }
+        return ar;
+    }
+
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+
     function Back() {
@@ -67,63 +90,97 @@ return (React__default['default'].createElement("svg", { fill: "currentColor", preserveAspectRatio: "xMidYMid meet", height: "1em", viewBox: "13 10 14 23", style: { marginLeft: "0.2em", marginRight: "1em", color: "#999" } },
 
-    var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+    function TitleBar(_a) {
+        var url = _a.url, linkUrl = _a.linkUrl, classes = _a.classes;
+        return (React__default['default'].createElement(React__default['default'].Fragment, null,
+            React__default['default'].createElement(miniFrame.FrameButtons, { classes: classes }),
+            React__default['default'].createElement(Back, null),
+            React__default['default'].createElement(Forward, null),
+            React__default['default'].createElement("input", { value: url || "", readOnly: true }),
+            React__default['default'].createElement(Open, { href: linkUrl })));
+    }
 
-    var css = ".ch-mini-browser{height:100%}.ch-mini-browser .ch-frame-content iframe,.ch-mini-browser .ch-frame-content video{border:none;position:absolute;height:100%;width:100%}.ch-mini-browser .ch-title-bar input{height:1.4em;font-size:1em;border-radius:.5em;border:none;box-shadow:none;flex:1;padding:0 10px;color:#544}";
-    n(css,{"singleTag":true});
+    function useSteps(steps) {
+        return React__default['default'].useMemo(function () {
+            if (!steps) {
+                return [{ zoom: 1 }];
+            }
+            return steps.map(function (step) {
+                var _a = transformUrl(step.url, step.loadUrl, step.prependOrigin), displayUrl = _a.displayUrl, loadUrl = _a.loadUrl;
+                return {
+                    zoom: step.zoom || 1,
+                    displayUrl: displayUrl,
+                    loadUrl: loadUrl,
+                    children: step.children,
+                };
+            });
+        }, [steps]);
+    }
+    function transformUrl(url, loadUrl, prependOrigin) {
+        var currentOrigin = typeof window !== "undefined" ? window.origin : "";
+        var displayUrl = url && prependOrigin === true
+            ? currentOrigin + url
+            : url;
+        return { displayUrl: displayUrl, loadUrl: loadUrl || displayUrl };
+    }
 
-    var MiniBrowser = React__default['default'].forwardRef(MiniBrowserWithRef);
+    var MiniBrowserHike = React__default['default'].forwardRef(MiniBrowserWithRef);
+    var c = utils.classNamesWithPrefix("");
     function MiniBrowserWithRef(_a, ref) {
-        var _b = _a.url, url = _b === void 0 ? "" : _b, children = _a.children, _c = _a.progress, progress = _c === void 0 ? 0 : _c, _d = _a.backward, backward = _d === void 0 ? false : _d, _e = _a.zoom, zoom = _e === void 0 ? 1 : _e, ogSteps = _a.steps, loadUrl = _a.loadUrl, prependOrigin = _a.prependOrigin, props = __rest(_a, ["url", "children", "progress", "backward", "zoom", "steps", "loadUrl", "prependOrigin"]);
-        var steps = useSteps(ogSteps, {
+        var _b = _a.progress, progress = _b === void 0 ? 0 : _b, _c = _a.backward, ogSteps = _a.steps, _d = _a.classes, classes = _d === void 0 ? {} : _d, props = __rest(_a, ["progress", "backward", "steps", "classes"]);
+        var steps = useSteps(ogSteps);
+        // TODO readability and optional
+        var X = 50;
+        var t = progress - Math.floor(progress);
+        var x = t <= 0.5 ? -X * t : X - X * t;
+        var o = Math.abs(t - 0.5) * 2;
+        // const stepIndex = backward
+        //   ? Math.floor(progress)
+        //   : Math.ceil(progress)
+        var stepIndex = Math.round(progress);
+        var _e = steps[stepIndex], zoom = _e.zoom, displayUrl = _e.displayUrl, loadUrl = _e.loadUrl, children = _e.children;
+        return (React__default['default'].createElement(miniFrame.MiniFrame, __assign({}, props, { zoom: zoom, className: c("ch-mini-browser", classes) + " " + (props.className || ""), style: __assign({ transform: "translateX(" + x + "px)", opacity: o * o }, props.style), classes: classes, titleBar: React__default['default'].createElement(TitleBar, { url: displayUrl, linkUrl: loadUrl, classes: classes }) }), children || React__default['default'].createElement("iframe", { ref: ref, src: loadUrl })));
+    }
+
+    function MiniBrowser(_a) {
+        var url = _a.url, loadUrl = _a.loadUrl, prependOrigin = _a.prependOrigin, children = _a.children, zoom = _a.zoom, rest = __rest(_a, ["url", "loadUrl", "prependOrigin", "children", "zoom"]);
+        var _b = __read(useSteps$1({
             url: url,
+            loadUrl: loadUrl,
+            prependOrigin: prependOrigin,
             children: children,
             zoom: zoom,
-            loadUrl: loadUrl,
-            prependOrigin: prependOrigin,
-        });
-        var stepIndex = backward
-            ? Math.floor(progress)
-            : Math.ceil(progress);
-        var currentStep = steps[stepIndex];
-        return (React__default['default'].createElement(miniFrame.MiniFrame, __assign({}, props, { zoom: currentStep.zoom, className: "ch-mini-browser " + (props.className || ""), titleBar: React__default['default'].createElement(Bar, { url: currentStep.url, linkUrl: currentStep.loadUrl }) }), currentStep.children || (React__default['default'].createElement("iframe", { ref: ref, src: currentStep.loadUrl }))));
+        }), 2), steps = _b[0], progress = _b[1];
+        return (React__default['default'].createElement(MiniBrowserHike, __assign({}, rest, { steps: steps, progress: progress })));
     }
-    function useSteps(ogSteps, ogDefaults) {
-        var defaults = transformStep(ogDefaults);
-        var zoom = defaults.zoom, url = defaults.url, children = defaults.children, loadUrl = defaults.loadUrl, prependOrigin = defaults.prependOrigin;
-        return React__default['default'].useMemo(function () {
-            if (!ogSteps) {
-                return [defaults];
+    function useSteps$1(_a) {
+        var url = _a.url, loadUrl = _a.loadUrl, prependOrigin = _a.prependOrigin, children = _a.children, zoom = _a.zoom;
+        var _b = __read(React__default['default'].useState({
+            target: 0,
+            steps: [
+                { url: url, loadUrl: loadUrl, prependOrigin: prependOrigin, children: children, zoom: zoom },
+            ],
+        }), 2), state = _b[0], setState = _b[1];
+        React__default['default'].useEffect(function () {
+            var last = state.steps[state.steps.length - 1];
+            if (last.url !== url ||
+                last.loadUrl !== loadUrl ||
+                last.prependOrigin !== prependOrigin ||
+                last.children !== children ||
+                last.zoom !== zoom) {
+                setState(function (s) { return ({
+                    target: s.target + 1,
+                    steps: __spread(s.steps, [
+                        { url: url, loadUrl: loadUrl, prependOrigin: prependOrigin, children: children, zoom: zoom },
+                    ]),
+                }); });
             }
-            else {
-                return ogSteps.map(function (s) {
-                    var step = transformStep(__assign({ prependOrigin: prependOrigin }, s));
-                    return __assign(__assign({ zoom: zoom,
-                        url: url,
-                        children: children }, step), { loadUrl: step.loadUrl || step.url || loadUrl });
-                });
-            }
-        }, [ogSteps, zoom, url, children, loadUrl, prependOrigin]);
+        }, [url, loadUrl, prependOrigin, children, zoom]);
+        var _c = __read(useSpring.useSpring(state.target, {
+            stiffness: 100,
+            decimals: 3,
+        }), 1), progress = _c[0];
+        return [state.steps, progress];
     }
-    function Bar(_a) {
-        var url = _a.url, linkUrl = _a.linkUrl;
-        return (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(miniFrame.FrameButtons, null),
-            React__default['default'].createElement(Back, null),
-            React__default['default'].createElement(Forward, null),
-            React__default['default'].createElement("input", { value: url || "", readOnly: true }),
-            React__default['default'].createElement(Open, { href: linkUrl })));
-    }
-    function transformStep(step) {
-        var currentOrigin = typeof window !== "undefined" ? window.origin : "";
-        var url = step.url && step.prependOrigin === true
-            ? currentOrigin + step.url
-            : step.url;
-        var loadUrl = step.loadUrl || url;
-        var transformed = __assign(__assign({}, step), { loadUrl: loadUrl });
-        if (step.url) {
-            transformed.url = url;
-        }
-        return transformed;
-    }
 
     exports.MiniBrowser = MiniBrowser;
+    exports.MiniBrowserHike = MiniBrowserHike;
 
@@ -130,0 +187,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

dist/mini-browser.d.ts

@@ -1,11 +0,6 @@
-import React from "react";
-import "./mini-browser.css";
-declare type MiniBrowserStep = {
-    url?: string;
-    loadUrl?: string;
-    children: React.ReactNode;
-    zoom?: number;
-    prependOrigin?: boolean;
-};
-declare const MiniBrowser: React.ForwardRefExoticComponent<MiniBrowserStep & React.RefAttributes<HTMLIFrameElement>>;
+/// <reference types="react" />
+import { MiniBrowserHikeProps } from "./mini-browser-hike";
+import { MiniBrowserStep } from "./use-steps";
+export declare type MiniBrowserProps = Omit<MiniBrowserHikeProps, "progress" | "steps" | "backward"> & MiniBrowserStep;
 export { MiniBrowser };
+declare function MiniBrowser({ url, loadUrl, prependOrigin, children, zoom, ...rest }: MiniBrowserProps): JSX.Element;

package.json

 {
   "name": "@code-hike/mini-browser",
-  "version": "0.0.0-a3f5be4",
+  "version": "0.0.0-b57b267",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.esm.js",
+  "style": "dist/index.css",
   "files": [
@@ -12,3 +13,5 @@ "dist"
     "script": "ch-script",
-    "publish-canary": "yarn publish --tag canary --access public"
+    "publish-canary": "yarn publish --tag canary --access public",
+    "test": "jest",
+    "test-watch": "jest --watch --updateSnapshot"
   },
@@ -18,6 +21,11 @@ "devDependencies": {
     "@types/react": "^16.9.38",
-    "react": "^16.13.1"
+    "react": "^16.13.1",
+    "@types/jest": "^24.0.15",
+    "jest": "^26.5.3",
+    "ts-jest": "^26.4.1"
   },
   "dependencies": {
-    "@code-hike/mini-frame": "0.0.0-a3f5be4"
+    "@code-hike/mini-frame": "0.0.0-b57b267",
+    "@code-hike/utils": "0.0.0-b57b267",
+    "use-spring": "^0.2.3"
   },
@@ -32,2 +40,3 @@ "peerDependencies": {
   "repository": "code-hike/codehike",
+  "author": "Rodrigo Pombo",
   "license": "MIT",
@@ -34,0 +43,0 @@ "funding": {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38709

increased by50.81%

Number of package files

16

increased by100%

Lines of code

591

increased by58.02%

Number of low maintenance alerts

1

decreased by-50%

Worsened metrics

Dependency count

4

increased by100%

Dev dependency count

6

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@code-hike/utils@0.0.0-b57b267

• + Addeduse-spring@^0.2.3

• + Added@code-hike/mini-frame@0.0.0-b57b267(transitive)

• + Added@code-hike/utils@0.0.0-b57b267(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• + Addeduse-spring@0.2.4(transitive)

• - Removed@code-hike/mini-frame@0.0.0-a3f5be4(transitive)

• Updated@code-hike/mini-frame@0.0.0-b57b267