Initial web implementation

Summary: @​public

This diff does a couple of things:
- Move all the code in a src/ folder
- Move bezier.js in the Animated folder
- Rename Animated.js into AnimatedImplementation.js and adds two entry points: AnimatedReactNative.js and AnimatedWeb.js
- Implement very dumb polyfills for flattenStyle, Set and InteractionManager
- Import my work in progress demo.html file to make sure that the code is actually working.

Everything is not working correctly:
- It calls forceUpdate on every frame and doesn't use bindings because setNativeProps is not implemented
- None of the style: {transform} are working because React web doesn't know about the array notation for transform
- The demo need more work

Reviewed By: @sahrens

Differential Revision: D2464277

Libraries/Animated/examples/style.css

@@ -0,0 +1,81 @@
+html, h1, h2 {
+ font-family: 'Roboto', sans-serif;
+ font-weight: 300;
+}
+
+.container {
+  width: 800px;
+  margin: 0 auto;
+}
+
+.circle {
+  margin: 2px;
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  display: inline-block;
+  box-shadow: 0px 1px 2px #999;
+  text-shadow: 0px 1px 2px #999;
+  background-image: url(pic1.jpg);
+  background-size: cover;
+  line-height: 80px;
+  vertical-align: bottom;
+  text-align: center;
+  color: white;
+  font-size: 10px;
+}
+
+.circle:nth-child(2) {
+  background-image: url(pic2.jpg);
+}
+
+.circle:nth-child(3) {
+  background-image: url(pic3.jpg);
+}
+
+div.code {
+  box-shadow: 0px 1px 2px #999;
+  width: 600px;
+  padding: 5px;
+  position: relative;
+  margin: 0 auto;
+  margin-bottom: 40px;
+}
+
+div.code .reset {
+  float: right;
+}
+
+div.code pre {
+  padding: 2px;
+}
+
+hr {
+  border: none;
+  border-bottom: 1px solid #D9D9D9;
+  margin: 0;
+}
+
+button {
+  vertical-align: top;
+}
+
+.example > span {
+  color: #333;
+  font-size: 13px;
+}
+
+.example {
+  position: relative;
+  height: 60px;
+}
+
+.code pre {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1;
+}
+
+.highlight {
+  background: rgb(228, 254, 253);
+}

Libraries/Animated/release/gulpfile.js

@@ -0,0 +1,160 @@
+/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+'use strict';
+
+var babel = require('gulp-babel');
+var babelPluginDEV = require('fbjs-scripts/babel/dev-expression');
+var babelPluginModules = require('fbjs-scripts/babel/rewrite-modules');
+var del = require('del');
+var derequire = require('gulp-derequire');
+var flatten = require('gulp-flatten');
+var gulp = require('gulp');
+var gulpUtil = require('gulp-util');
+var header = require('gulp-header');
+var objectAssign = require('object-assign');
+var runSequence = require('run-sequence');
+var webpackStream = require('webpack-stream');
+
+var DEVELOPMENT_HEADER = [
+  '/**',
+  ' * Animated v<%= version %>',
+  ' */'
+].join('\n') + '\n';
+var PRODUCTION_HEADER = [
+  '/**',
+  ' * Animated v<%= version %>',
+  ' *',
+  ' * Copyright 2013-2015, Facebook, Inc.',
+  ' * All rights reserved.',
+  ' *',
+  ' * This source code is licensed under the BSD-style license found in the',
+  ' * LICENSE file in the root directory of this source tree. An additional grant',
+  ' * of patent rights can be found in the PATENTS file in the same directory.',
+  ' *',
+  ' */'
+].join('\n') + '\n';
+
+var babelOpts = {
+  nonStandard: true,
+  loose: [
+    'es6.classes'
+  ],
+  stage: 1,
+  plugins: [babelPluginDEV, babelPluginModules],
+  _moduleMap: objectAssign({}, require('fbjs/module-map'), {
+    'React': 'react',
+  })
+};
+
+var buildDist = function(opts) {
+  var webpackOpts = {
+    debug: opts.debug,
+    externals: {
+      'react': 'React',
+    },
+    module: {
+      loaders: [
+        {test: /\.js$/, loader: 'babel'}
+      ],
+    },
+    output: {
+      filename: opts.output,
+      library: 'Animated'
+    },
+    plugins: [
+      new webpackStream.webpack.DefinePlugin({
+        'process.env.NODE_ENV': JSON.stringify(
+          opts.debug ? 'development' : 'production'
+        ),
+      }),
+      new webpackStream.webpack.optimize.OccurenceOrderPlugin(),
+      new webpackStream.webpack.optimize.DedupePlugin()
+    ]
+  };
+  if (!opts.debug) {
+    webpackOpts.plugins.push(
+      new webpackStream.webpack.optimize.UglifyJsPlugin({
+        compress: {
+          hoist_vars: true,
+          screw_ie8: true,
+          warnings: false
+        }
+      })
+    );
+  }
+  return webpackStream(webpackOpts, null, function(err, stats) {
+    if (err) {
+      throw new gulpUtil.PluginError('webpack', err);
+    }
+    if (stats.compilation.errors.length) {
+      throw new gulpUtil.PluginError('webpack', stats.toString());
+    }
+  });
+};
+
+var paths = {
+  dist: 'dist',
+  entry: 'lib/AnimatedWeb.js',
+  lib: 'lib',
+  src: [
+    '*src/**/*.js',
+    '!src/**/__tests__/**/*.js',
+    '!src/**/__mocks__/**/*.js'
+  ],
+};
+
+gulp.task('clean', function(cb) {
+  del([paths.dist, paths.lib], cb);
+});
+
+gulp.task('modules', function() {
+  return gulp
+    .src(paths.src, {cwd: '../'})
+    .pipe(babel(babelOpts))
+    .pipe(flatten())
+    .pipe(gulp.dest(paths.lib));
+});
+
+gulp.task('dist', ['modules'], function () {
+  var distOpts = {
+    debug: true,
+    output: 'animated.js'
+  };
+  return gulp
+    .src(paths.entry)
+    .pipe(buildDist(distOpts))
+    .pipe(derequire())
+    .pipe(header(DEVELOPMENT_HEADER, {
+      version: process.env.npm_package_version
+    }))
+    .pipe(gulp.dest(paths.dist));
+});
+
+gulp.task('dist:min', ['modules'], function () {
+  var distOpts = {
+    debug: false,
+    output: 'animated.min.js'
+  };
+  return gulp
+    .src(paths.entry)
+    .pipe(buildDist(distOpts))
+    .pipe(header(PRODUCTION_HEADER, {
+      version: process.env.npm_package_version
+    }))
+    .pipe(gulp.dest(paths.dist));
+});
+
+gulp.task('watch', function() {
+  gulp.watch(paths.src, ['modules']);
+});
+
+gulp.task('default', function(cb) {
+  runSequence('clean', 'modules', ['dist', 'dist:min'], cb);
+});

