Enable webpackaging the pgadmin javascript files in different small modules, which can be referred from other modules.
We can have two types of webpack modules. 1. Reference (using the dll plugin of webpack) This type of webpack module can be referred from the other webpack modules. And, it will export the entry point for the javascript files, just like the so/dll (shared object/dynamic link library) file, which exports function & class entries. In the process, it creates a reference file, which can be referenced by another webpack module using the 'dll-reference' plugin. It allows us to share the javascript files between different webpack modules, and decrease the size of an individual webpack modules, which shares multiple javascript modules. This type of webpack module does not expose any entry, hence - no javascript gets executed directly, when it is loaded. In our case, a reference module can refer to file from another reference too. We just need to mention the name of the reference in the dependency list. 2. Entry (A regular webpack module) This type of webpack module exports the entry-point within it, and will always executes the javascript code from the entry point. In our case, we generally refer to multiple reference webpack modules. We have created number of modules, based on size, functionalities, and execution points, etc. - codemirror (Entry) It imports all codemirror functionality used by pgAdmin in a single entry, and exports the CodeMirror object to be used directly by other javascript modules. - react (Reference) It contains react, and react-dom in the single module to be referred by different entry modules. - vendor (Reference) It contains all the vendor specific javascript modules (except for codemirror, react, react-dom, & slickgrid). And, will be referred almost all the entries, and references (except CodeMirror, & react). - slickgrid (Entry) It contains all the slickgrid specific javascript modules, and some of custom formatters, and editors defined by pgAdmin itself, and exports the 'Slick' object. - core (Reference) It contains all the core functionality defined by pgAdmin, and should be shared among different modules. - nodes (Reference) It refers to all the nodes of pgAdmin. - tools (Reference) It refers to all the tools of pgAdmin. - app (Entry) It is the main app entry. - tools_nodes (Entry) In order to load all the nodes, and tools, we need to load them some webpack entry, which is loaded as webpack entry as app at run time. - sqleditor (Entry) As we need to load the sqleditor in a separate HTML page, we need separate webpack entry for the same. - debugger (Entry) Same as sqleditor, debugger too loaded in a separate HTML page, we need separate webpack entry. These, webpack modules, are exposed as AMD modules. It allows us to load dynamically at runtime, and it resolves all our dependency issue without much effort. Earlier, all the webpack entries has its own set of images, fonts. This approach resolves all that problem. Branch ------ WEBPACK_DEVEL Details ------- https://git.postgresql.org/gitweb?p=pgadmin4.git;a=commitdiff;h=d95ff9354eb5b5b4e28c7b976af8fe3099f30188 Modified Files -------------- .gitignore | 5 +- web/package.json | 18 +- web/pgadmin/static/bundle/app.js | 23 -- web/pgadmin/static/bundle/browser.js | 5 - web/pgadmin/static/bundle/codemirror.js | 19 - web/pgadmin/static/bundle/slickgrid.js | 12 - web/pgadmin/static/css/style.css | 25 -- web/pgadmin/static/js/backform.pgadmin.js | 41 +- web/pgadmin/static/js/backgrid.pgadmin.js | 37 +- web/pgadmin/static/js/gettext.js | 5 +- web/pgadmin/static/js/selection/column_selector.js | 2 +- .../static/js/selection/range_selection_helper.js | 2 +- web/pgadmin/static/js/selection/row_selector.js | 2 +- .../static/js/selection/xcell_selection_model.js | 3 +- web/pgadmin/static/js/slickgrid/cell_selector.js | 4 +- web/pgadmin/templates/base.html | 33 +- web/pgadmin/tools/__init__.py | 20 +- web/pgadmin/tools/datagrid/static/js/datagrid.js | 2 +- web/pgadmin/tools/sqleditor/static/js/sqleditor.js | 53 ++- .../static/jsx/history/detail/code_mirror.jsx | 4 +- .../jsx/history/detail/history_detail_query.jsx | 2 +- web/pgadmin/utils/__init__.py | 1 + web/webpack.config.js | 439 ++++++--------------- web/webpack.test.config.js | 11 +- web/webpack/SourceMapDevToolPlugin.js | 241 +++++++++++ web/webpack/build.js | 154 ++++++++ web/webpack/bundles/app.js | 14 + web/webpack/bundles/browser.js | 5 + web/webpack/bundles/codemirror.js | 19 + web/webpack/bundles/slickgrid.js | 16 + web/webpack/bundles/tools_nodes.js | 32 ++ web/webpack/logger.js | 261 ++++++++++++ web/webpack/modules/app.js | 10 + web/webpack/modules/codemirror.js | 18 + web/webpack/modules/core.js | 63 +++ web/webpack/modules/debugger.js | 28 ++ web/webpack/modules/nodes.js | 89 +++++ web/webpack/modules/react.js | 23 ++ web/webpack/modules/slickgrid.js | 16 + web/webpack/modules/sqleditor.js | 31 ++ web/webpack/modules/tools.js | 36 ++ web/webpack/modules/tools_nodes.js | 14 + web/webpack/modules/vendor.js | 222 +++++++++++ web/webpack/utils.js | 362 +++++++++++++++++ web/yarn.lock | 170 +++++--- 45 files changed, 2011 insertions(+), 581 deletions(-)
