Make button a simpler, high-level API which uses a lower-level API content_button

Author: wwwillchen

docs/components/button.md

@@ -1,6 +1,6 @@
 ## Overview
 
-Button is based on the [Angular Material button component](https://material.angular.io/components/button/overview). Button is a [composite component](../guides/components.md#composite-components) and frequently used as a parent of the [Text](./text.md) component.
+Button is based on the [Angular Material button component](https://material.angular.io/components/button/overview).
 
 ## Examples
 
@@ -11,4 +11,5 @@ Button is based on the [Angular Material button component](https://material.angu
 ## API
 
 ::: mesop.components.button.button.button
+::: mesop.components.button.button.content_button
 ::: mesop.events.ClickEvent

mesop/__init__.py

@@ -31,7 +31,12 @@
 
 # REF(//scripts/scaffold_component.py):insert_component_import_export
 from mesop.components.box.box import box as box
-from mesop.components.button.button import button as button
+from mesop.components.button.button import (
+  button as button,
+)
+from mesop.components.button.button import (
+  content_button as content_button,
+)
 from mesop.components.checkbox.checkbox import (
   CheckboxChangeEvent as CheckboxChangeEvent,
 )

mesop/component_helpers/helper.py

@@ -100,15 +100,14 @@ def wrapper(*args: Any, **kw_args: Any):
       source_code_location = get_caller_source_code_location(levels=2)
     component.MergeFrom(
       create_component(
-        component_name=pb.ComponentName(
-          fn_name=fn.__name__, module_path=fn.__module__
-        ),
+        component_name=get_component_name(fn),
         proto=pb.UserDefinedType(
           args=[
             pb.UserDefinedType.Arg(
               arg_name=kw_arg, code_value=map_code_value(value)
             )
             for kw_arg, value in kw_args.items()
+            if map_code_value(value) is not None
           ]
         ),
         source_code_location=source_code_location,
@@ -123,7 +122,13 @@ def wrapper(*args: Any, **kw_args: Any):
   return cast(C, wrapper)
 
 
-def map_code_value(value: Any) -> pb.CodeValue:
+def get_component_name(fn: Callable[..., Any]) -> pb.ComponentName:
+  if "mesop.components" in fn.__module__:
+    return pb.ComponentName(core_module=True, fn_name=fn.__name__)
+  return pb.ComponentName(fn_name=fn.__name__, module_path=fn.__module__)
+
+
+def map_code_value(value: Any) -> pb.CodeValue | None:
   if isinstance(value, str):
     return pb.CodeValue(string_value=value)
   if isinstance(value, int):
@@ -132,7 +137,7 @@ def map_code_value(value: Any) -> pb.CodeValue:
     return pb.CodeValue(double_value=value)
   if isinstance(value, bool):
     return pb.CodeValue(bool_value=value)
-  raise Exception("Unhandled value", value)
+  return None
 
 
 def create_component(

mesop/components/button/button.py

@@ -2,15 +2,50 @@
 
 import mesop.components.button.button_pb2 as button_pb
 from mesop.component_helpers import (
+  component,
   insert_composite_component,
   register_event_handler,
   register_native_component,
 )
+from mesop.components.text.text import text
 from mesop.events import ClickEvent
 
 
-@register_native_component
+@component
 def button(
+  label: str | None = None,
+  *,
+  on_click: Callable[[ClickEvent], Any] | None = None,
+  type: Literal["raised", "flat", "stroked"] | None = None,
+  color: Literal["primary", "accent", "warn"] | None = None,
+  disable_ripple: bool = False,
+  disabled: bool = False,
+  key: str | None = None,
+):
+  """Creates a simple text Button component.
+
+  Args:
+    label: Text label for button
+    on_click: [click](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click_event) is a native browser event.
+    type: Type of button style to use
+    color: Theme color palette of the button
+    disable_ripple: Whether the ripple effect is disabled or not.
+    disabled: Whether the button is disabled.
+    key: Unique identifier for this component instance.
+  """
+  with content_button(
+    on_click=on_click,
+    type=type,
+    color=color,
+    disable_ripple=disable_ripple,
+    disabled=disabled,
+    key=key,
+  ):
+    text(label)
+
+
+@register_native_component
+def content_button(
   *,
   on_click: Callable[[ClickEvent], Any] | None = None,
   type: Literal["raised", "flat", "stroked", "icon"] | None = None,
@@ -19,8 +54,9 @@ def button(
   disabled: bool = False,
   key: str | None = None,
 ):
-  """Creates a Button component.
-  Button is a composite component.
+  """Creates a button component, which is a composite component. Typically, you would use a text or icon component as a child.
+
+  Intended for advanced use cases.
 
   Args:
     on_click: [click](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click_event) is a native browser event.
@@ -32,7 +68,7 @@ def button(
   """
   return insert_composite_component(
     key=key,
-    type_name="button",
+    type_name="content_button",
     proto=button_pb.ButtonType(
       color=color,
       disable_ripple=disable_ripple,

mesop/editor/editor_codemod.py

@@ -146,6 +146,8 @@ def leave_Call(  # type: ignore (erroneously forbids return type with `None`)
       "icon"
     ]:
       first_positional_arg = "icon"
+    if component_name.fn_name in ["button"]:
+      first_positional_arg = "label"
     return self._update_call(
       updated_node,
       self.input.arg_path.segments,

mesop/editor/editor_codemod_test.py

@@ -160,6 +160,21 @@ def test_simple_callsite(self) -> None:
       ),
     )
 
+  def test_button_callsite(self) -> None:
+    self.assertEditorUpdate(
+      "button_callsite",
+      pb.EditorUpdateCallsite(
+        component_name=me_name("button"),
+        arg_path=pb.ArgPath(
+          segments=[pb.ArgPathSegment(keyword_argument="type")]
+        ),
+        replacement=pb.CodeReplacement(
+          new_code=pb.CodeValue(string_value="flat"),
+        ),
+        source_code_location=pb.SourceCodeLocation(line=5),
+      ),
+    )
+
   def test_multi_callsite(self) -> None:
     self.assertEditorUpdate(
       "multi_callsite",

mesop/editor/testdata/button_callsite/after.py

@@ -0,0 +1,5 @@
+import mesop as me
+
+
+def app():
+  me.button(type="flat")

mesop/editor/testdata/button_callsite/before.py

@@ -0,0 +1,5 @@
+import mesop as me
+
+
+def app():
+  me.button(type="stroked")

mesop/examples/buttons.py

@@ -14,18 +14,19 @@ def button_click(event: me.ClickEvent):
 @me.page(path="/buttons")
 def main():
   state = me.state(State)
-  with me.button(
-    on_click=button_click, type="flat", color="primary", disabled=False
-  ):
-    me.text(text="primary color button")
 
-  with me.button(on_click=button_click, type="flat"):
-    me.text(text="flat button")
+  me.button(
+    "primary color button",
+    on_click=button_click,
+    type="flat",
+    color="primary",
+    disabled=False,
+  )
 
-  with me.button(on_click=button_click, type="raised"):
-    me.text(text="raised button")
+  me.button("flat button", on_click=button_click, type="flat")
 
-  with me.button(on_click=button_click, type="stroked"):
-    me.text(text="stroked button")
+  me.button("raised button", on_click=button_click, type="raised")
+
+  me.button("stroked button", on_click=button_click, type="stroked")
 
   me.text(text=f"{state.count_clicks} clicks")

mesop/examples/docs/counter.py

@@ -15,5 +15,4 @@ def button_click(event: me.ClickEvent):
 def main():
   state = me.state(State)
   me.text(f"Clicks: {state.clicks}")
-  with me.button(on_click=button_click):
-    me.text("Increment")
+  me.button("Increment", on_click=button_click)

mesop/examples/docs/loading.py

@@ -30,5 +30,4 @@ def main():
   if state.is_loading:
     me.progress_spinner()
   me.text(state.data)
-  with me.button(on_click=button_click):
-    me.text("Call API")
+  me.button("Call API", on_click=button_click)

mesop/examples/docs/streaming.py

@@ -24,6 +24,5 @@ def button_click(action: me.ClickEvent):
 @me.page(path="/streaming")
 def main():
   state = me.state(State)
-  with me.button(on_click=button_click):
-    me.text(text="click")
+  me.button("click", on_click=button_click)
   me.text(text=f"{state.string}")

mesop/examples/generator.py

@@ -24,6 +24,5 @@ def button_click(action: me.ClickEvent):
 @me.page(path="/generator")
 def main():
   state = me.state(State)
-  with me.button(on_click=button_click):
-    me.text(text="click")
+  me.button("click", on_click=button_click)
   me.text(text=f"{state.string}")

mesop/examples/nested.py

@@ -19,7 +19,6 @@ def app():
     me.text(text="hi1")
     with me.box(style=me.Style(background="blue")):
       me.text(text="hi2")
-      with me.button(on_click=click, key="incredibly_long_key"):
-        me.text(text="a button")
+      me.button("a button", on_click=click, key="incredibly_long_key")
       with me.box(style=me.Style(background="orange")):
         me.text(text=f"{state.val} clicks")

mesop/examples/playground.py

@@ -86,8 +86,7 @@ def left_panel():
         on_input=on_input,
       )
 
-    with me.button(type="stroked", on_click=on_submit):
-      me.text("Submit")
+    me.button("Submit", type="stroked", on_click=on_submit)
 
 
 def right_panel():

mesop/examples/playground_critic.py

@@ -96,8 +96,7 @@ def left_panel():
         on_input=on_input,
       )
 
-    with me.button(type="stroked", on_click=on_submit):
-      me.text("Submit")
+    me.button("Submit", type="stroked", on_click=on_submit)
 
     with me.box(style=me.Style(margin=me.Margin(top=16, bottom=16))):
       me.divider()

mesop/examples/readme_app.py

@@ -23,8 +23,7 @@ def app():
   me.text("Hello, world!")
   me.textarea(rows=10, label="Prompt", on_input=on_prompt_input)
 
-  with me.button(on_click=on_submit):
-    me.text("Submit")
+  me.button("submit", on_click=on_submit)
 
   state = me.state(State)
   me.text(f"Output: {state.output}")

mesop/examples/shared/navmenu.py

@@ -45,7 +45,7 @@ def on_click(event: me.ClickEvent):
     )
   ):
     with me.box(style=me.Style(margin=me.Margin(bottom=8))):
-      with me.button(type="icon", on_click=on_click, key=url):
+      with me.content_button(type="icon", on_click=on_click, key=url):
         with me.box(
           style=me.Style(
             display="flex", flex_direction="column", align_items="center"

mesop/examples/simple.py

@@ -32,8 +32,7 @@ def button_click(action: me.ClickEvent):
 @me.page(path="/many_checkboxes")
 def main():
   state = me.state(State)
-  with me.button(on_click=button_click):
-    me.text(text="click me")
+  me.button("click me", on_click=button_click)
   me.text(text=f"{state.count} clicks")
   me.text(text=f"Selected keys: {state.keys}")
   for i in range(1000):

mesop/web/src/component_renderer/component_renderer.ts

@@ -12,13 +12,15 @@ import {
 import {CommonModule} from '@angular/common';
 import {
   Component as ComponentProto,
-  Key,
-  Type,
   UserEvent,
 } from 'mesop/mesop/protos/ui_jspb_proto_pb/mesop/protos/ui_pb';
 import {ComponentLoader} from './component_loader';
 import {BoxType} from 'mesop/mesop/components/box/box_jspb_proto_pb/mesop/components/box/box_pb';
-import {BaseComponent, typeToComponent} from './type_to_component';
+import {
+  BaseComponent,
+  UserDefinedComponent,
+  typeToComponent,
+} from './type_to_component';
 import {Channel} from '../services/channel';
 import {EditorService, SelectionMode} from '../services/editor_service';
 import {
@@ -361,15 +363,3 @@ function isRegularComponent(component: ComponentProto) {
     !(typeName.getCoreModule() && typeName.getFnName() === 'box')
   );
 }
-
-@Component({
-  template: '<ng-content></ng-content>',
-  standalone: true,
-})
-class UserDefinedComponent implements BaseComponent {
-  @Input() key!: Key;
-  @Input() type!: Type;
-  ngOnChanges() {
-    // Placeholder function since the
-  }
-}

mesop/web/src/component_renderer/type_to_component.ts

@@ -22,6 +22,7 @@ import {CheckboxComponent} from '../../../components/checkbox/checkbox';
 import {ButtonComponent} from '../../../components/button/button';
 import {TextComponent} from '../../../components/text/text';
 import {MarkdownComponent} from '../../../components/markdown/markdown';
+import {Component, Input} from '@angular/core';
 
 export interface BaseComponent {
   key: Key;
@@ -35,6 +36,18 @@ export interface TypeToComponent {
   [typeName: string]: new (...rest: any[]) => BaseComponent;
 }
 
+@Component({
+  template: '<ng-content></ng-content>',
+  standalone: true,
+})
+export class UserDefinedComponent implements BaseComponent {
+  @Input() key!: Key;
+  @Input() type!: Type;
+  ngOnChanges() {
+    // Placeholder function since the
+  }
+}
+
 export const typeToComponent = {
   'video': VideoComponent,
   'audio': AudioComponent,
@@ -53,7 +66,8 @@ export const typeToComponent = {
   // Textarea is a special case where it's exposed as a separate
   // component / API, but the implementation is almost identical as Input.
   'textarea': InputComponent,
-  'button': ButtonComponent,
+  'button': UserDefinedComponent,
+  'content_button': ButtonComponent,
   'checkbox': CheckboxComponent,
   'text': TextComponent,
   'markdown': MarkdownComponent,

mesop/web/src/dev_tools/services/logger.ts

@@ -88,7 +88,10 @@ export function mapComponentToObject(
     };
   }
 
-  if (component.getType()?.getName()?.getCoreModule() === false) {
+  if (
+    component.getType()?.getName()?.getCoreModule() === false ||
+    component.getType()?.getName()?.getFnName() === 'button'
+  ) {
     const value: Record<string, any> = {};
     // Deserialize type
     const userDefinedType = UserDefinedType.deserializeBinary(