Libraries/Animated/release/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-animated",
+  "description": "Animated provides powerful mechanisms for animating your React views",
+  "version": "0.1.0",
+  "keywords": [
+    "react",
+    "animated",
+    "animation"
+  ],
+  "license": "BSD-3-Clause",
+  "main": "Animated.js",
+  "dependencies": {
+    "fbjs": "^0.2.1"
+  },
+  "scripts": {
+    "build": "gulp"
+  },
+  "devDependencies": {
+    "babel-core": "^5.8.25",
+    "babel-loader": "^5.3.2",
+    "del": "^1.2.0",
+    "fbjs-scripts": "^0.2.0",
+    "gulp": "^3.9.0",
+    "gulp-babel": "^5.1.0",
+    "gulp-derequire": "^2.1.0",
+    "gulp-flatten": "^0.1.0",
+    "gulp-header": "^1.2.2",
+    "gulp-util": "^3.0.6",
+    "object-assign": "^3.0.0",
+    "run-sequence": "^1.1.2",
+    "webpack": "1.11.0",
+    "webpack-stream": "^2.1.0"
+  }
+}

Libraries/Animated/src/Animated.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule Animated
+ * @flow
+ */
+'use strict';
+
+var AnimatedImplementation = require('AnimatedImplementation');
+var Image = require('Image');
+var Text = require('Text');
+var View = require('View');
+
+module.exports = {
+  ...AnimatedImplementation,
+  View: AnimatedImplementation.createAnimatedComponent(View),
+  Text: AnimatedImplementation.createAnimatedComponent(Text),
+  Image: AnimatedImplementation.createAnimatedComponent(Image),
+};

Libraries/Animated/Animated.js → Libraries/Animated/src/AnimatedImplementation.js

@@ -6,20 +6,17 @@
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  *
- * @providesModule Animated
+ * @providesModule AnimatedImplementation
  * @flow
  */
 'use strict';
 
 var Easing = require('Easing');
-var Image = require('Image');
 var InteractionManager = require('InteractionManager');
 var Interpolation = require('Interpolation');
 var React = require('React');
 var Set = require('Set');
 var SpringConfig = require('SpringConfig');
-var Text = require('Text');
-var View = require('View');
 var invariant = require('invariant');
 
 var flattenStyle = require('flattenStyle');
@@ -1477,19 +1474,6 @@ module.exports = {
    */
   ValueXY: AnimatedValueXY,
 
-  /**
-   * An animatable View component.
-   */
-  View: createAnimatedComponent(View),
-  /**
-   * An animatable Text component.
-   */
-  Text: createAnimatedComponent(Text),
-  /**
-   * An animatable Image component.
-   */
-  Image: createAnimatedComponent(Image),
-
   /**
    * Animates a value from an initial velocity to zero based on a decay
    * coefficient.

Libraries/Animated/src/AnimatedWeb.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ */
+'use strict';
+
+var AnimatedImplementation = require('AnimatedImplementation');
+
+module.exports = {
+  ...AnimatedImplementation,
+  div: AnimatedImplementation.createAnimatedComponent('div'),
+  span: AnimatedImplementation.createAnimatedComponent('span'),
+  img: AnimatedImplementation.createAnimatedComponent('img'),
+};

Libraries/Animated/src/polyfills/InteractionManager.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+'use strict';
+
+module.exports = {
+  createInteractionHandle: function() {},
+  clearInteractionHandle: function() {}
+};