Virtual DOM and JSX support #9967

johnspackman · 2020-05-14T03:31:27Z

This PR is about improving the Virtual DOM in qx.html.* and adding JSX support, primarily for use in server applications but also the browser.

The changes are:

the qx.html.Element is split into qx.html.Node and qx.html.Element, and also the addition of qx.html.Text. This change is entirely backwards compatible, and the addition of Text allows any arbitrary DOM structure to be represented (code in qx.ui.* does not have to use Text nodes because the UI classes always operate directly on the node to set/get text).
Add JSX Factory implementation
VDOM can be serialized into HTML text stream for delivery to the client browser
An entire tree of the DOM on the browser (ie that which was built because the browser parsed the HTML text) can be reattached to a matching or sparse tree of qx.html.Element instances, based on the qxObjectId
There are some additional properties and methods (eg cssClass, addCssClass(), visible, etc) which exist to simplify common tasks
Document the new qx.headless property in the compiler which indicates that the code is compiled for the server
There are a few warning fixes and other minor tweaks which have crept in

…ghtweight server apps which manipulate Virtual DOM rendered on the server

cboulanger

Looks very interesting and useful!

docs/desktop/gui/html.md

framework/source/class/qx/core/BaseInit.js

framework/source/class/qx/event/handler/Focus.js

oetiker · 2020-05-14T06:35:07Z

framework/source/class/qx/event/handler/Mouse.js

+            this.error("'mousewheel' event took " + diff + "ms - this may have a significant effect on UI experience");
+          } else if (diff > 100) {
+            this.warn("'mousewheel' event took " + diff + "ms - consider refactoring for smoother UI experience");
+          }


