Initial set of files with non-scoped packages

Author: gregjacobs

.bazelignore

@@ -0,0 +1,3 @@
+.git
+.vscode
+node_modules

.gitignore

@@ -0,0 +1,2 @@
+/bazel-*
+node_modules

BUILD

@@ -0,0 +1,28 @@
+load("@aspect_rules_js//npm:defs.bzl", "npm_link_package")
+load("@aspect_rules_ts//ts:defs.bzl", "ts_config")
+load("@npm//:defs.bzl", "npm_link_all_packages")
+
+npm_link_all_packages(
+    name = "node_modules"
+)
+
+npm_link_package(
+    name = "node_modules/button",
+    src = "//packages/button:package"
+)
+
+npm_link_package(
+    name = "node_modules/button-with-description",
+    src = "//packages/button-with-description:package"
+)
+
+npm_link_package(
+    name = "node_modules/error-message",
+    src = "//packages/error-message:package"
+)
+
+ts_config(
+    name = "tsconfig",
+    visibility = ["//visibility:public"],
+    src = "tsconfig.json",
+)

WORKSPACE

@@ -0,0 +1,78 @@
+load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
+
+################################################
+# bazel_skylib
+################################################
+
+http_archive(
+    name = "bazel_skylib",
+    sha256 = "66ffd9315665bfaafc96b52278f57c7e2dd09f5ede279ea6d39b2be471e7e3aa",
+    urls = [
+        "https://mirror.bazel.build/github.com/bazelbuild/bazel-skylib/releases/download/1.4.2/bazel-skylib-1.4.2.tar.gz",
+        "https://github.com/bazelbuild/bazel-skylib/releases/download/1.4.2/bazel-skylib-1.4.2.tar.gz",
+    ],
+)
+
+load("@bazel_skylib//:workspace.bzl", "bazel_skylib_workspace")
+bazel_skylib_workspace()
+
+################################################
+# rules_js
+################################################
+
+http_archive(
+    name = "aspect_rules_js",
+    sha256 = "7b2a4d1d264e105eae49a27e2e78065b23e2e45724df2251eacdd317e95bfdfd",
+    strip_prefix = "rules_js-1.31.0",
+    url = "https://github.com/aspect-build/rules_js/releases/download/v1.31.0/rules_js-v1.31.0.tar.gz",
+)
+
+load("@aspect_rules_js//js:repositories.bzl", "rules_js_dependencies")
+rules_js_dependencies()
+
+load("@rules_nodejs//nodejs:repositories.bzl", "DEFAULT_NODE_VERSION", "nodejs_register_toolchains")
+nodejs_register_toolchains(
+    name = "nodejs",
+    node_version = DEFAULT_NODE_VERSION,
+)
+
+load("@aspect_rules_js//npm:repositories.bzl", "npm_translate_lock")
+npm_translate_lock(
+    name = "npm",
+    pnpm_lock = "//:pnpm-lock.yaml",
+    verify_node_modules_ignored = "//:.bazelignore",
+)
+
+load("@npm//:repositories.bzl", "npm_repositories")
+npm_repositories()
+
+################################################
+# rules_ts
+################################################
+
+http_archive(
+    name = "aspect_rules_ts",
+    sha256 = "4c3f34fff9f96ffc9c26635d8235a32a23a6797324486c7d23c1dfa477e8b451",
+    strip_prefix = "rules_ts-1.4.5",
+    url = "https://github.com/aspect-build/rules_ts/releases/download/v1.4.5/rules_ts-v1.4.5.tar.gz",
+)
+
+load("@aspect_rules_ts//ts:repositories.bzl", "rules_ts_dependencies")
+rules_ts_dependencies(
+    # This keeps the TypeScript version in-sync with the editor, which is typically best.
+    ts_version_from = "//:package.json",
+)
+
+################################################
+# rules_webpack
+################################################
+
+http_archive(
+    name = "aspect_rules_webpack",
+    sha256 = "78d05d9e87ee804accca80a4fec98a66f146b6058e915eae3d97190397ad12df",
+    strip_prefix = "rules_webpack-0.12.0",
+    url = "https://github.com/aspect-build/rules_webpack/releases/download/v0.12.0/rules_webpack-v0.12.0.tar.gz",
+)
+
+load("@aspect_rules_webpack//webpack:dependencies.bzl", "rules_webpack_dependencies")
+rules_webpack_dependencies()

package.json

@@ -0,0 +1,19 @@
+{
+    "name": "transitive-dep-test",
+    "description": "Testing transitive dependencies with Webpack where two separate node_modules trees are brought into the Webpack compilation",
+    "version": "0.0.0",
+    "private": true,
+    "dependencies": {
+        "@types/react": "18.2.18",
+        "@types/react-dom": "^18.2.7",
+        "html-webpack-plugin": "^5.5.3",
+        "react": "18.2.0",
+        "react-dom": "^18.2.0",
+        "ts-loader": "^9.4.4",
+        "typescript": "5.1.6",
+        "webpack": "^5.88.2",
+        "webpack-bundle-analyzer": "^4.9.0",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^4.15.1"
+    }
+}

