Merge pull request #3 from Lendemor/release/v0_0_2

update code for compat with 0.7.0

Author: Lendemor

custom_components/reflex_monaco/monaco.py

@@ -17,7 +17,7 @@ class MonacoComponent(rx.Component):
     theme: rx.Var[str] = rx.color_mode_cond("light", "vs-dark")  # type: ignore
 
     # The line to jump to in the editor.
-    line: rx.Var[int] = rx.Var.create_safe(1, _var_is_string=False)
+    line: rx.Var[int] = rx.Var.create(1)
 
     # The height of the editor.
     width: rx.Var[str]
@@ -46,10 +46,10 @@ class MonacoEditor(MonacoComponent):
     value: rx.Var[str]
 
     # Triggered when the editor value changes.
-    on_change: rx.EventHandler[lambda e: [e]]
+    on_change: rx.EventHandler[rx.event.passthrough_event_spec(str)]
 
     # Triggered when the content is validated. (limited to some languages)
-    on_validate: rx.EventHandler[lambda e: [e]]
+    on_validate: rx.EventHandler[rx.event.passthrough_event_spec(str)]
 
 
 class DiffMonacoEditor(MonacoComponent):

monaco_demo/.gitignore

@@ -1,3 +1,4 @@
+assets/external/
 *.db
 *.py[cod]
 .web

monaco_demo/monaco_demo/monaco_demo.py

@@ -1,13 +1,10 @@
 """Welcome to Reflex! This file showcases the custom component in a basic app."""
 
-from pathlib import Path
 from typing import Any
-from rxconfig import config
-
-import reflex as rx
 
 from reflex_monaco import monaco, monaco_diff
-from reflex.style import color_mode, set_color_mode
+
+import reflex as rx
 
 ORIGINAL_CONTENT = """
 # Reflex Monaco Editor Demo
@@ -35,12 +32,15 @@ class FileState(rx.State):
     original_content: str = ORIGINAL_CONTENT
     modified_content: str = ""
 
+    @rx.event
     def load_file_content(self):
         self.modified_content = self.original_content
 
+    @rx.event
     def on_change(self, value: str):
         self.modified_content = value
 
+    @rx.event
     def on_view_change(self, view: str):
         self.active_view = view
 
@@ -76,7 +76,10 @@ def index() -> Any:
     return rx.vstack(
         rx.box(),
         rx.heading(
-            "Monaco Editor Demo", size="9", align="center", text_decoration="underline"
+            "Monaco Editor Demo",
+            size="9",
+            align="center",
+            text_decoration="underline",
         ),
         rx.code("pip install reflex-monaco"),
         rx.center(
@@ -98,7 +101,10 @@ def index() -> Any:
         spacing="6",
         width="100vw",
         height="100vh",
-    ), rx.color_mode.button(position="top-right", allow_system=True)
+    ), rx.color_mode.button(
+        position="top-right",
+        allow_system=True,
+    )
 
 
 # Add state and page to the app.

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "reflex-monaco"
-version = "0.0.1"
+version = "0.0.2"
 description = "A package wrapping Monaco Editor for Reflex"
 readme = "README.md"
 license = { text = "Apache-2.0" }