Skip to content

Commit

Permalink
Merge pull request #33 from naseeihity/develop
Browse files Browse the repository at this point in the history
add polyfill for IntersectionObserver
naseeihity authored May 19, 2018
2 parents 996eb61 + cf427e4 commit bbf49a2
Showing 5 changed files with 99 additions and 98 deletions.
2 changes: 0 additions & 2 deletions frontend/component/Gallery/Gallery.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import React, { Component } from 'react';
import Paper from 'material-ui/Paper';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import Ribbon from '../Ribbon';
import tileData from './mock';
import LazyImg from '../utils/lazyImg/LazyImg';
7 changes: 7 additions & 0 deletions frontend/component/utils/lazyImg/LazyImg.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
import React, { Component } from 'react';
import styles from './lazyImg.css';

require('intersection-observer');

const IMG_S = '?imageView2/2/w/30/h/20/interlace/0/q/100';

if (!('MutationObserver' in window)) {
IntersectionObserver.prototype.POLL_INTERVAL =
IntersectionObserver.prototype.THROTTLE_TIMEOUT || 100;
}

class LazyImg extends Component {
constructor(props) {
super(props);
73 changes: 34 additions & 39 deletions frontend/config/webpack.config.dev.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
'use strict';

const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
@@ -47,7 +45,7 @@ module.exports = {
// require.resolve('webpack/hot/dev-server'),
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
paths.appIndexJs
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
@@ -62,10 +60,10 @@ module.exports = {
// There are also additional JS chunk files if you use code splitting.
chunkFilename: 'static/js/[name].chunk.js',
// This is the URL that app is served from. We use "/" in development.
publicPath: publicPath,
publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
@@ -84,19 +82,18 @@ module.exports = {
// for React Native Web.
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {

// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
'react-native': 'react-native-web'
},
plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson])
]
},
module: {
strictExportPresence: true,
@@ -114,13 +111,12 @@ module.exports = {
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),

eslintPath: require.resolve('eslint')
},
loader: require.resolve('eslint-loader'),
},
loader: require.resolve('eslint-loader')
}
],
include: paths.appSrc,
include: paths.appSrc
},
{
// "oneOf" will traverse all following loaders until one will
@@ -135,21 +131,20 @@ module.exports = {
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
name: 'static/media/[name].[hash:8].[ext]'
}
},
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {

// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
cacheDirectory: true
}
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
@@ -166,8 +161,8 @@ module.exports = {
importLoaders: 1,
modules: true,
sourceMaps: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
loader: require.resolve('postcss-loader'),
@@ -182,14 +177,14 @@ module.exports = {
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
'not ie < 9' // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
flexbox: 'no-2009'
})
]
}
}
]
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
@@ -204,14 +199,14 @@ module.exports = {
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
name: 'static/media/[name].[hash:8].[ext]'
}
}
]
}
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
]
},
plugins: [
// Makes some environment variables available in index.html.
@@ -222,7 +217,7 @@ module.exports = {
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
template: paths.appHtml
}),
// Add module names to factory functions so they appear in browser profiler.
new webpack.NamedModulesPlugin(),
@@ -245,7 +240,7 @@ module.exports = {
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
@@ -254,12 +249,12 @@ module.exports = {
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
child_process: 'empty'
},
// Turn off performance hints during development because we don't do any
// splitting or minification in interest of speed. These warnings become
// cumbersome.
performance: {
hints: false,
},
hints: false
}
};
95 changes: 44 additions & 51 deletions frontend/config/webpack.config.prod.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
'use strict';

const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
@@ -66,12 +64,10 @@ module.exports = {
filename: 'static/js/[name].[chunkhash:8].js',
chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: publicPath,
publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/'),
path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/')
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
@@ -90,19 +86,18 @@ module.exports = {
// for React Native Web.
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {

// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
'react-native': 'react-native-web'
},
plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson])
]
},
module: {
strictExportPresence: true,
@@ -120,13 +115,12 @@ module.exports = {
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),

eslintPath: require.resolve('eslint')
},
loader: require.resolve('eslint-loader'),
},
loader: require.resolve('eslint-loader')
}
],
include: paths.appSrc,
include: paths.appSrc
},
{
// "oneOf" will traverse all following loaders until one will
@@ -140,18 +134,17 @@ module.exports = {
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
name: 'static/media/[name].[hash:8].[ext]'
}
},
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {

compact: true,
},
compact: true
}
},
// The notation here is somewhat confusing.
// "postcss" loader applies autoprefixer to our CSS.
@@ -173,8 +166,8 @@ module.exports = {
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
hmr: false
}
},
use: [
{
@@ -184,8 +177,8 @@ module.exports = {
minimize: true,
modules: true,
sourceMap: shouldUseSourceMap,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
loader: require.resolve('postcss-loader'),
@@ -200,18 +193,18 @@ module.exports = {
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
'not ie < 9' // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
flexbox: 'no-2009'
})
]
}
}
]
},
extractTextPluginOptions
)
),
)
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
// "file" loader makes sure assets end up in the `build` folder.
@@ -226,14 +219,14 @@ module.exports = {
// by webpacks internal loaders.
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
name: 'static/media/[name].[hash:8].[ext]'
}
}
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
],
]
}
]
},
plugins: [
// Makes some environment variables available in index.html.
@@ -256,8 +249,8 @@ module.exports = {
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
minifyURLs: true
}
}),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
@@ -272,28 +265,28 @@ module.exports = {
// https://github.com/facebookincubator/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
comparisons: false
},
mangle: {
safari10: true,
safari10: true
},
output: {
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebookincubator/create-react-app/issues/2488
ascii_only: true,
ascii_only: true
},
sourceMap: shouldUseSourceMap,
sourceMap: shouldUseSourceMap
}),
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
new ExtractTextPlugin({
filename: cssFilename,
filename: cssFilename
}),
// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',
fileName: 'asset-manifest.json'
}),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
@@ -318,19 +311,19 @@ module.exports = {
},
minify: true,
// For unknown URLs, fallback to the index page
navigateFallback: publicUrl + '/index.html',
navigateFallback: `${publicUrl}/index.html`,
// Ignores URLs starting from /__ (useful for Firebase):
// https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
navigateFallbackWhitelist: [/^(?!\/__).*/],
// Don't precache sourcemaps (they're large) and build asset manifest:
staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/]
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
@@ -339,6 +332,6 @@ module.exports = {
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
child_process: 'empty'
}
};
20 changes: 14 additions & 6 deletions frontend/package.json
Original file line number Diff line number Diff line change
@@ -31,6 +31,7 @@
"fs-extra": "3.0.1",
"highlight.js": "^9.12.0",
"html-webpack-plugin": "2.29.0",
"intersection-observer": "^0.5.0",
"jest": "20.0.4",
"jss": "^9.8.0",
"lodash": "^4.17.5",
@@ -73,8 +74,12 @@
},
"proxy": "http://localhost:5000",
"jest": {
"collectCoverageFrom": ["src/**/*.{js,jsx,mjs}"],
"setupFiles": ["<rootDir>/config/polyfills.js"],
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
@@ -84,10 +89,11 @@
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)":
"<rootDir>/config/jest/fileTransform.js"
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"],
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
@@ -102,7 +108,9 @@
]
},
"babel": {
"presets": ["react-app"]
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"

0 comments on commit bbf49a2

Please sign in to comment.