[pgAdmin4]: Webpacking of static JS/CSS - Mailing list pgadmin-hackers

From Surinder Kumar
Subject [pgAdmin4]: Webpacking of static JS/CSS
Date
Msg-id CAM5-9D9aBNs33CUYGWOF=dUCfSZcSS6L=4Fd4vO5dSv3RYwbog@mail.gmail.com
Whole thread Raw
Responses Re: [pgAdmin4]: Webpacking of static JS/CSS
List pgadmin-hackers
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.jsbrowser.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

pgadmin-hackers by date:

Previous
From: Dave Page
Date:
Subject: Re: [pgAdmin4][Patch]: Using client-side 'url_for' implementation inthe datagrid module
Next
From: Dave Page
Date:
Subject: pgAdmin 4 commit: Add support for the hostaddr connection parameter.Th