From 9af1468f1ff8722865c24ffc1169a8cdb1910297 Mon Sep 17 00:00:00 2001 From: yairtawil Date: Sun, 5 Jan 2020 18:17:13 +0200 Subject: [PATCH 1/4] add mobx packages --- package-lock.json | 18 ++++++++++++++++++ package.json | 2 ++ src/App.js | 24 +++++++++++------------- 3 files changed, 31 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 933a7d6..788903c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10622,6 +10622,24 @@ } } }, + "mobx": { + "version": "5.15.1", + "resolved": "https://registry.npmjs.org/mobx/-/mobx-5.15.1.tgz", + "integrity": "sha512-o4aN0GqKcDmKwu2wVsqbujU4F63ZvmbBLSc7WhzuAu9S9eF2wgNjqIkzrb/kbY3C9/mGYG4k1M0KbCuG1GJ7IQ==" + }, + "mobx-react": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-6.1.4.tgz", + "integrity": "sha512-wzrJF1RflhyLh8ne4FJfMbG8ZgRFmZ62b4nbyhJzwQpAmrkSnSsAWG9mIff4ffV/Q7OU+uOYf7rXvSmiuUe4cw==", + "requires": { + "mobx-react-lite": "^1.4.2" + } + }, + "mobx-react-lite": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-1.5.2.tgz", + "integrity": "sha512-PyZmARqqWtpuQaAoHF5pKX7h6TKNLwq6vtovm4zZvG6sEbMRHHSqioGXSeQbpRmG8Kw8uln3q/W1yMO5IfL5Sg==" + }, "moment": { "version": "2.24.0", "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", diff --git a/package.json b/package.json index 11cd6ac..d64a791 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,8 @@ "firebase": "^6.2.0", "history": "^4.10.1", "lodash": "^4.17.15", + "mobx": "^5.15.1", + "mobx-react": "^6.1.4", "moment": "^2.24.0", "prop-types": "^15.7.2", "react": "^16.8.6", diff --git a/src/App.js b/src/App.js index fd6442d..eeb4e05 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,14 @@ -import React from 'react' -import './App.css' -import Theme from './Theme' -import Auth from './Auth' -import { Route, Switch } from 'react-router' -import Welcome from './components/Welcome' -import Home from './components/Home/Home' -import PrivateRoute from './components/PrivateRoute' -import BaseStyle from './components/BaseStyle' +import React from 'react'; +import './App.css'; +import Theme from './Theme'; +import Auth from './Auth'; +import { Route, Switch } from 'react-router'; +import Welcome from './components/Welcome'; +import Home from './components/Home/Home'; +import PrivateRoute from './components/PrivateRoute'; +import BaseStyle from './components/BaseStyle'; -const App = () => { +export default function App() { return ( @@ -20,7 +20,5 @@ const App = () => { - ) + ); } - -export default App From bcfe19ac21aa4e15d4b9f1a25676e0af9940e453 Mon Sep 17 00:00:00 2001 From: yairtawil Date: Mon, 13 Jan 2020 23:05:59 +0200 Subject: [PATCH 2/4] eject project add babel plugins --- .babelrc | 19 + .editorconfig | 4 + .eslintrc | 7 + .travis.yml | 1 - config/env.js | 93 ++++ config/jest/cssTransform.js | 14 + config/jest/fileTransform.js | 40 ++ config/modules.js | 141 ++++++ config/paths.js | 90 ++++ config/pnpTs.js | 35 ++ config/webpack.config.js | 674 +++++++++++++++++++++++++++ config/webpackDevServer.config.js | 110 +++++ package-lock.json | 623 ++++++++++++++++++------- package.json | 121 ++++- scripts/build.js | 211 +++++++++ scripts/start.js | 147 ++++++ scripts/test.js | 53 +++ src/Auth.js | 2 +- src/components/Home/Chat/DropZone.js | 2 +- src/components/Home/Home.js | 1 + src/components/Navbar.js | 2 +- src/state/reducers/ui.js | 2 +- src/state/reducers/users.js | 2 +- 23 files changed, 2211 insertions(+), 183 deletions(-) create mode 100644 .babelrc create mode 100644 .eslintrc create mode 100644 config/env.js create mode 100644 config/jest/cssTransform.js create mode 100644 config/jest/fileTransform.js create mode 100644 config/modules.js create mode 100644 config/paths.js create mode 100644 config/pnpTs.js create mode 100644 config/webpack.config.js create mode 100644 config/webpackDevServer.config.js create mode 100644 scripts/build.js create mode 100644 scripts/start.js create mode 100644 scripts/test.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..c2e180e --- /dev/null +++ b/.babelrc @@ -0,0 +1,19 @@ +{ + "presets": [ + "react-app" + ], + "plugins": [ + [ + "@babel/plugin-proposal-decorators", + { + "legacy": true + } + ], + [ + "@babel/plugin-proposal-class-properties", + { + "loose": true + } + ] + ] +} \ No newline at end of file diff --git a/.editorconfig b/.editorconfig index ea56ae4..8b94842 100644 --- a/.editorconfig +++ b/.editorconfig @@ -6,3 +6,7 @@ indent_style = space indent_size = 2 insert_final_newline = false trim_trailing_whitespace = false +ij_javascript_spaces_within_object_literal_braces = true +ij_javascript_spaces_within_array_initializer_brackets = true +ij_javascript_spaces_within_imports = true +ij_javascript_enforce_trailing_comma = whenmultiline \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..3f424f6 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,7 @@ +{ + "extends": ["react-app"], + "rules": { + "react-hooks/exhaustive-deps": "error", + "semi": "off" + } +} diff --git a/.travis.yml b/.travis.yml index ac3c3fb..45e0699 100644 --- a/.travis.yml +++ b/.travis.yml @@ -16,7 +16,6 @@ script: before_deploy: - npm install -g firebase-tools - deploy: - provider: script script: diff --git a/config/env.js b/config/env.js new file mode 100644 index 0000000..211711b --- /dev/null +++ b/config/env.js @@ -0,0 +1,93 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const paths = require('./paths'); + +// Make sure that including paths.js after env.js will read .env variables. +delete require.cache[require.resolve('./paths')]; + +const NODE_ENV = process.env.NODE_ENV; +if (!NODE_ENV) { + throw new Error( + 'The NODE_ENV environment variable is required but was not specified.' + ); +} + +// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use +const dotenvFiles = [ + `${paths.dotenv}.${NODE_ENV}.local`, + `${paths.dotenv}.${NODE_ENV}`, + // Don't include `.env.local` for `test` environment + // since normally you expect tests to produce the same + // results for everyone + NODE_ENV !== 'test' && `${paths.dotenv}.local`, + paths.dotenv, +].filter(Boolean); + +// Load environment variables from .env* files. Suppress warnings using silent +// if this file is missing. dotenv will never modify any environment variables +// that have already been set. Variable expansion is supported in .env files. +// https://github.com/motdotla/dotenv +// https://github.com/motdotla/dotenv-expand +dotenvFiles.forEach(dotenvFile => { + if (fs.existsSync(dotenvFile)) { + require('dotenv-expand')( + require('dotenv').config({ + path: dotenvFile, + }) + ); + } +}); + +// We support resolving modules according to `NODE_PATH`. +// This lets you use absolute paths in imports inside large monorepos: +// https://github.com/facebook/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 +// 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/facebook/create-react-app/issues/1023#issuecomment-265344421 +// We also resolve them to make sure all tools using them work consistently. +const appDirectory = fs.realpathSync(process.cwd()); +process.env.NODE_PATH = (process.env.NODE_PATH || '') + .split(path.delimiter) + .filter(folder => folder && !path.isAbsolute(folder)) + .map(folder => path.resolve(appDirectory, folder)) + .join(path.delimiter); + +// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be +// injected into the application via DefinePlugin in Webpack configuration. +const REACT_APP = /^REACT_APP_/i; + +function getClientEnvironment(publicUrl) { + const 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 + const 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/config/jest/cssTransform.js b/config/jest/cssTransform.js new file mode 100644 index 0000000..8f65114 --- /dev/null +++ b/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/en/webpack.html + +module.exports = { + process() { + return 'module.exports = {};'; + }, + getCacheKey() { + // The output is always the same. + return 'cssTransform'; + }, +}; diff --git a/config/jest/fileTransform.js b/config/jest/fileTransform.js new file mode 100644 index 0000000..aab6761 --- /dev/null +++ b/config/jest/fileTransform.js @@ -0,0 +1,40 @@ +'use strict'; + +const path = require('path'); +const camelcase = require('camelcase'); + +// This is a custom Jest transformer turning file imports into filenames. +// http://facebook.github.io/jest/docs/en/webpack.html + +module.exports = { + process(src, filename) { + const assetFilename = JSON.stringify(path.basename(filename)); + + if (filename.match(/\.svg$/)) { + // Based on how SVGR generates a component name: + // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6 + const pascalCaseFilename = camelcase(path.parse(filename).name, { + pascalCase: true, + }); + const componentName = `Svg${pascalCaseFilename}`; + return `const React = require('react'); + module.exports = { + __esModule: true, + default: ${assetFilename}, + ReactComponent: React.forwardRef(function ${componentName}(props, ref) { + return { + $$typeof: Symbol.for('react.element'), + type: 'svg', + ref: ref, + key: null, + props: Object.assign({}, props, { + children: ${assetFilename} + }) + }; + }), + };`; + } + + return `module.exports = ${assetFilename};`; + }, +}; diff --git a/config/modules.js b/config/modules.js new file mode 100644 index 0000000..c8efd0d --- /dev/null +++ b/config/modules.js @@ -0,0 +1,141 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const paths = require('./paths'); +const chalk = require('react-dev-utils/chalk'); +const resolve = require('resolve'); + +/** + * Get additional module paths based on the baseUrl of a compilerOptions object. + * + * @param {Object} options + */ +function getAdditionalModulePaths(options = {}) { + const baseUrl = options.baseUrl; + + // We need to explicitly check for null and undefined (and not a falsy value) because + // TypeScript treats an empty string as `.`. + if (baseUrl == null) { + // If there's no baseUrl set we respect NODE_PATH + // Note that NODE_PATH is deprecated and will be removed + // in the next major release of create-react-app. + + const nodePath = process.env.NODE_PATH || ''; + return nodePath.split(path.delimiter).filter(Boolean); + } + + const baseUrlResolved = path.resolve(paths.appPath, baseUrl); + + // We don't need to do anything if `baseUrl` is set to `node_modules`. This is + // the default behavior. + if (path.relative(paths.appNodeModules, baseUrlResolved) === '') { + return null; + } + + // Allow the user set the `baseUrl` to `appSrc`. + if (path.relative(paths.appSrc, baseUrlResolved) === '') { + return [paths.appSrc]; + } + + // If the path is equal to the root directory we ignore it here. + // We don't want to allow importing from the root directly as source files are + // not transpiled outside of `src`. We do allow importing them with the + // absolute path (e.g. `src/Components/Button.js`) but we set that up with + // an alias. + if (path.relative(paths.appPath, baseUrlResolved) === '') { + return null; + } + + // Otherwise, throw an error. + throw new Error( + chalk.red.bold( + "Your project's `baseUrl` can only be set to `src` or `node_modules`." + + ' Create React App does not support other values at this time.' + ) + ); +} + +/** + * Get webpack aliases based on the baseUrl of a compilerOptions object. + * + * @param {*} options + */ +function getWebpackAliases(options = {}) { + const baseUrl = options.baseUrl; + + if (!baseUrl) { + return {}; + } + + const baseUrlResolved = path.resolve(paths.appPath, baseUrl); + + if (path.relative(paths.appPath, baseUrlResolved) === '') { + return { + src: paths.appSrc, + }; + } +} + +/** + * Get jest aliases based on the baseUrl of a compilerOptions object. + * + * @param {*} options + */ +function getJestAliases(options = {}) { + const baseUrl = options.baseUrl; + + if (!baseUrl) { + return {}; + } + + const baseUrlResolved = path.resolve(paths.appPath, baseUrl); + + if (path.relative(paths.appPath, baseUrlResolved) === '') { + return { + '^src/(.*)$': '/src/$1', + }; + } +} + +function getModules() { + // Check if TypeScript is setup + const hasTsConfig = fs.existsSync(paths.appTsConfig); + const hasJsConfig = fs.existsSync(paths.appJsConfig); + + if (hasTsConfig && hasJsConfig) { + throw new Error( + 'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.' + ); + } + + let config; + + // If there's a tsconfig.json we assume it's a + // TypeScript project and set up the config + // based on tsconfig.json + if (hasTsConfig) { + const ts = require(resolve.sync('typescript', { + basedir: paths.appNodeModules, + })); + config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config; + // Otherwise we'll check if there is jsconfig.json + // for non TS projects. + } else if (hasJsConfig) { + config = require(paths.appJsConfig); + } + + config = config || {}; + const options = config.compilerOptions || {}; + + const additionalModulePaths = getAdditionalModulePaths(options); + + return { + additionalModulePaths: additionalModulePaths, + webpackAliases: getWebpackAliases(options), + jestAliases: getJestAliases(options), + hasTsConfig, + }; +} + +module.exports = getModules(); diff --git a/config/paths.js b/config/paths.js new file mode 100644 index 0000000..f23c121 --- /dev/null +++ b/config/paths.js @@ -0,0 +1,90 @@ +'use strict'; + +const path = require('path'); +const fs = require('fs'); +const url = require('url'); + +// Make sure any symlinks in the project folder are resolved: +// https://github.com/facebook/create-react-app/issues/637 +const appDirectory = fs.realpathSync(process.cwd()); +const resolveApp = relativePath => path.resolve(appDirectory, relativePath); + +const envPublicUrl = process.env.PUBLIC_URL; + +function ensureSlash(inputPath, needsSlash) { + const hasSlash = inputPath.endsWith('/'); + if (hasSlash && !needsSlash) { + return inputPath.substr(0, inputPath.length - 1); + } else if (!hasSlash && needsSlash) { + return `${inputPath}/`; + } else { + return inputPath; + } +} + +const getPublicUrl = appPackageJson => + 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