fix: 🐛 improve viewport sensors and speed up Storybook

streamich · Dec 25, 2018 · 16d1603 · 16d1603
1 parent 81f9bf6
commit 16d1603
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 21 deletions.
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const {compilerOptions} = require('../tsconfig.json');
 
 const SRC_PATH = path.join(__dirname, '../src');
 
@@ -10,7 +11,14 @@ module.exports = {
         loader: 'ts-loader',
         include: [
           SRC_PATH,
-        ]
+        ],
+        options: {
+          transpileOnly: true, // use transpileOnly mode to speed-up compilation
+          compilerOptions: {
+            ...compilerOptions,
+            declaration: false,
+          },
+        },
       }
     ]
   },

diff --git a/src/ViewportObserverSensor/__story__/story.tsx b/src/ViewportObserverSensor/__story__/story.tsx
@@ -8,16 +8,16 @@ import StoryViewportSensorConf from './StoryViewportSensorConf';
 
 storiesOf('Sensors/ViewportSensor/ViewportObserverSensor', module)
   .add('Basic example', () =>
-    <StoryViewportSensorBasic sensor={ViewportObserverSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorBasic sensor={ViewportObserverSensor} onChange={console.log} />)
   .add('Horizontal', () =>
-    <StoryViewportSensorHorizontal sensor={ViewportObserverSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorHorizontal sensor={ViewportObserverSensor} onChange={console.log} />)
   .add('Threshold 0%', () =>
-    <StoryViewportSensorConf threshold={0} sensor={ViewportObserverSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={0} sensor={ViewportObserverSensor} onChange={console.log} />)
   .add('Threshold 25%', () =>
-    <StoryViewportSensorConf threshold={0.25} sensor={ViewportObserverSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={0.25} sensor={ViewportObserverSensor} onChange={console.log} />)
   .add('Threshold 75%', () =>
-    <StoryViewportSensorConf threshold={0.75} sensor={ViewportObserverSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={0.75} sensor={ViewportObserverSensor} onChange={console.log} />)
   .add('Threshold 100%', () =>
-    <StoryViewportSensorConf threshold={1} sensor={ViewportObserverSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={1} sensor={ViewportObserverSensor} onChange={console.log} />)
   .add('Threshold 100%, margin 100px', () =>
     <StoryViewportSensorConf threshold={1} margin={[100, 100, 100, -100]} sensor={ViewportObserverSensor} onChange={action('onChange')} />);
diff --git a/src/ViewportScrollSensor/__story__/story.tsx b/src/ViewportScrollSensor/__story__/story.tsx
@@ -8,16 +8,16 @@ import StoryViewportSensorConf from '../../ViewportObserverSensor/__story__/Stor
 
 storiesOf('Sensors/ViewportSensor/ViewportScrollSensor', module)
   .add('Basic example', () =>
-    <StoryViewportSensorBasic sensor={ViewportScrollSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorBasic sensor={ViewportScrollSensor} onChange={console.log} />)
   .add('Horizontal', () =>
-    <StoryViewportSensorHorizontal sensor={ViewportScrollSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorHorizontal sensor={ViewportScrollSensor} onChange={console.log} />)
   .add('Threshold 0%', () =>
-    <StoryViewportSensorConf threshold={0} sensor={ViewportScrollSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={0} sensor={ViewportScrollSensor} onChange={console.log} />)
   .add('Threshold 25%', () =>
-    <StoryViewportSensorConf threshold={0.25} sensor={ViewportScrollSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={0.25} sensor={ViewportScrollSensor} onChange={console.log} />)
   .add('Threshold 75%', () =>
-    <StoryViewportSensorConf threshold={0.75} sensor={ViewportScrollSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={0.75} sensor={ViewportScrollSensor} onChange={console.log} />)
   .add('Threshold 100%', () =>
-    <StoryViewportSensorConf threshold={1} sensor={ViewportScrollSensor} onChange={action('onChange')} />)
+    <StoryViewportSensorConf threshold={1} sensor={ViewportScrollSensor} onChange={console.log} />)
   .add('Threshold 100%, margin 100px', () =>
     <StoryViewportSensorConf threshold={1} margin={[100, 100, 100, 100]} sensor={ViewportScrollSensor} onChange={action('onChange')} />);
diff --git a/src/ViewportScrollSensor/index.ts b/src/ViewportScrollSensor/index.ts
@@ -56,7 +56,7 @@ export interface IViewportScrollSensorState {
   visible: boolean;
 }
 
-export class ViewportScrollSensor<TProps extends IViewportScrollSensorProps, TState extends IViewportScrollSensorState> extends Component<TProps, TState> {
+export class ViewportScrollSensor extends Component<IViewportScrollSensorProps, IViewportScrollSensorState> {
   static defaultProps = {
     threshold: 0,
     throttle: 50,
@@ -66,9 +66,9 @@ export class ViewportScrollSensor<TProps extends IViewportScrollSensorProps, TSt
   mounted: boolean = false;
   el: HTMLElement;
 
-  state: TState = {
+  state: IViewportScrollSensorState = {
     visible: false
-  } as TState;
+  };
 
   ref = (originalRef) => (el) => {
     this.el = el;

diff --git a/src/ViewportSensor/index.ts b/src/ViewportSensor/index.ts
@@ -5,11 +5,12 @@ import faccToHoc, {divWrapper} from '../util/faccToHoc';
 
 let Sensor: any = ViewportObserverSensor;
 
-if (!(window as any).IntersectionObserver) {
-  const loader = () => import('../ViewportScrollSensor').then((module) => module.ViewportScrollSensor);
-
-  Sensor = loadable({loader});
-  Sensor.load();
+if (typeof window === 'object') {
+  if (!(window as any).IntersectionObserver) {
+    const loader = () => import('../ViewportScrollSensor').then((module) => module.ViewportScrollSensor);
+    Sensor = loadable({loader});
+    Sensor.load();
+  }
 }
 
 export const ViewportSensor: React.StatelessComponent<IViewportObserverSensorProps> = (props) => {