Updated CLI and add extra dependencies to the tailwind (#17)

* `Defined handler logic, CLI is not ready`

* `Update readme, make manager.py readable`

* `Basic SloDebugHandler feature`

* `Extend test file`

* `update example file`

* `Updated CLI and add extra dependencies to the tailwind`

slobypy/_templates.py

@@ -36,7 +36,6 @@ def mount(self):
         pass
 
 
-@SlApp.component("/route2")
 class MyComponent2(Component):
     @property
     def name(self):

slobypy/css/css_template.py

@@ -542,3 +542,13 @@
   background-color: rgb(21 128 61 / var(--tw-bg-opacity));
 }
 """
+
+TAILWIND_CONFIG = """/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./components/**/*.py"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+"""

slobypy/manager.py

@@ -25,6 +25,7 @@
 from slobypy._templates import *
 from slobypy.react.component import AppComponent
 from slobypy.react.tools import SloDebugHandler
+from slobypy.css.css_template import INPUT_CSS, OUTPUT_CSS, TAILWIND_CONFIG
 # Rich
 from rich.console import Console
 from rich.panel import Panel
@@ -95,7 +96,15 @@ def generate(path: Path, overwrite: bool = False, no_preprocessor=False):
 
         if selected_preprocessor == "tailwind":
             # Create tailwind dependencies here
-            pass
+            with open((path / "css" / "input.css"), "w") as f:
+                f.write(INPUT_CSS)
+
+            with open((path / "css" / "output.css"), "w") as f:
+                f.write(OUTPUT_CSS)
+
+            with open(path / "tailwind.config.js", "w") as f:
+                f.write(TAILWIND_CONFIG)
+
         elif selected_preprocessor == "sass":
             # Create sass dependencies here
             pass
@@ -119,11 +128,17 @@ def generate_delete(path: Path):
 
     config_file = Path(path / "sloby.config.json")
     debug_json_file = Path(path / "handler_debug.json")
+    css_input = Path(path / "css" / "input.css")
+    css_output = Path(path / "css" / "output.css")
+    tailwind_config = Path(path / "tailwind.config.js")
+
     app_file = Path(path / "app.py")
     example_component = Path(path / "components" / "example_component.py")
     preprocessor = Path(path / "preprocessor.py")
 
-    deleted_files = [config_file, app_file, example_component, debug_json_file, preprocessor]
+    deleted_files = [config_file, app_file, example_component, debug_json_file, preprocessor, css_input, css_output, tailwind_config]
+
+
 
     for file in deleted_files:
         try:
@@ -518,7 +533,9 @@ def _handle_description(self, event):
             self.current_header.text = f"[green]?[/green] Author [white](None)[/white]: [cyan]"
             self.current_header.input = ""
             self.current_header.text = f"[green]?[/green] Pick a UI framework preset: "
-            new_selection = ["None", "Tailwind", "Bootstrap", "Animate", "Sass"]
+
+            new_selection = ["None", "Tailwind", "Bootstrap", "Sass"]
+
             for old, new in zip(self.selection, new_selection):
                 old.original_text = new
                 old.text = new
@@ -615,8 +632,12 @@ def __init__(self, handler_dict: dict):
     def compose(self):
         yield self.buffer
         # Registered components
+
+        yield Label("Registered Components:")
         for route in self.handler_dict["registered_components"]:
+
             yield Label(route)
+        yield Label("App Components")
 
         # App Components
         # for component in ComponentFromJson.get_app_components():

slobypy/react/context.py

@@ -18,7 +18,7 @@ class Context:
     Used to provide data transfer for the user.
     """
 
-    def __init__(self, starting_data) -> None:
+    def __init__(self, **starting_data) -> None:
         self.data = starting_data
 
     def __call__(self, *components: "component_file.Component") -> Self:

slobypy/rpc.py

@@ -255,6 +255,7 @@ async def handle_event(
         elif data["type"] == "get_route":
             await self.render_shard(conn, data["data"])
 
+    #noinspection PyMethodMayBeStatic
     async def send(self, conn: WebSocketServerProtocol, data: dict[str, Any]) -> None:
         """
         Sends data to the React frontend
