hyperclass 0.0.4__tar.gz → 0.0.5__tar.gz

{hyperclass-0.0.4 → hyperclass-0.0.5}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: hyperclass
-Version: 0.0.4
+Version: 0.0.5
 Summary: Build interactive web applications as Python class hierarchies.
 Author: Grant Jenks
 License-Expression: Apache-2.0
@@ -239,8 +239,9 @@ class primary_button(button):
     narrow = media(max_width=40 * rem, width="100%")
 ~~~
 
-Pages collect only the rules used by their element tree. Python inheritance and
-the CSS cascade cooperate instead of imitating one another.
+Pages collect only the rules used by their element tree. Rules use the concrete
+semantic class chain as their selector, so Python inheritance and the CSS
+cascade cooperate even when new component styles arrive later.
 
 ## Classes, IDs, and names are selectors
 
@@ -358,6 +359,11 @@ htmx request sends only the fragment to swap.
 asset from jsDelivr. htmx 4 `<hx-partial>` responses can update several
 object-selected regions from one request.
 
+When an htmx response introduces a component that was not present on the first
+page, Hyperclass includes its CSS in a partial targeting the page's stable
+`hyperclass-styles` stylesheet. The new fragment is styled immediately, without
+a reload or a global CSS build.
+
 ## Try the examples
 
 Clone the repository and run the persistent SQLite bookmark inbox:

{hyperclass-0.0.4 → hyperclass-0.0.5}/README.md

@@ -209,8 +209,9 @@ class primary_button(button):
     narrow = media(max_width=40 * rem, width="100%")
 ~~~
 
-Pages collect only the rules used by their element tree. Python inheritance and
-the CSS cascade cooperate instead of imitating one another.
+Pages collect only the rules used by their element tree. Rules use the concrete
+semantic class chain as their selector, so Python inheritance and the CSS
+cascade cooperate even when new component styles arrive later.
 
 ## Classes, IDs, and names are selectors
 
@@ -328,6 +329,11 @@ htmx request sends only the fragment to swap.
 asset from jsDelivr. htmx 4 `<hx-partial>` responses can update several
 object-selected regions from one request.
 
+When an htmx response introduces a component that was not present on the first
+page, Hyperclass includes its CSS in a partial targeting the page's stable
+`hyperclass-styles` stylesheet. The new fragment is styled immediately, without
+a reload or a global CSS build.
+
 ## Try the examples
 
 Clone the repository and run the persistent SQLite bookmark inbox:

{hyperclass-0.0.4 → hyperclass-0.0.5}/hyperclass/__init__.py

@@ -62,7 +62,7 @@ from .wsgi import (
 )
 from .wsgi import delete as delete_route
 
-__version__ = "0.0.4"
+__version__ = "0.0.5"
 
 hidden = "hidden"
 submit = "submit"

{hyperclass-0.0.4 → hyperclass-0.0.5}/hyperclass/html.py

@@ -173,33 +173,38 @@ def fragment(*children: Any) -> Fragment:
 
 class RenderContext:
     def __init__(self) -> None:
-        self.styled_classes: list[type] = []
-        self._seen_styles: set[type] = set()
+        self.styled_elements: list[type] = []
+        self._seen_elements: set[type] = set()
 
     def register(self, value: type) -> None:
-        if value in self._seen_styles:
+        if value in self._seen_elements:
             return
+        classes = semantic_classes(value)
         if any(
             isinstance(rule, (Style, Media))
-            for rule in value.__dict__.values()
+            for semantic_class in classes
+            for rule in semantic_class.__dict__.values()
         ):
-            self._seen_styles.add(value)
-            self.styled_classes.append(value)
+            self._seen_elements.add(value)
+            self.styled_elements.append(value)
 
     def stylesheet(self) -> str:
         rules: list[str] = []
