@micromag/viewer 0.3.472 → 0.3.474

package/es/index.js

@@ -1,11 +1,11 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useRoutes, useUrlGenerator, useMemoryRouter, RoutesProvider } from '@folklore/routes';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
-import { Switch, Route, MemoryRouter } from 'react-router';
-import { Link, BrowserRouter } from 'react-router-dom';
+import { useLocation, Switch, Route, Router } from 'wouter';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { useViewerSize, usePlaybackContext, useViewerWebView, useViewerInteraction, StoryProvider, ScreenSizeProvider, ViewerProvider, useRoutes, useRoutePush, GoogleKeysProvider, GoogleMapsClientProvider, FieldsProvider, ComponentsProvider, SCREENS_NAMESPACE, VisitorProvider, PlaybackProvider, TrackingProvider, RoutesProvider } from '@micromag/core/contexts';
+import { useViewerSize, usePlaybackContext, useViewerWebView, useViewerInteraction, StoryProvider, ScreenSizeProvider, ViewerProvider, GoogleKeysProvider, GoogleMapsClientProvider, FieldsProvider, ComponentsProvider, SCREENS_NAMESPACE, VisitorProvider, PlaybackProvider, TrackingProvider } from '@micromag/core/contexts';
 import fieldsManager from '@micromag/fields/manager';
 import { IntlProvider } from '@micromag/intl';
 import { ScreensProvider } from '@micromag/screens';
@@ -21,6 +21,7 @@ import { useDimensionObserver, useTrackEvent, useDragProgress, useMediaProgress,
 import { getStyleFromColor, easings, getStyleFromText, getColorAsString, getDeviceScreens } from '@micromag/core/utils';
 import { ShareIncentive } from '@micromag/elements/all';
 import { useIntl, FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
 import { useSpring } from '@react-spring/core';
 import Scroll from '@micromag/element-scroll';
 import ShareOptions from '@micromag/element-share-options';
@@ -3156,7 +3157,10 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
     var onScreenChange = _ref.onScreenChange,
     otherProps = _objectWithoutProperties(_ref, _excluded$1);
   var routes = useRoutes();
-  var push = useRoutePush();
+  var url = useUrlGenerator();
+  var _useLocation = useLocation(),
+    _useLocation2 = _slicedToArray(_useLocation, 2),
+    navigate = _useLocation2[1];
   var _ref2 = story || {},
     _ref2$components = _ref2.components,
     screens = _ref2$components === void 0 ? [] : _ref2$components;
@@ -3165,35 +3169,30 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
       var screenId = screen.id;
       return screenId === it.id || screen === it;
     });
-    push('screen', {
+    navigate(url('screen', {
       screen: pathWithIndex ? screenIndex + 1 : it.id
-    });
+    }));
     if (onScreenChange !== null) {
       onScreenChange(it);
     }
-  }, [push, pathWithIndex, screens, onScreenChange]);
+  }, [navigate, url, pathWithIndex, screens, onScreenChange]);
   return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
-    path: routes.home,
-    exact: true,
-    render: function render() {
-      return /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
-        story: story,
-        onScreenChange: finalOnScreenChange
-      }));
-    }
-  }), /*#__PURE__*/React.createElement(Route, {
-    path: routes.screen,
-    render: function render(_ref3) {
-      var _ref3$match$params$sc = _ref3.match.params.screen,
-        screenParam = _ref3$match$params$sc === void 0 ? null : _ref3$match$params$sc;
-      var screenFromIndex = pathWithIndex && screenParam !== null ? screens[parseInt(screenParam, 10) - 1] || null : null;
-      var screenId = pathWithIndex ? (screenFromIndex || {}).id || null : screenParam;
-      return /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
-        story: story,
-        screen: screenId,
-        onScreenChange: finalOnScreenChange
-      }));
-    }
+    path: routes.home
+  }, /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
+    story: story,
+    onScreenChange: finalOnScreenChange
+  }))), /*#__PURE__*/React.createElement(Route, {
+    path: routes.screen
+  }, function (_ref3) {
+    var _ref3$screen = _ref3.screen,
+      screenParam = _ref3$screen === void 0 ? null : _ref3$screen;
+    var screenFromIndex = pathWithIndex && screenParam !== null ? screens[parseInt(screenParam, 10) - 1] || null : null;
+    var screenId = pathWithIndex ? (screenFromIndex || {}).id || null : screenParam;
+    return /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
+      story: story,
+      screen: screenId,
+      onScreenChange: finalOnScreenChange
+    }));
   }));
 };
 ViewerRoutes.propTypes = propTypes$1;
