Use target_web to ensure browser compatibility

packages/analytics/client/BUILD.bazel

@@ -62,6 +62,13 @@ jsts_transpiler(
   build_pkg_name = package_name(),
 )
 
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
+
 ts_config(
   name = "tsconfig",
   src = "tsconfig.json",
@@ -86,7 +93,7 @@ ts_project(
 js_library(
   name = PKG_DIRNAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = RUNTIME_DEPS + [":target_node"],
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )

packages/analytics/client/package.json

@@ -2,6 +2,7 @@
   "name": "@kbn/analytics-client",
   "private": true,
   "version": "1.0.0",
+  "browser": "./target_web/index.js",
   "main": "./target_node/index.js",
   "license": "SSPL-1.0 OR Elastic License 2.0"
 }

packages/analytics/shippers/fullstory/BUILD.bazel

@@ -62,6 +62,13 @@ jsts_transpiler(
   build_pkg_name = package_name(),
 )
 
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
+
 ts_config(
   name = "tsconfig",
   src = "tsconfig.json",
@@ -86,7 +93,7 @@ ts_project(
 js_library(
   name = PKG_DIRNAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = RUNTIME_DEPS + [":target_node"],
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )

packages/analytics/shippers/fullstory/package.json

@@ -2,6 +2,7 @@
   "name": "@kbn/analytics-shippers-fullstory",
   "private": true,
   "version": "1.0.0",
+  "browser": "./target_web/index.js",
   "main": "./target_node/index.js",
   "license": "SSPL-1.0 OR Elastic License 2.0"
 }

packages/kbn-ace/BUILD.bazel

@@ -52,6 +52,19 @@ jsts_transpiler(
   build_pkg_name = package_name(),
 )
 
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  additional_args = [
+    "--copy-files",
+    "--ignore",
+    "**/*/src/ace/modes/x_json/worker/x_json.ace.worker.js",
+    "--quiet"
+  ],
+  build_pkg_name = package_name(),
+  web = True,
+)
+
 ts_config(
   name = "tsconfig",
   src = "tsconfig.json",
@@ -77,7 +90,7 @@ ts_project(
 js_library(
   name = PKG_BASE_NAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = RUNTIME_DEPS + [":target_node"],
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )

packages/kbn-ace/package.json

@@ -2,6 +2,7 @@
   "name": "@kbn/ace",
   "version": "1.0.0",
   "private": true,
+  "browser": "./target_web/index.js",
   "main": "./target_node/index.js",
   "license": "SSPL-1.0 OR Elastic License 2.0"
 }

packages/kbn-doc-links/BUILD.bazel

@@ -45,6 +45,13 @@ jsts_transpiler(
   build_pkg_name = package_name(),
 )
 
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
+
 ts_config(
   name = "tsconfig",
   src = "tsconfig.json",
@@ -69,7 +76,7 @@ ts_project(
 js_library(
   name = PKG_BASE_NAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = RUNTIME_DEPS + [":target_node"],
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )

packages/kbn-doc-links/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@kbn/doc-links",
+  "browser": "./target_web/index.js",
   "main": "./target_node/index.js",
   "version": "1.0.0",
   "license": "SSPL-1.0 OR Elastic License 2.0",

packages/kbn-field-types/BUILD.bazel

@@ -43,10 +43,17 @@ TYPES_DEPS = [
 ]
 
 jsts_transpiler(
-   name = "target_node",
-   srcs = SRCS,
-   build_pkg_name = package_name(),
- )
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
+
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
 
 ts_config(
   name = "tsconfig",
@@ -72,7 +79,7 @@ ts_project(
 js_library(
   name = PKG_BASE_NAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = RUNTIME_DEPS + [":target_node"],
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )

packages/kbn-field-types/package.json

@@ -3,5 +3,6 @@
   "version": "1.0.0",
   "private": true,
   "license": "SSPL-1.0 OR Elastic License 2.0",
+  "browser": "./target_web/index.js",
   "main": "./target_node/index.js"
 }

packages/kbn-interpreter/BUILD.bazel

@@ -42,6 +42,13 @@ jsts_transpiler(
   build_pkg_name = package_name(),
 )
 
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
+
 peggy(
   name = "grammar",
   data = [
@@ -82,7 +89,7 @@ ts_project(
 js_library(
   name = PKG_BASE_NAME,
   srcs = NPM_MODULE_EXTRA_FILES + [":grammar"],
-  deps = RUNTIME_DEPS + [":target_node"],
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )

packages/kbn-interpreter/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@kbn/interpreter",
   "author": "App Services",
+  "browser": "./target_web/index.js",
   "main": "./target_node/index.js",
   "version": "1.0.0",
   "license": "SSPL-1.0 OR Elastic License 2.0",

packages/kbn-io-ts-utils/BUILD.bazel

@@ -49,6 +49,13 @@ jsts_transpiler(
   build_pkg_name = package_name(),
 )
 
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
+
 ts_config(
   name = "tsconfig",
   src = "tsconfig.json",
@@ -73,7 +80,7 @@ ts_project(
 js_library(
   name = PKG_BASE_NAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = RUNTIME_DEPS + [":target_node"],
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )

packages/kbn-io-ts-utils/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@kbn/io-ts-utils",
+  "browser": "./target_web/index.js",
   "main": "./target_node/index.js",
   "version": "1.0.0",
   "license": "SSPL-1.0 OR Elastic License 2.0",

packages/kbn-mapbox-gl/BUILD.bazel

@@ -45,6 +45,13 @@ jsts_transpiler(
   build_pkg_name = package_name(),
 )
 
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
+
 ts_config(
   name = "tsconfig",
   src = "tsconfig.json",
@@ -69,7 +76,7 @@ ts_project(
 js_library(
   name = PKG_BASE_NAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = RUNTIME_DEPS + [":target_node"],
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )

packages/kbn-mapbox-gl/package.json

@@ -3,5 +3,6 @@
   "version": "1.0.0",
   "private": true,
   "license": "SSPL-1.0 OR Elastic License 2.0",
+  "browser": "./target_web/index.js",
   "main": "./target_node/index.js"
 }

packages/kbn-optimizer/src/audit_bundle_dependencies/find_target_node_imports.ts

@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import Path from 'path';
+
+import { run } from '@kbn/dev-utils';
+import { REPO_ROOT } from '@kbn/utils';
+
+import { OptimizerConfig } from '../optimizer';
+import { parseStats } from './parse_stats';
+
+/**
+ * Analyzes the bundle dependencies to find any imports using the `@kbn/<package_name>/target_node` build target.
+ *
+ * We should aim for those packages to be imported using the `@kbn/<package_name>/target_web` build because it's optimized
+ * for browser compatibility.
+ *
+ * This utility also helps identify when code that should only run in the server is leaked into the browser.
+ */
+export async function runFindTargetNodeImportsCli() {
+  run(async ({ log }) => {
+    const config = OptimizerConfig.create({
+      includeCoreBundle: true,
+      repoRoot: REPO_ROOT,
+    });
+
+    const paths = config.bundles.map((b) => Path.resolve(b.outputDir, 'stats.json'));
+
+    log.info('analyzing', paths.length, 'stats files');
+    log.verbose(paths);
+
+    const imports = new Set();
+    for (const path of paths) {
+      const stats = parseStats(path);
+
+      for (const module of stats.modules) {
+        if (module.name.includes('/target_node/')) {
+          const [, cleanName] = /\/((?:kbn-|@kbn\/).+)\/target_node/.exec(module.name) ?? [];
+          imports.add(cleanName || module.name);
+        }
+      }
+    }
+
+    log.success('found', imports.size, '@kbn/*/target_node imports in entry bundles and chunks');
+    log.write(
+      Array.from(imports, (i) => `'${i}',`)
+        .sort()
+        .join('\n')
+    );
+  });
+}

packages/kbn-optimizer/src/babel_runtime_helpers/index.ts → packages/kbn-optimizer/src/audit_bundle_dependencies/index.ts

@@ -8,3 +8,4 @@
 
 export * from './find_babel_runtime_helpers_in_entry_bundles';
 export * from './find_node_libs_browser_polyfills_in_entry_bundles';
+export * from './find_target_node_imports';

packages/kbn-optimizer/src/index.ts

@@ -14,4 +14,4 @@ export * from './node';
 export * from './limits';
 export * from './cli';
 export * from './report_optimizer_timings';
-export * from './babel_runtime_helpers';
+export * from './audit_bundle_dependencies';

packages/kbn-optimizer/src/optimizer/optimizer_built_paths.ts

@@ -14,7 +14,10 @@ import { ascending } from '../common';
 export async function getOptimizerBuiltPaths() {
   return (
     await globby(
-      ['**/*', '!**/{__fixtures__,__snapshots__,integration_tests,babel_runtime_helpers,node}/**'],
+      [
+        '**/*',
+        '!**/{__fixtures__,__snapshots__,integration_tests,audit_bundle_dependencies,node}/**',
+      ],
       {
         cwd: Path.resolve(__dirname, '../'),
         absolute: true,

packages/kbn-rule-data-utils/BUILD.bazel

@@ -44,6 +44,13 @@ jsts_transpiler(
   build_pkg_name = package_name(),
 )
 
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
+
 ts_config(
   name = "tsconfig",
   src = "tsconfig.json",
@@ -69,7 +76,7 @@ ts_project(
 js_library(
   name = PKG_BASE_NAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = RUNTIME_DEPS + [":target_node"],
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )

packages/kbn-rule-data-utils/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@kbn/rule-data-utils",
+  "browser": "./target_web/index.js",
   "main": "./target_node/index.js",
   "version": "1.0.0",
   "license": "SSPL-1.0 OR Elastic License 2.0",

packages/kbn-securitysolution-rules/BUILD.bazel

@@ -47,6 +47,13 @@ jsts_transpiler(
   build_pkg_name = package_name(),
 )
 
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
+
 ts_config(
   name = "tsconfig",
   src = "tsconfig.json",
@@ -71,7 +78,7 @@ ts_project(
 js_library(
   name = PKG_BASE_NAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = RUNTIME_DEPS + [":target_node"],
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )

packages/kbn-securitysolution-rules/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "security solution rule utilities to use across plugins",
   "license": "SSPL-1.0 OR Elastic License 2.0",
+  "browser": "./target_web/index.js",
   "main": "./target_node/index.js",
   "private": true
 }