Skip to content

Commit 16d1603

Browse files
committed
fix: 🐛 improve viewport sensors and speed up Storybook
1 parent 81f9bf6 commit 16d1603

File tree

5 files changed

+30
-21
lines changed

5 files changed

+30
-21
lines changed

.storybook/webpack.config.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
const path = require('path');
2+
const {compilerOptions} = require('../tsconfig.json');
23

34
const SRC_PATH = path.join(__dirname, '../src');
45

@@ -10,7 +11,14 @@ module.exports = {
1011
loader: 'ts-loader',
1112
include: [
1213
SRC_PATH,
13-
]
14+
],
15+
options: {
16+
transpileOnly: true, // use transpileOnly mode to speed-up compilation
17+
compilerOptions: {
18+
...compilerOptions,
19+
declaration: false,
20+
},
21+
},
1422
}
1523
]
1624
},

src/ViewportObserverSensor/__story__/story.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ import StoryViewportSensorConf from './StoryViewportSensorConf';
88

99
storiesOf('Sensors/ViewportSensor/ViewportObserverSensor', module)
1010
.add('Basic example', () =>
11-
<StoryViewportSensorBasic sensor={ViewportObserverSensor} onChange={action('onChange')} />)
11+
<StoryViewportSensorBasic sensor={ViewportObserverSensor} onChange={console.log} />)
1212
.add('Horizontal', () =>
13-
<StoryViewportSensorHorizontal sensor={ViewportObserverSensor} onChange={action('onChange')} />)
13+
<StoryViewportSensorHorizontal sensor={ViewportObserverSensor} onChange={console.log} />)
1414
.add('Threshold 0%', () =>
15-
<StoryViewportSensorConf threshold={0} sensor={ViewportObserverSensor} onChange={action('onChange')} />)
15+
<StoryViewportSensorConf threshold={0} sensor={ViewportObserverSensor} onChange={console.log} />)
1616
.add('Threshold 25%', () =>
17-
<StoryViewportSensorConf threshold={0.25} sensor={ViewportObserverSensor} onChange={action('onChange')} />)
17+
<StoryViewportSensorConf threshold={0.25} sensor={ViewportObserverSensor} onChange={console.log} />)
1818
.add('Threshold 75%', () =>
19-
<StoryViewportSensorConf threshold={0.75} sensor={ViewportObserverSensor} onChange={action('onChange')} />)
19+
<StoryViewportSensorConf threshold={0.75} sensor={ViewportObserverSensor} onChange={console.log} />)
2020
.add('Threshold 100%', () =>
21-
<StoryViewportSensorConf threshold={1} sensor={ViewportObserverSensor} onChange={action('onChange')} />)
21+
<StoryViewportSensorConf threshold={1} sensor={ViewportObserverSensor} onChange={console.log} />)
2222
.add('Threshold 100%, margin 100px', () =>
2323
<StoryViewportSensorConf threshold={1} margin={[100, 100, 100, -100]} sensor={ViewportObserverSensor} onChange={action('onChange')} />);

src/ViewportScrollSensor/__story__/story.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ import StoryViewportSensorConf from '../../ViewportObserverSensor/__story__/Stor
88

99
storiesOf('Sensors/ViewportSensor/ViewportScrollSensor', module)
1010
.add('Basic example', () =>
11-
<StoryViewportSensorBasic sensor={ViewportScrollSensor} onChange={action('onChange')} />)
11+
<StoryViewportSensorBasic sensor={ViewportScrollSensor} onChange={console.log} />)
1212
.add('Horizontal', () =>
13-
<StoryViewportSensorHorizontal sensor={ViewportScrollSensor} onChange={action('onChange')} />)
13+
<StoryViewportSensorHorizontal sensor={ViewportScrollSensor} onChange={console.log} />)
1414
.add('Threshold 0%', () =>
15-
<StoryViewportSensorConf threshold={0} sensor={ViewportScrollSensor} onChange={action('onChange')} />)
15+
<StoryViewportSensorConf threshold={0} sensor={ViewportScrollSensor} onChange={console.log} />)
1616
.add('Threshold 25%', () =>
17-
<StoryViewportSensorConf threshold={0.25} sensor={ViewportScrollSensor} onChange={action('onChange')} />)
17+
<StoryViewportSensorConf threshold={0.25} sensor={ViewportScrollSensor} onChange={console.log} />)
1818
.add('Threshold 75%', () =>
19-
<StoryViewportSensorConf threshold={0.75} sensor={ViewportScrollSensor} onChange={action('onChange')} />)
19+
<StoryViewportSensorConf threshold={0.75} sensor={ViewportScrollSensor} onChange={console.log} />)
2020
.add('Threshold 100%', () =>
21-
<StoryViewportSensorConf threshold={1} sensor={ViewportScrollSensor} onChange={action('onChange')} />)
21+
<StoryViewportSensorConf threshold={1} sensor={ViewportScrollSensor} onChange={console.log} />)
2222
.add('Threshold 100%, margin 100px', () =>
2323
<StoryViewportSensorConf threshold={1} margin={[100, 100, 100, 100]} sensor={ViewportScrollSensor} onChange={action('onChange')} />);

src/ViewportScrollSensor/index.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export interface IViewportScrollSensorState {
5656
visible: boolean;
5757
}
5858

59-
export class ViewportScrollSensor<TProps extends IViewportScrollSensorProps, TState extends IViewportScrollSensorState> extends Component<TProps, TState> {
59+
export class ViewportScrollSensor extends Component<IViewportScrollSensorProps, IViewportScrollSensorState> {
6060
static defaultProps = {
6161
threshold: 0,
6262
throttle: 50,
@@ -66,9 +66,9 @@ export class ViewportScrollSensor<TProps extends IViewportScrollSensorProps, TSt
6666
mounted: boolean = false;
6767
el: HTMLElement;
6868

69-
state: TState = {
69+
state: IViewportScrollSensorState = {
7070
visible: false
71-
} as TState;
71+
};
7272

7373
ref = (originalRef) => (el) => {
7474
this.el = el;

src/ViewportSensor/index.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ import faccToHoc, {divWrapper} from '../util/faccToHoc';
55

66
let Sensor: any = ViewportObserverSensor;
77

8-
if (!(window as any).IntersectionObserver) {
9-
const loader = () => import('../ViewportScrollSensor').then((module) => module.ViewportScrollSensor);
10-
11-
Sensor = loadable({loader});
12-
Sensor.load();
8+
if (typeof window === 'object') {
9+
if (!(window as any).IntersectionObserver) {
10+
const loader = () => import('../ViewportScrollSensor').then((module) => module.ViewportScrollSensor);
11+
Sensor = loadable({loader});
12+
Sensor.load();
13+
}
1314
}
1415

1516
export const ViewportSensor: React.StatelessComponent<IViewportObserverSensorProps> = (props) => {

0 commit comments

Comments
 (0)