├── .flowconfig
├── .gitignore
├── .vscode
    └── settings.json
├── LICENSE
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── paths.js
    ├── polyfills.js
    ├── webpack.config.dev.js
    ├── webpack.config.prod.js
    └── webpackDevServer.config.js
├── defs
    └── dom.js
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
├── src
    ├── BrowserFeatureGate.js
    ├── Demo.js
    ├── LayoutAnimation.js
    ├── global.css
    └── index.js
└── yarn.lock


/.flowconfig:
--------------------------------------------------------------------------------
 1 | [ignore]
 2 | .*/node_modules/promise/.*
 3 | 
 4 | [include]
 5 | src
 6 | 
 7 | [libs]
 8 | defs
 9 | 
10 | [options]
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   // Place your settings in this file to overwrite default and user settings.
3 |   "editor.formatOnSave": true,
4 |   "flow.enabled": true,
5 |   "eslint.enable": true
6 | }
7 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Vincent Riemer
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Native CSS Layout Animation POC
 2 | A proof of concept implementation and demo of a layout animation system which utilizes native CSS layout and special React elements. This project was initially discussed and released at React Boston 2017.
 3 | 
 4 | ## Caveats
 5 | * Currently, the only browser to support the required `ResizeObserver` API is Chrome Canary with the *experimental web apis* flag turned on.
 6 | * This PoC is leveraging behavior (firing events on position change) that is found in the Chrome Canary implementation of `ResizeObserver` but not its corresponding spec so there is a chance that this behavior will eventually be removed and break this demo.
 7 | * This implementation only is focused on the **change** of layout on existing elements at a single level. No work has been done yet on facilitating layout animations of mount, unmount, or elements with visible children.
 8 | 
 9 | ## Getting Started
