Jan Honza Odvarko [:Honza] (always need-info? me) Reporter
	Description • 6 years ago

Since NodeJS can be used for Firefox build process (see bug 1464123), let's try to use JSX for the top level `App` component in the Network monitor panel.

The render method:
https://searchfox.org/mozilla-central/rev/80ac71c1c54af788b32e851192dfd2de2ec18e18/devtools/client/netmonitor/src/components/App.js#60

This bug should help to figure out how to do it:
Bug 1461714 (node-debugger) - Build debugger from sources in mozilla-central / allow running node scripts to process JS files

and 

Bug 1496126 - Build the whole debugger from sources in mozilla-central

Honza

	Jan Honza Odvarko [:Honza] (always need-info? me) Reporter
	Comment 1 • 6 years ago

@Alex: any instructions about how to do this?

Honza

	Alexandre Poirot [:ochameau]
	Comment 2 • 6 years ago

I would wait for the debugger to dogfood that first. See if that scale. For now it only builds one module and I'm looking forward how it will work when building the whole debugger sources (bug 1496126).

Otherwise I don't have any idea yet if we should reuse debugger build instructions as-is, fork them, move them to devtools/shared of something, ...

But here is how it works.

Everything starts from these moz.build instructions:
https://searchfox.org/mozilla-central/rev/80ac71c1c54af788b32e851192dfd2de2ec18e18/devtools/client/debugger/new/src/moz.build#16-18
DebuggerModules(
    'main.js',
)

It means that main.js is a special file that has to be processed by the node script.
DebuggerModules is being implemented here:
https://searchfox.org/mozilla-central/rev/80ac71c1c54af788b32e851192dfd2de2ec18e18/devtools/client/debugger/new/node-templates.mozbuild#7-35
But the main take away from this function is this line:
    bundle.inputs = ['/devtools/client/debugger/new/build/copy-module.js']
It says which nodejs script should be executed, i.e:
  https://searchfox.org/mozilla-central/source/devtools/client/debugger/new/build/copy-module.js

This is where I think, this is very specific to the debugger.
It contains code to convert the es-modules to devtools-loader-compatible modules as well as changing some require paths, and convert JSX to JS.

I think you should be able to prototype something out of these explanations.
I'm open to suggestions on how to share/not share these builds scripts.

	Alexandre Poirot [:ochameau]
	Comment 3 • 6 years ago

Oh one last thing, there is a whilelist of accepted nodejs script that moz.build can execute.
It is being specified here and require build peers review:
https://searchfox.org/mozilla-central/rev/80ac71c1c54af788b32e851192dfd2de2ec18e18/python/mozbuild/mozbuild/action/node.py#12-14
SCRIPT_ALLOWLIST = [
        buildconfig.topsrcdir + "/devtools/client/debugger/new/build/copy-module.js"
    ]

	Jan Honza Odvarko [:Honza] (always need-info? me) Reporter
	Comment 4 • 6 years ago

Thanks for the info Alex!

(In reply to Alexandre Poirot [:ochameau] from comment #2)
> I would wait for the debugger to dogfood that first. See if that scale. For
> now it only builds one module and I'm looking forward how it will work when
> building the whole debugger sources (bug 1496126).
Yes, David will be looking at the Debugger piece and I wanted to experiment a bit in context of another panel. This way we can have better picture about the top level requirements and see how to reuse the code among tools/panels.

For now I just cloned what you did for Debugger and I was able to transpile couple of existing Network monitor components that are using JSX.

Specifically:
netmonitor/src/components/StatusCode.js
netmonitor/src/components/RequestListColumnStatus.js'

But, when I try to transpile also:
netmonitor/src/components/RequestListContent.js

I am getting an error:
TypeError: undefined is not a non-null object builtin-modules.js:85 

It's because of:

loader.lazyGetter(this, "setImageTooltip", function() {
  return require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper")
    .setImageTooltip;
});

defineLazyGetter function expects the module (this) as the first argument and it's null from some reason. Does that ring any bells?

You can see the error in Browser Console when applying this patch and opening the Network panel + reload.

Honza

	Alexandre Poirot [:ochameau]
	Comment 5 • 6 years ago

You may try to open resource://devtools/client/netmonitor/src/components/RequestListContent.js to see what it generated
Or look for RequestListContent.js in your objdir.

I imagine you are hitting some extra feature of the debugger build script that you don't want:
  https://searchfox.org/mozilla-central/source/devtools/client/debugger/new/build/copy-module.js
It process JSX, but also tries to compile es-modules to devtools modules while hacking some require paths.
It may do some other things I'm not even aware of...

May be you are having conflicts because one of the enabled plugins:
  https://searchfox.org/mozilla-central/source/devtools/client/debugger/new/build/copy-module.js#202-207

	Jan Honza Odvarko [:Honza] (always need-info? me) Reporter
	Comment 6 • 6 years ago

Just for the record, some tips from Alex on Slack:

• How to verify it works? Open the equivalent resource:// url in firefox to see if the file exists and is transpiled to the right content. Or read the file from the objdir. Transpiled files are here: objdir/devtools/client/...
• How to debug it? Run `./mach build devtools/client/...` You should be able to see exception if the script throws as well as console.logs.
• Can we log in it? Yes.

You may first try to run it manually via `node my-script.js my-file.js`.
The node script is expected to receive a list of argument which are the file to transpile. It should take these file and override them with the transpile content.

The second expectation is that it should prints special lines (via console.log), mentioning all dependencies. It includes the script itself, any build dependency like babel module and the files it transpiles.

I think the debugger build script is easy enough to understand that part: https://searchfox.org/mozilla-central/source/devtools/client/debugger/new/build/copy-module.js#215-230

Last expectation, the node script should only require() standard node modules *or* local JS files that are in-tree. No npm/yarn/whatever.

Dan is working on introducing npm support in m-c, but it will be for later. No ETA yet about that.

	Pulsebot
	Comment 9 • 6 years ago

Pushed by jlaster@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/7f51bc3757d9
Provide method for NetMonitor to use JSX r=jlast

	Pulsebot
	Comment 12 • 6 years ago

Pushed by jlaster@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c36dc28ad5d0
Revert "Backed out changeset 7f51bc3757d9 for ESlint failure at build-debugger.js. CLOSED TREE"