Merge pull request #16773 from ittaibaratz/preview-url-in-block-story

Core: Support custom PREVIEW URL for block story iframe
storybookjs · Dec 9, 2021 · 9df10e9 · 9df10e9
2 parents a592650 + fa16dcc
commit 9df10e9
Show file tree

Hide file tree

Showing 19 changed files with 2,205 additions and 436 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,7 @@ dist
 .tern-port
 *.DS_Store
 .cache
+.parcel-cache
 coverage/
 *.lerna_backup
 build
@@ -41,4 +42,4 @@ examples/angular-cli/addon-jest.testresults.json
 !/**/.yarn/plugins
 !/**/.yarn/sdks
 !/**/.yarn/versions
-/**/.pnp.*
+/**/.pnp.*
diff --git a/addons/actions/package.json b/addons/actions/package.json
@@ -55,7 +55,7 @@
     "prop-types": "^15.7.2",
     "react-inspector": "^5.1.0",
     "regenerator-runtime": "^0.13.7",
-    "telejson": "^5.3.2",
+    "telejson": "^5.3.3",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2",
     "uuid-browser": "^3.1.0"

diff --git a/app/angular/package.json b/app/angular/package.json
@@ -70,7 +70,7 @@
     "regenerator-runtime": "^0.13.7",
     "sass-loader": "^10.1.0",
     "strip-json-comments": "3.1.1",
-    "telejson": "^5.3.2",
+    "telejson": "^5.3.3",
     "ts-dedent": "^2.0.0",
     "ts-loader": "^8.0.14",
     "tsconfig-paths-webpack-plugin": "^3.3.0",

diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
@@ -29,7 +29,7 @@
     "core-js": "^3.8.2",
     "rxjs": "^6.6.3",
     "sass": "^1.43.4",
-    "telejson": "^5.3.2",
+    "telejson": "^5.3.3",
     "zone.js": "^0.11.3"
   },
   "devDependencies": {

diff --git a/examples/standalone-preview/README.md b/examples/standalone-preview/README.md
@@ -5,18 +5,17 @@ This project demonstrates a preview running in standalone mode using `parcel`.
 To run the standalone preview:
 
 ```
-yarn storybook
+yarn storybook-preview
 ```
 
 This starts a `parcel` dev server on port `1337`.
 
 To view the stories in the storybook UI:
 
 ```
-cd ../official-storybook
-npm storybook -- --preview-url=http://localhost:1337/iframe.html # or yarn
+yarn storybook
 ```
 
-This runs the Storybook dev server, but instead of showing `official-storybook`'s stories, it attaches to the `parcel` dev server, lists its stories in the navigation, and shows its stories in the preview iframe.
+This runs the Storybook dev server (Found in ../official-storybook), but instead of showing `official-storybook`'s stories, it attaches to the `parcel` dev server, lists its stories in the navigation, and shows its stories in the preview iframe.
 
 > NOTE: This can be run from any working storybook, not just `official-storybook`!
diff --git a/examples/standalone-preview/addPreview.ts b/examples/standalone-preview/addPreview.ts
@@ -0,0 +1,3 @@
+export {};
+
+global.PREVIEW_URL = process.env.PREVIEW_URL;
diff --git a/examples/standalone-preview/package.json b/examples/standalone-preview/package.json
@@ -3,12 +3,15 @@
   "version": "6.5.0-alpha.2",
   "private": true,
   "scripts": {
-    "storybook": "parcel ./storybook.html --port 1337"
+    "storybook-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337",
+    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html"
   },
   "devDependencies": {
     "@storybook/addon-docs": "6.5.0-alpha.2",
+    "@storybook/cli": "6.5.0-alpha.2",
     "@storybook/react": "6.5.0-alpha.2",
-    "parcel": "^1.12.4",
+    "cross-env": "^7.0.3",
+    "parcel": "2.0.1",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   }

diff --git a/examples/standalone-preview/storybook.html b/examples/standalone-preview/storybook.html
@@ -9,7 +9,7 @@
   <body>
     <div id="root"></div>
     <div id="docs-root"></div>
-    <script src="./storybook.ts"></script>
+    <script type="module" src="./storybook.ts"></script>
     <div class="sb-errordisplay sb-wrapper">
       <div id="error-message" class="sb-heading"></div>
       <pre class="sb-errordisplay_code"><code id="error-stack"></code></pre>

diff --git a/examples/standalone-preview/storybook.ts b/examples/standalone-preview/storybook.ts
@@ -1,3 +1,4 @@
+import './addPreview';
 import { configure, addParameters } from '@storybook/react';
 import { DocsPage, DocsContainer } from '@storybook/addon-docs';
 

diff --git a/lib/api/package.json b/lib/api/package.json
@@ -52,7 +52,7 @@
     "memoizerific": "^1.11.3",
     "regenerator-runtime": "^0.13.7",
     "store2": "^2.12.0",
-    "telejson": "^5.3.2",
+    "telejson": "^5.3.3",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2"
   },

diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts
@@ -64,6 +64,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
     framework,
     frameworkPath,
     presets,
+    previewUrl,
     typescriptOptions,
     modern,
     features,
@@ -188,6 +189,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
             FRAMEWORK_OPTIONS: frameworkOptions,
             CHANNEL_OPTIONS: coreOptions?.channelOptions,
             FEATURES: features,
+            PREVIEW_URL: previewUrl,
             STORIES: stories.map((specifier) => ({
               ...specifier,
               importPathMatcher: specifier.importPathMatcher.source,

diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -65,6 +65,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
     framework,
     frameworkPath,
     presets,
+    previewUrl,
     typescriptOptions,
     modern,
     features,
@@ -192,6 +193,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
             FRAMEWORK_OPTIONS: frameworkOptions,
             CHANNEL_OPTIONS: coreOptions?.channelOptions,
             FEATURES: features,
+            PREVIEW_URL: previewUrl,
             STORIES: stories.map((specifier) => ({
               ...specifier,
               importPathMatcher: specifier.importPathMatcher.source,

diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
@@ -46,7 +46,7 @@
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "qs": "^6.10.0",
-    "telejson": "^5.3.2"
+    "telejson": "^5.3.3"
   },
   "publishConfig": {
     "access": "public"

diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json
@@ -44,7 +44,7 @@
     "@storybook/client-logger": "6.5.0-alpha.2",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
-    "telejson": "^5.3.2"
+    "telejson": "^5.3.3"
   },
   "publishConfig": {
     "access": "public"

diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
@@ -1,3 +1,4 @@
+import global from 'global';
 import React, { createElement, ElementType, FunctionComponent, Fragment } from 'react';
 
 import type { Parameters } from '@storybook/api';
@@ -7,7 +8,8 @@ import { EmptyBlock } from './EmptyBlock';
 import { ZoomContext } from './ZoomContext';
 import { Loader } from '..';
 
-const BASE_URL = 'iframe.html';
+const { PREVIEW_URL } = global;
+const BASE_URL = PREVIEW_URL || 'iframe.html';
 
 export enum StoryError {
   NO_STORY = 'No component or story to display',

diff --git a/lib/core-common/package.json b/lib/core-common/package.json
@@ -85,7 +85,7 @@
     "pretty-hrtime": "^1.0.3",
     "resolve-from": "^5.0.0",
     "slash": "^3.0.0",
-    "telejson": "^5.3.2",
+    "telejson": "^5.3.3",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2",
     "webpack": "4"

diff --git a/lib/manager-webpack4/package.json b/lib/manager-webpack4/package.json
@@ -70,7 +70,7 @@
     "regenerator-runtime": "^0.13.7",
     "resolve-from": "^5.0.0",
     "style-loader": "^1.3.0",
-    "telejson": "^5.3.2",
+    "telejson": "^5.3.3",
     "terser-webpack-plugin": "^4.2.3",
     "ts-dedent": "^2.0.0",
     "url-loader": "^4.1.1",

diff --git a/lib/manager-webpack5/package.json b/lib/manager-webpack5/package.json
@@ -67,7 +67,7 @@
     "regenerator-runtime": "^0.13.7",
     "resolve-from": "^5.0.0",
     "style-loader": "^2.0.0",
-    "telejson": "^5.3.2",
+    "telejson": "^5.3.3",
     "terser-webpack-plugin": "^5.0.3",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export {};

		global.PREVIEW_URL = process.env.PREVIEW_URL;