10 | Clone the repository and navigate to the root directory of the project and install the dependencies like so:
11 | 
12 | ```bash
13 | $ npm install
14 | ```
15 | 
16 | To run the project execute:
17 | 
18 | ```bash
19 | $ npm run start
20 | ```
21 | 
22 | and navigate to `localhost:3000` in Chrome Canary to try out the demo.
23 | 
24 | ### Note
25 | 
26 | This project was bootstrapped with `create-react-app` so all npm scripts that are generated by it will also work here.


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce((env, key) => {
82 |       env[key] = JSON.stringify(raw[key]);
83 |       return env;
84 |     }, {}),
85 |   };
86 | 
87 |   return { raw, stringified };
88 | }
89 | 
90 | module.exports = getClientEnvironment;
91 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | const autoprefixer = require("autoprefixer");
  2 | const path = require("path");
  3 | const webpack = require("webpack");
  4 | const HtmlWebpackPlugin = require("html-webpack-plugin");
  5 | const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
  6 | const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
  7 | const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin");
  8 | const eslintFormatter = require("react-dev-utils/eslintFormatter");
  9 | const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
 10 | const getClientEnvironment = require("./env");
 11 | const paths = require("./paths");
 12 | 
 13 | // Webpack uses `publicPath` to determine where the app is being served from.
 14 | // In development, we always serve from the root. This makes config easier.
 15 | const publicPath = "/";
 16 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 17 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 18 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 19 | const publicUrl = "";
 20 | // Get environment variables to inject into our app.
 21 | const env = getClientEnvironment(publicUrl);
 22 | 
 23 | // This is the development configuration.
 24 | // It is focused on developer experience and fast rebuilds.
 25 | // The production configuration is different and lives in a separate file.
 26 | module.exports = {
 27 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 28 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 29 |   devtool: "cheap-module-source-map",
 30 |   // These are the "entry points" to our application.
 31 |   // This means they will be the "root" imports that are included in JS bundle.
 32 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 33 |   entry: [
 34 |     require.resolve("react-hot-loader/patch"),
 35 |     // Include an alternative client for WebpackDevServer. A client's job is to
 36 |     // connect to WebpackDevServer by a socket and get notified about changes.
 37 |     // When you save a file, the client will either apply hot updates (in case
 38 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 39 |     // make a syntax error, this client will display a syntax error overlay.
 40 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 41 |     // to bring better experience for Create React App users. You can replace
 42 |     // the line below with these two lines if you prefer the stock client:
 43 |     // require.resolve('webpack-dev-server/client') + '?/',
 44 |     // require.resolve('webpack/hot/dev-server'),
 45 |     require.resolve("react-dev-utils/webpackHotDevClient"),
 46 |     // We ship a few polyfills by default:
 47 |     require.resolve("./polyfills"),
 48 |     // Errors should be considered fatal in development
 49 |     require.resolve("react-error-overlay"),
 50 |     // Finally, this is your app's code:
 51 |     paths.appIndexJs,
 52 |     // We include the app code last so that if there is a runtime error during
 53 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 54 |     // changing JS code would still trigger a refresh.
 55 |   ],
 56 |   output: {
 57 |     // Next line is not used in dev but WebpackDevServer crashes without it:
 58 |     path: paths.appBuild,
 59 |     // Add /* filename */ comments to generated require()s in the output.
 60 |     pathinfo: true,
 61 |     // This does not produce a real file. It's just the virtual path that is
 62 |     // served by WebpackDevServer in development. This is the JS bundle
 63 |     // containing code from all our entry points, and the Webpack runtime.
 64 |     filename: "static/js/bundle.js",
 65 |     // There are also additional JS chunk files if you use code splitting.
 66 |     chunkFilename: "static/js/[name].chunk.js",
 67 |     // This is the URL that app is served from. We use "/" in development.
 68 |     publicPath: publicPath,
 69 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 70 |     devtoolModuleFilenameTemplate: info =>
 71 |       path.resolve(info.absoluteResourcePath).replace(/\\/g, "/"),
 72 |   },
 73 |   resolve: {
 74 |     // This allows you to set a fallback for where Webpack should look for modules.
 75 |     // We placed these paths second because we want `node_modules` to "win"
 76 |     // if there are any conflicts. This matches Node resolution mechanism.
 77 |     // https://github.com/facebookincubator/create-react-app/issues/253
 78 |     modules: ["node_modules", paths.appNodeModules].concat(
 79 |       // It is guaranteed to exist because we tweak it in `env.js`
 80 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 81 |     ),
 82 |     // These are the reasonable defaults supported by the Node ecosystem.
 83 |     // We also include JSX as a common component filename extension to support
 84 |     // some tools, although we do not recommend using it, see:
 85 |     // https://github.com/facebookincubator/create-react-app/issues/290
 86 |     // `web` extension prefixes have been added for better support
 87 |     // for React Native Web.
 88 |     extensions: [".web.js", ".js", ".json", ".web.jsx", ".jsx"],
 89 |     alias: {
 90 |       // Support React Native Web
 91 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 92 |       "react-native": "react-native-web",
 93 |     },
 94 |     plugins: [
 95 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 96 |       // This often causes confusion because we only process files within src/ with babel.
 97 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 98 |       // please link the files into your node_modules/ and let module-resolution kick in.
 99 |       // Make sure your source files are compiled, as they will not be processed in any way.
100 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
101 |     ],
102 |   },
103 |   module: {
104 |     strictExportPresence: true,
105 |     rules: [
106 |       // TODO: Disable require.ensure as it's not a standard language feature.
107 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
108 |       // { parser: { requireEnsure: false } },
109 | 
110 |       // First, run the linter.
111 |       // It's important to do this before Babel processes the JS.
112 |       {
113 |         test: /\.(js|jsx)$/,
114 |         enforce: "pre",
115 |         use: [
116 |           {
117 |             options: {
118 |               formatter: eslintFormatter,
119 |               eslintPath: require.resolve("eslint"),
120 |             },
121 |             loader: require.resolve("eslint-loader"),
122 |           },
123 |         ],
124 |         include: paths.appSrc,
125 |       },
126 |       {
127 |         // "oneOf" will traverse all following loaders until one will
128 |         // match the requirements. When no loader matches it will fall
129 |         // back to the "file" loader at the end of the loader list.
130 |         oneOf: [
131 |           // "url" loader works like "file" loader except that it embeds assets
132 |           // smaller than specified limit in bytes as data URLs to avoid requests.
133 |           // A missing `test` is equivalent to a match.
134 |           {
135 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
136 |             loader: require.resolve("url-loader"),
137 |             options: {
138 |               limit: 10000,
139 |               name: "static/media/[name].[hash:8].[ext]",
140 |             },
141 |           },
142 |           // Process JS with Babel.
143 |           {
144 |             test: /\.(js|jsx)$/,
145 |             include: paths.appSrc,
146 |             loader: require.resolve("babel-loader"),
147 |             options: {
148 |               // This is a feature of `babel-loader` for webpack (not Babel itself).
149 |               // It enables caching results in ./node_modules/.cache/babel-loader/
150 |               // directory for faster rebuilds.
151 |               cacheDirectory: true,
152 |             },
153 |           },
154 |           // "postcss" loader applies autoprefixer to our CSS.
155 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
156 |           // "style" loader turns CSS into JS modules that inject <style> tags.
157 |           // In production, we use a plugin to extract that CSS to a file, but
158 |           // in development "style" loader enables hot editing of CSS.
159 |           {
160 |             test: /\.css$/,
161 |             use: [
162 |               require.resolve("style-loader"),
163 |               {
164 |                 loader: require.resolve("css-loader"),
165 |                 options: {
166 |                   importLoaders: 1,
167 |                 },
168 |               },
169 |               {
170 |                 loader: require.resolve("postcss-loader"),
171 |                 options: {
172 |                   // Necessary for external CSS imports to work
173 |                   // https://github.com/facebookincubator/create-react-app/issues/2677
174 |                   ident: "postcss",
175 |                   plugins: () => [
176 |                     require("postcss-flexbugs-fixes"),
177 |                     autoprefixer({
178 |                       browsers: [
179 |                         ">1%",
180 |                         "last 4 versions",
181 |                         "Firefox ESR",
182 |                         "not ie < 9", // React doesn't support IE8 anyway
183 |                       ],
184 |                       flexbox: "no-2009",
185 |                     }),
186 |                   ],
187 |                 },
188 |               },
189 |             ],
190 |           },
191 |           // "file" loader makes sure those assets get served by WebpackDevServer.
192 |           // When you `import` an asset, you get its (virtual) filename.
193 |           // In production, they would get copied to the `build` folder.
194 |           // This loader don't uses a "test" so it will catch all modules
195 |           // that fall through the other loaders.
196 |           {
197 |             // Exclude `js` files to keep "css" loader working as it injects
198 |             // it's runtime that would otherwise processed through "file" loader.
199 |             // Also exclude `html` and `json` extensions so they get processed
200 |             // by webpacks internal loaders.
201 |             exclude: [/\.js$/, /\.html$/, /\.json$/],
202 |             loader: require.resolve("file-loader"),
203 |             options: {
204 |               name: "static/media/[name].[hash:8].[ext]",
205 |             },
206 |           },
207 |         ],
208 |       },
209 |       // ** STOP ** Are you adding a new loader?
210 |       // Make sure to add the new loader(s) before the "file" loader.
211 |     ],
212 |   },
213 |   plugins: [
214 |     // Makes some environment variables available in index.html.
215 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
216 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
217 |     // In development, this will be an empty string.
218 |     new InterpolateHtmlPlugin(env.raw),
219 |     // Generates an `index.html` file with the <script> injected.
220 |     new HtmlWebpackPlugin({
221 |       inject: true,
222 |       template: paths.appHtml,
223 |     }),
224 |     // Add module names to factory functions so they appear in browser profiler.
225 |     new webpack.NamedModulesPlugin(),
226 |     // Makes some environment variables available to the JS code, for example:
227 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
228 |     new webpack.DefinePlugin(env.stringified),
229 |     // This is necessary to emit hot updates (currently CSS only):
230 |     new webpack.HotModuleReplacementPlugin(),
231 |     // Watcher doesn't work well if you mistype casing in a path so we use
232 |     // a plugin that prints an error when you attempt to do this.
233 |     // See https://github.com/facebookincubator/create-react-app/issues/240
234 |     new CaseSensitivePathsPlugin(),
235 |     // If you require a missing module and then `npm install` it, you still have
236 |     // to restart the development server for Webpack to discover it. This plugin
237 |     // makes the discovery automatic so you don't have to restart.
238 |     // See https://github.com/facebookincubator/create-react-app/issues/186
239 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
240 |     // Moment.js is an extremely popular library that bundles large locale files
241 |     // by default due to how Webpack interprets its code. This is a practical
242 |     // solution that requires the user to opt into importing specific locales.
243 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
244 |     // You can remove this if you don't use Moment.js:
245 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
246 |   ],
247 |   // Some libraries import Node modules but don't use them in the browser.
248 |   // Tell Webpack to provide empty mocks for them so importing them works.
249 |   node: {
250 |     dgram: "empty",
251 |     fs: "empty",
252 |     net: "empty",
253 |     tls: "empty",
254 |   },
255 |   // Turn off performance hints during development because we don't do any
256 |   // splitting or minification in interest of speed. These warnings become
257 |   // cumbersome.
258 |   performance: {
259 |     hints: false,
260 |   },
261 | };
262 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  8 | const ManifestPlugin = require('webpack-manifest-plugin');
  9 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 10 | const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 11 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 12 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 13 | const paths = require('./paths');
 14 | const getClientEnvironment = require('./env');
 15 | 
 16 | // Webpack uses `publicPath` to determine where the app is being served from.
 17 | // It requires a trailing slash, or the file assets will get an incorrect path.
 18 | const publicPath = paths.servedPath;
 19 | // Some apps do not use client-side routing with pushState.
 20 | // For these, "homepage" can be set to "." to enable relative asset paths.
 21 | const shouldUseRelativeAssetPaths = publicPath === './';
 22 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 23 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 24 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 25 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 26 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 27 | const publicUrl = publicPath.slice(0, -1);
 28 | // Get environment variables to inject into our app.
 29 | const env = getClientEnvironment(publicUrl);
 30 | 
 31 | // Assert this just to be safe.
 32 | // Development builds of React are slow and not intended for production.
 33 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 34 |   throw new Error('Production builds must have NODE_ENV=production.');
 35 | }
 36 | 
 37 | // Note: defined here because it will be used more than once.
 38 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 39 | 
 40 | // ExtractTextPlugin expects the build output to be flat.
 41 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 42 | // However, our output is structured with css, js and media folders.
 43 | // To have this structure working with relative paths, we have to use custom options.
 44 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 45 |   ? // Making sure that the publicPath goes back to to build folder.
 46 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 47 |   : {};
 48 | 
 49 | // This is the production configuration.
 50 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 51 | // The development configuration is different and lives in a separate file.
 52 | module.exports = {
 53 |   // Don't attempt to continue if there are any errors.
 54 |   bail: true,
 55 |   // We generate sourcemaps in production. This is slow but gives good results.
 56 |   // You can exclude the *.map files from the build during deployment.
 57 |   devtool: shouldUseSourceMap ? 'source-map' : false,
 58 |   // In production, we only want to load the polyfills and the app code.
 59 |   entry: [require.resolve('./polyfills'), paths.appIndexJs],
 60 |   output: {
 61 |     // The build folder.
 62 |     path: paths.appBuild,
 63 |     // Generated JS file names (with nested folders).
 64 |     // There will be one main bundle, and one file per asynchronous chunk.
 65 |     // We don't currently advertise code splitting but Webpack supports it.
 66 |     filename: 'static/js/[name].[chunkhash:8].js',
 67 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 68 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 69 |     publicPath: publicPath,
 70 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 71 |     devtoolModuleFilenameTemplate: info =>
 72 |       path
 73 |         .relative(paths.appSrc, info.absoluteResourcePath)
 74 |         .replace(/\\/g, '/'),
 75 |   },
 76 |   resolve: {
 77 |     // This allows you to set a fallback for where Webpack should look for modules.
 78 |     // We placed these paths second because we want `node_modules` to "win"
 79 |     // if there are any conflicts. This matches Node resolution mechanism.
 80 |     // https://github.com/facebookincubator/create-react-app/issues/253
 81 |     modules: ['node_modules', paths.appNodeModules].concat(
 82 |       // It is guaranteed to exist because we tweak it in `env.js`
 83 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 84 |     ),
 85 |     // These are the reasonable defaults supported by the Node ecosystem.
 86 |     // We also include JSX as a common component filename extension to support
 87 |     // some tools, although we do not recommend using it, see:
 88 |     // https://github.com/facebookincubator/create-react-app/issues/290
 89 |     // `web` extension prefixes have been added for better support
 90 |     // for React Native Web.
 91 |     extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
 92 |     alias: {
 93 |       
 94 |       // Support React Native Web
 95 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 96 |       'react-native': 'react-native-web',
 97 |     },
 98 |     plugins: [
 99 |       // Prevents users from importing files from outside of src/ (or node_modules/).
100 |       // This often causes confusion because we only process files within src/ with babel.
101 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
102 |       // please link the files into your node_modules/ and let module-resolution kick in.
103 |       // Make sure your source files are compiled, as they will not be processed in any way.
104 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
105 |     ],
106 |   },
107 |   module: {
108 |     strictExportPresence: true,
109 |     rules: [
110 |       // TODO: Disable require.ensure as it's not a standard language feature.
111 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
112 |       // { parser: { requireEnsure: false } },
113 | 
114 |       // First, run the linter.
115 |       // It's important to do this before Babel processes the JS.
116 |       {
117 |         test: /\.(js|jsx)$/,
118 |         enforce: 'pre',
119 |         use: [
120 |           {
121 |             options: {
122 |               formatter: eslintFormatter,
123 |               eslintPath: require.resolve('eslint'),
124 |               
125 |             },
126 |             loader: require.resolve('eslint-loader'),
127 |           },
128 |         ],
129 |         include: paths.appSrc,
130 |       },
131 |       {
132 |         // "oneOf" will traverse all following loaders until one will
133 |         // match the requirements. When no loader matches it will fall
134 |         // back to the "file" loader at the end of the loader list.
135 |         oneOf: [
136 |           // "url" loader works just like "file" loader but it also embeds
137 |           // assets smaller than specified size as data URLs to avoid requests.
138 |           {
139 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
140 |             loader: require.resolve('url-loader'),
141 |             options: {
142 |               limit: 10000,
143 |               name: 'static/media/[name].[hash:8].[ext]',
144 |             },
145 |           },
146 |           // Process JS with Babel.
147 |           {
148 |             test: /\.(js|jsx)$/,
149 |             include: paths.appSrc,
150 |             loader: require.resolve('babel-loader'),
151 |             options: {
152 |               
153 |               compact: true,
154 |             },
155 |           },
156 |           // The notation here is somewhat confusing.
157 |           // "postcss" loader applies autoprefixer to our CSS.
158 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
159 |           // "style" loader normally turns CSS into JS modules injecting <style>,
160 |           // but unlike in development configuration, we do something different.
161 |           // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
162 |           // (second argument), then grabs the result CSS and puts it into a
163 |           // separate file in our build process. This way we actually ship
164 |           // a single CSS file in production instead of JS code injecting <style>
165 |           // tags. If you use code splitting, however, any async bundles will still
166 |           // use the "style" loader inside the async code so CSS from them won't be
167 |           // in the main CSS file.
168 |           {
169 |             test: /\.css$/,
170 |             loader: ExtractTextPlugin.extract(
171 |               Object.assign(
172 |                 {
173 |                   fallback: require.resolve('style-loader'),
174 |                   use: [
175 |                     {
176 |                       loader: require.resolve('css-loader'),
177 |                       options: {
178 |                         importLoaders: 1,
179 |                         minimize: true,
180 |                         sourceMap: shouldUseSourceMap,
181 |                       },
182 |                     },
183 |                     {
184 |                       loader: require.resolve('postcss-loader'),
185 |                       options: {
186 |                         // Necessary for external CSS imports to work
187 |                         // https://github.com/facebookincubator/create-react-app/issues/2677
188 |                         ident: 'postcss',
189 |                         plugins: () => [
190 |                           require('postcss-flexbugs-fixes'),
191 |                           autoprefixer({
192 |                             browsers: [
193 |                               '>1%',
194 |                               'last 4 versions',
195 |                               'Firefox ESR',
196 |                               'not ie < 9', // React doesn't support IE8 anyway
197 |                             ],
198 |                             flexbox: 'no-2009',
199 |                           }),
200 |                         ],
201 |                       },
202 |                     },
203 |                   ],
204 |                 },
205 |                 extractTextPluginOptions
206 |               )
207 |             ),
208 |             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
209 |           },
210 |           // "file" loader makes sure assets end up in the `build` folder.
211 |           // When you `import` an asset, you get its filename.
212 |           // This loader don't uses a "test" so it will catch all modules
213 |           // that fall through the other loaders.
214 |           {
215 |             loader: require.resolve('file-loader'),
216 |             // Exclude `js` files to keep "css" loader working as it injects
217 |             // it's runtime that would otherwise processed through "file" loader.
218 |             // Also exclude `html` and `json` extensions so they get processed
219 |             // by webpacks internal loaders.
220 |             exclude: [/\.js$/, /\.html$/, /\.json$/],
221 |             options: {
222 |               name: 'static/media/[name].[hash:8].[ext]',
223 |             },
224 |           },
225 |           // ** STOP ** Are you adding a new loader?
226 |           // Make sure to add the new loader(s) before the "file" loader.
227 |         ],
228 |       },
229 |     ],
230 |   },
231 |   plugins: [
232 |     // Makes some environment variables available in index.html.
233 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
234 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
235 |     // In production, it will be an empty string unless you specify "homepage"
236 |     // in `package.json`, in which case it will be the pathname of that URL.
237 |     new InterpolateHtmlPlugin(env.raw),
238 |     // Generates an `index.html` file with the <script> injected.
239 |     new HtmlWebpackPlugin({
240 |       inject: true,
241 |       template: paths.appHtml,
242 |       minify: {
243 |         removeComments: true,
244 |         collapseWhitespace: true,
245 |         removeRedundantAttributes: true,
246 |         useShortDoctype: true,
247 |         removeEmptyAttributes: true,
248 |         removeStyleLinkTypeAttributes: true,
249 |         keepClosingSlash: true,
250 |         minifyJS: true,
251 |         minifyCSS: true,
252 |         minifyURLs: true,
253 |       },
254 |     }),
255 |     // Makes some environment variables available to the JS code, for example:
256 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
257 |     // It is absolutely essential that NODE_ENV was set to production here.
258 |     // Otherwise React will be compiled in the very slow development mode.
259 |     new webpack.DefinePlugin(env.stringified),
260 |     // Minify the code.
261 |     new webpack.optimize.UglifyJsPlugin({
262 |       compress: {
263 |         warnings: false,
264 |         // Disabled because of an issue with Uglify breaking seemingly valid code:
265 |         // https://github.com/facebookincubator/create-react-app/issues/2376
266 |         // Pending further investigation:
267 |         // https://github.com/mishoo/UglifyJS2/issues/2011
268 |         comparisons: false,
269 |       },
270 |       output: {
271 |         comments: false,
272 |         // Turned on because emoji and regex is not minified properly using default
273 |         // https://github.com/facebookincubator/create-react-app/issues/2488
274 |         ascii_only: true,
275 |       },
276 |       sourceMap: shouldUseSourceMap,
277 |     }),
278 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
279 |     new ExtractTextPlugin({
280 |       filename: cssFilename,
281 |     }),
282 |     // Generate a manifest file which contains a mapping of all asset filenames
283 |     // to their corresponding output file so that tools can pick it up without
284 |     // having to parse `index.html`.
285 |     new ManifestPlugin({
286 |       fileName: 'asset-manifest.json',
287 |     }),
288 |     // Generate a service worker script that will precache, and keep up to date,
289 |     // the HTML & assets that are part of the Webpack build.
290 |     new SWPrecacheWebpackPlugin({
291 |       // By default, a cache-busting query parameter is appended to requests
292 |       // used to populate the caches, to ensure the responses are fresh.
293 |       // If a URL is already hashed by Webpack, then there is no concern
294 |       // about it being stale, and the cache-busting can be skipped.
295 |       dontCacheBustUrlsMatching: /\.\w{8}\./,
296 |       filename: 'service-worker.js',
297 |       logger(message) {
298 |         if (message.indexOf('Total precache size is') === 0) {
299 |           // This message occurs for every build and is a bit too noisy.
300 |           return;
301 |         }
302 |         if (message.indexOf('Skipping static resource') === 0) {
303 |           // This message obscures real errors so we ignore it.
304 |           // https://github.com/facebookincubator/create-react-app/issues/2612
305 |           return;
306 |         }
307 |         console.log(message);
308 |       },
309 |       minify: true,
310 |       // For unknown URLs, fallback to the index page
311 |       navigateFallback: publicUrl + '/index.html',
312 |       // Ignores URLs starting from /__ (useful for Firebase):
313 |       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
314 |       navigateFallbackWhitelist: [/^(?!\/__).*/],
315 |       // Don't precache sourcemaps (they're large) and build asset manifest:
316 |       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
317 |     }),
318 |     // Moment.js is an extremely popular library that bundles large locale files
319 |     // by default due to how Webpack interprets its code. This is a practical
320 |     // solution that requires the user to opt into importing specific locales.
321 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
322 |     // You can remove this if you don't use Moment.js:
323 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
324 |   ],
325 |   // Some libraries import Node modules but don't use them in the browser.
326 |   // Tell Webpack to provide empty mocks for them so importing them works.
327 |   node: {
328 |     dgram: 'empty',
329 |     fs: 'empty',
330 |     net: 'empty',
331 |     tls: 'empty',
332 |   },
333 | };
334 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const errorOverlayMiddleware = require('react-error-overlay/middleware');
 4 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 5 | const config = require('./webpack.config.dev');
 6 | const paths = require('./paths');
 7 | 
 8 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 9 | const host = process.env.HOST || '0.0.0.0';
