hypie 0.1.1.dev2__tar.gz → 0.1.1.dev4__tar.gz

{hypie-0.1.1.dev2 → hypie-0.1.1.dev4}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: hypie
-Version: 0.1.1.dev2
+Version: 0.1.1.dev4
 Summary: Add your description here
 Author: Yasser Ahmed
 Author-email: Yasser Ahmed <yasserfawzi1029@gmail.com>
@@ -16,6 +16,21 @@ Description-Content-Type: text/markdown
     <img src="https://raw.githubusercontent.com/Infrared1029/hypie/main/assets/hypie_logo.jpg" alt="Logo" width="400">
 </p>
 
+## Table of Contents
+- [Intro](#intro)
+- [Quick Start](#quick-start)
+- [Installation](#installation)
+- [Motivation](#motivation)
+- [Htpy and _Hyperscript Primers](#htpy-and-hyperscript-primers)
+    - [Htpy](#htpy)
+    - [_Hyperscript](#_hyperscript)
+    - [Htpy + _Hyperscript](#htpy--_hyperscript)
+- [Hypie](#hypie)
+    - [Simple Counter Example Using Hypie](#simple-counter-example-using-hypie)
+    - [Todo App Example Using Hypie](#todo-app-example-using-hypie)
+        - [Pass One: Working App](#pass-one-working-app)
+        - [Pass Two: Refactor Towards Purer Components And An Event Driven System](#pass-two-refactor-towards-purer-components-and-an-event-driven-system)
+
 <!-- # Hypie -->
 ## Intro
 Hypie, pronounced "high-pie", is a python library for building web frontends, built on top of [_hyperscript](https://github.com/bigskysoftware/_hyperscript), a scripting language for the web made by the [htmx](https://github.com/bigskysoftware/htmx) folks, and [htpy](https://github.com/pelme/htpy), a library for generating HTML in python.  
@@ -24,6 +39,90 @@ Right now Hypie is a personal passion side project that is still very experiment
 
 There is no official docs website for hypie (yet), so this README is the closest thing to a documentation for now, if you are interested, I would advise reading through the whole thing, hopefully its not too long.
 
+## Quick Start
+Hypie code looks like this:
+```python
+import htpy
+from hypie import hs
+from hypie.experimental.components import Component
+from hypie.literals import var
+from hypie.features import On   
+from hypie.commands import set_
+
+class Counter(Component):
+    initial_count: int = 0
+
+    def template(self):
+        count_var = var(":count")
+
+        return htpy.div[
+            htpy.button(
+                _=hs(
+                    set_(count_var, to=self.initial_count),
+                    On("click")[
+                        set_(count_var, to=count_var + 1),
+                        set_(var("me").textContent, to=f"Count is: {count_var}"),
+                    ],
+                )
+            )[f"Count is: {self.initial_count}"]
+        ]
+
+    @staticmethod
+    def style():
+        return {
+            "button": {
+                "background-color": "#4A90D9",
+                "color": "#ffffff",
+                "border": "none",
+                "border-radius": "6px",
+                "padding": "10px 20px",
+                "font-size": "16px",
+                "font-weight": "600",
+                "cursor": "pointer",
+                "transition": "background-color 0.2s ease",
+            },
+            "button:hover": {"background-color": "#3A7BC8"},
+        }
+```
+After that, you build the css of the components:
+```sh
+hypie build -i <path/to/components/dir> -o <path/to/static_or_dist/dir> --watch
+```
+And return your components from your preferred python backend framework:
+
+```python
+import pathlib
+
+import htpy
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse
+from .ui.components import Counter
+
+app = FastAPI()
+
+app.mount(
+    "/static", StaticFiles(directory=pathlib.Path(__file__).parent.resolve() / "static")
+)
+
+
+@app.get("/")
+def counter_example():
+    return HTMLResponse(htpy.html[
+            htpy.head[
+                htpy.title["Counter"],
+                # this was generated with hypie build
+                htpy.link(rel="stylesheet", href="/static/_hypie_styles.css"),
+
+                # we need to load _hyperscript
+                htpy.script(src="https://cdn.jsdelivr.net/npm/hyperscript.org@0.9.93"),
+            ],
+            htpy.body[
+                Counter(5)
+            ]
+        ])
+```
+
 ## Installation
 ```sh
 uv add hypie
@@ -45,7 +144,7 @@ The way Hypie pushes you to think about frontend system is as follows:
 - If you need to generate HTML from the client that does not need a server trip (i.e. a visual component that does not rely on any kind of data from the server), like a Modal, you can define a "Template" that you can render anywhere, client side, no server roundtrips.  
 
 Before diving into hypie, it is useful to take a very quick look at the two main technologies hypie relies on, htpy and _hyperscript, all examples will assume a fastapi backend, but it should work with **any** python backend framework.
-## Htpy and Hyperscript primers
+## Htpy and _Hyperscript Primers
 ### Htpy
 [htpy](https://github.com/pelme/htpy) is a python library for writing html, it is essentially a pythonic answer to templating languages.
 ```python
@@ -178,7 +277,7 @@ htpy.button(_=On("click")[
 ```
 That way you get IDE support for the arguments the different commands support, you do not deal with messy strings anymore, and the English issue is gone. Again, this is already helpful, but we can take it a step further, taking inspiration from how components look in frameworks like [Vue](https://github.com/vuejs/core) and [Svelte](https://github.com/sveltejs/svelte), a hypie component is as follows:
 
-### Hypie
+## Hypie
 ```python
 from hypie.literals import var, cls
 from hypie.commands import log, toggle
@@ -232,7 +331,7 @@ Behind the scenes, hypie adds a `data-hypie-component=<kebab-case-component_name
 
 Let's move on to other examples and introduce more capabilities and abstractions as we go.
 
-## Simple Counter Example using Hypie
+### Simple Counter Example using Hypie
 Let's create a very basic Counter Component using hypie.
 ```python
 # ui/components.py
@@ -351,7 +450,7 @@ def counter_example():
 
 You can now run the app and see the blue counter button.  
 Reminder: We are using FastAPI here but this works with any backend framework! just adjust the code based on your framework's abstractions.
-## Todo app Example using Hypie
+### Todo app Example using Hypie
 Let's move on to a more interesting example, a classic Todo app, inspired by the Todo app done in this [FastHTML tutorial](https://www.youtube.com/watch?v=Auqrm7WFc0I).
 
 Our end result should look like this:  
@@ -359,7 +458,7 @@ Our end result should look like this:
 ![todo app screenshot](https://raw.githubusercontent.com/Infrared1029/hypie/main/assets/todos_example.png)  
 We are going to do two passes in this example, the first pass will give us a working app, the second pass will introduce new abstractions that allows us to refactor the code to reduce dependencies between components, both apps will be identical functionality wise, just one will be much easier to maintain and extend, let's start with the first pass.
 
-### Pass One: Working App
+#### Pass One: Working App
 We can see 5 major UI components:
  - Layout
  - Header
@@ -624,7 +723,7 @@ def create_todo_(title: Annotated[str, Body(embed=True)]):
 ```
 That's it, now we have a very basic todo app!
 
-### Pass Two: Refactor Towards Purer Components and an Event Driven System
+#### Pass Two: Refactor Towards Purer Components and an Event Driven System
 Even though our app works, there is an issue, our components/template are not... **pure**. What does that mean, you might ask? It means, our components are dependent on things outside of their scope, for example, they are performing fetch requests, this depends on what the server returns, whether the network fails, and other variables, that are outside the scope of the component, other components like `AddTodoForm`, beside doing fetch requests as well, is also modifying other parts of the DOM, this creates a dependency between `AddTodoForm` and the parts its trying to modify, if those bits change, we will have to update `AddTodoForm`, not good.  
 
 Now a valid objection might be: "We still need to make those fetch requests and DOM modifications, the app would not work otherwise!"  

{hypie-0.1.1.dev2 → hypie-0.1.1.dev4}/README.md

@@ -2,6 +2,21 @@
     <img src="https://raw.githubusercontent.com/Infrared1029/hypie/main/assets/hypie_logo.jpg" alt="Logo" width="400">
 </p>
 
+## Table of Contents
+- [Intro](#intro)
+- [Quick Start](#quick-start)
+- [Installation](#installation)
+- [Motivation](#motivation)
+- [Htpy and _Hyperscript Primers](#htpy-and-hyperscript-primers)
+    - [Htpy](#htpy)
+    - [_Hyperscript](#_hyperscript)
+    - [Htpy + _Hyperscript](#htpy--_hyperscript)
+- [Hypie](#hypie)
+    - [Simple Counter Example Using Hypie](#simple-counter-example-using-hypie)
+    - [Todo App Example Using Hypie](#todo-app-example-using-hypie)
+        - [Pass One: Working App](#pass-one-working-app)
+        - [Pass Two: Refactor Towards Purer Components And An Event Driven System](#pass-two-refactor-towards-purer-components-and-an-event-driven-system)
+
 <!-- # Hypie -->
 ## Intro
 Hypie, pronounced "high-pie", is a python library for building web frontends, built on top of [_hyperscript](https://github.com/bigskysoftware/_hyperscript), a scripting language for the web made by the [htmx](https://github.com/bigskysoftware/htmx) folks, and [htpy](https://github.com/pelme/htpy), a library for generating HTML in python.  
@@ -10,6 +25,90 @@ Right now Hypie is a personal passion side project that is still very experiment
 
 There is no official docs website for hypie (yet), so this README is the closest thing to a documentation for now, if you are interested, I would advise reading through the whole thing, hopefully its not too long.
 
+## Quick Start
+Hypie code looks like this:
+```python
+import htpy
+from hypie import hs
+from hypie.experimental.components import Component
+from hypie.literals import var
+from hypie.features import On   
+from hypie.commands import set_
+
+class Counter(Component):
+    initial_count: int = 0
+
+    def template(self):
+        count_var = var(":count")
+
+        return htpy.div[
+            htpy.button(
+                _=hs(
+                    set_(count_var, to=self.initial_count),
+                    On("click")[
+                        set_(count_var, to=count_var + 1),
+                        set_(var("me").textContent, to=f"Count is: {count_var}"),
+                    ],
+                )
+            )[f"Count is: {self.initial_count}"]
+        ]
+
+    @staticmethod
+    def style():
+        return {
+            "button": {
+                "background-color": "#4A90D9",
+                "color": "#ffffff",
+                "border": "none",
+                "border-radius": "6px",
+                "padding": "10px 20px",
+                "font-size": "16px",
+                "font-weight": "600",
+                "cursor": "pointer",
+                "transition": "background-color 0.2s ease",
+            },
+            "button:hover": {"background-color": "#3A7BC8"},
+        }
+```
+After that, you build the css of the components:
+```sh
+hypie build -i <path/to/components/dir> -o <path/to/static_or_dist/dir> --watch
+```
+And return your components from your preferred python backend framework:
+
+```python
+import pathlib
+
+import htpy
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse
+from .ui.components import Counter
+
+app = FastAPI()
+
+app.mount(
+    "/static", StaticFiles(directory=pathlib.Path(__file__).parent.resolve() / "static")
+)
+
+
+@app.get("/")
+def counter_example():
+    return HTMLResponse(htpy.html[
+            htpy.head[
+                htpy.title["Counter"],
+                # this was generated with hypie build
+                htpy.link(rel="stylesheet", href="/static/_hypie_styles.css"),
+
+                # we need to load _hyperscript
+                htpy.script(src="https://cdn.jsdelivr.net/npm/hyperscript.org@0.9.93"),
+            ],
+            htpy.body[
+                Counter(5)
+            ]
+        ])
+```
+
 ## Installation
 ```sh
 uv add hypie
@@ -31,7 +130,7 @@ The way Hypie pushes you to think about frontend system is as follows:
 - If you need to generate HTML from the client that does not need a server trip (i.e. a visual component that does not rely on any kind of data from the server), like a Modal, you can define a "Template" that you can render anywhere, client side, no server roundtrips.  
 
 Before diving into hypie, it is useful to take a very quick look at the two main technologies hypie relies on, htpy and _hyperscript, all examples will assume a fastapi backend, but it should work with **any** python backend framework.
-## Htpy and Hyperscript primers
+## Htpy and _Hyperscript Primers
 ### Htpy
 [htpy](https://github.com/pelme/htpy) is a python library for writing html, it is essentially a pythonic answer to templating languages.
 ```python
@@ -164,7 +263,7 @@ htpy.button(_=On("click")[
 ```
 That way you get IDE support for the arguments the different commands support, you do not deal with messy strings anymore, and the English issue is gone. Again, this is already helpful, but we can take it a step further, taking inspiration from how components look in frameworks like [Vue](https://github.com/vuejs/core) and [Svelte](https://github.com/sveltejs/svelte), a hypie component is as follows:
 
-### Hypie
+## Hypie
 ```python
 from hypie.literals import var, cls
 from hypie.commands import log, toggle
@@ -218,7 +317,7 @@ Behind the scenes, hypie adds a `data-hypie-component=<kebab-case-component_name
 
 Let's move on to other examples and introduce more capabilities and abstractions as we go.
 
-## Simple Counter Example using Hypie
+### Simple Counter Example using Hypie
 Let's create a very basic Counter Component using hypie.
 ```python
 # ui/components.py
@@ -337,7 +436,7 @@ def counter_example():
 
 You can now run the app and see the blue counter button.  
 Reminder: We are using FastAPI here but this works with any backend framework! just adjust the code based on your framework's abstractions.
-## Todo app Example using Hypie
+### Todo app Example using Hypie
 Let's move on to a more interesting example, a classic Todo app, inspired by the Todo app done in this [FastHTML tutorial](https://www.youtube.com/watch?v=Auqrm7WFc0I).
 
 Our end result should look like this:  
@@ -345,7 +444,7 @@ Our end result should look like this:
 ![todo app screenshot](https://raw.githubusercontent.com/Infrared1029/hypie/main/assets/todos_example.png)  
 We are going to do two passes in this example, the first pass will give us a working app, the second pass will introduce new abstractions that allows us to refactor the code to reduce dependencies between components, both apps will be identical functionality wise, just one will be much easier to maintain and extend, let's start with the first pass.
 
-### Pass One: Working App
+#### Pass One: Working App
 We can see 5 major UI components:
  - Layout
  - Header
@@ -610,7 +709,7 @@ def create_todo_(title: Annotated[str, Body(embed=True)]):
 ```
 That's it, now we have a very basic todo app!
 
-### Pass Two: Refactor Towards Purer Components and an Event Driven System
+#### Pass Two: Refactor Towards Purer Components and an Event Driven System
 Even though our app works, there is an issue, our components/template are not... **pure**. What does that mean, you might ask? It means, our components are dependent on things outside of their scope, for example, they are performing fetch requests, this depends on what the server returns, whether the network fails, and other variables, that are outside the scope of the component, other components like `AddTodoForm`, beside doing fetch requests as well, is also modifying other parts of the DOM, this creates a dependency between `AddTodoForm` and the parts its trying to modify, if those bits change, we will have to update `AddTodoForm`, not good.  
 
 Now a valid objection might be: "We still need to make those fetch requests and DOM modifications, the app would not work otherwise!"  

{hypie-0.1.1.dev2 → hypie-0.1.1.dev4}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "hypie"
-version = "0.1.1.dev2"
+version = "0.1.1.dev4"
 description = "Add your description here"
 readme = "README.md"
 authors = [

{hypie-0.1.1.dev2 → hypie-0.1.1.dev4}/src/hypie/cli/build_components.py

@@ -65,7 +65,7 @@ def find_components_register_artifacts(in_path, out_path, out_files_prefix=""):
     hs_files = []
     html = []
     print(
-        f"Done Proccessing: {len(COMPONENTS)} Component, {len(TEMPLATES)} Templates, {len(CLIENT_COMPONENTS)} Client Components {len(HYPERSCRIPT)} HS Scripts"
+        f"Done Proccessing: {len(COMPONENTS)} Component, {len(HYPERSCRIPT)} HS Scripts"
     )
     for c in COMPONENTS:
         style = c.generate_style(with_style_tags=False)