-        for value in self.styled_classes:
-            base = f".{class_name(value)}"
-            for name, rule in value.__dict__.items():
-                if name == "style" and isinstance(rule, Style):
-                    rules.append(f"{base}{{{rule.render()}}}")
-                elif name in PSEUDO_STATES and isinstance(rule, Style):
-                    state = name.replace("_", "-")
-                    rules.append(f"{base}:{state}{{{rule.render()}}}")
-                elif isinstance(rule, Media):
-                    rules.append(
-                        f"@media {rule.query()}{{{base}{{{rule.style.render()}}}}}"
-                    )
+        for element_type in self.styled_elements:
+            classes = semantic_classes(element_type)
+            base = "".join(f".{class_name(value)}" for value in classes)
+            for value in classes:
+                for name, rule in value.__dict__.items():
+                    if name == "style" and isinstance(rule, Style):
+                        rules.append(f"{base}{{{rule.render()}}}")
+                    elif name in PSEUDO_STATES and isinstance(rule, Style):
+                        state = name.replace("_", "-")
+                        rules.append(f"{base}:{state}{{{rule.render()}}}")
+                    elif isinstance(rule, Media):
+                        rules.append(
+                            f"@media {rule.query()}"
+                            f"{{{base}{{{rule.style.render()}}}}}"
+                        )
         return "".join(rules)
 
 
@@ -340,8 +345,7 @@ def _render(value: Any, context: RenderContext) -> str:
         value_type = type(value)
         tag = _tag_for(value_type)
         classes = semantic_classes(value_type)
-        for semantic_class in classes:
-            context.register(semantic_class)
+        context.register(value_type)
         attributes = _render_attributes(value, classes)
         if tag in VOID_TAGS:
             return f"<{tag}{attributes}>"
@@ -383,7 +387,9 @@ class Page:
         body_html = _render(self.children, context)
         head_html = _render(self.head, context)
         stylesheet = context.stylesheet()
