[pgAdmin4]: Webpacking of static JS/CSS

Hi All,

I and Ashesh come up with following approach;

*Divide the JS modules in following components:*

​1. ​
Tools
​(tools.js)​ - It will contain all JS modules under tools directory

​2. ​
Browser
​(browser.js)​ - It will contain all JS modules under browser directory

​3. ​
grid.js
- It will contains ​
Query tool & Datagrid
​ JS modules​
Done

​4. Common.js and/or vendor.js - Common.js will contains all common js
files/libraries shared by modules like backform, backbone, underscore etc.

Entry points JS: main.js - It will load above modules ascynchronusly or it
will be minified version of all.
define('', ['common', 'tools', 'browser', 'grid'], function(...) {});

or these modules can also be loaded using dependency; For example, load
grid.js on database node expand.

*Worked so far:*

- Removed CodeMirror out of vendors directory and instead using
node_modules/codemirror files. I didn't sent its patch as codemirror CSS is
inserted directly into markup.

- The file grid.js(datagrid.js and sqleditor.js) is generated including
all of its dependency, resolved all errors(dependency/JS errors) occurred
while running in browser. Modules like explain, file manager, history tab
and grid rendering is working except grid tool menu expand not working(will
look into this).

- The file common.js is generated which contains JS files shared among
modules.

- The template JS modules such as node.js, browser.js are not included in
webpack since they are templates containing Jinja syntax, they are added as
dependency and loaded dynamically.

As discussed with Ashesh, we need to determine which file is 'static' JS or
dynamic JS as we cannot hardcode, till now I didn't find any way to use
is_template flag introduced in def get_own_javascripts(self):
​​
will search how can I use this variable.

​Currently I am working on converting 'requirejs config shim dependency
into webpack' using imports-loader and exports-loader which is taking time
and will look for alternative if it doesn't works. Once dependency is
properly defined, the task to generate other module JS will become quite
easy.

I also found, the CSS imported using import
'slickgrid/slick.grid.css'; statement
is put into <style></style> tags
​ in html​
, instead must be loaded separately as a file so overrides.css can work.

Thoughts?

Thanks,
Surinder