packages/app/BUILD

@@ -0,0 +1,28 @@
+load("@aspect_rules_webpack//webpack:defs.bzl", "webpack_devserver")
+
+webpack_devserver(
+    name = "serve",
+    node_modules = "//:node_modules",
+    chdir = package_name(),
+    entry_point = "src/app.tsx",
+    data = [
+        "tsconfig.json",
+        "//:tsconfig",
+
+        # 1st-party dependency
+        "//:node_modules/error-message",
+
+        # 3rd-party dependencies
+        "//:node_modules/@types/react",
+        "//:node_modules/@types/react-dom",
+        "//:node_modules/html-webpack-plugin",
+        "//:node_modules/react",
+        "//:node_modules/react-dom",
+        "//:node_modules/ts-loader",
+        "//:node_modules/webpack-bundle-analyzer",
+    ],
+    webpack_config = "webpack.config.js",
+    args = [
+        '--open',
+    ],
+)

packages/app/src/app.tsx

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ErrorMessage } from 'error-message'; // 1st party package
+
+const App: React.FC = () => {
+    // trigger multiple copies of react issue
+    useState(3);
+
+    return <>
+        <div><ErrorMessage message="Something went wrong!" /></div>
+    </>;
+}
+
+// -----------------
+
+const reactRootEl = document.createElement('div');
+document.body.appendChild(reactRootEl);
+
+const root = createRoot(reactRootEl);
+root.render(<App />);

packages/app/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "paths": {
+            "button": ["../button/src"],
+            "button-with-description": ["../button-with-description/src"],
+            "error-message": ["../error-message/src"],
+        }
+    },
+    "include": ["src/**/*"]
+}

packages/app/webpack.config.js

@@ -0,0 +1,28 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+console.log(`Running webpack in directory: '${process.cwd()}'`);
+
+module.exports = {
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+        symlinks: true,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                exclude: /node_modules/,
+                use: [
+                    { loader: 'ts-loader', options: { transpileOnly: true } },
+                ],
+            }
+        ],
+    },
+    plugins: [
+        new HtmlWebpackPlugin(),
+        new BundleAnalyzerPlugin({
+            openAnalyzer: true
+        }),
+    ]
+};

packages/button-with-description/BUILD

@@ -0,0 +1,72 @@
+load("@aspect_rules_js//js:defs.bzl", "js_library")
+load("@aspect_rules_js//npm:defs.bzl", "npm_package")
+load("@aspect_rules_ts//ts:defs.bzl", "ts_project", "ts_config")
+load("@bazel_skylib//rules:write_file.bzl", "write_file")
+
+# Convenience alias for bazel build
+alias(
+    name = "button-with-description",
+    actual = ":package"
+)
+
+npm_package(
+    name = "package",
+    visibility = ["//visibility:public"],
+    package = "button-with-description",
+    srcs = [":library"],
+    out = "package",
+    include_runfiles = False,
+
+    # Don't include .ts source files and tsconfig.json in package 
+    exclude_srcs_patterns = [
+        "src/**",
+    ]
+)
+
+js_library(
+    name = "library",
+    srcs = [
+        ":package_json",
+    ],
+    deps = [
+        ":js"
+    ]
+)
+
+write_file(
+    name = "package_json",
+    out = "package.json",
+    content = [
+        '{',
+        '    "name": "button-with-description",',
+        '    "version": "0.0.0",',
+        '    "main": "./dist/index.js",',
+        '    "module": "./dist/index.js",',
+        '    "typings": "./dist/index.d.ts",',
+        '    "sideEffects": false',
+        '}',
+    ]
+)
+
+ts_project(
+    name = "js",
+    tsconfig = ":tsconfig",
+    root_dir = "src",
+    out_dir = "dist",
+    srcs = [
+        "src/index.tsx"
+    ],
+    deps = [
+        "//:node_modules/button",  # Our custom package
+        "//:node_modules/@types/react",
+        "//:node_modules/react",
+    ],
+    declaration = True,
+    supports_workers = False,
+)
+
+ts_config(
+    name = "tsconfig",
+    src = "tsconfig.json",
+    deps = ["//:tsconfig"],
+)

packages/button-with-description/src/index.tsx

@@ -0,0 +1,20 @@
+import { FC, useState } from 'react';
+import { Button } from 'button';  // 1st-party package
+
+/**
+ * Simple component which displays a message and a button
+ */
+export const ButtonWithDescription: FC<ButtonWithDescriptionProps> = props => {
+    // trigger multiple copies of react issue
+    useState(2);
+
+    return (
+        <div>
+            {props.description}: <Button>My Button</Button>
+        </div>
+    );
+};
+
+interface ButtonWithDescriptionProps {
+    description: string;
+}

packages/button-with-description/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "paths": {
+            "button": ["../button/src"]
+        }
+    },
+    "include": ["src/**/*"]
+}