introduce gui.styled() components

v0.5.2

app/components/CodeEditor.tsx

@@ -67,7 +67,7 @@ export default function CodeEditor({
   };
 
   return (
-    <div className="mb-4 code-editor-wrapper position-relative">
+    <div className="gui-input code-editor-wrapper position-relative">
       <InputLabel
         label={label}
         help={help}

app/renderer.tsx

@@ -135,6 +135,7 @@ function RenderedTreeNode({
           children={children}
           onChange={onChange}
           state={state}
+          className={props.className}
         />
       );
     case "nav-tab-content":
@@ -526,10 +527,12 @@ export function RenderedChildren({
   children,
   onChange,
   state,
+  className,
 }: {
   children: Array<TreeNode>;
   onChange: OnChange;
   state: Record<string, any>;
+  className?: string;
 }) {
   let elements = children.map((node, idx) => {
     let key;
@@ -538,6 +541,10 @@ export function RenderedChildren({
     } else {
       key = `idx:${idx}`;
     }
+    let prevClassName = node.props.className || "";
+    if (className && !prevClassName.includes(className)) {
+      node.props.className = `${className} ${prevClassName}`;
+    }
     return (
       <RenderedTreeNode
         key={key}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gooey-gui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "sideEffects": false,
   "scripts": {
     "build": "remix build",

py/gooey_gui/components/common.py

@@ -120,6 +120,15 @@ def _node(nodename: str, **props):
     return core.NestingCtx(node)
 
 
+def styled(css: str) -> core.RenderTreeNode:
+    css = dedent(css).strip()
+    className = "gui-" + core.md5_values(css)
+    selector = "." + className
+    css = css.replace("&", selector)
+    core.add_styles(className, css)
+    return _node("", className=className)
+
+
 def text(body: str, **props):
     core.RenderTreeNode(
         name="pre",

py/gooey_gui/core/__init__.py

@@ -16,7 +16,14 @@
     realtime_clear_subs,
     md5_values,
 )
-from .renderer import RenderTreeNode, NestingCtx, renderer, route, current_root_ctx
+from .renderer import (
+    RenderTreeNode,
+    NestingCtx,
+    renderer,
+    route,
+    current_root_ctx,
+    add_styles,
+)
 from .state import (
     get_session_state,
     set_session_state,

py/gooey_gui/core/renderer.py

@@ -23,6 +23,10 @@ def current_root_ctx() -> "NestingCtx":
     return threadlocal.root_ctx
 
 
+def add_styles(className: str, css: str):
+    threadlocal.styles[className] = css
+
+
 class RenderTreeNode(BaseModel):
     name: str
     props: ReactHTMLProps = {}
@@ -108,17 +112,26 @@ def renderer(
     set_query_params(query_params or {})
     realtime_clear_subs()
     threadlocal.use_state_count = 0
+    threadlocal.styles = {}
     while True:
         try:
             root = RenderTreeNode(name="root")
             threadlocal.root_ctx = NestingCtx(root)
             with threadlocal.root_ctx:
+                styles_node = RenderTreeNode(
+                    name="tag",
+                    props=dict(__reactjsxelement="style"),
+                ).mount()
                 try:
                     ret = render()
                 except StopException:
                     ret = None
                 except RedirectException as e:
                     return RedirectResponse(e.url, status_code=e.status_code)
+                if threadlocal.styles:
+                    styles_node.props["dangerouslySetInnerHTML"] = {
+                        "__html": "\n".join(threadlocal.styles.values())
+                    }
             if isinstance(ret, Response):
                 return ret
             return JSONResponse(