Improvement/ie11 demo (#27)

* rewrite demo to use hooks

* add own webpack setup to build demo

* import from build

* only transpile src files

* only transpile demo files in webpack

* copy useWatcher hook to demo

* useWatcher in demo

* update gitignore

* change how demo is published

* simplify setup

* fix code error for FPS

* build before demo is created

* remove unnecessary condition

Author: frontendphil

.circleci/config.yml

@@ -89,6 +89,9 @@ jobs:
           name: Set git name & email
           command: |
             git config --global user.name "Workflow Bot" && git config --global user.email "[email protected]"
+      - run:
+          name: build
+          command: yarn build
       - run:
           name: Build demo
           command: yarn build-demo

.gitignore

@@ -3,4 +3,5 @@
 /es
 /lib
 /node_modules
-npm-debug.log*
+npm-debug.log*
+/build

babel.config.js

@@ -0,0 +1,29 @@
+const { NODE_ENV } = process.env
+
+module.exports = {
+  presets: [
+    [
+      '@babel/env',
+      {
+        modules: NODE_ENV === 'test' ? 'auto' : false,
+        useBuiltIns: 'entry',
+        corejs: 3,
+      },
+    ],
+    '@babel/react',
+    '@babel/preset-flow',
+  ],
+  comments: true,
+  plugins: [
+    '@babel/transform-runtime',
+    '@babel/plugin-transform-flow-strip-types',
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-proposal-export-namespace-from',
+    '@babel/plugin-proposal-optional-chaining',
+
+    'lodash',
+    'syntax-dynamic-import',
+
+    ...(NODE_ENV === 'test' ? ['dynamic-import-node'] : []),
+  ],
+}

demo/src/AutoAlignment.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import Stick from '../../src'
+import Stick from '../../es'
 
 function AutoAlignment() {
   return (

demo/src/PositionAlignOverview.js

@@ -1,7 +1,8 @@
 import { compact } from 'lodash'
-import React, { Component, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 
-import Stick from '../../src'
+import Stick from '../../es'
+import { useWatcher } from './hooks'
 
 const formPairs = (listA: Array<string>, listB: Array<string>) =>
   compact(
@@ -42,44 +43,28 @@ const Node = () => (
   />
 )
 
-class FramesPerSecond extends Component {
-  state = {
-    fps: 0,
-  }
+function FramesPerSecond({ updateOnAnimationFrame }) {
+  const [fps, setFps] = useState(0)
+  const lastUpdated = useRef(Date.now())
+  const framesSinceLastUpdate = useRef(0)
 
-  lastUpdated = Date.now()
-  framesSinceLastUpdate = 0
+  const measure = useCallback(() => {
+    framesSinceLastUpdate.current += 1
 
-  startTracking() {
-    const requestCallback = this.props.updateOnAnimationFrame
-      ? requestAnimationFrame
-      : requestIdleCallback
-    this.lastCallbackAsAnimationFrame = this.props.updateOnAnimationFrame
-
-    this.animationId = requestCallback(() => this.startTracking())
-    this.measure()
-  }
-
-  measure() {
-    this.framesSinceLastUpdate += 1
-    let duration = Date.now() - this.lastUpdated
+    const duration = Date.now() - lastUpdated.current
     if (duration >= 1000) {
-      this.setState({
-        fps: this.framesSinceLastUpdate,
-      })
-      this.framesSinceLastUpdate = 0
-      this.lastUpdated = Date.now()
+      setFps(framesSinceLastUpdate.current)
+
+      framesSinceLastUpdate.current = 0
+      lastUpdated.current = Date.now()
     }
-  }
+  }, [])
 
-  componentDidMount() {
-    this.startTracking()
-  }
+  useWatcher(measure, { updateOnAnimationFrame })
 
-  render() {
-    return <div>FPS: {this.state.fps}</div>
-  }
+  return <div>FPS: {fps}</div>
 }
+
 function PositionAlignOverview() {
   const [updateOnAnimationFrame, setUpdateOnAnimationFrame] = useState(false)
   const [inline, setInline] = useState(false)

demo/src/hooks/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { default as useWatcher } from './useWatcher'

demo/src/hooks/useWatcher.js

@@ -0,0 +1,44 @@
+// @flow
+import { useEffect } from 'react'
+
+type WatcherFuncT = () => void
+type OptionsT = {|
+  updateOnAnimationFrame: boolean,
+|}
+
+function useWatcher(
+  watcher: WatcherFuncT,
+  { updateOnAnimationFrame }: OptionsT
+): void {
+  useEffect(() => {
+    let animationFrameId
+    let idleCallbackId
+
+    // do not track in node
+    if (typeof window.requestAnimationFrame !== 'undefined') {
+      const callback = () => {
+        watcher()
+
+        if (updateOnAnimationFrame) {
+          animationFrameId = requestAnimationFrame(callback)
+        } else {
+          idleCallbackId = requestIdleCallback(callback)
+        }
+      }
+
+      callback()
+    }
+
+    return () => {
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId)
+      }
+
+      if (idleCallbackId) {
+        cancelIdleCallback(idleCallbackId)
+      }
+    }
+  }, [updateOnAnimationFrame, watcher])
+}
+
+export default useWatcher

demo/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>react-stick</title>
+  </head>
+  <body>
+    <div id="demo"></div>
+  </body>
+</html>

demo/src/index.js

@@ -1,3 +1,6 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+
 import React from 'react'
 import { render } from 'react-dom'
 import { StylesAsDataAttributes } from 'substyle-glamor'

demo/src/regressions/ButtonOverlay.js

@@ -1,7 +1,6 @@
 import React from 'react'
 
-import Stick from '../../../src'
-
+import Stick from '../../../es'
 import Regression from './Regression'
 
 export default function ButtonOverlay() {