diff --git a/app/client/.babelrc b/app/client/.babelrc index bad109521ae8..b933a21da7ed 100644 --- a/app/client/.babelrc +++ b/app/client/.babelrc @@ -1,4 +1,16 @@ { + "presets": [ + ["@babel/preset-env", { + "useBuiltIns": "entry", + "corejs": 3 + }], + ["@babel/preset-react", { + "runtime": "automatic", + "development": true, + "importSource": "@welldone-software/why-did-you-render" + }], + "@babel/preset-typescript" + ], "plugins": [ ["module-resolver", { "root": ["./src"], @@ -10,11 +22,20 @@ "components": "./src/components/", "selectors": "./src/selectors/", "reducers": "./src/reducers/", - "actions":"./src/actions/", + "actions": "./src/actions/", "api": "./src/api/", "assets": "./src/assets/", - "sagas": "./src/sagas/" + "sagas": "./src/sagas/", + "ee": "./src/ee/", + "workbox-*": "../node_modules/workbox-*" } - }, "babel-plugin-styled-components"] + }], + "@babel/plugin-transform-runtime", + ["@babel/plugin-proposal-decorators", { "legacy": true }], + ["@babel/plugin-proposal-class-properties", { "loose": true }], + ["@babel/plugin-proposal-private-methods", { "loose": true }], + ["@babel/plugin-proposal-private-property-in-object", { "loose": true }], + ["@babel/plugin-proposal-object-rest-spread", { "loose": true }], + "babel-plugin-styled-components" ] } diff --git a/app/client/.eslintrc.base.json b/app/client/.eslintrc.base.json index 8b4f5036e02e..95aa0ec2422d 100644 --- a/app/client/.eslintrc.base.json +++ b/app/client/.eslintrc.base.json @@ -1,7 +1,14 @@ -// This file is a base for all package-specific ESLint configurations { "$schema": "http://json.schemastore.org/eslintrc", "root": true, + "extends": [ + "plugin:@typescript-eslint/recommended", + "plugin:@typescript-eslint/strict-type-checked", + "plugin:@typescript-eslint/stylistic-type-checked", + "plugin:react/recommended", + "plugin:react-hooks/recommended", + "prettier" + ], "parser": "@typescript-eslint/parser", "ignorePatterns": [ "jest.config.js", @@ -10,9 +17,9 @@ ".eslintrc.js" ], "plugins": [ - "react", - "eslint-plugin-react-compiler", "@typescript-eslint", + "react", + "react-hooks", "prettier", "sort-destructure-keys", "cypress", @@ -21,67 +28,171 @@ "@appsmith", "react-perf" ], - "extends": [ - "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react - "plugin:@typescript-eslint/recommended", - "plugin:cypress/recommended", - "plugin:testing-library/react", - "plugin:react-hooks/recommended", - "plugin:@appsmith/recommended", - "plugin:react-perf/recommended", - // Note: Please keep this as the last config to make sure that this (and by extension our .prettierrc file) overrides all configuration above it - // https://www.npmjs.com/package/eslint-plugin-prettier#recommended-configuration - "plugin:prettier/recommended" - ], "parserOptions": { - "ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features - "sourceType": "module", // Allows for the use of imports + "ecmaVersion": 2024, + "sourceType": "module", + "project": true, + "tsconfigRootDir": ".", "ecmaFeatures": { - "jsx": true // Allows for the parsing of JSX - }, - "project": "./tsconfig.json" + "jsx": true + } }, "rules": { - "react-compiler/react-compiler": "warn", + "@typescript-eslint/consistent-type-assertions": "warn", + "@typescript-eslint/prefer-function-type": "warn", + "@typescript-eslint/no-empty-interface": "warn", + "@typescript-eslint/no-empty-function": "warn", + "@typescript-eslint/prefer-string-starts-ends-with": "warn", + "@typescript-eslint/prefer-reduce-type-parameter": "warn", + "@typescript-eslint/prefer-for-of": "warn", + "@typescript-eslint/no-unnecessary-type-arguments": "warn", + "@typescript-eslint/no-unnecessary-boolean-literal-compare": "warn", + "@typescript-eslint/dot-notation": "warn", + "@typescript-eslint/no-unnecessary-type-assertion": "warn", + "@typescript-eslint/prefer-includes": "warn", + "@typescript-eslint/no-inferrable-types": "warn", + "@typescript-eslint/no-throw-literal": "warn", + "@typescript-eslint/prefer-optional-chain": "warn", + "@typescript-eslint/array-type": "warn", + "@typescript-eslint/consistent-generic-constructors": "warn", + "@typescript-eslint/consistent-indexed-object-style": "warn", + "@typescript-eslint/no-confusing-void-expression": "warn", + "@typescript-eslint/non-nullable-type-assertion-style": "warn", + "@typescript-eslint/no-useless-template-literals": "warn", + "@typescript-eslint/no-unnecessary-condition": "warn", + "@typescript-eslint/no-implied-eval": "warn", + "@typescript-eslint/restrict-plus-operands": "warn", + "@typescript-eslint/no-base-to-string": "warn", + "@typescript-eslint/no-unused-vars": "warn", + "@typescript-eslint/no-for-in-array": "warn", + "@typescript-eslint/no-extraneous-class": "warn", + "@typescript-eslint/no-redundant-type-constituents": "warn", + "@typescript-eslint/restrict-template-expressions": "warn", + "@typescript-eslint/no-invalid-void-type": "warn", + "@typescript-eslint/no-useless-constructor": "warn", + "@typescript-eslint/no-misused-promises": "warn", + "@typescript-eslint/no-non-null-assertion": "warn", + "@typescript-eslint/require-await": "warn", + "@typescript-eslint/no-floating-promises": "warn", + "@typescript-eslint/await-thenable": "warn", + "@typescript-eslint/no-dynamic-delete": "warn", + "@typescript-eslint/no-unsafe-enum-comparison": "warn", + "@typescript-eslint/no-use-before-define": "warn", + "@typescript-eslint/unbound-method": "warn", + "@typescript-eslint/no-unsafe-argument": "warn", + "@typescript-eslint/no-unsafe-assignment": "warn", + "@typescript-eslint/no-unsafe-call": "warn", + "@typescript-eslint/no-unsafe-return": "warn", + "@typescript-eslint/no-unsafe-member-access": "warn", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/no-explicit-any": "warn", + "@typescript-eslint/consistent-type-imports": [ + "error", + { + "prefer": "type-imports", + "fixStyle": "separate-type-imports" + } + ], + "@typescript-eslint/no-import-type-side-effects": "error", + "react/react-in-jsx-scope": "off", + "react/prop-types": "off", + "@typescript-eslint/no-restricted-imports": [ + "error", + { + "patterns": [ + { + "group": [ + "@blueprintjs/core/lib/esnext/*" + ], + "message": "Reason: @blueprintjs/core has both lib/esnext and lib/esm directories which export the same components. To avoid duplicating components in the bundle, please import only from the lib/esm directory." + }, + { + "group": [ + "*.svg" + ], + "importNames": [ + "ReactComponent" + ], + "message": "Reason: Please don't import SVG icons statically. (They won't always be needed, but they *will* always be present in the bundle and will increase the bundle size.) Instead, please either import them as SVG paths (e.g. import starIconUrl from './star.svg'), or use the importSvg wrapper from @appsmith/ads-old (e.g. const StarIcon = importSvg(() => import('./star.svg')))." + }, + { + "group": [ + "remixicon-react/*" + ], + "message": "Reason: Please don't import Remix icons statically. (They won't always be needed, but they *will* always be present in the bundle and will increase the bundle size.) Instead, please use the importRemixIcon wrapper from @appsmith/ads-old (e.g. const StarIcon = importRemixIcon(() => import('remixicon-react/Star')))." + } + ] + } + ], "padding-line-between-statements": [ "error", - { "blankLine": "always", "prev": "*", "next": "return" }, { "blankLine": "always", "prev": "*", - "next": ["if", "for", "while"] + "next": "return" }, { "blankLine": "always", - "prev": ["if", "for", "while"], + "prev": "*", + "next": [ + "if", + "for", + "while" + ] + }, + { + "blankLine": "always", + "prev": [ + "if", + "for", + "while" + ], + "next": "*" + }, + { + "blankLine": "always", + "prev": [ + "const", + "let" + ], "next": "*" }, - { "blankLine": "always", "prev": ["const", "let"], "next": "*" }, { "blankLine": "any", - "prev": ["const", "let"], - "next": ["const", "let"] + "prev": [ + "const", + "let" + ], + "next": [ + "const", + "let" + ] + }, + { + "blankLine": "always", + "prev": "*", + "next": "function" }, - { "blankLine": "always", "prev": "*", "next": "function" }, - { "blankLine": "always", "prev": "function", "next": "*" } + { + "blankLine": "always", + "prev": "function", + "next": "*" + } ], "testing-library/consistent-data-testid": [ "warn", { "testIdPattern": "^t--[a-zA-Z0-9_.-]*$", - "testIdAttribute": ["data-testid"] + "testIdAttribute": [ + "data-testid" + ] } ], - "@typescript-eslint/consistent-type-definitions": "error", "@typescript-eslint/prefer-nullish-coalescing": "error", "@typescript-eslint/promise-function-async": "error", "@typescript-eslint/strict-boolean-expressions": "error", - "@typescript-eslint/no-explicit-any": "error", - "@typescript-eslint/no-unused-vars": "error", "jest/no-focused-tests": "error", "jest/no-disabled-tests": "error", - // enforce `import type` for all type-only imports so the bundler knows to erase them - "@typescript-eslint/consistent-type-imports": "error", "react/jsx-boolean-value": "error", "react/self-closing-comp": "error", "react/jsx-sort-props": "error", @@ -89,7 +200,9 @@ "react/jsx-no-useless-fragment": "error", "sort-destructure-keys/sort-destructure-keys": [ "error", - { "caseSensitive": false } + { + "caseSensitive": false + } ], "no-console": "error", "no-debugger": "error", @@ -99,30 +212,8 @@ "react-perf/jsx-no-new-object-as-prop": [ "warn", { - // we are disabling this rule here for native component since it won't make much difference in performance - // we want to target react components more since there is possibility they can be pure components and new istance props should be avoided for them "nativeAllowList": "all" } - ], - "@typescript-eslint/no-restricted-imports": [ - "error", - { - "patterns": [ - { - "group": ["@blueprintjs/core/lib/esnext/*"], - "message": "Reason: @blueprintjs/core has both lib/esnext and lib/esm directories which export the same components. To avoid duplicating components in the bundle, please import only from the lib/esm directory." - }, - { - "group": ["*.svg"], - "importNames": ["ReactComponent"], - "message": "Reason: Please don’t import SVG icons statically. (They won’t always be needed, but they *will* always be present in the bundle and will increase the bundle size.) Instead, please either import them as SVG paths (e.g. import starIconUrl from './star.svg'), or use the importSvg wrapper from @appsmith/ads-old (e.g. const StarIcon = importSvg(() => import('./star.svg')))." - }, - { - "group": ["remixicon-react/*"], - "message": "Reason: Please don’t import Remix icons statically. (They won’t always be needed, but they *will* always be present in the bundle and will increase the bundle size.) Instead, please use the importRemixIcon wrapper from @appsmith/ads-old (e.g. const StarIcon = importRemixIcon(() => import('remixicon-react/Star')))." - } - ] - } ] }, "settings": { @@ -131,7 +222,6 @@ }, "react": { "pragma": "React", - // Tells eslint-plugin-react to automatically detect the version of React to use "version": "detect" } }, @@ -141,4 +231,4 @@ "cypress/globals": true, "worker": true } -} +} \ No newline at end of file diff --git a/app/client/build.sh b/app/client/build.sh index c42a32a0c366..0afae6b9a3c7 100755 --- a/app/client/build.sh +++ b/app/client/build.sh @@ -18,6 +18,6 @@ export REACT_APP_SENTRY_RELEASE=$GIT_SHA export REACT_APP_CLIENT_LOG_LEVEL=ERROR # Disable CRA built-in ESLint checks since we have our own config and a separate step for this export DISABLE_ESLINT_PLUGIN=true -craco --max-old-space-size=10240 build --config craco.build.config.js +node --max-old-space-size=16000 scripts/build.js echo "build finished" diff --git a/app/client/config/env.js b/app/client/config/env.js new file mode 100644 index 000000000000..ffa7e496aacd --- /dev/null +++ b/app/client/config/env.js @@ -0,0 +1,104 @@ +'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`, + // 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}.${NODE_ENV}`, + 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, + // We support configuring the sockjs pathname during development. + // These settings let a developer run multiple simultaneous projects. + // They are used as the connection `hostname`, `pathname` and `port` + // in webpackHotDevClient. They are used as the `sockHost`, `sockPath` + // and `sockPort` options in webpack-dev-server. + WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST, + WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH, + WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT, + // Whether or not react-refresh is enabled. + // It is defined here so it is available in the webpackHotDevClient. + FAST_REFRESH: process.env.FAST_REFRESH !== 'false', + } + ); + // 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/app/client/config/getHttpsConfig.js b/app/client/config/getHttpsConfig.js new file mode 100644 index 000000000000..013d493c1bbe --- /dev/null +++ b/app/client/config/getHttpsConfig.js @@ -0,0 +1,66 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const crypto = require('crypto'); +const chalk = require('react-dev-utils/chalk'); +const paths = require('./paths'); + +// Ensure the certificate and key provided are valid and if not +// throw an easy to debug error +function validateKeyAndCerts({ cert, key, keyFile, crtFile }) { + let encrypted; + try { + // publicEncrypt will throw an error with an invalid cert + encrypted = crypto.publicEncrypt(cert, Buffer.from('test')); + } catch (err) { + throw new Error( + `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}` + ); + } + + try { + // privateDecrypt will throw an error with an invalid key + crypto.privateDecrypt(key, encrypted); + } catch (err) { + throw new Error( + `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${ + err.message + }` + ); + } +} + +// Read file and throw an error if it doesn't exist +function readEnvFile(file, type) { + if (!fs.existsSync(file)) { + throw new Error( + `You specified ${chalk.cyan( + type + )} in your env, but the file "${chalk.yellow(file)}" can't be found.` + ); + } + return fs.readFileSync(file); +} + +// Get the https config +// Return cert files if provided in env, otherwise just true or false +function getHttpsConfig() { + const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env; + const isHttps = HTTPS === 'true'; + + if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) { + const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE); + const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE); + const config = { + cert: readEnvFile(crtFile, 'SSL_CRT_FILE'), + key: readEnvFile(keyFile, 'SSL_KEY_FILE'), + }; + + validateKeyAndCerts({ ...config, keyFile, crtFile }); + return config; + } + return isHttps; +} + +module.exports = getHttpsConfig; diff --git a/app/client/config/jest/babelTransform.js b/app/client/config/jest/babelTransform.js new file mode 100644 index 000000000000..5b391e405562 --- /dev/null +++ b/app/client/config/jest/babelTransform.js @@ -0,0 +1,29 @@ +'use strict'; + +const babelJest = require('babel-jest').default; + +const hasJsxRuntime = (() => { + if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') { + return false; + } + + try { + require.resolve('react/jsx-runtime'); + return true; + } catch (e) { + return false; + } +})(); + +module.exports = babelJest.createTransformer({ + presets: [ + [ + require.resolve('babel-preset-react-app'), + { + runtime: hasJsxRuntime ? 'automatic' : 'classic', + }, + ], + ], + babelrc: false, + configFile: false, +}); diff --git a/app/client/config/jest/cssTransform.js b/app/client/config/jest/cssTransform.js new file mode 100644 index 000000000000..8f65114812a4 --- /dev/null +++ b/app/client/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/app/client/config/jest/fileTransform.js b/app/client/config/jest/fileTransform.js new file mode 100644 index 000000000000..aab67618c38b --- /dev/null +++ b/app/client/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/app/client/config/modules.js b/app/client/config/modules.js new file mode 100644 index 000000000000..c483279e3481 --- /dev/null +++ b/app/client/config/modules.js @@ -0,0 +1,85 @@ +'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'); +const ts = require('typescript'); + +/** + * 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 can be explicitly configured to use [''] as the baseUrl. + if (baseUrl == null) { + const config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config; + const { baseUrl: tsConfigBaseUrl } = config.compilerOptions || {}; + if (tsConfigBaseUrl) { + return [path.resolve(paths.appPath, tsConfigBaseUrl)]; + } + } + + const baseUrlResolved = path.resolve(paths.appPath, baseUrl); + + // We don't need to do any glob matching since TypeScript's path mappings are based on baseUrl + if (path.relative(paths.appNodeModules, baseUrlResolved) === '') { + return null; + } + + if (path.relative(paths.appSrc, 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) { + const config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config; + const { baseUrl: tsConfigBaseUrl, paths: tsConfigPaths } = config.compilerOptions || {}; + + if (tsConfigBaseUrl && tsConfigPaths) { + const webpackAliases = {}; + Object.keys(tsConfigPaths).forEach(key => { + const path = tsConfigPaths[key][0]; + if (path) { + webpackAliases[key.replace('/*', '')] = path.replace('/*', ''); + } + }); + return webpackAliases; + } + return {}; + } + + const baseUrlResolved = path.resolve(paths.appPath, baseUrl); + + if (path.relative(paths.appPath, baseUrlResolved) === '') { + return { + src: paths.appSrc, + }; + } +} + +module.exports = { + getAdditionalModulePaths, + getWebpackAliases, +}; diff --git a/app/client/config/paths.js b/app/client/config/paths.js new file mode 100644 index 000000000000..9909a3161e1d --- /dev/null +++ b/app/client/config/paths.js @@ -0,0 +1,71 @@ +'use strict'; + +const path = require('path'); +const fs = require('fs'); +const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath'); + +// 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); + +// 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