From aea812f93ce0196a9181d83d8eff7a9f644ef94a Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Mon, 7 Mar 2022 12:12:45 +0100 Subject: [PATCH 1/2] feat(build): introduce root build directory in `@sentry/browser` * add root build directory as the output directory for all module formats and bundles. This puts all build JS files and modules (bundles, esm, cjs) into one central build directory. Currently, `package.json`, Readme, License, etc. are still in the package root directories. This should keep things more organized and more clearly arranged. * adjust `tsconfig.json` to build type declarations (*.d.ts) into a separate directory (`build/types`). This deduplicates the identical declarations that were peviously compiled into `dist` and `esm`. * introduce `rootBuildDirectory` export in root `rollup.config.js` as it will (probably) be used in multiple packages and this lets us change the name for all of them at once. Co-authored-by: Katie Byers --- .github/workflows/build.yml | 2 +- .size-limit.js | 12 +++--- packages/browser/examples/bundle.js | 2 +- packages/browser/package.json | 14 +++---- packages/browser/rollup.config.js | 2 +- packages/browser/src/loader.js | 2 +- packages/browser/test/integration/run.js | 2 +- packages/browser/test/package/test-code.js | 2 +- packages/browser/tsconfig.cjs.json | 2 +- packages/browser/tsconfig.esm.json | 2 +- .../integration-tests/utils/generatePlugin.ts | 12 +++--- .../test/scripts/ensure-browser-bundle.js | 2 +- packages/wasm/test/server.js | 2 +- scripts/postbuild.sh | 39 +++++++++++++++++++ 14 files changed, 68 insertions(+), 29 deletions(-) create mode 100644 scripts/postbuild.sh diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index b8b0357a8c5b..b93b34709ccf 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -304,7 +304,7 @@ jobs: with: name: ${{ github.sha }} path: | - ${{ github.workspace }}/packages/browser/build/** + ${{ github.workspace }}/packages/browser/build/bundles/** ${{ github.workspace }}/packages/integrations/build/** ${{ github.workspace }}/packages/tracing/build/** ${{ github.workspace }}/packages/**/*.tgz diff --git a/.size-limit.js b/.size-limit.js index 060671b9e9b0..5f77b82f2f55 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -1,38 +1,38 @@ module.exports = [ { name: '@sentry/browser - ES5 CDN Bundle (gzipped + minified)', - path: 'packages/browser/build/bundle.min.js', + path: 'packages/browser/build/bundles/bundle.min.js', gzip: true, limit: '100 KB', }, { name: '@sentry/browser - ES5 CDN Bundle (minified)', - path: 'packages/browser/build/bundle.min.js', + path: 'packages/browser/build/bundles/bundle.min.js', gzip: false, limit: '120 KB', }, { name: '@sentry/browser - ES6 CDN Bundle (gzipped + minified)', - path: 'packages/browser/build/bundle.es6.min.js', + path: 'packages/browser/build/bundles/bundle.es6.min.js', gzip: true, limit: '100 KB', }, { name: '@sentry/browser - ES6 CDN Bundle (minified)', - path: 'packages/browser/build/bundle.es6.min.js', + path: 'packages/browser/build/bundles/bundle.es6.min.js', gzip: false, limit: '120 KB', }, { name: '@sentry/browser - Webpack (gzipped + minified)', - path: 'packages/browser/esm/index.js', + path: 'packages/browser/build/esm/index.js', import: '{ init }', gzip: true, limit: '100 KB', }, { name: '@sentry/browser - Webpack (minified)', - path: 'packages/browser/esm/index.js', + path: 'packages/browser/build/esm/index.js', import: '{ init }', gzip: false, limit: '100 KB', diff --git a/packages/browser/examples/bundle.js b/packages/browser/examples/bundle.js index 804dc37be825..d552ceb5ed2f 120000 --- a/packages/browser/examples/bundle.js +++ b/packages/browser/examples/bundle.js @@ -1 +1 @@ -../build/bundle.js \ No newline at end of file +../build/bundles/bundle.js \ No newline at end of file diff --git a/packages/browser/package.json b/packages/browser/package.json index 156f9dbc0071..35e980c2f689 100644 --- a/packages/browser/package.json +++ b/packages/browser/package.json @@ -9,8 +9,8 @@ "engines": { "node": ">=6" }, - "main": "dist/index.js", - "module": "esm/index.js", + "main": "build/dist/index.js", + "module": "build/esm/index.js", "types": "build/types/index.d.ts", "publishConfig": { "access": "public" @@ -44,7 +44,7 @@ "webpack": "^4.30.0" }, "scripts": { - "build": "run-p build:cjs build:esm build:bundle build:types", + "build": "run-p build:cjs build:esm build:bundle build:types && bash ../../scripts/postbuild.sh", "build:bundle": "rollup --config", "build:cjs": "tsc -p tsconfig.cjs.json", "build:dev": "run-p build:cjs build:esm build:types", @@ -59,7 +59,7 @@ "build:esm:watch": "tsc -p tsconfig.esm.json --watch", "build:types:watch": "tsc -p tsconfig.types.json --watch", "circularDepCheck": "madge --circular src/index.ts", - "clean": "rimraf dist esm build coverage .rpt2_cache", + "clean": "rimraf build coverage .rpt2_cache", "fix": "run-s fix:eslint fix:prettier", "fix:eslint": "eslint . --format stylish --fix", "fix:prettier": "prettier --write \"{src,test}/**/*.ts\"", @@ -67,10 +67,10 @@ "lint": "run-s lint:prettier lint:eslint", "lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish", "lint:prettier": "prettier --check \"{src,test}/**/*.ts\"", - "pack": "npm pack", + "pack": "npm pack ./build", "size:check": "run-p size:check:es5 size:check:es6", - "size:check:es5": "cat build/bundle.min.js | gzip -9 | wc -c | awk '{$1=$1/1024; print \"ES5: \",$1,\"kB\";}'", - "size:check:es6": "cat build/bundle.es6.min.js | gzip -9 | wc -c | awk '{$1=$1/1024; print \"ES6: \",$1,\"kB\";}'", + "size:check:es5": "cat build/bundles/bundle.min.js | gzip -9 | wc -c | awk '{$1=$1/1024; print \"ES5: \",$1,\"kB\";}'", + "size:check:es6": "cat build/bundles/bundle.es6.min.js | gzip -9 | wc -c | awk '{$1=$1/1024; print \"ES6: \",$1,\"kB\";}'", "test": "run-s test:unit", "test:unit": "jest --config test/unit/jest.config.js", "test:integration": "test/integration/run.js", diff --git a/packages/browser/rollup.config.js b/packages/browser/rollup.config.js index 17a4c575118e..d49892da07be 100644 --- a/packages/browser/rollup.config.js +++ b/packages/browser/rollup.config.js @@ -8,7 +8,7 @@ const builds = []; isAddOn: false, jsVersion, licenseTitle: '@sentry/browser', - outputFileBase: `bundle${jsVersion === 'es6' ? '.es6' : ''}`, + outputFileBase: `bundles/bundle${jsVersion === 'es6' ? '.es6' : ''}`, }); builds.push(...makeConfigVariants(baseBundleConfig)); diff --git a/packages/browser/src/loader.js b/packages/browser/src/loader.js index dd2b107905b8..e8e4d97fa831 100644 --- a/packages/browser/src/loader.js +++ b/packages/browser/src/loader.js @@ -212,6 +212,6 @@ injectSdk(onLoadCallbacks); }); } -})(window, document, 'script', 'onerror', 'onunhandledrejection', 'Sentry', 'loader.js', '../../build/bundle.js', { +})(window, document, 'script', 'onerror', 'onunhandledrejection', 'Sentry', 'loader.js', '../../build/bundles/bundle.js', { dsn: 'https://public@example.com/1' }); diff --git a/packages/browser/test/integration/run.js b/packages/browser/test/integration/run.js index 28fcf331f6ef..e7a1247d72cf 100755 --- a/packages/browser/test/integration/run.js +++ b/packages/browser/test/integration/run.js @@ -81,7 +81,7 @@ function build() { writeFile('artifacts/sdk.js', readFile('../../build/bundle.js').replace('//# sourceMappingURL=bundle.js.map', '')); writeFile( 'artifacts/loader.js', - readFile('../../src/loader.js').replace('../../build/bundle.js', '/base/artifacts/sdk.js') + readFile('../../src/loader.js').replace('../../build/bundles/bundle.js', '/base/artifacts/sdk.js') ); writeFile( diff --git a/packages/browser/test/package/test-code.js b/packages/browser/test/package/test-code.js index c9f06811903f..b31e01de9986 100644 --- a/packages/browser/test/package/test-code.js +++ b/packages/browser/test/package/test-code.js @@ -1,5 +1,5 @@ /* eslint-disable no-console */ -const Sentry = require('../../dist/index.js'); +const Sentry = require('../../build/dist/index.js'); const Integrations = require('../../../integrations/dist/dedupe.js'); // Init diff --git a/packages/browser/tsconfig.cjs.json b/packages/browser/tsconfig.cjs.json index abd80f77e1ff..0605bd22f8b2 100644 --- a/packages/browser/tsconfig.cjs.json +++ b/packages/browser/tsconfig.cjs.json @@ -3,6 +3,6 @@ "compilerOptions": { "module": "commonjs", - "outDir": "dist" + "outDir": "build/dist", } } diff --git a/packages/browser/tsconfig.esm.json b/packages/browser/tsconfig.esm.json index b6ee3fa615c0..9c69ab75381b 100644 --- a/packages/browser/tsconfig.esm.json +++ b/packages/browser/tsconfig.esm.json @@ -3,6 +3,6 @@ "compilerOptions": { "module": "es6", - "outDir": "esm" + "outDir": "build/esm", } } diff --git a/packages/integration-tests/utils/generatePlugin.ts b/packages/integration-tests/utils/generatePlugin.ts index 8425dff7d006..00a0a7c55877 100644 --- a/packages/integration-tests/utils/generatePlugin.ts +++ b/packages/integration-tests/utils/generatePlugin.ts @@ -17,12 +17,12 @@ const useBundle = bundleKey && !useCompiledModule; const BUNDLE_PATHS: Record> = { browser: { - cjs: 'dist/index.js', - esm: 'esm/index.js', - bundle_es5: 'build/bundle.js', - bundle_es5_min: 'build/bundle.min.js', - bundle_es6: 'build/bundle.es6.js', - bundle_es6_min: 'build/bundle.es6.min.js', + cjs: 'build/dist/index.js', + esm: 'build/esm/index.js', + bundle_es5: 'build/bundles/bundle.js', + bundle_es5_min: 'build/bundles/bundle.min.js', + bundle_es6: 'build/bundles/bundle.es6.js', + bundle_es6_min: 'build/bundles/bundle.es6.min.js', }, tracing: { cjs: 'dist/index.js', diff --git a/packages/wasm/test/scripts/ensure-browser-bundle.js b/packages/wasm/test/scripts/ensure-browser-bundle.js index 6a8e1a6beb2e..2261eccaf84a 100644 --- a/packages/wasm/test/scripts/ensure-browser-bundle.js +++ b/packages/wasm/test/scripts/ensure-browser-bundle.js @@ -4,7 +4,7 @@ const { execSync } = require('child_process'); function ensureBrowserBundle() { const browserPackageDir = path.resolve(__dirname, '../../../browser'); - if (!fs.existsSync(path.resolve(browserPackageDir, 'build/bundle.js'))) { + if (!fs.existsSync(path.resolve(browserPackageDir, 'build/bundles/bundle.js'))) { // eslint-disable-next-line no-console console.warn('\nWARNING: Missing browser bundle. Bundle will be created before running wasm integration tests.'); execSync(`pushd ${browserPackageDir} && yarn build:bundle && popd`); diff --git a/packages/wasm/test/server.js b/packages/wasm/test/server.js index 0316e6617b92..0c6a1f3dc656 100644 --- a/packages/wasm/test/server.js +++ b/packages/wasm/test/server.js @@ -8,5 +8,5 @@ app.use(express.static(path.resolve(__dirname, 'public'))); // Wasm Integration Bundle app.use(express.static(path.resolve(__dirname, '../build'))); // Browser SDK Bundle -app.use(express.static(path.resolve(__dirname, '../../browser/build'))); +app.use(express.static(path.resolve(__dirname, '../../browser/build/bundles'))); app.listen(process.env.PORT); diff --git a/scripts/postbuild.sh b/scripts/postbuild.sh new file mode 100644 index 000000000000..3e3ea00f4181 --- /dev/null +++ b/scripts/postbuild.sh @@ -0,0 +1,39 @@ +#!/bin/sh + +# This script prepares the `build` directory for NPM package creation. +# It first copies all non-code files into the `build` directory, including `package.json` which +# is edited via a few `sed` commands. These edits include corrections of paths (e.g. entry points) +# in the copied package.json so that they align with the directory structure inside `build`. + +BUILD_DIR=build + +ASSETS="README.md +LICENSE +package.json" + +# check if build dir exists +if [ ! -d $BUILD_DIR ]; then + echo "Directory ${BUILD_DIR}/ DOES NOT exist." + echo "This script should only be executed after you've run \`yarn build\`." + exit 1 +fi + +# copy non-code assets to build dir +for f in $ASSETS; do + cp $f $BUILD_DIR/ +done + +# package.json modifications + +# sed command to modify package.json entry points in build dir +# remove `BUILD_DIR` from `main`, `module` and `type` entry point paths +entryPointsCommand="/\"(main|module|types)\": .*,/s/$BUILD_DIR\///" + +# use empty backup file extension for sed in-place editing on MacOS and no backup for other platforms +if [[ $(uname) == "Darwin" ]]; then + sed -i "" -E "$entryPointsCommand" $BUILD_DIR/package.json +else + sed -i -E "$entryPointsCommand#" $BUILD_DIR/package.json +fi + +echo "Successfully finished postbuild commands" From f2d78717c1c5e46d5663cdc97fe3d66733fa0e73 Mon Sep 17 00:00:00 2001 From: Lukas Strack Date: Fri, 18 Mar 2022 10:51:47 +0100 Subject: [PATCH 2/2] fix rebase conflict resolution --- packages/browser/test/integration/run.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/browser/test/integration/run.js b/packages/browser/test/integration/run.js index e7a1247d72cf..a961a11b657a 100755 --- a/packages/browser/test/integration/run.js +++ b/packages/browser/test/integration/run.js @@ -78,7 +78,10 @@ function build() { concatFiles('artifacts/setup.js', ['artifacts/dedupe.js', 'common/utils.js', 'common/triggers.js', 'common/init.js']); rmdir('artifacts/dedupe.js'); - writeFile('artifacts/sdk.js', readFile('../../build/bundle.js').replace('//# sourceMappingURL=bundle.js.map', '')); + writeFile( + 'artifacts/sdk.js', + readFile('../../build/bundles/bundle.js').replace('//# sourceMappingURL=bundle.js.map', '') + ); writeFile( 'artifacts/loader.js', readFile('../../src/loader.js').replace('../../build/bundles/bundle.js', '/base/artifacts/sdk.js')