@storybook/addon-viewport - npm Package Compare versions

Comparing version 4.0.0-alpha.6 to 4.0.0-alpha.7

dist/preview/index.js

@@ -31,9 +31,6 @@ 'use strict';
 });
-
-var _Viewport = require('./components/Viewport');
-
 Object.defineProperty(exports, 'Viewport', {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_Viewport).default;
+    return _withViewport.Viewport;
   }
@@ -40,0 +37,0 @@ });

dist/preview/withViewport.js

@@ -6,38 +6,67 @@ 'use strict';
 });
+exports.Viewport = undefined;
 
-var _extends2 = require('babel-runtime/helpers/extends');
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
 
-var _extends3 = _interopRequireDefault(_extends2);
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
 
 exports.default = withViewport;
 
-var _react = require('react');
+var _addons = require('@storybook/addons');
 
-var _react2 = _interopRequireDefault(_react);
+var _addons2 = _interopRequireDefault(_addons);
 
-var _Viewport = require('./components/Viewport');
+var _coreEvents = require('@storybook/core-events');
 
-var _Viewport2 = _interopRequireDefault(_Viewport);
+var _coreEvents2 = _interopRequireDefault(_coreEvents);
 
+var _utilDeprecate = require('util-deprecate');
+
+var _utilDeprecate2 = _interopRequireDefault(_utilDeprecate);
+
+var _shared = require('../shared');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function noop() {}
+var handler = noop;
+
+var subscription = function subscription() {
+  var channel = _addons2.default.getChannel();
+  channel.on(_shared.VIEWPORT_CHANGED_EVENT_ID, handler);
+  return function () {
+    return channel.removeListener(_shared.VIEWPORT_CHANGED_EVENT_ID, handler);
+  };
+};
+
+var setViewport = function setViewport(options) {
+  var channel = _addons2.default.getChannel();
+  handler = options.onViewportChange || noop;
+  if (options.onViewportChange) {
+    channel.emit(_coreEvents2.default.REGISTER_SUBSCRIPTION, subscription);
+  }
+  channel.emit(_shared.SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, options.name || _shared.DEFAULT_VIEWPORT);
+};
+
 function withViewport(nameOrOptions) {
   var options = typeof nameOrOptions === 'string' ? { name: nameOrOptions } : nameOrOptions;
 
-  var decorator = function decorator(getStory) {
-    return function (context) {
-      return _react2.default.createElement(
-        _Viewport2.default,
-        (0, _extends3.default)({ context: context }, options),
-        getStory()
-      );
+  return function (story, context) {
+    var decorated = function decorated() {
+      setViewport(options);
+      return story();
     };
+
+    // Absent context means a direct call, withViewport(viewport)(storyFn)
+    return context ? decorated() : decorated;
   };
+}
 
-  return function (getStory, context) {
-    if (typeof context === 'undefined') {
-      return decorator(getStory);
-    }
-    return decorator(getStory)(context);
-  };
-}
+var Viewport = (0, _utilDeprecate2.default)(function (_ref) {
+  var children = _ref.children,
+      options = (0, _objectWithoutProperties3.default)(_ref, ['children']);
+
+  setViewport(options);
+  return children;
+}, '<Viewport> usage is deprecated, use .addDecorator(withViewport(viewport)) instead');
+exports.Viewport = Viewport;

package.json

 {
   "name": "@storybook/addon-viewport",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-alpha.7",
   "description": "Storybook addon to change the viewport size to mobile",
@@ -14,8 +14,10 @@ "keywords": [
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.6",
-    "@storybook/components": "4.0.0-alpha.6",
+    "@storybook/addons": "4.0.0-alpha.7",
+    "@storybook/components": "4.0.0-alpha.7",
+    "@storybook/core-events": "4.0.0-alpha.7",
     "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
     "lodash.debounce": "^4.0.8",
-    "prop-types": "^15.6.1"
+    "prop-types": "^15.6.1",
+    "util-deprecate": "^1.0.2"
   },
@@ -22,0 +24,0 @@ "peerDependencies": {

src/preview/index.js

@@ -5,4 +5,3 @@ import addons from '@storybook/addons';
 export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../shared';
-export { default as withViewport } from './withViewport';
-export { default as Viewport } from './components/Viewport';
+export { default as withViewport, Viewport } from './withViewport';
 
@@ -9,0 +8,0 @@ export function configureViewport(configs = {}) {

src/preview/withViewport.js

@@ -1,20 +0,46 @@
-import React from 'react';
+import addons from '@storybook/addons';
+import CoreEvents from '@storybook/core-events';
+import deprecate from 'util-deprecate';
 
-import Viewport from './components/Viewport';
+import {
+  SET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
+  VIEWPORT_CHANGED_EVENT_ID,
+  DEFAULT_VIEWPORT,
+} from '../shared';
 
+function noop() {}
+let handler = noop;
+
+const subscription = () => {
+  const channel = addons.getChannel();
+  channel.on(VIEWPORT_CHANGED_EVENT_ID, handler);
+  return () => channel.removeListener(VIEWPORT_CHANGED_EVENT_ID, handler);
+};
+
+const setViewport = options => {
+  const channel = addons.getChannel();
+  handler = options.onViewportChange || noop;
+  if (options.onViewportChange) {
+    channel.emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
+  }
+  channel.emit(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, options.name || DEFAULT_VIEWPORT);
+};
+
 export default function withViewport(nameOrOptions) {
   const options = typeof nameOrOptions === 'string' ? { name: nameOrOptions } : nameOrOptions;
 
-  const decorator = getStory => context => (
-    <Viewport context={context} {...options}>
-      {getStory()}
-    </Viewport>
-  );
+  return (story, context) => {
+    const decorated = () => {
+      setViewport(options);
+      return story();
+    };
 
-  return (getStory, context) => {
-    if (typeof context === 'undefined') {
-      return decorator(getStory);
-    }
-    return decorator(getStory)(context);
+    // Absent context means a direct call, withViewport(viewport)(storyFn)
+    return context ? decorated() : decorated;
   };
 }
+
+export const Viewport = deprecate(({ children, ...options }) => {
+  setViewport(options);
+  return children;
+}, `<Viewport> usage is deprecated, use .addDecorator(withViewport(viewport)) instead`);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

259274

decreased by-1.73%

Dependency count

9

increased by28.57%

Number of package files

31

decreased by-8.82%

Lines of code

1619

decreased by-8.12%

Dependency changes

• + Added@storybook/core-events@4.0.0-alpha.7

• + Addedutil-deprecate@^1.0.2

• + Added@storybook/addons@4.0.0-alpha.7(transitive)

• + Added@storybook/channels@4.0.0-alpha.7(transitive)

• + Added@storybook/components@4.0.0-alpha.7(transitive)

• + Added@storybook/core-events@4.0.0-alpha.7(transitive)

• + Addedutil-deprecate@1.0.2(transitive)

• - Removed@storybook/addons@4.0.0-alpha.6(transitive)

• - Removed@storybook/channels@4.0.0-alpha.6(transitive)

• - Removed@storybook/components@4.0.0-alpha.6(transitive)

• Updated@storybook/addons@4.0.0-alpha.7

• Updated@storybook/components@4.0.0-alpha.7