GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 23:52:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Core: Support custom PREVIEW URL for block story iframe
This commit is contained in:
Michael Shilman 2021-12-09 14:02:14 +08:00 committed by GitHub
commit 9df10e9fdf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 2209 additions and 440 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -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.*

2
addons/actions/package.json
View File

@ -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"

2
app/angular/package.json
View File

@ -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",

2
examples/angular-cli/package.json
View File

@ -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": {

7
examples/standalone-preview/README.md
View File

@ -5,7 +5,7 @@ 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`.
@ -13,10 +13,9 @@ 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`!

3
examples/standalone-preview/addPreview.ts Normal file
View File

@ -0,0 +1,3 @@
export {};
global.PREVIEW_URL = process.env.PREVIEW_URL;

7
examples/standalone-preview/package.json
View File

@ -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"
}

2
examples/standalone-preview/storybook.html
View File

@ -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>

1
examples/standalone-preview/storybook.ts
View File

@ -1,3 +1,4 @@
import './addPreview';
import { configure, addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs';

2
lib/api/package.json
View File

@ -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"
},

2
lib/builder-webpack4/src/preview/iframe-webpack.config.ts
View File

@ -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,

2
lib/builder-webpack5/src/preview/iframe-webpack.config.ts
View File

@ -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,

2
lib/channel-postmessage/package.json
View File

@ -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"

2
lib/channel-websocket/package.json
View File

@ -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"

4
lib/components/src/blocks/Story.tsx
View File

@ -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',

2
lib/core-common/package.json
View File

@ -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"

2
lib/manager-webpack4/package.json
View File

@ -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",

2
lib/manager-webpack5/package.json
View File

@ -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",

2600
yarn.lock
View File

File diff suppressed because it is too large Load Diff