diff options
Diffstat (limited to 'scripts/frontend')
-rwxr-xr-x | scripts/frontend/create_jsconfig.js | 29 | ||||
-rw-r--r-- | scripts/frontend/preinstall.mjs | 59 | ||||
-rwxr-xr-x | scripts/frontend/webpack_dev_server.js | 14 |
3 files changed, 90 insertions, 12 deletions
diff --git a/scripts/frontend/create_jsconfig.js b/scripts/frontend/create_jsconfig.js index 7e2d0eb02c4..be95c5cb2d3 100755 --- a/scripts/frontend/create_jsconfig.js +++ b/scripts/frontend/create_jsconfig.js @@ -30,8 +30,19 @@ async function createJsConfig() { // eslint-disable-next-line global-require const webpackConfig = require('../../config/webpack.config'); - const paths = {}; // aliases - const WEBPACK_ALIAS_EXCEPTIONS = ['jquery$', '@gitlab/svgs/dist/icons.svg']; + // Aliases + const paths = { + // NOTE: Sentry is exposed via a wrapper, which has a limited API. + '@sentry/browser': [ + path.relative(PATH_PROJECT_ROOT, 'app/assets/javascripts/sentry/sentry_browser_wrapper.js'), + ], + }; + const WEBPACK_ALIAS_EXCEPTIONS = [ + 'jquery$', + '@gitlab/svgs/dist/icons.svg', + '@apollo/client$', + '@sentry/browser$', + ]; Object.entries(webpackConfig.resolve.alias) .filter(([key]) => !WEBPACK_ALIAS_EXCEPTIONS.includes(key)) .forEach(([key, value]) => { @@ -40,6 +51,7 @@ async function createJsConfig() { paths[alias] = target; }); + // JS/TS config. See more: https://www.typescriptlang.org/tsconfig const jsConfig = { // As we're introducing jsconfig to the project, as a precaution we add both: // 'include' and 'exclude' options. This might be simplified in the future. @@ -52,13 +64,22 @@ async function createJsConfig() { 'ee/app/assets/javascripts', 'spec/frontend', 'ee/spec/frontend', - 'tmp/tests/frontend/fixtures/', - 'tmp/tests/frontend/fixtures-ee/', + 'tmp/tests/frontend/fixtures', + 'tmp/tests/frontend/fixtures-ee', ], + + // Explicitly enable automatic type acquisition + // See more: https://www.typescriptlang.org/tsconfig#type-acquisition + typeAcquisition: { + enable: true, + }, + compilerOptions: { baseUrl: '.', // Define the project root checkJs: false, // Disable type checking on JavaScript files disableSizeLimit: true, // Disable memory size limit for the language server + skipLibCheck: true, // Skip type checking all .d.ts files + resolveJsonModule: true, // Enable importing .json files paths, // Aliases }, }; diff --git a/scripts/frontend/preinstall.mjs b/scripts/frontend/preinstall.mjs new file mode 100644 index 00000000000..09d980344ea --- /dev/null +++ b/scripts/frontend/preinstall.mjs @@ -0,0 +1,59 @@ +import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; +import { readFile, rm } from 'node:fs/promises'; + +const ROOT_PATH = join(dirname(fileURLToPath(import.meta.url)), '..', '..'); +const NODE_MODULES = join(ROOT_PATH, 'node_modules'); +const INTEGRITY_FILE = join(NODE_MODULES, '.yarn-integrity'); +const PACKAGE_JSON = join(ROOT_PATH, 'package.json'); + +function isAliasedDependency(x) { + return x.includes('@npm:'); +} +function serializeAliasedDependencyPatterns(obj) { + return Object.entries(obj).map(([key, version]) => `${key}@${version}`); +} + +async function readJSON(file) { + return JSON.parse(await readFile(file, { encoding: 'utf-8' })); +} + +async function getPrevTopLevelPatterns() { + try { + return (await readJSON(INTEGRITY_FILE))?.topLevelPatterns?.filter(isAliasedDependency); + } catch { + return []; + } +} +async function getCurrentTopLevelPatterns() { + try { + const { dependencies, devDependencies } = await readJSON(PACKAGE_JSON); + + return serializeAliasedDependencyPatterns(dependencies) + .concat(serializeAliasedDependencyPatterns(devDependencies)) + .filter(isAliasedDependency); + } catch { + return []; + } +} + +function arraysHaveSameItems(a1, a2) { + return JSON.stringify(a1.sort()) === JSON.stringify(a2.sort()); +} + +const [prevTopLevelPatterns, currentTopLevelPatterns] = await Promise.all([ + getPrevTopLevelPatterns(), + getCurrentTopLevelPatterns(), +]); + +/** + * Yarn seems to have problems at times, if one uses an <alias>@npm:<name> + * and those packages are being updated. In case one switches branches the + * node_modules folder seems to end up being a corrupted somehow + */ +if (!arraysHaveSameItems(prevTopLevelPatterns, currentTopLevelPatterns)) { + console.error( + '[WARNING] package.json changed significantly. Removing node_modules to be sure there are no problems.', + ); + await rm(NODE_MODULES, { recursive: true, force: true }); +} diff --git a/scripts/frontend/webpack_dev_server.js b/scripts/frontend/webpack_dev_server.js index a76e6dc024a..ae73c14b501 100755 --- a/scripts/frontend/webpack_dev_server.js +++ b/scripts/frontend/webpack_dev_server.js @@ -30,17 +30,15 @@ if (STATIC_MODE) { // run webpack through webpack-dev-server, optionally compiling a DLL to reduce memory else { - const watch = ['config/webpack.config.js']; + const watch = [ + 'config/webpack.config.js', + // ensure we refresh when running yarn install + 'node_modules/.yarn-integrity', + ]; // if utilizing the vendor DLL, we need to restart the process when dependency changes occur if (DLL_MODE) { - watch.push( - 'config/webpack.vendor.config.js', - // ensure we refresh when running yarn install - 'node_modules/.yarn-integrity', - 'package.json', - 'yarn.lock', - ); + watch.push('config/webpack.vendor.config.js', 'package.json', 'yarn.lock'); } nodemon({ exec: 'webpack-dev-server --config config/webpack.config.js', |