add index.js.flow

Author: bitworking

example/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "react-app"
+}

example/.flowconfig

@@ -0,0 +1,11 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
+
+[strict]

example/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "flow-bin": "^0.81.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-router-dom": "^4.3.1",

example/yarn.lock

@@ -2795,6 +2795,10 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+flow-bin@^0.81.0:
+  version "0.81.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.81.0.tgz#7f0a733dce1dad3cb1447c692639292dc3d60bf5"
+
 follow-redirects@^1.0.0:
   version "1.5.8"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.8.tgz#1dbfe13e45ad969f813e86c00e5296f525c885a1"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scrollmagic",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "React declarative component for ScrollMagic",
   "author": "bitworking",
   "license": "MIT",
@@ -37,21 +37,20 @@
     "eslint-config-react-app": "^2.1.0",
     "eslint-config-standard": "^11.0.0",
     "eslint-config-standard-react": "^6.0.0",
-    "eslint-plugin-flowtype": "2.34.1",
     "eslint-plugin-import": "2.6.0",
     "eslint-plugin-jsx-a11y": "5.1.1",
     "eslint-plugin-node": "^7.0.1",
     "eslint-plugin-promise": "^4.0.0",
     "eslint-plugin-react": "7.1.0",
     "eslint-plugin-standard": "^3.1.0",
-    "flow-bin": "^0.81.0",
     "gh-pages": "2.0.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-scripts": "^1.1.4",
     "rollup": "^0.64.1",
     "rollup-plugin-babel": "^3.0.7",
     "rollup-plugin-commonjs": "^9.1.3",
+    "rollup-plugin-cpy": "^1.0.0",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss": "^1.6.2",

rollup.config.js

@@ -4,6 +4,7 @@ import external from 'rollup-plugin-peer-deps-external'
 import postcss from 'rollup-plugin-postcss'
 import resolve from 'rollup-plugin-node-resolve'
 import url from 'rollup-plugin-url'
+import copy from 'rollup-plugin-cpy'
 
 import pkg from './package.json'
 
@@ -32,6 +33,13 @@ export default {
       plugins: [ 'external-helpers' ]
     }),
     resolve(),
-    commonjs()
+    commonjs(),
+    copy({
+      files: 'src/index.js.flow',
+      dest: 'dist',
+      options: {
+        verbose: true
+      }
+    })
   ]
 }

src/SMController.js

@@ -1,28 +1,12 @@
-// @flow
 import { default as React } from 'react';
-import type { Node } from 'react';
 import { default as ScrollMagic } from 'scrollmagic';
 