10 | 
11 | module.exports = function(proxy, allowedHost) {
12 |   return {
13 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
14 |     // websites from potentially accessing local content through DNS rebinding:
15 |     // https://github.com/webpack/webpack-dev-server/issues/887
16 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
17 |     // However, it made several existing use cases such as development in cloud
18 |     // environment or subdomains in development significantly more complicated:
19 |     // https://github.com/facebookincubator/create-react-app/issues/2271
20 |     // https://github.com/facebookincubator/create-react-app/issues/2233
21 |     // While we're investigating better solutions, for now we will take a
22 |     // compromise. Since our WDS configuration only serves files in the `public`
23 |     // folder we won't consider accessing them a vulnerability. However, if you
24 |     // use the `proxy` feature, it gets more dangerous because it can expose
25 |     // remote code execution vulnerabilities in backends like Django and Rails.
26 |     // So we will disable the host check normally, but enable it if you have
27 |     // specified the `proxy` setting. Finally, we let you override it if you
28 |     // really know what you're doing with a special environment variable.
29 |     disableHostCheck:
30 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
31 |     // Enable gzip compression of generated files.
32 |     compress: true,
33 |     // Silence WebpackDevServer's own logs since they're generally not useful.
34 |     // It will still show compile warnings and errors with this setting.
35 |     clientLogLevel: 'none',
36 |     // By default WebpackDevServer serves physical files from current directory
37 |     // in addition to all the virtual build products that it serves from memory.
38 |     // This is confusing because those files won’t automatically be available in
39 |     // production build folder unless we copy them. However, copying the whole
40 |     // project directory is dangerous because we may expose sensitive files.
41 |     // Instead, we establish a convention that only files in `public` directory
42 |     // get served. Our build script will copy `public` into the `build` folder.
43 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
44 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
45 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
46 |     // Note that we only recommend to use `public` folder as an escape hatch
47 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
48 |     // for some reason broken when imported through Webpack. If you just want to
49 |     // use an image, put it in `src` and `import` it from JavaScript instead.
50 |     contentBase: paths.appPublic,
51 |     // By default files from `contentBase` will not trigger a page reload.
52 |     watchContentBase: true,
53 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
54 |     // for the WebpackDevServer client so it can learn when the files were
55 |     // updated. The WebpackDevServer client is included as an entry point
56 |     // in the Webpack development configuration. Note that only changes
57 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
58 |     hot: true,
59 |     // It is important to tell WebpackDevServer to use the same "root" path
60 |     // as we specified in the config. In development, we always serve from /.
61 |     publicPath: config.output.publicPath,
62 |     // WebpackDevServer is noisy by default so we emit custom message instead
63 |     // by listening to the compiler events with `compiler.plugin` calls above.
64 |     quiet: true,
65 |     // Reportedly, this avoids CPU overload on some systems.
66 |     // https://github.com/facebookincubator/create-react-app/issues/293
67 |     watchOptions: {
68 |       ignored: /node_modules/,
69 |     },
70 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
71 |     https: protocol === 'https',
72 |     host: host,
73 |     overlay: false,
74 |     historyApiFallback: {
75 |       // Paths with dots should still use the history fallback.
76 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
77 |       disableDotRule: true,
78 |     },
79 |     public: allowedHost,
80 |     proxy,
81 |     setup(app) {
82 |       // This lets us open files from the runtime error overlay.
83 |       app.use(errorOverlayMiddleware());
84 |       // This service worker file is effectively a 'no-op' that will reset any
85 |       // previous service worker registered for the same host:port combination.
86 |       // We do this in development to avoid hitting the production cache if
87 |       // it used the same host and port.
88 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
89 |       app.use(noopServiceWorkerMiddleware());
90 |     },
91 |   };
92 | };
93 | 


