Enhance Jsx #10637
Enhance Jsx #10637
Conversation
WillsterJohnsonAtZenesis
requested review from
oetiker,
johnspackman,
level420,
cboulanger,
derrell,
hkollmann,
lucapivato and
goldim
as code owners
add more detail on the benefit and application of passing css custom properties through via double-underscored Jsx attributes
Reframe the Jsx docs to focus on the SSR capabilities afforded
There was a problem hiding this comment.
I cannot comment on the PR since I don't know this part of qooxdoo at all. As Tobias said, it would be great to have some more information how this is used in a qooxdoo app - the PR says something about existing jsx support - I couldn't find anything in the documentation on this?
|
I've just pushed a few changes regarding fixing bugs, passing tests and fleshing out the documentation, but I'll also add some more context here.
@johnspackman added Jsx support in 2021. He tells me he meant to add some docs for it, but must've forgotten for some reason.
It doesn't. At least not directly. I briefly mentioned it in the updated SSR docs, and I'll give some more context here. These documents are impossible to get right with Qooxdoo desktop, especially when we want to have a pagination process which flows and fits to the physical paper during printing. Aside from the runtime overhead getting out of hand, the development process itself feels excessive - all we need for this is to put data on a page. In addition to that, getting the styles and layout to work in print is a lot of work for not a particularly brilliant result. Because Qooxdoo desktop is for applications, print media isn't something it has mature APIs for; nobody needs to print an app. Using Jsx has solved all of these issues and made the development of these reports significantly faster and simpler. Here's what this Jsx proposal is not doing; it's not a competitor or alternative to Qooxdoo desktop. The main purpose here is to fill a gap which qooxdoo desktop leaves open, that being quick, simple, and effective generation of printable and/or server-rendered static documents. |
|
@WillsterJohnsonAtZenesis that sounds cool ... so lets have some documentation done, in a way that everyone can make use of the new abilities ... examples please :) |
|
Seems that you break some tests.... TESTTAPPER: Running tests in chromiumStart watching ... |
…evert to index access for css standard props
Could you provide an example? |
I can't find a way to reproduce this error, would you be able to provide a reproduction/steps to reproduce? |
|
I am not sure that I can because app is very big. I used to create own custom HTML elements based widgets. Maybe this code could be sent here? |
If you could put a snippet in that would be great - the issue is where custom DOM is then being loaded into the VDOM methods (ie the opposite of the |
|
@johnspackman I'll try. Usually I work with SVG and create DOM for it and put it into virtual dom. I think this case. |
|
@WillsterJohnsonAtZenesis Here you are: |
|
What's the state of this MR? |
I wait for author response on the bug which I found. @WillsterJohnsonAtZenesis could you check my case above please? It doesn't work. |
We couldnt reproduce it, but i came across it today - i've written a fix but need to do some testing first |
|
@johnspackman I tried and reproduced the error once again.
It would be great if somebody of reviewers tries it too to confirm the error. |
|
That's because I've written the fix but not added it to the PR yet :). Literally came across it late yesterday afternoon and got my use case working but want to run the unit tests etc before committing to the PR |
@goldim I've checked your demo with the new changes this morning and it seems to be working correctly |
Thank you, I will see it today-tomorrow. |
|
@WillsterJohnsonAtZenesis Yes, it fixed my problem. Thank you. qx.Class.define("Widget",
{
extend : qx.ui.core.Widget,
members : {
_createContentElement : function(){
return <><h1>aaa</h1><h2>bbb</h2></>;
}
}
});Just I get the next error: but if it is: return <div><h1>aaa</h1><h2>bbb</h2></div>;everything is fine. |
The second option looks more correct to me. A fragment, ie the tags without a tagname, are just syntax sugar for creating an array. Eg, const myJsx = (
<>
<p>Foo bar</p>
<p>Hello world</p>
</>
);
const myArray = [
<p>Foo bar</p>
<p>Hello world</p>
];With this comparison hopefully you can see why the error I think we're actually using The new 'SSR' and 'Using Jsx' docs pages provide a little more info on using Jsx to compliment a desktop app, though using Jsx directly within a Desktop app by overriding |
There was a problem hiding this comment.
@WillsterJohnsonAtZenesis I got you, thank you. Didn't know about implementation <></>. Also would be great to add svg for jsx too. Now svg element doesn't appear, at least there is no error.
The Jsx system now has custom elements, slots, and several other useful pieces of functionality. There is also a setup for
<qx:* />special elements to be added in future for any purposes, which reserves theqx:namespace in the meantime.Custom Elements
Any function or constructor can be used as a custom element so long as it's name begins with an uppercase letter or it's accessed by property index. It also must return an instance of
qx.html.Nodeso that it can be added to the VDOM.Slots
Dynamic & declarative way of adding children to predefined locations within a custom element's Jsx structure. This is syntax sugar for the new
.inject()method available to elements.CSS Custom Properties
More lightweight applications may benefit from leaning in to using the VDOM directly in places, creating a small collection of Jsx components. As styling can be more easily done via CSS for Jsx expressions, it makes sense to provide a simple api for passing CSS variables.
<MyElem __css_var="red">will apply--css_var: red;to the cascade fromMyElemdownwards.