-type Props = {
-  children: Node,
-  container?: any,
-  vertical?: boolean,
-  globalSceneOptions?: any,
-  loglevel?: number,
-  refreshInterval?: number,
+export const SMContext = React.createContext();
 
-}
-
-type State = {
-  controller: ?any,
-}
-
-export const SMContext = React.createContext('scrollMagic');
-
-class SMController extends React.Component<Props, State> {
+class SMController extends React.Component<SMControllerProps, SMControllerState> {
   controller: any;
 
-  state: State = {
+  state: SMControllerState = {
     controller: null,
   }
 

src/SMScene.js

@@ -1,76 +1,14 @@
-// @flow
 import { default as React, Fragment } from 'react';
-import type { Node } from 'react';
-import { SMContext } from './SMController';
 import { default as ScrollMagic } from 'scrollmagic';
 import { TimelineMax as Timeline, TweenMax as Tween } from 'gsap/TweenMax';
 import 'gsap/TextPlugin';
 import animationGsap from './animation.gsap.js';
 import debugAddIndicators from './debug.addIndicators.js';
+import { SMContext } from './SMController';
 
 animationGsap(ScrollMagic, Timeline, Tween);
 debugAddIndicators(ScrollMagic);
 
-type TweenType = {
-  target?: any,
-  duration?: number,
-  from?: any,
-  to?: any,
-  staggerFrom?: any,
-  staggerTo?: any,
-  stagger?: number,
-  onCompleteAll?: Function,
-  position?: number | string,
-}
-
-type Props = {
-  children: Node | Function,
-
-  // scene parameters
-  duration?: number | string,
-  offset?: number | string,
-  triggerElement?: any,
-  triggerHook?: any,
-  reverse?: boolean,
-  loglevel?: number,
-  indicators?: boolean,
-  enabled?: boolean,
-
-  /* setClassToggle */
-  classToggle?: string | Array<string>,
-
-  /* setPin */
-  pin?: boolean | string,
-  pinSettings?: {
-    pushFollowers?: boolean,
-    spacerClass?: string
-  },
-
-  /* setTween */
-  tween?: TweenType,
-
-  timeline?: {
-    tweens: Array<TweenType>,
-    delay?: number,
-    stagger?: number,
-    align?: 'sequence' | 'start' | 'normal',
-    repeat?: number,
-    repeatDelay?: number,
-    yoyo?: boolean,
-
-  },
-
-}
-
-type PropsBase = Props & {
-  context: any,
-}
-
-type State = {
-  event: string,
-  progress: number,
-}
-
 const getTweenFunction = (element, tween) => {
   const {
     target,
@@ -112,10 +50,10 @@ const getTweenFunction = (element, tween) => {
   return tweenFunction;
 };
 
-class SMSceneBase extends React.PureComponent<PropsBase, State> {
+class SMSceneBase extends React.PureComponent<SMSceneBaseProps, SMSceneBaseState> {
   ref: HTMLElement;
   scene: any;
-  state = {
+  state: SMSceneBaseState = {
     event: 'init',
     progress: 0,
   }
@@ -303,7 +241,7 @@ class SMSceneBase extends React.PureComponent<PropsBase, State> {
   }
 }
 
-class SMScene extends React.PureComponent<Props, {}> {
+class SMScene extends React.PureComponent<SMSceneProps, {}> {
   static displayName = 'SMScene';
 
   render() {

src/index.js.flow

@@ -0,0 +1,89 @@
+import { default as React } from 'react';
+import type { Node } from 'react';
+
+export type SMControllerProps = {
+  children: Node,
+  container?: any,
+  vertical?: boolean,
+  globalSceneOptions?: any,
+  loglevel?: number,
+  refreshInterval?: number,
+
+}
+
+export type SMControllerState = {
+  controller: ?any,
+}
+
+declare class SMController extends React.Component<SMControllerProps, SMControllerState> {}
+
+export { SMController };
+
+export type Tween = {
+  target?: any,
+  duration?: number,
+  from?: any,
+  to?: any,
+  staggerFrom?: any,
+  staggerTo?: any,
+  stagger?: number,
+  onCompleteAll?: Function,
+  position?: number | string,
+}
+
+export type PinSettings = {
+  pushFollowers?: boolean,
+  spacerClass?: string,
+}
+
+export type Timeline = {
+  tweens: Array<Tween>,
+  delay?: number,
+  stagger?: number,
+  align?: 'sequence' | 'start' | 'normal',
+  repeat?: number,
+  repeatDelay?: number,
+  yoyo?: boolean,
+}
+
+export type SMSceneProps = {
+  children: Node | Function,
+
+  // scene parameters
+  duration?: number | string,
+  offset?: number | string,
+  triggerElement?: any,
+  triggerHook?: any,
+  reverse?: boolean,
+  loglevel?: number,
+  indicators?: boolean,
+  enabled?: boolean,
+
+  /* setClassToggle */
+  classToggle?: string | Array<string>,
+
+  /* setPin */
+  pin?: boolean | string,
+  pinSettings?: PinSettings,
+
+  /* setTween */
+  tween?: Tween,
+
+  timeline?: Timeline,
+
+}
+
+export type SMSceneBaseProps = SMSceneProps & {
+  context: any,
+}
+
+export type SMSceneBaseState = {
+  event: string,
+  progress: number,
+}
+
+declare class SMSceneBase extends React.PureComponent<SMSceneBaseProps, SMSceneBaseState> {}
+
+declare class SMScene extends React.PureComponent<SMSceneProps, {}> {}
+
+export { SMScene };

src/test.js

@@ -1,5 +1,5 @@
-import SMController from './';
-import SMScene from './';
+import { SMController } from './';
+import { SMScene } from './';
 
 describe('SMController', () => {
   it('is truthy', () => {