withStorySource deprecation

addons/docs/src/blocks/Source.tsx

@@ -40,12 +40,15 @@ const extract = (targetId: string, { source, locationsMap }: StorySource) => {
   if (!location) return null;
   const { startBody: start, endBody: end } = location;
   const lines = source.split('\n');
-  if (start.line === end.line) {
+  if (start.line === end.line && lines[start.line - 1] !== undefined) {
     return lines[start.line - 1].substring(start.col, end.col);
   }
   // NOTE: storysource locations are 1-based not 0-based!
   const startLine = lines[start.line - 1];
   const endLine = lines[end.line - 1];
+  if (startLine === undefined || endLine === undefined) {
+    return source;
+  }
   return [
     startLine.substring(start.col),
     ...lines.slice(start.line, end.line - 1),

addons/storysource/src/index.ts

@@ -1,6 +1,7 @@
 import { ADDON_ID, PANEL_ID } from './events';
+import { withStorySource } from './preview';
 
-export { ADDON_ID, PANEL_ID };
+export { ADDON_ID, PANEL_ID, withStorySource };
 
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();

addons/storysource/src/preview.ts

@@ -0,0 +1,10 @@
+export function withStorySource(source: string, locationsMap = {}) {
+  // eslint-disable-next-line no-console
+  console.error(
+    '@storybook/addon-storysource/withStorySource is deprecated, please use paramaters instead.'
+  );
+
+  return (storyFn: (context: any) => React.ReactNode, context: any) => {
+    return storyFn(context);
+  };
+}

examples/html-kitchen-sink/stories/button.html

@@ -0,0 +1 @@
+<button>Hello world</button>

examples/html-kitchen-sink/stories/source-loader.stories.js

@@ -0,0 +1,24 @@
+import button from './button.html';
+
+export default {
+  title: 'Addons/Source loader',
+};
+
+export const Button = () => button;
+Button.story = {
+  parameters: {
+    storySource: {
+      source: button,
+    },
+  },
+};
+
+export const SimpleStory = () =>
+  `<p>
+      <strong>
+        This is a fragment of HTML
+      </strong>
+    </p>`;
+SimpleStory.story = {
+  name: 'Very simple story',
+};