[refactored] views-dom to be merged into material-motion

Summary:
As explained in the README, the sharding of this library into packages is an artifact of the original approach (vend adaptors for various spring and view libraries).  Since then, we've standardized on `wobble` for springs and have leveraged `jss` to sidestep interacting directly with view libraries.  Therefore, I've folded `views-dom` into `material-motion` and merged `views-react` into `demos-react`.  Future commits will remove `views-react` entirely, instead using `jss` for the demos.

Combining `views-dom` into `material-motion` will enable us to ship a single dependency for use on sites like Codepen. (#249)

Reviewers: O2 Material Motion, O3 Material JavaScript platform reviewers, #material_motion

Tags: #material_motion

Differential Revision: http://codereview.cc/D3488

README.md

@@ -28,16 +28,6 @@ This repo houses the JavaScript implementation of Material Motion.  For more inf
 - To allow authors to write views in terms of URLs, and have the system guide the transitions between them.
   - _Note:_ This is an eventual goal.  In the near term, Material Motion is focused specifically on aiding the creation of reusable gestural interactions.
 
-## Organization ##
-
-This repo houses all the packages that comprise the Material Motion implementation for JavaScript.  They are available in [`packages`](https://github.com/material-motion/material-motion-js/tree/develop/packages/):
-
-- [`core`](https://github.com/material-motion/material-motion-js/tree/develop/packages/core/) houses the core implementation of Material Motion; including [`MotionObservable`](https://github.com/material-motion/material-motion-js/blob/develop/packages/core/src/observables/MotionObservable.ts), and [`MotionProperty`](https://github.com/material-motion/material-motion-js/blob/develop/packages/core/src/observables/MotionProperty.ts).
-
-- [`views-dom`](https://github.com/material-motion/material-motion-js/tree/develop/packages/views-dom/) houses the DOM-specific functions, like [`getPointerEventStreamsFromElement`](https://github.com/material-motion/material-motion-js/blob/develop/packages/views-dom/src/getPointerEventStreamsFromElement.ts) and [`combineStyleStreams`](https://github.com/material-motion/material-motion-js/blob/develop/packages/views-dom/src/combineStyleStreams.ts).
-
-- [`views-react`](https://github.com/material-motion/material-motion-js/tree/develop/packages/views-react/) houses the components that make Motion easy to integrate with React: [`AttachStreams`](https://github.com/material-motion/material-motion-js/blob/develop/packages/views-react/src/components/AttachStreams.tsx) and [`TransformTarget`](https://github.com/material-motion/material-motion-js/blob/develop/packages/views-react/src/components/TransformTarget.tsx).
-
 ## Contributing ##
 
 Want to contribute?  Awesome - thanks for helping!

packages/core/README.md

@@ -30,15 +30,6 @@ Material Motion is a library used by the Material Design team to prototype inter
 
 ### Other likely changes ###
 
-- **modularization**
-
-  Material Motion is split into packages:
-
-  - `material-motion` is a pure JavaScript library with no dependencies on the DOM or opinions about how the view layer is implemented.
-  - [`material-motion-views-dom`](https://github.com/material-motion/material-motion-js/tree/develop/packages/views-dom/) contains functions for working with the DOM, like `getPointerEventStreamsFromElement` and `combineStyleStreams`.
-
-  The original idea was to vend different `views` adaptors for different frameworks (React, Angular, etc.), separate from the pure logic in the core library.  [`JSS`](https://github.com/cssinjs/jss/) does a good job binding observables to CSS in a framework-agnostic way; therefore, `views-dom` is likely to be folded into `material-motion` in a future version.
-
 - **function signatures**
 
   Material Motion uses the named argument pattern to make it easier to evolve APIs without making breaking changes.  There is usually a positional shorthand.  For instance, these are equivalent:
@@ -76,12 +67,9 @@ import {
   Draggable,
   Point2DSpring,
   Tossable,
-} from 'material-motion';
-
-import {
   combineStyleStreams,
   getPointerEventStreamsFromElement,
-} from 'material-motion-views-dom';
+} from 'material-motion';
 
 // We're presuming there's an element on the page called "ball" that we want to
 // make tossable.
@@ -132,7 +120,7 @@ Unfortunately, there is not yet independent documentation for the JavaScript imp
 ## Installation ##
 
 ```
-yarn add material-motion material-motion-views-dom
+yarn add material-motion
 ```
 
 ## License ##

packages/core/package.json

@@ -13,6 +13,7 @@
     "test": "node ../../tools/test.js --only core"
   },
   "dependencies": {
+    "csstype": "2.5.6",
     "deep-equal": "1.0.1",
     "indefinite-observable": "1.0.2",
     "symbol-observable": "1.2.0",

packages/views-dom/src/combineStyleStreams.ts → packages/core/src/dom/combineStyleStreams.ts

@@ -16,6 +16,10 @@
 
 import * as CSS from 'csstype';
 
+import {
+  combineLatest,
+} from '../combineLatest';
+
 import {
   Dict,
   Dimensions,
@@ -24,8 +28,7 @@ import {
   ObservableWithMotionOperators,
   Point2D,
   StyleStreams,
-  combineLatest,
-} from 'material-motion';
+} from '../types';
 
 export type PrimitiveStyleDict = Partial<{
   opacity: number,

packages/views-dom/src/convertTouchEventsToPointerEvents.ts → packages/core/src/dom/convertTouchEventsToPointerEvents.ts

@@ -18,7 +18,7 @@ import {
   Dict,
   ObservableWithMotionOperators,
   PartialPointerEvent,
-} from 'material-motion';
+} from '../types';
 
 // TouchEvent types from https://developer.apple.com/reference/webkitjs/touchevent/
 // PointerEvent types from https://w3c.github.io/pointerevents/

packages/views-dom/src/getEventStreamFromElement.ts → packages/core/src/dom/getEventStreamFromElement.ts

@@ -16,9 +16,12 @@
 
 import {
   MotionObservable,
+} from '../observables/MotionObservable';
+
+import {
   ObservableWithMotionOperators,
   Observer,
-} from 'material-motion';
+} from '../types';
 
 // Passive event feature detection from
 // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
@@ -33,8 +36,8 @@ try {
 } catch (e) {}
 
 export function getEventStreamFromElement<U extends Event = Event>(type: string, element: Element, eventListenerOptions: AddEventListenerOptions = { passive: true }): ObservableWithMotionOperators<U> {
-  return new MotionObservable<Event>(
-    (observer: Observer<Event>) => {
+  return new MotionObservable<U>(
+    (observer: Observer<U>) => {
       if (!supportsPassiveListeners) {
         eventListenerOptions = (eventListenerOptions.capture || false) as any as AddEventListenerOptions;
       }

packages/views-dom/src/getPointerEventStreamsFromElement.ts → packages/core/src/dom/getPointerEventStreamsFromElement.ts

@@ -16,9 +16,12 @@
 
 import {
   MotionObservable,
+} from '../observables/MotionObservable';
+
+import {
   PartialPointerEvent,
   PointerEventStreams,
-} from 'material-motion';
+} from '../types';
 
 import {
   convertTouchEventsToPointerEvents,

packages/views-dom/src/index.ts → packages/core/src/dom/index.ts

@@ -16,7 +16,7 @@
 
 import {
   ObservableWithMotionOperators,
-} from 'material-motion';
+} from '../types';
 
 import {
   getEventStreamFromElement,
@@ -52,6 +52,3 @@ export { default as getEventStreamFromElement } from './getEventStreamFromElemen
 
 export * from './getPointerEventStreamsFromElement';
 export { default as getPointerEventStreamsFromElement } from './getPointerEventStreamsFromElement';
-
-export * from './SliderProperties';
-export { default as SliderProperties } from './SliderProperties';

packages/core/src/index.ts

@@ -24,5 +24,6 @@ export * from './combineLatest';
 export * from './getFrame$';
 export * from './getVelocity$';
 export * from './interactions';
+export * from './dom';
 
 export default undefined;

packages/demos-react/package.json

@@ -15,8 +15,6 @@
     "jss-preset-default": "4.0.1",
     "jsxstyle": "1.0.2",
     "material-motion": "^0.0.0",
-    "material-motion-views-dom": "^0.0.0",
-    "material-motion-views-react": "^0.0.0",
     "react": "15.4.1",
     "react-dom": "15.4.1",
     "react-router": "4.0.0-alpha.6",

packages/demos-react/src/ArticulableFinger.tsx

@@ -23,14 +23,17 @@ import {
   combineLatest,
 } from 'material-motion';
 
+import {
+  AttachStreams,
+} from './AttachStreams';
+
 import {
   SliderProperties,
-} from 'material-motion-views-dom';
+} from './SliderProperties';
 
 import {
-  AttachStreams,
   TransformTarget,
-} from 'material-motion-views-react';
+} from './TransformTarget';
 
 export class ArticulableFinger extends React.Component<{}, {}> {
   progress$ = createProperty({ initialValue: 0 });

packages/demos-react/src/JSSDemo.tsx

@@ -24,19 +24,19 @@ import {
   NumericDict,
   ObservableWithMotionOperators,
   combineLatest,
-  subscribe,
-} from 'material-motion';
-
-import {
   combineStyleStreams,
   getPointerEventStreamsFromElement,
+  subscribe,
   viewportDimensions$,
-} from 'material-motion-views-dom';
+} from 'material-motion';
 
 import {
   AttachStreams,
+} from './AttachStreams';
+
+import {
   TransformTarget,
-} from 'material-motion-views-react';
+} from './TransformTarget';
 
 const jss = createJSS().setup(preset);
 

packages/demos-react/src/MotionPropertySlider.tsx

@@ -22,7 +22,7 @@ import {
 
 import {
   AttachStreams,
-} from 'material-motion-views-react';
+} from './AttachStreams';
 
 import {
   Col,

packages/demos-react/src/ParallaxDemo.tsx

@@ -23,25 +23,25 @@ import {
   MotionProperty,
   NumericSpring,
   NumericDict,
+  combineLatest,
+  combineStyleStreams,
+  createProperty,
+  getPointerEventStreamsFromElement,
   ObservableWithMotionOperators,
   Point2DSpring,
+  subscribe,
   ThresholdRegion,
   Tossable,
-  combineLatest,
-  createProperty,
-  subscribe,
+  viewportDimensions$,
 } from 'material-motion';
 
 import {
-  combineStyleStreams,
-  getPointerEventStreamsFromElement,
-  viewportDimensions$,
-} from 'material-motion-views-dom';
+  AttachStreams,
+} from './AttachStreams';
 
 import {
-  AttachStreams,
   TransformTarget,
-} from 'material-motion-views-react';
+} from './TransformTarget';
 
 export class ParallaxDemo extends React.Component<{}, {}> {
   foregroundStyle$ = createProperty({ initialValue: {} });

packages/demos-react/src/QuickiePointerEventTest.tsx

@@ -21,13 +21,10 @@ import {
   GestureRecognitionState,
   MotionObservable,
   Subscription,
+  getPointerEventStreamsFromElement,
   getVelocity$,
 } from 'material-motion';
 
-import {
-  getPointerEventStreamsFromElement,
-} from 'material-motion-views-dom';
-
 export class QuickiePointerEventTest extends React.Component {
   state = {
     x: 0,

packages/views-dom/src/SliderProperties.ts → packages/demos-react/src/SliderProperties.ts

@@ -18,11 +18,8 @@ import {
   MotionProperty,
   ObservableWithMotionOperators,
   createProperty,
-} from 'material-motion';
-
-import {
   getEventStreamFromElement,
-} from './getEventStreamFromElement';
+} from 'material-motion';
 
 export type SliderPropertiesArgs = {
   element: HTMLInputElement,

packages/demos-react/src/SwipeableDemo.tsx

@@ -27,19 +27,19 @@ import {
   PointerEventStreams,
   Swipeable,
   Tossable,
-  createProperty,
-} from 'material-motion';
-
-import {
   combineStyleStreams,
+  createProperty,
   getPointerEventStreamsFromElement,
   viewportDimensions$,
-} from 'material-motion-views-dom';
+} from 'material-motion';
 
 import {
   AttachStreams,
+} from './AttachStreams';
+
+import {
   TransformTarget,
-} from 'material-motion-views-react';
+} from './TransformTarget';
 
 export function SwipeableDemo() {
   const width$ = viewportDimensions$.pluck('width');

packages/demos-react/src/TossableDemo.tsx

@@ -25,19 +25,19 @@ import {
   ThresholdRegion,
   Tossable,
   combineLatest,
+  combineStyleStreams,
   createProperty,
+  getPointerEventStreamsFromElement,
   subscribe,
 } from 'material-motion';
 
 import {
-  combineStyleStreams,
-  getPointerEventStreamsFromElement,
-} from 'material-motion-views-dom';
+  AttachStreams,
+} from './AttachStreams';
 
 import {
-  AttachStreams,
   TransformTarget,
-} from 'material-motion-views-react';
+} from './TransformTarget';
 
 // Stolen from mdc-web's CSS
 const SHADOW = `

packages/views-react/src/components/TransformTarget.tsx → packages/demos-react/src/TransformTarget.tsx

@@ -18,11 +18,8 @@ import * as React from 'react';
 
 import {
   Point2D,
-} from 'material-motion';
-
-import {
   buildTransformString,
-} from 'material-motion-views-dom';
+} from 'material-motion';
 
 export type TransformTargetArgs = Partial<{
   position: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky',
@@ -47,7 +44,7 @@ export type TransformTargetArgs = Partial<{
  *
  * https://drafts.csswg.org/css-transforms-2/
  */
-export default function TransformTarget({
+export function TransformTarget({
   translate = {
     x: 0,
     y: 0,
@@ -87,3 +84,4 @@ export default function TransformTarget({
     </div>
   );
 }
+export default TransformTarget;

packages/demos-react/src/routes.tsx

@@ -101,6 +101,8 @@ function Links() {
   );
 }
 
+window.TossableDemo = TossableDemo;
+
 export default function() {
   return (
     <Router>