@@ -3259,7 +3258,6 @@ var ViewerContainer = function ViewerContainer(_ref) {
     translations = _ref.translations,
     pathWithIndex = _ref.pathWithIndex,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  var Router = memoryRouter ? MemoryRouter : BrowserRouter;
   var finalTrackingVariables = useMemo(function () {
     if (story === null && trackingVariables === null) {
       return null;
@@ -3311,8 +3309,13 @@ var ViewerContainer = function ViewerContainer(_ref) {
     basePath: basePath,
     pathWithIndex: pathWithIndex
   }, otherProps)))))))))));
+  var _useMemoryRouter = useMemoryRouter(),
+    memoryRouterHook = _useMemoryRouter.hook,
+    memoryRouterSearchHook = _useMemoryRouter.searchHook;
   return withoutRouter ? content : /*#__PURE__*/React.createElement(Router, {
-    basename: !memoryRouter ? basePath : null
+    base: !memoryRouter ? basePath : null,
+    hook: !memoryRouter ? memoryRouterHook : null,
+    searchHook: !memoryRouter ? memoryRouterSearchHook : null
   }, /*#__PURE__*/React.createElement(RoutesProvider, {
     routes: routes
   }, content));

package/lib/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var routes$1 = require('@folklore/routes');
 var PropTypes = require('prop-types');
 var React = require('react');
-var reactRouter = require('react-router');
-var reactRouterDom = require('react-router-dom');
+var wouter = require('wouter');
 var core = require('@micromag/core');
 var contexts = require('@micromag/core/contexts');
 var fieldsManager = require('@micromag/fields/manager');
@@ -25,6 +25,7 @@ var hooks = require('@micromag/core/hooks');
 var utils = require('@micromag/core/utils');
 var all = require('@micromag/elements/all');
 var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
 var core$1 = require('@react-spring/core');
 var Scroll = require('@micromag/element-scroll');
 var ShareOptions = require('@micromag/element-share-options');
@@ -3159,8 +3160,11 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
     _ref.children;
     var onScreenChange = _ref.onScreenChange,
     otherProps = _objectWithoutProperties(_ref, _excluded$1);
-  var routes = contexts.useRoutes();
-  var push = contexts.useRoutePush();
+  var routes = routes$1.useRoutes();
+  var url = routes$1.useUrlGenerator();
+  var _useLocation = wouter.useLocation(),
+    _useLocation2 = _slicedToArray(_useLocation, 2),
+    navigate = _useLocation2[1];
   var _ref2 = story || {},
     _ref2$components = _ref2.components,
     screens = _ref2$components === void 0 ? [] : _ref2$components;
@@ -3169,35 +3173,30 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
       var screenId = screen.id;
       return screenId === it.id || screen === it;
     });
-    push('screen', {
+    navigate(url('screen', {
       screen: pathWithIndex ? screenIndex + 1 : it.id
-    });
+    }));
     if (onScreenChange !== null) {
       onScreenChange(it);
     }
