Merge pull request #9932 from jonspalmer/links_addon_preset

Add preset for Links Addon

MIGRATION.md

@@ -88,7 +88,7 @@
 
 In Storybook 5.3 we introduced a declarative [main.js configuration](#to-mainjs-configuration), which is now the recommended way to configure Storybook. Part of the change is a simplified syntax for registering addons, which in 6.0 automatically registers many addons _using a preset_, which is a slightly different behavior than in earlier versions.
 
-This breaking change currently applies to: `addon-a11y`, `addon-knobs`.
+This breaking change currently applies to: `addon-a11y`, `addon-knobs`, `addon-links`.
 
 Consider the following `main.js` config for the accessibility addon, `addon-a11y`:
 

addons/links/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

addons/links/register.js

@@ -1 +1 @@
-require('./dist/manager').register();
+require('./dist/register');

addons/links/src/constants.ts

@@ -1,4 +1,5 @@
 export const ADDON_ID = 'storybook/links';
+export const PARAM_KEY = `links`;
 
 export default {
   NAVIGATE: `${ADDON_ID}/navigate`,

addons/links/src/manager.ts

@@ -1,14 +0,0 @@
-import addons from '@storybook/addons';
-
-import EVENTS, { ADDON_ID } from './constants';
-
-export const register = () => {
-  addons.register(ADDON_ID, api => {
-    const channel = addons.getChannel();
-
-    channel.on(EVENTS.REQUEST, ({ kind, name }) => {
-      const id = api.storyId(kind, name);
-      api.emit(EVENTS.RECEIVE, id);
-    });
-  });
-};

addons/links/src/preset/addDecorator.ts

@@ -0,0 +1,3 @@
+import { withLinks } from '../index';
+
+export const decorators = [withLinks];

addons/links/src/preset/index.ts

@@ -0,0 +1,15 @@
+type LinkOptions = {
+  addDecorator?: boolean;
+};
+
+export function managerEntries(entry: any[] = []) {
+  return [...entry, require.resolve('../register')];
+}
+
+export function config(entry: any[] = [], { addDecorator = true }: LinkOptions = {}) {
+  const linkConfig = [];
+  if (addDecorator) {
+    linkConfig.push(require.resolve('./addDecorator'));
+  }
+  return [...entry, ...linkConfig];
+}

addons/links/src/preview.ts

@@ -5,7 +5,8 @@ import {
   __STORYBOOK_CLIENT_API__ as clientApi,
 } from 'global';
 import qs from 'qs';
-import addons from '@storybook/addons';
+import addons, { makeDecorator } from '@storybook/addons';
+import { PARAM_KEY } from './constants';
 import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events';
 import { toId } from '@storybook/csf';
 import { logger } from '@storybook/client-logger';
@@ -109,8 +110,12 @@ const off = () => {
   }
 };
 
-export const withLinks = (storyFn: () => void) => {
-  on();
-  addons.getChannel().once(STORY_CHANGED, off);
-  return storyFn();
-};
+export const withLinks = makeDecorator({
+  name: 'withLinks',
+  parameterName: PARAM_KEY,
+  wrapper: (getStory, context, { parameters }) => {
+    on();
+    addons.getChannel().once(STORY_CHANGED, off);
+    return getStory(context);
+  }
+});

addons/links/src/register.ts

@@ -0,0 +1,12 @@
+import addons from '@storybook/addons';
+
+import EVENTS, { ADDON_ID } from './constants';
+
+addons.register(ADDON_ID, api => {
+  const channel = addons.getChannel();
+
+  channel.on(EVENTS.REQUEST, ({ kind, name }) => {
+    const id = api.storyId(kind, name);
+    api.emit(EVENTS.RECEIVE, id);
+  });
+});