Merge pull request #133 from reg-viz/add-whether-in-storycap

Add function to get whether is in storycap
reg-viz · Oct 21, 2019 · 543c545 · 543c545
2 parents 2967ecc + 1402460
commit 543c545
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 9 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -175,7 +175,7 @@ $ zisui http://your.storybook.com
 $ storycap http://your.storybook.com
 ```
 
-All CLI options of _zisui_ are available with storycap.
+All CLI options of _zisui_ are available with Storycap.
 
 ### Managed mode for React
 
@@ -195,7 +195,7 @@ You should replace it:
 import 'storycap/register';
 ```
 
-And You should edit `.storybook/config.js`:
+And you should edit `.storybook/config.js`:
 
 ```js
 /* .storybook/config.js */
@@ -221,7 +221,7 @@ addDecorator(withScreenshot({
 });
 ```
 
-**Remarks**: And storycap accepts [Storybook's global parameters notation](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#options-addon-deprecated), so using `addParameters` is recommended if you use Storybook v5.0 or later:
+**Remarks**: Storycap accepts [Storybook's global parameters notation](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#options-addon-deprecated), so `addParameters` is recommended if you use Storybook v5.0 or later:
 
 ```js
 /* .storybook/config.js */

diff --git a/README.md b/README.md
@@ -10,8 +10,8 @@
 
 > A [Storybook][storybook] Addon, Save the screenshot image of your stories :camera: via [Puppeteer][puppeteer].
 
-Storycap takes a screenshot and saves it.  
-It is primarily responsible for image generation necessary for Visual Testing such as `reg-viz`.
+Storycap crawls your Storybook and takes screenshot images.
+It is primarily responsible for image generation necessary for Visual Testing such as [reg-suit](https://github.com/reg-viz/reg-suit).
 
 <!-- toc -->
 
@@ -24,9 +24,10 @@ It is primarily responsible for image generation necessary for Visual Testing su
     - [Run `storycap` Command](#run-storycap-command)
 - [API](#api)
   - [`withScreenshot`](#withscreenshot)
-  - [type `ScreenohotOptions`](#type-screenohotoptions)
+  - [type `ScreenshotOptions`](#type-screenshotoptions)
   - [type `Variants`](#type-variants)
   - [type `Viewport`](#type-viewport)
+  - [function `isScreenshot`](#function-isscreenshot)
 - [Command Line Options](#command-line-options)
 - [Multiple PNGs from 1 story](#multiple-pngs-from-1-story)
   - [Basic usage](#basic-usage)
@@ -190,7 +191,7 @@ A Storybook decorator to notify Storycap to captures stories.
 
 **Note:** Using `withScreenshot` as function is deprecated. Use `addParameters` if you give screenshot options.
 
-### type `ScreenohotOptions`
+### type `ScreenshotOptions`
 
 `ScreenshotOptions` object is available as the value of the key `screenshot` of `addParameters` argument or `withScreenshot` argument.
 
@@ -281,6 +282,14 @@ addParameters({
 });
 ```
 
+### function `isScreenshot`
+
+```typescript
+function isScreenshot(): boolean;
+```
+
+Returns whether current process runs in Storycap browser. It's useful to change your stories' behavior only in Storycap (e.g. disable JavaScript animation).
+
 ## Command Line Options
 
 <!-- inject:clihelp -->

diff --git a/examples/v5-managed-react/src/stories/index.js b/examples/v5-managed-react/src/stories/index.js
@@ -9,6 +9,8 @@ import { Button, Welcome } from '@storybook/react/demo';
 import MyButton from '../MyButton';
 import MyInputText from '../MyInputText';
 
+import { isScreenshot } from 'storycap';
+
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 storiesOf('Welcome_override', module)
 .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
@@ -23,7 +25,7 @@ storiesOf('Welcome_override', module)
 });
 
 storiesOf('Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello { isScreenshot() ? 'Storycap' : 'Button'}</Button>)
   .add('with some emoji', () => (
     <Button onClick={action('clicked')}>
       <span role="img" aria-label="so cool">

diff --git a/packages/storycap/package.json b/packages/storycap/package.json
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "clean": "rimraf lib",
-    "build": "tsc --p tsconfig.build.json",
+    "build": "tsc --p tsconfig.build.json && tsc -p tsconfig.client.json",
     "prepare": "yarn clean && yarn build",
     "test": "jest",
     "typedoc": "typedoc --out \"../../dist-pages/typedoc/storycap\" --ignoreCompilerErrors --tsconfig tsconfig.build.json src"

diff --git a/packages/storycap/src/client/is-screenshot.ts b/packages/storycap/src/client/is-screenshot.ts
@@ -0,0 +1,8 @@
+/**
+ *
+ * @returns Whether current process runs in Storycap browser.
+ *
+ **/
+export function isScreenshot() {
+  return !!(window as any).emitCatpture;
+}
diff --git a/packages/storycap/src/index.ts b/packages/storycap/src/index.ts
@@ -1,2 +1,3 @@
 export { withScreenshot } from './client/with-screenshot';
+export { isScreenshot } from './client/is-screenshot';
 export { ScreenshotOptions } from './shared/types';
diff --git a/packages/storycap/tsconfig.client.json b/packages/storycap/tsconfig.client.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "downlevelIteration": true,
+    "rootDir": "./src",
+    "outDir": "./lib"
+  },
+  "exclude": ["node_modules", "lib", "src/node"]
+}