-  }, [push, pathWithIndex, screens, onScreenChange]);
-  return /*#__PURE__*/React.createElement(reactRouter.Switch, null, /*#__PURE__*/React.createElement(reactRouter.Route, {
-    path: routes.home,
-    exact: true,
-    render: function render() {
-      return /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
-        story: story,
-        onScreenChange: finalOnScreenChange
-      }));
-    }
-  }), /*#__PURE__*/React.createElement(reactRouter.Route, {
-    path: routes.screen,
-    render: function render(_ref3) {
-      var _ref3$match$params$sc = _ref3.match.params.screen,
-        screenParam = _ref3$match$params$sc === void 0 ? null : _ref3$match$params$sc;
-      var screenFromIndex = pathWithIndex && screenParam !== null ? screens[parseInt(screenParam, 10) - 1] || null : null;
-      var screenId = pathWithIndex ? (screenFromIndex || {}).id || null : screenParam;
-      return /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
-        story: story,
-        screen: screenId,
-        onScreenChange: finalOnScreenChange
-      }));
-    }
+  }, [navigate, url, pathWithIndex, screens, onScreenChange]);
+  return /*#__PURE__*/React.createElement(wouter.Switch, null, /*#__PURE__*/React.createElement(wouter.Route, {
+    path: routes.home
+  }, /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
+    story: story,
+    onScreenChange: finalOnScreenChange
+  }))), /*#__PURE__*/React.createElement(wouter.Route, {
+    path: routes.screen
+  }, function (_ref3) {
+    var _ref3$screen = _ref3.screen,
+      screenParam = _ref3$screen === void 0 ? null : _ref3$screen;
+    var screenFromIndex = pathWithIndex && screenParam !== null ? screens[parseInt(screenParam, 10) - 1] || null : null;
+    var screenId = pathWithIndex ? (screenFromIndex || {}).id || null : screenParam;
+    return /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
+      story: story,
+      screen: screenId,
+      onScreenChange: finalOnScreenChange
+    }));
   }));
 };
 ViewerRoutes.propTypes = propTypes$1;
@@ -3263,7 +3262,6 @@ var ViewerContainer = function ViewerContainer(_ref) {
     translations = _ref.translations,
     pathWithIndex = _ref.pathWithIndex,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  var Router = memoryRouter ? reactRouter.MemoryRouter : reactRouterDom.BrowserRouter;
   var finalTrackingVariables = React.useMemo(function () {
     if (story === null && trackingVariables === null) {
       return null;
@@ -3315,9 +3313,14 @@ var ViewerContainer = function ViewerContainer(_ref) {
     basePath: basePath,
     pathWithIndex: pathWithIndex
   }, otherProps)))))))))));
-  return withoutRouter ? content : /*#__PURE__*/React.createElement(Router, {
-    basename: !memoryRouter ? basePath : null
-  }, /*#__PURE__*/React.createElement(contexts.RoutesProvider, {
+  var _useMemoryRouter = routes$1.useMemoryRouter(),
+    memoryRouterHook = _useMemoryRouter.hook,
+    memoryRouterSearchHook = _useMemoryRouter.searchHook;
+  return withoutRouter ? content : /*#__PURE__*/React.createElement(wouter.Router, {
+    base: !memoryRouter ? basePath : null,
+    hook: !memoryRouter ? memoryRouterHook : null,
+    searchHook: !memoryRouter ? memoryRouterSearchHook : null
+  }, /*#__PURE__*/React.createElement(routes$1.RoutesProvider, {
     routes: routes
   }, content));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.472",
+    "version": "0.3.474",
     "private": false,
     "description": "",
     "keywords": [
@@ -62,15 +62,16 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.465",
-        "@micromag/element-badge": "^0.3.465",
-        "@micromag/element-scroll": "^0.3.465",
-        "@micromag/element-share-options": "^0.3.465",
-        "@micromag/element-webview": "^0.3.465",
-        "@micromag/elements": "^0.3.471",
-        "@micromag/fields": "^0.3.465",
-        "@micromag/intl": "^0.3.465",
-        "@micromag/screens": "^0.3.471",
+        "@folklore/routes": "^0.2.19",
+        "@micromag/core": "^0.3.473",
+        "@micromag/element-badge": "^0.3.473",
+        "@micromag/element-scroll": "^0.3.473",
+        "@micromag/element-share-options": "^0.3.473",
+        "@micromag/element-webview": "^0.3.473",
+        "@micromag/elements": "^0.3.473",
+        "@micromag/fields": "^0.3.473",
+        "@micromag/intl": "^0.3.474",
+        "@micromag/screens": "^0.3.473",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
@@ -80,15 +81,14 @@
         "prop-types": "^15.7.2",
         "react-helmet": "^6.1.0",
         "react-intl": "^5.12.1",
-        "react-router": "^5.2.0",
-        "react-router-dom": "^5.2.0",
         "react-share": "^4.3.1",
         "react-spring": "^9.5.2",
-        "wolfy87-eventemitter": "^5.2.9"
+        "wolfy87-eventemitter": "^5.2.9",
+        "wouter": "^3.0.0"
     },
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "b5d890ffe7c85fa1d14c13673a5d144afe06bf53"
+    "gitHead": "713af8762ac29229400c96e623b044d13f27b214"
 }