Add a React example authored in TSX

[linuxerwang]

Is it possible for rules_typescript to compile ReactJS? I tried a bit and found that it can generate the bundle.js but in the devserver it's not running.

Here is the generated bundle.js:

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define("__main__/streamline/fe/src/entry", ["require", "exports", "react", "react-dom"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var React = require("react");
    var ReactDOM = require("react-dom");
    var App = function () {
        return (React.createElement("div", null,
            React.createElement("p", null, "Hello world!")));
    };
    ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
});

Looks like the anonymous factory function was never called. Both requirejs and amd was installed with yarn.

Any help? Thanks.

[appsforartists]

There are two bits to it. First, you need to ensure ts_devserver serves the modules. Then, you need to ensure that the generated RequireJS dependency can find them.

Here's a BUILD file that will ensure React is included in your bundle. (You still need to yarn add react react-dom.)

package(default_visibility = ["//visibility:public"])

load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver", "ts_library")

ts_library(
  name = "playground",
  module_name = "my-lib-playground",
  module_root = "src",
  srcs = glob(
    include = ["src/**/*.ts", "src/**/*.tsx"],
    exclude = ["**/__tests__/*"],
  ),
  deps = ["//packages/core"],
  tsconfig = "//:tsconfig.json",
)

ts_devserver(
  name = "devserver",
  deps = [
    "//:node_modules/react/umd/react.development.js",
    "//:node_modules/react-dom/umd/react-dom.development.js",
    ":playground",
  ],
  entry_module = 'my_root/packages/playground/src/index',
  serving_path = "/dist/bundle.js",
)

Unfortunately, Facebook doesn't currently include module names in its AMD bundles, so you'd also need to edit /node_modules/react/umd/react.development.js and /node_modules/react-dom/umd/react-dom.development.js to add module names to those definitions, e.g.:

  //           notice the first argument below is now 'react-dom' 
  typeof define === 'function' && define.amd ? define('react-dom', ['react'], factory) :

I've opened a PR for Facebook to fix this upstream. When that is merged, this BUILD file alone should take care of the "making sure RequireJS can find the imported modules bit."

---

In the mean time, you may be able to work around it by serving the React AMD bundles as static files (rather than deps) and using this syntax in your HTML to depend on them:

<script>
  requirejs.config({    
    paths: {    
      'react': '/node_modules/react/umd/react.development.js',   
      'react-dom': '/node_modules/react-dom/umd/react-dom.development',
    }   
  });
</script>

[alexeagle]

@appsforartists they are looking for you over in facebook/react#12019

[alexeagle]

re-purposing this issue to make an example for react

[github-actions]

This issue has been automatically marked as stale because it has not had any activity for 90 days. It will be closed if no further activity occurs in two weeks. Collaborators can add a "cleanup" or "need: discussion" label to keep it open indefinitely. Thanks for your contributions to rules_nodejs!

[github-actions]

This issue was automatically closed because it went two weeks without a reply since it was labeled "Can Close?"