feat(example): add react example

examples/BUILD.bazel

@@ -23,6 +23,14 @@ example_integration_test(
     },
 )
 
+example_integration_test(
+    name = "examples_reactjs",
+    npm_packages = {
+        "//packages/jasmine:npm_package": "@bazel/jasmine",
+        "//packages/typescript:npm_package": "@bazel/typescript",
+    },
+)
+
 example_integration_test(
     name = "examples_parcel",
     npm_packages = {

examples/index.bzl

@@ -5,6 +5,7 @@ ALL_EXAMPLES = [
     "nestjs",
     "parcel",
     "protocol_buffers",
+    "reactjs",
     "user_managed_deps",
     "vendored_node",
     "vendored_node_and_yarn",

examples/reactjs/.bazelignore

@@ -0,0 +1 @@
+node_modules

examples/reactjs/.bazelrc

@@ -0,0 +1 @@
+import %workspace%/../../common.bazelrc

examples/reactjs/BUILD.bazel

@@ -0,0 +1,86 @@
+load("@build_bazel_rules_nodejs//:defs.bzl", "http_server", "rollup_bundle")
+load("@build_bazel_rules_nodejs//internal/web_package:web_package.bzl", "web_package")
+load("@npm_bazel_jasmine//:index.bzl", "jasmine_node_test")
+load("@npm_bazel_typescript//:index.bzl", "ts_devserver", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_library(
+    name = "app",
+    srcs = glob([
+        "*.ts",
+        "*.tsx",
+    ]),
+    deps = [
+        "@npm//@types/react",
+        "@npm//@types/react-dom",
+    ],
+)
+
+ts_devserver(
+    name = "devserver",
+    entry_module = "examples_reactjs/app",
+    index_html = ":index.html",
+    static_files = [
+        ":index.html",
+    ],
+    # We'll collect all the devmode JS sources from these TypeScript libraries
+    deps = [
+        ":app",
+        "@npm//react:react__umd",
+        "@npm//react-dom:react-dom__umd",
+    ],
+)
+
+rollup_bundle(
+    name = "bundle",
+    enable_code_splitting = False,
+    entry_point = ":app.prod.ts",
+    deps = [
+        ":app",
+        "@npm//react",
+        "@npm//react-dom",
+    ],
+)
+
+web_package(
+    name = "package",
+    assets = [
+        # For differential loading, we supply both an ESModule entry point and an es5 entry point
+        # The injector will put two complimentary script tags in the index.html
+        ":bundle.min.js",
+        ":bundle.min.es2015.js",
+    ],
+    index_html = "index.html",
+)
+
+http_server(
+    name = "prodserver",
+    data = [":package"],
+    templated_args = ["package"],
+)
+
+jasmine_node_test(
+    name = "prodmode_test",
+    srcs = ["prodmode.spec.js"],
+    data = [
+        "bundle.es2015.js",
+        "index.html",
+        "@npm//domino",
+    ],
+    templated_args = ["--node_options=--experimental-modules"],
+)
+
+# For testing from the root workspace of this repository with bazel_integration_test.
+filegroup(
+    name = "all_files",
+    srcs = glob(
+        ["**/*"],
+        exclude = [
+            "bazel-out/**/*",
+            "dist/**/*",
+            "node_modules/**/*",
+        ],
+    ),
+    visibility = ["//visibility:public"],
+)

examples/reactjs/WORKSPACE

@@ -0,0 +1,42 @@
+# Copyright 2019 The Bazel Authors. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+workspace(
+    name = "examples_reactjs",
+    managed_directories = {"@npm": ["node_modules"]},
+)
+
+load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
+
+http_archive(
+    name = "build_bazel_rules_nodejs",
+    sha256 = "da72ea53fa1cb8ab5ef7781ba06b97259b7d579a431ce480476266bc81bdf21d",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.36.2/rules_nodejs-0.36.2.tar.gz"],
+)
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "yarn_install")
+
+yarn_install(
+    name = "npm",
+    package_json = "//:package.json",
+    yarn_lock = "//:yarn.lock",
+)
+
+load("@npm//:install_bazel_dependencies.bzl", "install_bazel_dependencies")
+
+install_bazel_dependencies()
+
+load("@npm_bazel_typescript//:index.bzl", "ts_setup_workspace")
+
+ts_setup_workspace()

examples/reactjs/app.prod.ts

@@ -0,0 +1,5 @@
+import './environment.prod';
+import * as ReactDOM from 'react-dom';
+import greeting from './greeting';
+
+ReactDOM.render(greeting, document.getElementById('root'));

examples/reactjs/app.ts

@@ -0,0 +1,5 @@
+import './environment.dev';
+import * as ReactDOM from 'react-dom';
+import greeting from './greeting';
+
+ReactDOM.render(greeting, document.getElementById('root'));

examples/reactjs/env.ts

@@ -0,0 +1 @@
+(window as any).process = {env: {NODE_ENV: 'production'}}

examples/reactjs/environment.d.ts

@@ -0,0 +1,10 @@
+// React uses a "isomorphic" package that relies on
+// `process.env`, even in the browser.
+// Make this type available in TypeScript code.
+declare global {
+  interface Window {
+    process: {}
+  }
+}
+// make this file a module, not a script
+export {};

examples/reactjs/environment.dev.ts

@@ -0,0 +1,5 @@
+// Configure React for development mode
+// https://github.com/bazelbuild/rules_nodejs/issues/555
+window.process = {
+  env: {NODE_ENV: 'development'}
+}

examples/reactjs/environment.prod.ts

@@ -0,0 +1,5 @@
+// Configure React for production
+// https://github.com/bazelbuild/rules_nodejs/issues/555
+window.process = {
+  env: {NODE_ENV: 'production'}
+}

examples/reactjs/greeting.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+
+const greeting = <h1>Hello from React!</h1>;
+export default greeting;

examples/reactjs/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>Bazel React example</title>
+  </head>
+  <body>
+      <div id="root"></div>
+  </body>
+</html>

examples/reactjs/package.json

@@ -0,0 +1,17 @@
+{
+  "devDependencies": {
+    "@bazel/jasmine": "latest",
+    "@bazel/typescript": "latest",
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "domino": "^2.1.3",
+    "typescript": "2.7.x"
+  },
+  "scripts": {
+    "test": "bazel test ..."
+  },
+  "dependencies": {
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  }
+}

examples/reactjs/prodmode.spec.js

@@ -0,0 +1,18 @@
+const domino = require('domino');
+const path = require('path');
+const fs = require('fs');
+
+describe('react webapp', () => {
+  it('works', () => {
+    const html = fs.readFileSync(path.join(__dirname, 'index.html'));
+    // Domino gives us enough of the DOM API that we can run our JavaScript in node rather than the
+    // browser. That makes this test a lot faster
+    global.window = domino.createWindow(html, '/');
+    global.document = global.window.document;
+    global.navigator = global.window.navigator;
+    // Make all Domino types available as types in the global env.
+    Object.assign(global, domino.impl);
+
+import(path.join(__dirname, 'bundle.es2015')).then(() => {expect(global.document.body.textContent.trim()).toEqual('Hello from React!')});
+  });
+});

examples/reactjs/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "strict": true,
+    "lib": ["es2015.promise", "dom", "es5"],
+    // to fix https://github.com/bazelbuild/rules_nodejs/issues/933
+    "allowSyntheticDefaultImports": true,
+    // Explicitly set types settings so typescript doesn't auto-discover types.
+    // If all types are discovered then all types need to be included as deps
+    // or typescript may error out with TS2688: Cannot find type definition file for 'foo'.
+    "types": []
+ }
+}