diff --git a/.eslintignore b/.eslintignore index 6c7b69a01..ec019e5aa 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,2 @@ .gitignore +examples/dom-bindings diff --git a/.prettierignore b/.prettierignore index e69de29bb..fee92683e 100644 --- a/.prettierignore +++ b/.prettierignore @@ -0,0 +1 @@ +examples/dom-bindings diff --git a/examples/dom-bindings/config/env.js b/examples/dom-bindings/config/env.js new file mode 100644 index 000000000..0bffc1193 --- /dev/null +++ b/examples/dom-bindings/config/env.js @@ -0,0 +1,38 @@ +'use strict'; + +// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be +// injected into the application via DefinePlugin in Webpack configuration. + +var REACT_APP = /^REACT_APP_/i; + +function getClientEnvironment(publicUrl) { + var raw = Object.keys(process.env) + .filter(key => REACT_APP.test(key)) + .reduce( + (env, key) => { + env[key] = process.env[key]; + return env; + }, + { + // Useful for determining whether we’re running in production mode. + // Most importantly, it switches React into the correct mode. + NODE_ENV: process.env.NODE_ENV || 'development', + // Useful for resolving the correct path to static assets in `public`. + // For example, . + // This should only be used as an escape hatch. Normally you would put + // images into the `src` and `import` them in code to get their paths. + PUBLIC_URL: publicUrl, + }, + ); + // Stringify all values so we can feed into Webpack DefinePlugin + var stringified = { + 'process.env': Object.keys(raw).reduce((env, key) => { + env[key] = JSON.stringify(raw[key]); + return env; + }, {}), + }; + + return { raw, stringified }; +} + +module.exports = getClientEnvironment; diff --git a/examples/dom-bindings/config/jest/cssTransform.js b/examples/dom-bindings/config/jest/cssTransform.js new file mode 100644 index 000000000..f1534f6fb --- /dev/null +++ b/examples/dom-bindings/config/jest/cssTransform.js @@ -0,0 +1,14 @@ +'use strict'; + +// This is a custom Jest transformer turning style imports into empty objects. +// http://facebook.github.io/jest/docs/tutorial-webpack.html + +module.exports = { + process() { + return 'module.exports = {};'; + }, + getCacheKey() { + // The output is always the same. + return 'cssTransform'; + }, +}; diff --git a/examples/dom-bindings/config/jest/fileTransform.js b/examples/dom-bindings/config/jest/fileTransform.js new file mode 100644 index 000000000..d1cc3b2d4 --- /dev/null +++ b/examples/dom-bindings/config/jest/fileTransform.js @@ -0,0 +1,12 @@ +'use strict'; + +const path = require('path'); + +// This is a custom Jest transformer turning file imports into filenames. +// http://facebook.github.io/jest/docs/tutorial-webpack.html + +module.exports = { + process(src, filename) { + return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'; + }, +}; diff --git a/examples/dom-bindings/config/paths.js b/examples/dom-bindings/config/paths.js new file mode 100644 index 000000000..bc39fe4ba --- /dev/null +++ b/examples/dom-bindings/config/paths.js @@ -0,0 +1,79 @@ +'use strict'; + +var path = require('path'); +var fs = require('fs'); +var url = require('url'); + +// Make sure any symlinks in the project folder are resolved: +// https://github.com/facebookincubator/create-react-app/issues/637 +var appDirectory = fs.realpathSync(process.cwd()); +function resolveApp(relativePath) { + return path.resolve(appDirectory, relativePath); +} + +// We support resolving modules according to `NODE_PATH`. +// This lets you use absolute paths in imports inside large monorepos: +// https://github.com/facebookincubator/create-react-app/issues/253. + +// It works similar to `NODE_PATH` in Node itself: +// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders + +// We will export `nodePaths` as an array of absolute paths. +// It will then be used by Webpack configs. +// Jest doesn’t need this because it already handles `NODE_PATH` out of the box. + +// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. +// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims. +// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421 + +var nodePaths = (process.env.NODE_PATH || '') + .split(process.platform === 'win32' ? ';' : ':') + .filter(Boolean) + .filter(folder => !path.isAbsolute(folder)) + .map(resolveApp); + +var envPublicUrl = process.env.PUBLIC_URL; + +function ensureSlash(path, needsSlash) { + var hasSlash = path.endsWith('/'); + if (hasSlash && !needsSlash) { + return path.substr(path, path.length - 1); + } else if (!hasSlash && needsSlash) { + return path + '/'; + } else { + return path; + } +} + +function getPublicUrl(appPackageJson) { + return envPublicUrl || require(appPackageJson).homepage; +} + +// We use `PUBLIC_URL` environment variable or "homepage" field to infer +// "public path" at which the app is served. +// Webpack needs to know it to put the right