-        style_html = f"<style>{stylesheet}</style>" if stylesheet else ""
+        style_html = (
+            f'<style id="{id.hyperclass_styles}">{stylesheet}</style>'
+        )
         script_html = ""
         if self.htmx:
             script_html = (

{hyperclass-0.0.4 → hyperclass-0.0.5}/hyperclass/wsgi.py

@@ -13,7 +13,16 @@ from typing import Any, Union, get_args, get_origin, get_type_hints
 from urllib.parse import parse_qs, quote, urlencode
 from wsgiref.simple_server import make_server
 
-from .html import Fragment, Page, element, render
+from .html import (
+    Fragment,
+    Page,
+    RenderContext,
+    element,
+    id,
+    markup,
+    partial,
+    render,
+)
 
 Handler = Callable[..., Any]
 StartResponse = Callable[[str, list[tuple[str, str]]], Any]
@@ -479,11 +488,20 @@ class App:
         if isinstance(body, Page):
             text = body.render()
         elif isinstance(body, (element, Fragment)):
-            text = (
-                render(body)
-                if request.is_htmx
-                else Page(body, title=self.title).render()
-            )
+            if request.is_htmx:
+                context = RenderContext()
+                text = render(body, context=context)
+                stylesheet = context.stylesheet()
+                if stylesheet:
+                    text += render(
+                        partial(
+                            markup(stylesheet),
+                            id=id.hyperclass_styles,
+                            hx_swap="append",
+                        )
+                    )
+            else:
+                text = Page(body, title=self.title).render()
         else:
             text = str(body)
         payload = text.encode("utf-8")

{hyperclass-0.0.4 → hyperclass-0.0.5}/hyperclass.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: hyperclass
-Version: 0.0.4
+Version: 0.0.5
 Summary: Build interactive web applications as Python class hierarchies.
 Author: Grant Jenks
 License-Expression: Apache-2.0
@@ -239,8 +239,9 @@ class primary_button(button):
     narrow = media(max_width=40 * rem, width="100%")
 ~~~
 
-Pages collect only the rules used by their element tree. Python inheritance and
-the CSS cascade cooperate instead of imitating one another.
+Pages collect only the rules used by their element tree. Rules use the concrete
+semantic class chain as their selector, so Python inheritance and the CSS
+cascade cooperate even when new component styles arrive later.
 
 ## Classes, IDs, and names are selectors
 
@@ -358,6 +359,11 @@ htmx request sends only the fragment to swap.
 asset from jsDelivr. htmx 4 `<hx-partial>` responses can update several
 object-selected regions from one request.
 
+When an htmx response introduces a component that was not present on the first
+page, Hyperclass includes its CSS in a partial targeting the page's stable
+`hyperclass-styles` stylesheet. The new fragment is styled immediately, without
+a reload or a global CSS build.
+
 ## Try the examples
 
 Clone the repository and run the persistent SQLite bookmark inbox:

{hyperclass-0.0.4 → hyperclass-0.0.5}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "hyperclass"
-version = "0.0.4"
+version = "0.0.5"
 description = "Build interactive web applications as Python class hierarchies."
 readme = "README.md"
 requires-python = ">=3.10"

{hyperclass-0.0.4 → hyperclass-0.0.5}/tests/test_bookmarks.py

@@ -38,6 +38,8 @@ def test_bookmark_lifecycle(tmp_path):
     assert payload.startswith("<!doctype html>")
     assert "Bookmark inbox" in payload
     assert "0 unread bookmarks" in payload
+    assert '<style id="hyperclass-styles">' in payload
+    assert ".bookmark-card" not in payload
     assert 'content="width=device-width, initial-scale=1"' in payload
     assert (
         "@media (max-width:40rem){.bookmark-form{grid-template-columns:1fr}}"
@@ -61,6 +63,8 @@ def test_bookmark_lifecycle(tmp_path):
     )
     assert 'target="_blank" rel="noreferrer"' in payload
     assert 'hx-patch="/bookmarks/1"' in payload
+    assert '<hx-partial id="hyperclass-styles" hx-swap="append">' in payload
+    assert ".bookmark-card.unread.unread-bookmark{display:grid" in payload
     bookmark = app.store.list()[0]
 
     captured, payload = request(

{hyperclass-0.0.4 → hyperclass-0.0.5}/tests/test_html.py

@@ -67,9 +67,14 @@ def test_page_collects_styles_and_pins_htmx_4():
     document = Page(warning_card("Careful"), title="Demo").render()
     assert document.startswith("<!doctype html>")
     assert "<title>Demo</title>" in document
-    assert ".card{display:grid;gap:1rem;padding:1.25rem}" in document
+    assert '<style id="hyperclass-styles">' in document
     assert (
-        ".warning-card{border-color:orange;background:rgb(255 165 0 / 0.08)}"
+        ".card.warning-card{display:grid;gap:1rem;padding:1.25rem}"
+        in document
+    )
+    assert (
+        ".card.warning-card{border-color:orange;"
+        "background:rgb(255 165 0 / 0.08)}"
         in document
     )
     assert "https://cdn.jsdelivr.net/npm/htmx.org@4.0.0" in document
@@ -103,12 +108,14 @@ def test_page_collects_state_and_media_styles_from_classes():
         narrow = media(max_width=40 * rem, grid_template_columns="1fr")
 
     document = Page(interactive_card()).render()
-    assert ".interactive-card:hover{background:lavender}" in document
+    assert ".card.interactive-card:hover{background:lavender}" in document
     assert (
-        ".interactive-card:focus-visible{outline:2px solid purple}" in document
+        ".card.interactive-card:focus-visible{outline:2px solid purple}"
+        in document
     )
     assert (
-        "@media (max-width:40rem){.interactive-card{grid-template-columns:1fr}}"
+        "@media (max-width:40rem){.card.interactive-card"
+        "{grid-template-columns:1fr}}"
         in document
     )
 

hyperclass-0.0.5/tests/test_package.py

@@ -0,0 +1,5 @@
+import hyperclass
+
+
+def test_version():
+    assert hyperclass.__version__ == "0.0.5"

{hyperclass-0.0.4 → hyperclass-0.0.5}/tests/test_wsgi.py

@@ -8,6 +8,7 @@ from hyperclass import (
     Values,
     button,
     closest,
+    css,
     div,
     form,
     get,
@@ -276,3 +277,22 @@ def test_values_accept_first_class_form_names():
     assert values.get(name.search_query) == "wsgi"
     assert values.getlist(name.search_query) == ["python", "wsgi"]
     assert values.int(name.page) == 3
+
+
+def test_htmx_fragment_appends_required_styles_to_page_stylesheet():
+    class styled_result(div):
+        style = css(color="purple")
+
+    app = App()
+
+    @app.get("/result")
+    def result(request):
+        return styled_result("Found")
+
+    captured, payload = request(app, path="/result", htmx=True)
+    assert captured["status"] == "200 OK"
+    assert payload == (
+        '<div class="styled-result">Found</div>'
+        '<hx-partial id="hyperclass-styles" hx-swap="append">'
+        ".styled-result{color:purple}</hx-partial>"
+    )

hyperclass-0.0.4/tests/test_package.py

@@ -1,5 +0,0 @@
-import hyperclass
-
-
-def test_version():
-    assert hyperclass.__version__ == "0.0.4"