--------------------------------------------------------------------------------
/defs/dom.js:
--------------------------------------------------------------------------------
 1 | // Subset declaration of the ResizeObserver class
 2 | // Need because the builtin flowtype defs don't include it yet
 3 | declare class ResizeObserver {
 4 |   observe(element: HTMLElement): void,
 5 |   disconnect(): void,
 6 | }
 7 | 
 8 | // Extend HTMLElement def to include Web Animations API (which doesn't yet exist in builtin typedefs)
 9 | declare interface HTMLElement extends HTMLElement {
10 |   animate: (any[], any) => { finished: Promise<void> },
11 | }
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "native-css-layout-animation-poc",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "autoprefixer": "7.1.2",
 7 |     "babel-core": "6.25.0",
 8 |     "babel-eslint": "7.2.3",
 9 |     "babel-jest": "20.0.3",
10 |     "babel-loader": "7.1.1",
11 |     "babel-preset-react-app": "^3.0.2",
12 |     "babel-runtime": "6.23.0",
13 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
14 |     "chalk": "1.1.3",
15 |     "css-loader": "0.28.4",
16 |     "dotenv": "4.0.0",
17 |     "eslint": "4.4.1",
18 |     "eslint-config-react-app": "^2.0.0",
19 |     "eslint-loader": "1.9.0",
20 |     "eslint-plugin-flowtype": "2.35.0",
21 |     "eslint-plugin-import": "2.7.0",
22 |     "eslint-plugin-jsx-a11y": "5.1.1",
23 |     "eslint-plugin-react": "7.1.0",
24 |     "extract-text-webpack-plugin": "3.0.0",
25 |     "fbjs": "^0.8.14",
26 |     "file-loader": "0.11.2",
27 |     "fs-extra": "3.0.1",
28 |     "html-webpack-plugin": "2.29.0",
29 |     "jest": "20.0.4",
30 |     "object-assign": "4.1.1",
31 |     "postcss-flexbugs-fixes": "3.2.0",
32 |     "postcss-loader": "2.0.6",
33 |     "promise": "8.0.1",
34 |     "react": "16.0.0-rc.2",
35 |     "react-dev-utils": "^3.1.0",
36 |     "react-dom": "16.0.0-rc.2",
37 |     "react-error-overlay": "^1.0.10",
38 |     "style-loader": "0.18.2",
39 |     "sw-precache-webpack-plugin": "0.11.4",
40 |     "url-loader": "0.5.9",
41 |     "webpack": "3.5.1",
42 |     "webpack-dev-server": "2.7.1",
43 |     "webpack-manifest-plugin": "1.2.1",
44 |     "whatwg-fetch": "2.0.3"
45 |   },
46 |   "scripts": {
47 |     "start": "node scripts/start.js",
48 |     "build": "node scripts/build.js",
49 |     "test": "node scripts/test.js --env=jsdom"
50 |   },
51 |   "jest": {
52 |     "collectCoverageFrom": ["src/**/*.{js,jsx}"],
53 |     "setupFiles": ["<rootDir>/config/polyfills.js"],
54 |     "testMatch": [
55 |       "<rootDir>/src/**/__tests__/**/*.js?(x)",
56 |       "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
57 |     ],
58 |     "testEnvironment": "node",
59 |     "testURL": "http://localhost",
60 |     "transform": {
61 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
62 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
63 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
64 |     },
65 |     "transformIgnorePatterns": ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"],
66 |     "moduleNameMapper": {
67 |       "^react-native$": "react-native-web"
68 |     },
69 |     "moduleFileExtensions": ["web.js", "js", "json", "web.jsx", "jsx", "node"]
70 |   },
71 |   "babel": {
72 |     "presets": ["react-app"],
73 |     "plugins": ["react-hot-loader/babel"]
74 |   },
75 |   "eslintConfig": {
76 |     "extends": "react-app",
77 |     "globals": {
78 |       "ResizeObserver": true
79 |     }
80 |   },
81 |   "devDependencies": {
82 |     "flow-bin": "^0.54.0",
83 |     "react-hot-loader": "next"
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vincentriemer/native-css-layout-animation-poc/01f2bde9d5ca6fc6d53965a4ba1f9954d0e4f9f1/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 |   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 8 |   <!--
 9 |       Notice the use of %PUBLIC_URL% in the tags above.
10 |       It will be replaced with the URL of the `public` folder during the build.
11 |       Only files inside the `public` folder can be referenced from the HTML.
12 | 
13 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
14 |       work correctly both with client-side routing and a non-root public URL.
15 |       Learn how to configure a non-root public URL by running `npm run build`.
16 |     -->
17 |   <title>Native DOM Layout Animation POC</title>
18 | </head>
19 | 
20 | <body>
21 |   <noscript>
22 |     You need to enable JavaScript to run this app.
23 |   </noscript>
24 |   <div id="root"></div>
25 | 
26 |   <!--
27 |       This HTML file is a template.
28 |       If you open it directly in the browser, you will see an empty page.
29 | 
30 |       You can add webfonts, meta tags, or analytics to this file.
31 |       The build step will place the bundled scripts into the <body> tag.
32 | 
33 |       To begin the development, run `npm start` or `yarn start`.
34 |       To create a production bundle, use `npm run build` or `yarn build`.
35 |     -->
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const path = require('path');
 18 | const chalk = require('chalk');
 19 | const fs = require('fs-extra');
 20 | const webpack = require('webpack');
 21 | const config = require('../config/webpack.config.prod');
 22 | const paths = require('../config/paths');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 25 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 26 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 27 | const printBuildError = require('react-dev-utils/printBuildError');
 28 | 
 29 | const measureFileSizesBeforeBuild =
 30 |   FileSizeReporter.measureFileSizesBeforeBuild;
 31 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 32 | const useYarn = fs.existsSync(paths.yarnLockFile);
 33 | 
 34 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 35 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 36 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // First, read the current file sizes in build directory.
 44 | // This lets us display how much they changed later.
 45 | measureFileSizesBeforeBuild(paths.appBuild)
 46 |   .then(previousFileSizes => {
 47 |     // Remove all content but keep the directory so that
 48 |     // if you're in it, you don't end up in Trash
 49 |     fs.emptyDirSync(paths.appBuild);
 50 |     // Merge with the public folder
 51 |     copyPublicFolder();
 52 |     // Start the webpack build
 53 |     return build(previousFileSizes);
 54 |   })
 55 |   .then(
 56 |     ({ stats, previousFileSizes, warnings }) => {
 57 |       if (warnings.length) {
 58 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 59 |         console.log(warnings.join('\n\n'));
 60 |         console.log(
 61 |           '\nSearch for the ' +
 62 |             chalk.underline(chalk.yellow('keywords')) +
 63 |             ' to learn more about each warning.'
 64 |         );
 65 |         console.log(
 66 |           'To ignore, add ' +
 67 |             chalk.cyan('// eslint-disable-next-line') +
 68 |             ' to the line before.\n'
 69 |         );
 70 |       } else {
 71 |         console.log(chalk.green('Compiled successfully.\n'));
 72 |       }
 73 | 
 74 |       console.log('File sizes after gzip:\n');
 75 |       printFileSizesAfterBuild(
 76 |         stats,
 77 |         previousFileSizes,
 78 |         paths.appBuild,
 79 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 80 |         WARN_AFTER_CHUNK_GZIP_SIZE
 81 |       );
 82 |       console.log();
 83 | 
 84 |       const appPackage = require(paths.appPackageJson);
 85 |       const publicUrl = paths.publicUrl;
 86 |       const publicPath = config.output.publicPath;
 87 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
 88 |       printHostingInstructions(
 89 |         appPackage,
 90 |         publicUrl,
 91 |         publicPath,
 92 |         buildFolder,
 93 |         useYarn
 94 |       );
 95 |     },
 96 |     err => {
 97 |       console.log(chalk.red('Failed to compile.\n'));
 98 |       printBuildError(err);
 99 |       process.exit(1);
100 |     }
101 |   );
102 | 
103 | // Create the production build and print the deployment instructions.
104 | function build(previousFileSizes) {
105 |   console.log('Creating an optimized production build...');
106 | 
107 |   let compiler = webpack(config);
108 |   return new Promise((resolve, reject) => {
109 |     compiler.run((err, stats) => {
110 |       if (err) {
111 |         return reject(err);
112 |       }
113 |       const messages = formatWebpackMessages(stats.toJson({}, true));
114 |       if (messages.errors.length) {
115 |         // Only keep the first error. Others are often indicative
116 |         // of the same problem, but confuse the reader with noise.
117 |         if (messages.errors.length > 1) {
118 |           messages.errors.length = 1;
119 |         }
120 |         return reject(new Error(messages.errors.join('\n\n')));
121 |       }
122 |       if (
123 |         process.env.CI &&
124 |         (typeof process.env.CI !== 'string' ||
125 |           process.env.CI.toLowerCase() !== 'false') &&
126 |         messages.warnings.length
127 |       ) {
128 |         console.log(
129 |           chalk.yellow(
130 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
131 |               'Most CI servers set it automatically.\n'
132 |           )
133 |         );
134 |         return reject(new Error(messages.warnings.join('\n\n')));
135 |       }
136 |       return resolve({
137 |         stats,
138 |         previousFileSizes,
139 |         warnings: messages.warnings,
140 |       });
141 |     });
142 |   });
143 | }
144 | 
145 | function copyPublicFolder() {
146 |   fs.copySync(paths.appPublic, paths.appBuild, {
147 |     dereference: true,
148 |     filter: file => file !== paths.appHtml,
149 |   });
150 | }
151 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/src/BrowserFeatureGate.js:
--------------------------------------------------------------------------------
  1 | /* @flow */
  2 | 
  3 | import React, { Component } from "react";
  4 | 
  5 | const styles = {
  6 |   nonCompliantContainer: {
  7 |     maxWidth: 600,
  8 |     marginLeft: "auto",
  9 |     marginRight: "auto",
 10 |     marginTop: 50,
 11 |   },
 12 |   list: {
 13 |     listStyleType: "none",
 14 |     padding: 0,
 15 |   },
 16 | };
 17 | 
 18 | class BrowserFeatureGate extends Component {
 19 |   state: {
 20 |     compliantBrowser: boolean,
 21 |     supportsResizeObserver: boolean,
 22 |     supportsWebAnimationApi: boolean,
 23 |   };
 24 | 
 25 |   constructor(props: Object) {
 26 |     super(props);
 27 |     this.state = this.determineState();
 28 |   }
 29 | 
 30 |   determineState() {
 31 |     const supportsResizeObserver = typeof ResizeObserver !== "undefined";
 32 |     const supportsWebAnimationApi = document.documentElement
 33 |       ? typeof document.documentElement.animate !== "undefined"
 34 |       : false;
 35 | 
 36 |     return {
 37 |       compliantBrowser: supportsResizeObserver && supportsWebAnimationApi,
 38 |       supportsResizeObserver,
 39 |       supportsWebAnimationApi,
 40 |     };
 41 |   }
 42 | 
 43 |   componentDidMount() {
 44 |     if (this.state.compliantBrowser) {
 45 |       this.enableHighPerformanceGraphics();
 46 |     }
 47 |   }
 48 | 
 49 |   enableHighPerformanceGraphics() {
 50 |     // Most (if not all) of the animations are GPU intensive so this is a little hack
 51 |     // to force high performance graphics on machines like the MacBook Pro
 52 |     const canvas = document.createElement("canvas");
 53 |     canvas.style.position = "absolute";
 54 |     canvas.style.visibility = "hidden";
 55 |     if (document.body && document.body.firstChild) {
 56 |       document.body.insertBefore(canvas, document.body.firstChild);
 57 |       const gl = canvas.getContext("webgl");
 58 |       if (!gl) return;
 59 |       gl.clearColor(0.0, 0.0, 0.0, 1.0);
 60 |       gl.clear(gl.COLOR_BUFFER_BIT);
 61 |     }
 62 |   }
 63 | 
 64 |   renderNonCompliantBrowser = () => (
 65 |     <div style={styles.nonCompliantContainer}>
 66 |       <h1>This Browser is Not Supported</h1>
 67 |       <p>
 68 |         This proof of concept leverages bleeding edge browser APIs and this
 69 |         browser only supports the following checked features:
 70 |       </p>
 71 |       <ul style={styles.list}>
 72 |         <li>
 73 |           <input
 74 |             type="checkbox"
 75 |             checked={this.state.supportsResizeObserver}
 76 |             disabled
 77 |             readOnly
 78 |           />{" "}
 79 |           <a href="http://caniuse.com/#feat=resizeobserver">ResizeObserver</a>
 80 |         </li>
 81 |         <li>
 82 |           <input
 83 |             type="checkbox"
 84 |             checked={this.state.supportsWebAnimationApi}
 85 |             disabled
 86 |             readOnly
 87 |           />{" "}
 88 |           <a href="http://caniuse.com/#feat=web-animation">
 89 |             Web Animations API
 90 |           </a>
 91 |         </li>
 92 |       </ul>
 93 |       <p>
 94 |         Currently, the only browser known to support all of the above features
 95 |         is{" "}
 96 |         <a href="https://www.google.com/chrome/browser/canary.html">
 97 |           Google Chrome Canary
 98 |         </a>{" "}
 99 |         with the <i>Experimental Web Platform Features</i> flag turned on.
100 |       </p>
101 |     </div>
102 |   );
103 | 
104 |   render() {
105 |     const { children } = this.props;
106 | 
107 |     return (
108 |       <div>
109 |         {this.state.compliantBrowser ? (
110 |           children
111 |         ) : (
112 |           this.renderNonCompliantBrowser()
113 |         )}
114 |       </div>
115 |     );
116 |   }
117 | }
118 | 
119 | export default BrowserFeatureGate;
120 | 


--------------------------------------------------------------------------------
/src/Demo.js:
--------------------------------------------------------------------------------
  1 | /* @flow */
  2 | 
  3 | import * as React from "react";
  4 | 
  5 | import BrowserFeatureGate from "./BrowserFeatureGate";
  6 | import LayoutAnimation from "./LayoutAnimation";
  7 | 
  8 | const boxShadow = "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)";
  9 | 
 10 | const styles = {
 11 |   page: {
 12 |     position: "absolute",
 13 |     top: 0,
 14 |     left: 0,
 15 |     right: 0,
 16 |     bottom: 0,
 17 |     backgroundColor: "#FAFAFA",
 18 |     display: "flex",
 19 |     flexDirection: "column",
 20 |     overflow: "hidden",
 21 |   },
 22 |   layoutAnimatedNode: {
 23 |     transformOrigin: "top left",
 24 |     willChange: "transform",
 25 |   },
 26 |   button: {
 27 |     flex: 1,
 28 |     fontSize: "1em",
 29 |   },
 30 |   buttonBar: {
 31 |     minHeight: 50,
 32 |     backgroundColor: "white",
 33 |     display: "flex",
 34 |     zIndex: 0,
 35 |     boxShadow,
 36 |   },
 37 |   childWrapper: {
 38 |     flex: 1,
 39 |   },
 40 |   demoSelectContainer: {
 41 |     position: "fixed",
 42 |     zIndex: 101,
 43 |     top: 60,
 44 |     left: 10,
 45 |   },
 46 |   demoSelect: {
 47 |     fontSize: "1em",
 48 |     boxShadow,
 49 |   },
 50 |   finaleTitle: {
 51 |     margin: 0,
 52 |     padding: 0,
 53 |     lineHeight: 1,
 54 |     fontSize: "10em",
 55 |   },
 56 |   finaleSubtitle: {
 57 |     margin: 0,
 58 |     padding: 0,
 59 |     lineHeight: 1,
 60 |     fontSize: "3.5em",
 61 |   },
 62 | };
 63 | 
 64 | const colors = ["#F44336", "#4CAF50", "#03A9F4", "#FFC107", "#9C27B0"];
 65 | 
 66 | function shuffle(a) {
 67 |   for (let i = a.length; i; i--) {
 68 |     let j = Math.floor(Math.random() * i);
 69 |     // $FlowFixMe
 70 |     [a[i - 1], a[j]] = [a[j], a[i - 1]];
 71 |   }
 72 | }
 73 | 
 74 | const AnimatedBox = ({ style, color = "#292D3E", children }) => (
 75 |   <LayoutAnimation.Node
 76 |     style={{
 77 |       ...styles.layoutAnimatedNode,
 78 |       backgroundColor: color,
 79 |       boxShadow,
 80 |       ...style,
 81 |     }}
 82 |   >
 83 |     {children}
 84 |   </LayoutAnimation.Node>
 85 | );
 86 | 
 87 | class App extends React.Component {
 88 |   state: {
 89 |     index: number,
 90 |     selectedDemo: string,
 91 |   };
 92 | 
 93 |   demos: {
 94 |     [name: string]: () => React$Element<any>,
 95 |   };
 96 | 
 97 |   constructor(props: {}) {
 98 |     super(props);
 99 | 
100 |     this.demos = {
101 |       "Basic Flexbox": this.basicFlexboxDemo,
102 |       "Advanced Flexbox": this.advancedFlexboxDemo,
103 |       "Rel/Abs Positioning": this.positioningDemo,
104 |       "Scroll to Fixed": this.flowToFixedDemo,
105 |       "Child Shuffle": this.shuffleDemo,
106 |       "CSS Grid": this.gridDemo,
107 |     };
108 | 
109 |     this.state = {
110 |       index: 0,
111 |       selectedDemo: Object.keys(this.demos)[0],
112 |     };
113 |   }
114 | 
115 |   applyKeys(...children: React$Element<any>[]): React$Element<any>[] {
116 |     return children.map((child, index) =>
117 |       React.cloneElement(child, { key: index, color: colors[index] })
118 |     );
119 |   }
120 | 
121 |   handleDemoChange = (event: SyntheticInputEvent) => {
122 |     LayoutAnimation.configureNext({
123 |       duration: 500,
124 |       type: "ease",
125 |     });
126 |     this.setState({ selectedDemo: event.target.value });
127 |   };
128 | 
129 |   handlePress = (index: number) => {
130 |     return () => {
131 |       if (index !== this.state.index) {
132 |         LayoutAnimation.configureNext({
133 |           duration: 500,
134 |           type: "ease",
135 |         });
136 |         this.setState({
137 |           index,
138 |         });
139 |       }
140 |     };
141 |   };
142 | 
143 |   renderButton = (index: number) => (
144 |     <button style={styles.button} key={index} onClick={this.handlePress(index)}>
145 |       {index}
146 |     </button>
147 |   );
148 | 
149 |   renderButtonBar = () => (
150 |     <div style={styles.buttonBar}>{[0, 1].map(i => this.renderButton(i))}</div>
151 |   );
152 | 
153 |   renderDemoSelect = () => (
154 |     <div style={styles.demoSelectContainer}>
155 |       <select
156 |         style={styles.demoSelect}
157 |         value={this.state.selectedDemo}
158 |         onChange={this.handleDemoChange}
159 |       >
160 |         {Object.keys(this.demos).map(demoName => (
161 |           <option key={demoName} value={demoName}>
162 |             {demoName}
163 |           </option>
164 |         ))}
165 |       </select>
166 |     </div>
167 |   );
168 | 
169 |   indexValue = (...values: any[]) => {
170 |     return values[this.state.index];
171 |   };
172 | 
173 |   basicFlexboxDemo = () => {
174 |     const childStyle = { width: 100, height: 100 };
175 |     return (
176 |       <div
177 |         style={{
178 |           ...styles.childWrapper,
179 |           display: "flex",
180 |           alignItems: "center",
181 |           justifyContent: "space-around",
182 |           flexDirection: this.indexValue("column", "row"),
183 |         }}
184 |       >
185 |         {this.applyKeys(
186 |           <AnimatedBox style={childStyle} />,
187 |           <AnimatedBox style={childStyle} />,
188 |           <AnimatedBox style={childStyle} />,
189 |           <AnimatedBox style={childStyle} />,
190 |           <AnimatedBox style={childStyle} />
191 |         )}
192 |       </div>
193 |     );
194 |   };
195 | 
196 |   advancedFlexboxDemo = () => {
197 |     const childStyle = {
198 |       flex: this.indexValue(1, undefined),
199 |       margin: 20,
200 |       minWidth: this.indexValue(undefined, 75),
201 |       minHeight: this.indexValue(undefined, 75),
202 |     };
203 | 
204 |     return (
205 |       <div
206 |         style={{
207 |           ...styles.childWrapper,
208 |           display: "flex",
209 |           flexDirection: this.indexValue("column", "row-reverse"),
210 |           justifyContent: this.indexValue(undefined, "space-around"),
211 |         }}
212 |       >
213 |         {this.applyKeys(
214 |           <AnimatedBox
215 |             style={{
216 |               ...childStyle,
217 |               alignSelf: this.indexValue(undefined, "stretch"),
218 |               width: this.indexValue(undefined, 150),
219 |             }}
220 |           />,
221 |           <AnimatedBox
222 |             style={{
223 |               ...childStyle,
224 |               alignSelf: this.indexValue(undefined, "flex-start"),
225 |             }}
226 |           />,
227 |           <AnimatedBox
228 |             style={{
229 |               ...childStyle,
230 |               alignSelf: this.indexValue(undefined, "center"),
231 |               width: this.indexValue(undefined, 150),
232 |               height: this.indexValue(undefined, 150),
233 |             }}
234 |           />,
235 |           <AnimatedBox
236 |             style={{
237 |               ...childStyle,
238 |               alignSelf: this.indexValue(undefined, "flex-end"),
239 |             }}
240 |           />,
241 |           <AnimatedBox
242 |             style={{
243 |               ...childStyle,
244 |               alignSelf: this.indexValue(undefined, "stretch"),
245 |               width: this.indexValue(undefined, 150),
246 |             }}
247 |           />
248 |         )}
249 |       </div>
250 |     );
251 |   };
252 | 
253 |   positioningDemo = () => {
254 |     const childStyle = {
255 |       marginTop: 50,
256 |       width: 75,
257 |       height: 75,
258 |       top: 0,
259 |       left: "50%",
260 |       transform: "translateX(-50%)",
261 |       position: this.indexValue("relative", "absolute"),
262 |     };
263 | 
264 |     return (
265 |       <div
266 |         style={{
267 |           ...styles.childWrapper,
268 |           position: "relative",
269 |         }}
270 |       >
271 |         {this.applyKeys(
272 |           <AnimatedBox style={childStyle} />,
273 |           <AnimatedBox style={childStyle} />,
274 |           <AnimatedBox style={childStyle} />,
275 |           <AnimatedBox style={childStyle} />,
276 |           <AnimatedBox style={childStyle} />
277 |         )}
278 |       </div>
279 |     );
280 |   };
281 | 
282 |   flowToFixedDemo = () => {
283 |     const childStyle = {
284 |       minHeight: this.indexValue(300, 400),
285 |       marginBottom: 20,
286 |     };
287 | 
288 |     return (
289 |       <div
290 |         style={{
291 |           padding: 100,
292 |           display: "flex",
293 |           flexDirection: "column",
294 |           alignItems: "stretch",
295 |           overflowY: "scroll",
296 |         }}
297 |       >
298 |         {this.applyKeys(
299 |           <AnimatedBox
300 |             style={this.indexValue(
301 |               {
302 |                 ...childStyle,
303 |                 zIndex: 25,
304 |               },
305 |               {
306 |                 position: "fixed",
307 |                 width: undefined,
308 |                 right: 0,
309 |                 left: 0,
310 |                 top: 50,
311 |                 height: 75,
312 |                 zIndex: 50,
313 |               }
314 |             )}
315 |           />,
316 |           <AnimatedBox
317 |             style={this.indexValue(
318 |               {
319 |                 ...childStyle,
320 |                 zIndex: 25,
321 |               },
322 |               {
323 |                 position: "fixed",
324 |                 width: undefined,
325 |                 right: 0,
326 |                 left: 0,
327 |                 bottom: 0,
328 |                 height: this.indexValue(150, 75),
329 |                 zIndex: 50,
330 |               }
331 |             )}
332 |           />,
333 |           <AnimatedBox style={childStyle} />,
334 |           <AnimatedBox style={childStyle} />,
335 |           <AnimatedBox style={childStyle} />
336 |         )}
337 |       </div>
338 |     );
339 |   };
340 | 
341 |   shuffleDemo = () => {
342 |     const childStyle = {
343 |       height: 75,
344 |     };
345 | 
346 |     const children = this.applyKeys(
347 |       <AnimatedBox style={childStyle} />,
348 |       <AnimatedBox style={childStyle} />,
349 |       <AnimatedBox style={childStyle} />,
350 |       <AnimatedBox style={childStyle} />,
351 |       <AnimatedBox style={childStyle} />
352 |     );
353 | 
354 |     shuffle(children);
355 | 
356 |     return (
357 |       <div
358 |         style={{
359 |           ...styles.childWrapper,
360 |           display: "flex",
361 |           flexDirection: "column",
362 |           alignItems: "stretch",
363 |           justifyContent: "space-around",
364 |           padding: "50px 25%",
365 |         }}
366 |       >
367 |         {children}
368 |       </div>
369 |     );
370 |   };
371 | 
372 |   gridDemo = () => {
373 |     return (
374 |       <div
375 |         style={{
376 |           ...styles.childWrapper,
377 |           display: "grid",
378 |           gridGap: 0,
379 |           padding: 0,
380 |         }}
381 |       >
382 |         {this.applyKeys(
383 |           <AnimatedBox
384 |             style={{
385 |               gridColumn: this.indexValue("1", "2 / 4"),
386 |               gridRow: "1 / 2",
387 |             }}
388 |           />,
389 |           <AnimatedBox
390 |             style={{
391 |               gridColumn: this.indexValue("1", "4 / 5"),
392 |               gridRow: this.indexValue("2 / 4", "1 / 2"),
393 |             }}
394 |           />,
395 |           <AnimatedBox
396 |             style={{
397 |               gridColumn: this.indexValue("1", "2 / 5"),
398 |               gridRow: this.indexValue("4 / 8", "2 / 9"),
399 |             }}
400 |           />,
401 |           <AnimatedBox
402 |             style={{
403 |               gridColumn: "1",
404 |               gridRow: this.indexValue("8 / 9", "1 / 10"),
405 |             }}
406 |           />,
407 |           <AnimatedBox
408 |             style={{
409 |               gridColumn: this.indexValue("1", "2 / 5"),
410 |               gridRow: "9 / 10",
411 |             }}
412 |           />
413 |         )}
414 |       </div>
415 |     );
416 |   };
417 | 
418 |   render() {
419 |     return (
420 |       <BrowserFeatureGate>
421 |         <div style={styles.page}>
422 |           {this.renderDemoSelect()}
423 |           {this.renderButtonBar()}
424 |           {this.demos[this.state.selectedDemo]()}
425 |         </div>
426 |       </BrowserFeatureGate>
427 |     );
428 |   }
429 | }
430 | 
431 | export default App;
432 | 


--------------------------------------------------------------------------------
/src/LayoutAnimation.js:
--------------------------------------------------------------------------------
  1 | /* @flow */
  2 | 
  3 | import React, { Component } from "react";
  4 | import invariant from "fbjs/lib/invariant";
  5 | 
  6 | type ObserverEntry = {
  7 |   target: HTMLElement,
  8 | };
  9 | 
 10 | type LayoutAnimationType =
 11 |   | "linear"
 12 |   | "ease"
 13 |   | "ease-in"
 14 |   | "ease-out"
 15 |   | "ease-in-out";
 16 | 
 17 | type LayoutAnimationConfig = {
 18 |   duration: number,
 19 |   delay?: number,
 20 |   type?: LayoutAnimationType,
 21 | };
 22 | 
 23 | type TransformKeyframe = {
 24 |   translateX: number,
 25 |   translateY: number,
 26 |   scaleX: number,
 27 |   scaleY: number,
 28 | };
 29 | 
 30 | const defaultKeyframeFactory = () => ({
 31 |   translateX: 0,
 32 |   translateY: 0,
 33 |   scaleX: 1.0,
 34 |   scaleY: 1.0,
 35 | });
 36 | 
 37 | function LayoutAnimation() {
 38 |   /* =========== Layout Animation Manager =========== */
 39 | 
 40 |   // Manager Instance Properties
 41 |   let pendingConfig: ?LayoutAnimationConfig = undefined;
 42 |   const observedElements: Set<HTMLElement> = new Set();
 43 |   const prevCache = new Map();
 44 | 
 45 |   function registerElement(view: HTMLElement) {
 46 |     observedElements.add(view);
 47 |   }
 48 | 
 49 |   function deregisterElement(view: HTMLElement) {
 50 |     observedElements.delete(view);
 51 |   }
 52 | 
 53 |   function transformKeyframeToCSSString(
 54 |     transformKeyframe: TransformKeyframe
 55 |   ): string {
 56 |     let result = "";
 57 | 
 58 |     Object.keys(transformKeyframe).forEach(propName => {
 59 |       const value = transformKeyframe[propName];
 60 | 
 61 |       if (["translateX", "translateY"].includes(propName)) {
 62 |         result += `${propName}(${value}px) `;
 63 |       } else {
 64 |         result += `${propName}(${value}) `;
 65 |       }
 66 |     });
 67 | 
 68 |     return result;
 69 |   }
 70 | 
 71 |   function getStartingKeyframe(
 72 |     prevRect: ClientRect,
 73 |     nextRect: ClientRect
 74 |   ): TransformKeyframe {
 75 |     const result = defaultKeyframeFactory();
 76 | 
 77 |     if (prevRect.left !== nextRect.left) {
 78 |       result.translateX = prevRect.left - nextRect.left;
 79 |     }
 80 | 
 81 |     if (prevRect.top !== nextRect.top) {
 82 |       result.translateY = prevRect.top - nextRect.top;
 83 |     }
 84 | 
 85 |     if (prevRect.width !== nextRect.width) {
 86 |       result.scaleX = prevRect.width / nextRect.width;
 87 |     }
 88 | 
 89 |     if (prevRect.height !== nextRect.height) {
 90 |       result.scaleY = prevRect.height / nextRect.height;
 91 |     }
 92 | 
 93 |     return result;
 94 |   }
 95 | 
 96 |   function constructAndApplyLayoutAnimation(
 97 |     target: HTMLElement,
 98 |     pendingAnimationConfig: LayoutAnimationConfig
 99 |   ): Promise<void> {
100 |     const prevRect = prevCache.get(target);
101 | 
102 |     invariant(
103 |       prevRect,
104 |       `Observed HTMLElement is attempting to animate without a previously measured boundingRect.`
105 |     );
106 | 
107 |     const nextRect = target.getBoundingClientRect();
108 | 
109 |     if (JSON.stringify(prevRect) === JSON.stringify(nextRect)) {
110 |       return Promise.resolve();
111 |     }
112 | 
113 |     const startingKeyframe = getStartingKeyframe(prevRect, nextRect);
114 |     let existingTransform = window
115 |       .getComputedStyle(target)
116 |       .getPropertyValue("transform");
117 | 
118 |     if (existingTransform === "none") {
119 |       existingTransform = "translateX(0)";
120 |     }
121 | 
122 |     const animationKeyframes = [
123 |       {
124 |         transform: `${existingTransform} ${transformKeyframeToCSSString(
125 |           startingKeyframe
126 |         )}`,
127 |       },
128 |       {
129 |         transform: existingTransform,
130 |       },
131 |     ];
132 | 
133 |     const animationConfig = {
134 |       duration: pendingAnimationConfig.duration,
135 |       delay: pendingAnimationConfig.delay || 0,
136 |       easing: pendingAnimationConfig.type || "linear",
137 |       fill: "backwards",
138 |     };
139 | 
140 |     return target.animate(animationKeyframes, animationConfig).finished;
141 |   }
142 | 
143 |   function handleLayoutChange(
144 |     entries: ObserverEntry[],
145 |     observer: any
146 |   ): Promise<void> {
147 |     observer.disconnect();
148 | 
149 |     const pendingAnimationConfig = pendingConfig;
150 | 
151 |     if (pendingAnimationConfig == null) {
152 |       return Promise.resolve();
153 |     }
154 | 
155 |     pendingConfig = undefined;
156 | 
157 |     const animations = [];
158 |     for (let entry of entries) {
159 |       animations.push(
160 |         constructAndApplyLayoutAnimation(entry.target, pendingAnimationConfig)
161 |       );
162 |     }
163 |     return Promise.all(animations).then(() => Promise.resolve());
164 |   }
165 | 
166 |   function configureNext(config: LayoutAnimationConfig) {
167 |     pendingConfig = config;
168 | 
169 |     const ro = new ResizeObserver(handleLayoutChange);
170 | 
171 |     prevCache.clear();
172 | 
173 |     for (let element of observedElements) {
174 |       prevCache.set(element, element.getBoundingClientRect());
175 |       ro.observe(element);
176 |     }
177 |   }
178 | 
179 |   /* =========== Layout Animation React Component =========== */
180 | 
181 |   class LayoutAnimatedNode extends Component {
182 |     node: HTMLElement;
183 | 
184 |     componentDidMount() {
185 |       if (this.node != null) {
186 |         registerElement(this.node);
187 |       }
188 |     }
189 | 
190 |     componentWillUnmount() {
191 |       if (this.node != null && observedElements.has(this.node)) {
192 |         deregisterElement(this.node);
193 |       }
194 |     }
195 | 
196 |     render() {
197 |       const { style, ...restProps } = this.props;
198 |       return (
199 |         <div
200 |           {...restProps}
201 |           ref={node => {
202 |             this.node = node;
203 |           }}
204 |           style={{
205 |             ...style,
206 |             transformOrigin: "top left",
207 |             willChange: "transform",
208 |           }}
209 |         />
210 |       );
211 |     }
212 |   }
213 | 
214 |   return {
215 |     configureNext,
216 |     Node: LayoutAnimatedNode,
217 |   };
218 | }
219 | 
220 | export default LayoutAnimation();
221 | 


--------------------------------------------------------------------------------
/src/global.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 4 |     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 5 |     sans-serif;
 6 |   overflow: hidden;
 7 | }
 8 | 
 9 | a {
10 |   text-decoration-skip: ink;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import "./global.css";
 2 | 
 3 | import React from "react";
 4 | import ReactDOM from "react-dom";
 5 | import { AppContainer } from "react-hot-loader";
 6 | import LayoutAnimation from "./LayoutAnimation";
 7 | import Demo from "./Demo";
 8 | 
 9 | const rootEl = document.getElementById("root");
10 | 
11 | ReactDOM.render(
12 |   <AppContainer>
13 |     <Demo />
14 |   </AppContainer>,
15 |   rootEl
16 | );
17 | 
18 | if (module.hot) {
19 |   module.hot.accept("./Demo", () => {
20 |     const NextDemo = require("./Demo").default; // eslint-disable-line global-require
21 | 
22 |     // If the result of a hot-module reload causes a change in layout, animate the change
23 |     LayoutAnimation.configureNext({
24 |       duration: 1000,
25 |       type: "ease",
26 |     });
27 | 
28 |     ReactDOM.render(
29 |       <AppContainer>
30 |         <NextDemo />
31 |       </AppContainer>,
32 |       rootEl
33 |     );
34 |   });
35 | }
36 | 


--------------------------------------------------------------------------------