UI creation API #1960

fpliger · 2024-01-31T22:27:04Z

Description

This is a POC PR exploring a UI creation API on top of pydom

Changes

added pyweb.ui package
added demo example
added gallery example with real apps examples
added docs
added tests (see Pyscript/1960 pyweb UI elements docs#100 )
serialization (ability to load/dump elements/ui configuration to dicts or json objects)

Checklist

All tests pass locally
I have updated CHANGELOG.md
I have created documentation for this(if applicable)

…ng to specific JS attributes

for more information, see https://pre-commit.ci

…_ui_blocks

…itself

for more information, see https://pre-commit.ci

…_ui_blocks

for more information, see https://pre-commit.ci

…_ui_blocks

for more information, see https://pre-commit.ci

…_ui_blocks

for more information, see https://pre-commit.ci

…_ui_blocks

for more information, see https://pre-commit.ci

…e from stdlib

for more information, see https://pre-commit.ci

… a real server, that runs in local tests

…_ui_blocks

…rent behaviour between local tests and CI (due to fake_server)

for more information, see https://pre-commit.ci

WebReflection · 2024-06-04T08:07:57Z

pyscript.core/src/stdlib/pyweb/pydom.py

+        self.name = name
+        self.allow_nones = allow_nones
+
+    def __get__(self, obj, objtype=None):


out of curiosity, what's objtype about?

We can actually remove it. Here's an answer (even though it's actually not in the official docs even)

In the docs it is called owner and it is always the type of the instance. It is useful if the descriptor is accessed through the class itself (e.g. Foo.x) when instance will be None.

WebReflection · 2024-06-04T08:11:57Z

pyscript.core/src/stdlib.js

@@ -37,7 +37,7 @@ const python = [
    "_path = None",
 ];

-const ignore = new Ignore(python, "./pyweb");
+const ignore = new Ignore(python, "-");


I would be happy to remove that ignore code / logic if we don't need to ignore anything anymore ... I mean, we can keep it around or commented but if we don't need it and we want to be sure everything we land in stdlib works in both Pyodide and MicroPython, maybe we can remove it? It doesn't have to happen in here, just wondering what you think about it, thanks.

It's an useful tool to manage incompatibilities. Imho, it'd be good to leave it documented and "in standby" in case we need in the future.

ntoll

Bravo @fpliger - this is awesome. 🎉

Take my comments with a pinch of salt... I'm just including them as an aide-mémoire for myself for potential future changes, should they be required. If I don't write them down, they're only in my head, and I'll likely forget them. 😉

ntoll · 2024-06-04T08:08:51Z

pyscript.core/src/stdlib/pyweb/pydom.py

+
+    def __set__(self, obj, value):
+        if not self.allow_nones and value is None:
+            return


Suggestion (feel free to ignore): raise ValueError because None isn't a valid value if self.allow_nones is False..? Something like this..?

if self.allow_nones and value is None: raise ValueError(f"Cannot set a None value for {self.name}.")

The current code appears to not have any side-effects, so the programmer will just assume their None value has been set, which is probably a dangerous assumption to make.

Errors should never pass silently.

(Zen of Python)

ntoll · 2024-06-04T08:09:05Z

pyscript.core/src/stdlib/pyweb/ui/elements.py

+        super().__init__(document.createElement(self.tag))
+
+        # set all the style properties provided in input
+        if isinstance(style, dict):


How about..?

if style and isinstance(style, dict): ... else: raise ValueError(...)

ntoll · 2024-06-04T08:09:15Z

pyscript.core/src/stdlib/pyweb/ui/elements.py

+        for attr_name, attr in getmembers_static(self.__class__):
+            # For each one, actually check if it is a property of the class and set it
+            if isinstance(attr, JSProperty) and attr_name in kwargs:
+                try:


Do we need this try..? See my comment above about allow_nones.

Mmmmm... maybe? This try has been quite useful in debugging and understanding where things failed because tracebacks from the interpreter (especially mpy) are not really helpful sometimes.

ntoll · 2024-06-04T08:26:04Z