that code got pulled in through rebase :(

Co-authored-by: Tobias Oetiker <tobi@oetiker.ch>

Hotfix to get qx server package working again

derrell

I've tagged this for a weekend review, as the changes are extensive. This is a very, very scary PR, though. It looks like it's mucking with low-level stuff that can affect all desktop apps. I'll spend time on it this weekend, but I suspect this would be best left until after the release of 6.0 because of the possibility of subtle breakage. That way, we'll have lots of time to test with it and not take the chance on messing up our first release in years.

framework/source/class/qx/bom/element/Attribute.js

johnspackman · 2020-05-14T12:24:11Z

@derrell I've tagged this for a weekend review, as the changes are extensive. This is a very, very scary PR, though. It looks like it's mucking with low-level stuff that can affect all desktop apps. I'll spend time on it this weekend, but I suspect this would be best left until after the release of 6.0

That's a fair point, and I was a bit torn myself. It has only had limited testing.

I'm happy to create a v7.x branch and make the PR in there?

derrell

Wow. There's a lot here! I spent about an hour on this, but could spend many more for a thorough review. Since this is supposed to be BC, I suggest we consider this for a 6.1 or 7.0 version, where it will get far more BC testing in existing apps before being officially released.

docs/desktop/gui/html.md

derrell · 2020-05-16T17:34:11Z

framework/source/class/qx/bom/client/Html.js

@@ -353,7 +353,7 @@ qx.Bootstrap.define("qx.bom.client.Html",
     * @ignore(Image)
     */
    getDataUrl : function(callback) {
-      var data = new Image();
+      var data = new window.Image();


Curious why this change was needed? In the browser, Image is directly accessible via the global object window. In Nodejs, window doesn't exist unless qooxdoo has started up, in which case window and global are the same thing, but in that case, there is no Image global.Image...???

it suppresses the warnings because window is always an allowed/well known global but Image isn't when compiling for a NodeJS target. Part of my goal was to improve NodeJS development, by adding VDOM and reducing the unnecessary dependencies (because this can cause code to be loaded which crashes) - connected with this was removing warnings which are issued on nodejs-only targets.

In any code which has to be cross platform, rather than adding a blanket @ignore(window.*) instead I tend to use window.Image because it's direct about what the code is referencing

framework/source/class/qx/bom/element/Attribute.js

framework/source/class/qx/event/handler/Application.js

framework/source/class/qx/event/handler/Mouse.js

framework/source/class/qx/html/Element.js

* bring tutorials to an more dominat place in doc * fix docs

@zaucker

* Add warning about result of this.tr("") * Add description of header file return on empty string to docu * Fix unicode.org link Thanks @zaucker !

…ghtweight server apps which manipulate Virtual DOM rendered on the server

Co-authored-by: Tobias Oetiker <tobi@oetiker.ch>

…rtual-dom * 'virtual-dom' of github.com:johnspackman/qooxdoo: doc fix; add jsx code Update docs/desktop/gui/html.md lint & es5 docs update improves support for server based Virtual DOM and adds support for lightweight server apps which manipulate Virtual DOM rendered on the server # Conflicts: # framework/source/class/qx/bom/element/Attribute.js # framework/source/class/qx/html/Jsx.js

johnspackman · 2020-05-18T14:57:06Z

I'm marking this as do not move for now, until we confirm what we're going to do for 6.1 release PRs

fixes a bug in events where DOM events and the `qx.html.Node` have the same event name

improves support for server based Virtual DOM and adds support for li…

128a92a

…ghtweight server apps which manipulate Virtual DOM rendered on the server

johnspackman requested review from cboulanger, derrell, hkollmann, level420, lucapivato and oetiker as code owners May 14, 2020 03:31

johnspackman added 2 commits May 14, 2020 05:08

docs update

93e9052

lint & es5

7e20fb1

cboulanger approved these changes May 14, 2020

View reviewed changes

oetiker reviewed May 14, 2020

View reviewed changes

johnspackman and others added 5 commits May 14, 2020 07:41

Update docs/desktop/gui/html.md

a241955

Co-authored-by: Tobias Oetiker <tobi@oetiker.ch>

doc fix; add jsx code

01a6362

Merge branch 'master' into virtual-dom

a664767

Hotfix to get qx server package working again

712a8a1

Merge pull request #9968 from qooxdoo/cboulanger-hotfix

600036e

Hotfix to get qx server package working again

derrell requested changes May 14, 2020

View reviewed changes

framework/source/class/qx/bom/element/Attribute.js Outdated Show resolved Hide resolved

a bit of tuning (#9972)

c902789

derrell requested changes May 16, 2020

View reviewed changes

hkollmann and others added 10 commits May 18, 2020 09:31

fix links: #9970 (#9975)

84d984e

Fix tutorials (#9974)

9f3ef9f

* bring tutorials to an more dominat place in doc * fix docs

Add warning about result of this.tr("") (#9971)

9a22799

* Add warning about result of this.tr("") * Add description of header file return on empty string to docu * Fix unicode.org link Thanks @zaucker !

improves support for server based Virtual DOM and adds support for li…

eb5197d

…ghtweight server apps which manipulate Virtual DOM rendered on the server

docs update

acd3b01

lint & es5

5f12232

Update docs/desktop/gui/html.md

915a1dc

Co-authored-by: Tobias Oetiker <tobi@oetiker.ch>

doc fix; add jsx code

0055de1

docfix; es5 and lint

96301d3

changes requested

9c738e2

johnspackman added the do not merge DO NOT MERGE YET! label May 18, 2020

hkollmann marked this pull request as draft May 18, 2020 15:12

fixes a bug in iframe handling 'onload' event;

4545db3

fixes a bug in events where DOM events and the `qx.html.Node` have the same event name

johnspackman closed this Feb 4, 2021

johnspackman deleted the virtual-dom branch February 4, 2021 14:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Virtual DOM and JSX support #9967

Virtual DOM and JSX support #9967

johnspackman commented May 14, 2020

cboulanger left a comment

oetiker May 14, 2020

johnspackman May 14, 2020

derrell left a comment

johnspackman commented May 14, 2020

derrell left a comment

derrell May 16, 2020

johnspackman May 18, 2020

johnspackman commented May 18, 2020

Virtual DOM and JSX support #9967

Virtual DOM and JSX support #9967

Conversation

johnspackman commented May 14, 2020

cboulanger left a comment

Choose a reason for hiding this comment

oetiker May 14, 2020

Choose a reason for hiding this comment

johnspackman May 14, 2020

Choose a reason for hiding this comment

derrell left a comment

Choose a reason for hiding this comment

johnspackman commented May 14, 2020

derrell left a comment

Choose a reason for hiding this comment

derrell May 16, 2020

Choose a reason for hiding this comment

johnspackman May 18, 2020

Choose a reason for hiding this comment

johnspackman commented May 18, 2020