@@ -268,7 +269,7 @@ async def send(self, conn: WebSocketServerProtocol, data: dict[str, Any]) -> Non
         """
         await conn.send(json.dumps(data))
 
-    async def wait_for_hearbeat(self, conn: WebSocketServerProtocol) -> None:
+    async def wait_for_heartbeat(self, conn: WebSocketServerProtocol) -> None:
         """
         Waits for a heartbeat from the React frontend
 
@@ -314,6 +315,7 @@ async def internal_wait(latency: float) -> None:
                     await conn.close()
                     break
 
+    #noinspection PyProtectedMember
     async def heartbeat(self, conn: WebSocketServerProtocol) -> None:
         """
         Handles the heartbeat from the React frontend
@@ -395,7 +397,7 @@ async def identify(
 
         # Create task to watch for heartbeat
         self.conn[conn_id - 1]["_internal_heartbeat"] = asyncio.ensure_future(
-            self.wait_for_hearbeat(conn)
+            self.wait_for_heartbeat(conn)
         )
 
     async def new_shard(
@@ -494,6 +496,7 @@ async def shard_event(self, conn: WebSocketServerProtocol, data: dict[str, Any])
         - None
         """
 
+    #noinspection PyProtectedMember
     async def get_route(self, route: str) -> str:
         """
         Gets the html of a route
@@ -545,6 +548,7 @@ async def reload_css(self, conn: WebSocketServerProtocol) -> None:
             },
         )
 
+    #noinspection PyProtectedMember
     async def get_css(self) -> str:
         """
         Renders the CSS in the application
@@ -560,6 +564,8 @@ async def get_css(self) -> str:
             return "\n".join([scss_data["scss_class"].render() for scss_data in Design._REGISTERED_CLASSES])  # type: ignore  # pylint: disable=protected-access
         return (await self.css_preprocessor()).read_text()
 
+    #noinspection PyMethodMayBeStatic
+    #noinspection PyProtectedMember
     def _check_shard_render_alone(self, shard_route: str) -> bool:
         if AppComponent._components:  # type: ignore  # pylint: disable=protected-access
             for app_component in AppComponent._components:  # type: ignore  # pylint: disable=protected-access
@@ -569,6 +575,8 @@ def _check_shard_render_alone(self, shard_route: str) -> bool:
             return False
         return True
 
+    #noinspection PyMethodMayBeStatic
+    #noinspection PyProtectedMember
     async def _check_app_hot_reload(self, shard_route: str, routes: list[str]) -> bool:
         if AppComponent._components:  # type: ignore  # pylint: disable=protected-access
             for app_component in AppComponent._components:  # type: ignore  # pylint: disable=protected-access

tests/realistic_test_environment/app.py

@@ -1,11 +1,11 @@
-from tests.realistic_test_environment.components.example_component import MyComponent1, MyComponent3
-from slobypy.react.component import *
-from slobypy.react.context import Context
+from slobypy.react import *
 
-class MyApp(AppComponent):
-    def body(self):
-        myContext = Context("Hello World")
-        yield myContext(MyComponent3())
-
-
-MyApp()
+css = SCSSClass(
+    name="parent",
+    register=True
+).child(
+    SCSSClass(
+        name="child1",
+        display="block"
+    ))
+

tests/realistic_test_environment/components/example_component.py

@@ -1,7 +1,7 @@
+from slobypy import SlApp
 from slobypy.react import *
 from slobypy import *
 
-
 @SlApp.component("/route1")
 class MyComponent1(Component):
     @property
@@ -12,6 +12,7 @@ def on_click(self):
         print(self.name, "has been clicked!")
 
     def body(self):
+
         yield P("test1", onClick=self.on_click)
         yield MyComponent2(props={"important_data": "Woah, this is a hahao10!"})
 
@@ -28,6 +29,8 @@ def on_click(self):
     def body(self):
         yield P(self.context, onClick=self.on_click)
 
+    def mount(self):
+        pass
 
 
 class MyComponent2(Component):
@@ -39,4 +42,5 @@ def on_click(self):
         print(self.name, "has been clicked!")
 
     def body(self):
-        yield P(self.props["important_data"], onClick=self.on_click)
+        yield P(self.props["important_data"], onClick=self.on_click)
+