pyscript.core/src/stdlib/pyweb/ui/elements.py

+    poster = JSProperty("poster")
+    preload = JSProperty("preload")
+    src = JSProperty("src")
+    width = JSProperty("width")


WARNING: Untested code - for illustrative purposes only, and likely wrong (in approach and execution).

I'm wondering out loud (please ignore!) and thinking about optimising for code length (i.e. less to download), if these explicit class definitions for HTML elements could be done dynamically via re-hydrating a dict definition of the elements:

elements = { "a": ["download", "href", "referrerpolicy", "rel", "target", "type", ], # Attributes are always JSProperty instances? ... } for name, attrs in elements.items(): ElementClass = type( name, (TextElementBase), {attr_name: JSProperty(attr_name) for attr_name in attrs} ) globals()[name] = ElementClass

Like I said, not sure if this approach even works. I also have mixed feelings... explicit is better than implicit, and this may be premature optimization. Just putting it out there as an idle thought.

or maybe ...

poster, preload, src, width, = (JSProperty(name) for name in ["poster", "preload", "src", "width",])

???

Initially, when I started, I was creating all properties dynamically, for that exact reason. After lengthy pairing sessions and discussions with @mchilvers, we decided it wasn't worth the very few characters you save. Happy to re-open that discussion if we want to

Hehehe... nope. Let's avoid that shall we, and save ourselves a lot of pain..? 🤣 If you've already trodden that path, no need to tread it again. It just wasn't apparent if you'd tried that approach already. 😉

ntoll · 2024-06-04T08:26:19Z

pyscript.core/test/pydom.html

@@ -8,7 +8,7 @@
  <script type="module" src="../dist/core.js"></script>
 </head>
 <body>
-  <script type="py" src="pydom.py"></script>
+  <script type="mpy" src="pydom.py"></script>


ntoll · 2024-06-04T15:18:09Z

Without wishing to put a spanner in the works... why doesn't this all just sit under the pyscript namespace..?

E.g. pyscript.dom and pyscript.web..? To my mind there are too many py_stuff names flying around. 🤣 Also, there's this and this can'o'worms shaped naming collision going on at the moment. I think @mchilvers might be adding this as an agenda item for today's community call. Would be good to reach a consensus.

fpliger · 2024-06-04T19:27:48Z

Without wishing to put a spanner in the works... why doesn't this all just sit under the pyscript namespace..?

E.g. pyscript.dom and pyscript.web..? To my mind there are too many py_stuff names flying around. 🤣 Also, there's this and this can'o'worms shaped naming collision going on at the moment. I think @mchilvers might be adding this as an agenda item for today's community call. Would be good to reach a consensus.

Replying for posterity. At the community call today we discussed this and, as a collective, decided to move things under the pyscript.web namespace.

fpliger and others added 30 commits January 30, 2024 17:30

add JSProperty to pydom so it can be used to create descriptors mappi…

bdce197

…ng to specific JS attributes

add pyweb.ui

25e1b06

fix pyweb imports

e4d5b66

fix link and a elements and add a script element

5c5c6e3

fix imports and add initialization to load resources to shoelace module

73745a0

new pyweb.ui test folder

5f748c9

remove comments

ff19d63

add Icon to shoelace components

a9057e4

[pre-commit.ci] auto fixes from pre-commit.com hooks

6c50522

for more information, see https://pre-commit.ci

use html property rather than accessing _js directly

e3e669c

Merge branch 'poc_ui_blocks' of github.com:pyscript/pyscript into poc…

a5c3fc6

…_ui_blocks

add markdown suppport

8ade988

move examples section out of stdlib pyweb to examples.py in the demo …

f5857ba

…itself

[pre-commit.ci] auto fixes from pre-commit.com hooks

a702518

for more information, see https://pre-commit.ci

simplify demo code

37ef462

improve docstrings

275c3dc

Merge branch 'poc_ui_blocks' of github.com:pyscript/pyscript into poc…

ac1cf5f

…_ui_blocks

precommit fixes

cffee1d

[pre-commit.ci] auto fixes from pre-commit.com hooks

dbc4db4

for more information, see https://pre-commit.ci

simplify code for main page

7a41a60

Merge branch 'poc_ui_blocks' of github.com:pyscript/pyscript into poc…

be65cf3

…_ui_blocks

[pre-commit.ci] auto fixes from pre-commit.com hooks

c76ce20

for more information, see https://pre-commit.ci

add load_resources to markdown

f37048f

add showlace extra style dynamically

e716049

Merge branch 'poc_ui_blocks' of github.com:pyscript/pyscript into poc…

f69338c

…_ui_blocks

precommit

1cca5f0

[pre-commit.ci] auto fixes from pre-commit.com hooks

c559d8b

for more information, see https://pre-commit.ci

add gallery files

a9637bb

add global attributes and dynamic property assignment

5c6de9b

Merge branch 'poc_ui_blocks' of github.com:pyscript/pyscript into poc…

3b8745e

…_ui_blocks

fpliger and others added 5 commits May 9, 2024 01:15

small fixes and improvements to examples

90d891e

[pre-commit.ci] auto fixes from pre-commit.com hooks

4ca89cc

for more information, see https://pre-commit.ci

fix examples and broken link from the removal of markdown and shoelac…

c8db625

…e from stdlib

lint

106be4b

[pre-commit.ci] auto fixes from pre-commit.com hooks

1b27b86

for more information, see https://pre-commit.ci

fpliger mentioned this pull request May 15, 2024

Pyscript/1960 pyweb UI elements pyscript/docs#100

Open

fpliger and others added 10 commits June 3, 2024 16:29

dynamically change the server address in tests

767f2f9

use the right element in test_a

2ea493d

lint

a7279de

[pre-commit.ci] auto fixes from pre-commit.com hooks

3c11d95

for more information, see https://pre-commit.ci

skipping test_audio in CI due to different behavior of fake_server vs…

4503933

… a real server, that runs in local tests

Merge branch 'poc_ui_blocks' of github.com:pyscript/pyscript into poc…

e6f7040

…_ui_blocks

add conditional expected_missing_file_errors property to manage diffe…

0524a18

…rent behaviour between local tests and CI (due to fake_server)

lint

a3a3172

[pre-commit.ci] auto fixes from pre-commit.com hooks

6eb27df

for more information, see https://pre-commit.ci

Merge branch 'main' into poc_ui_blocks

b7d17e4

fpliger marked this pull request as ready for review June 3, 2024 23:16

fpliger requested review from WebReflection, ntoll and mchilvers June 3, 2024 23:16

WebReflection reviewed Jun 4, 2024

View reviewed changes

WebReflection approved these changes Jun 4, 2024

View reviewed changes

ntoll approved these changes Jun 4, 2024

View reviewed changes

mchilvers approved these changes Jun 4, 2024

View reviewed changes

Merge branch 'main' into poc_ui_blocks

01a1710

fpliger merged commit b41cfb7 into main Jun 4, 2024
2 checks passed

fpliger deleted the poc_ui_blocks branch June 4, 2024 20:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI creation API #1960

UI creation API #1960

fpliger commented Jan 31, 2024 •

edited

WebReflection Jun 4, 2024

fpliger Jun 4, 2024

mchilvers Jun 4, 2024

WebReflection Jun 4, 2024

fpliger Jun 4, 2024

ntoll left a comment

ntoll Jun 4, 2024

ntoll Jun 4, 2024

ntoll Jun 4, 2024

fpliger Jun 4, 2024

ntoll Jun 4, 2024

WebReflection Jun 4, 2024

fpliger Jun 4, 2024

ntoll Jun 4, 2024

ntoll Jun 4, 2024

ntoll commented Jun 4, 2024

fpliger commented Jun 4, 2024

UI creation API #1960

UI creation API #1960

Conversation

fpliger commented Jan 31, 2024 • edited

Description

Changes

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ntoll left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ntoll commented Jun 4, 2024

fpliger commented Jun 4, 2024

fpliger commented Jan 31, 2024 •

edited