From: | Ashesh Vashi <ashesh(dot)vashi(at)enterprisedb(dot)com> |
---|---|
To: | pgadmin-hackers(at)postgresql(dot)org |
Subject: | pgAdmin 4 commit: Enable webpackaging the pgadmin javascript files in d |
Date: | 2018-01-11 06:28:42 |
Message-ID: | E1eZWLy-0004nm-R8@gothos.postgresql.org |
Views: | Raw Message | Whole Thread | Download mbox | Resend email |
Thread: | |
Lists: | pgadmin-hackers |
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_DEVEL2
Details
-------
https://git.postgresql.org/gitweb?p=pgadmin4.git;a=commitdiff;h=6e139ceab417bfb4b0e0379c8c0671cf85bd859b
Modified Files
--------------
web/pgadmin/tools/__init__.py | 3 +-
web/yarn.lock | 144 +++++++++++++++++++++++++++++-------------
2 files changed, 101 insertions(+), 46 deletions(-)
From | Date | Subject | |
---|---|---|---|
Next Message | Ashesh Vashi | 2018-01-11 06:28:43 | pgAdmin 4 commit: Use the correct lexer in the Apache/Windows docs. |
Previous Message | Ashesh Vashi | 2018-01-11 05:46:55 | Re: ESLINT: On pgAdmin static javascripts |