Add runtime language detection

Author: ealmloff

.github/workflows/main.yml

@@ -20,13 +20,13 @@ jobs:
     with:
       all-features: false
       no-default-features: true
-      features: dioxus-code/all-languages dioxus-code-docsite/web dioxus-code-live-input/web
+      features: dioxus-code/all-languages dioxus-code-editor/web dioxus-code-docsite/web dioxus-code-live-input/web
 
   test:
     uses: dioxuslabs/dioxus-ci/.github/workflows/test.yml@v0.1.0
     with:
       no-default-features: true
-      features: dioxus-code/all-languages dioxus-code-docsite/web dioxus-code-live-input/web
+      features: dioxus-code/all-languages dioxus-code-editor/web dioxus-code-docsite/web dioxus-code-live-input/web
 
   fmt:
     uses: dioxuslabs/dioxus-ci/.github/workflows/fmt.yml@v0.1.0
@@ -36,11 +36,11 @@ jobs:
     with:
       all-features: false
       no-default-features: true
-      features: dioxus-code/all-languages dioxus-code-docsite/web dioxus-code-live-input/web
+      features: dioxus-code/all-languages dioxus-code-editor/web dioxus-code-docsite/web dioxus-code-live-input/web
 
   clippy:
     uses: dioxuslabs/dioxus-ci/.github/workflows/clippy.yml@v0.1.0
     with:
       all-features: false
       no-default-features: true
-      features: dioxus-code/all-languages dioxus-code-docsite/web dioxus-code-live-input/web
+      features: dioxus-code/all-languages dioxus-code-editor/web dioxus-code-docsite/web dioxus-code-live-input/web

.github/workflows/nightly.yml

@@ -19,22 +19,22 @@ jobs:
       toolchain: nightly
       all-features: false
       no-default-features: true
-      features: dioxus-code/all-languages dioxus-code-docsite/web dioxus-code-live-input/web
+      features: dioxus-code/all-languages dioxus-code-editor/web dioxus-code-docsite/web dioxus-code-live-input/web
 
   test:
     uses: dioxuslabs/dioxus-ci/.github/workflows/test.yml@v0.1.0
     with:
       toolchain: nightly
       no-default-features: true
-      features: dioxus-code/all-languages dioxus-code-docsite/web dioxus-code-live-input/web
+      features: dioxus-code/all-languages dioxus-code-editor/web dioxus-code-docsite/web dioxus-code-live-input/web
 
   clippy:
     uses: dioxuslabs/dioxus-ci/.github/workflows/clippy.yml@v0.1.0
     with:
       toolchain: nightly
       all-features: false
       no-default-features: true
-      features: dioxus-code/all-languages dioxus-code-docsite/web dioxus-code-live-input/web
+      features: dioxus-code/all-languages dioxus-code-editor/web dioxus-code-docsite/web dioxus-code-live-input/web
 
   web-demo:
     uses: dioxuslabs/dioxus-ci/.github/workflows/web-build.yml@v0.1.0

Cargo.lock

@@ -23,6 +23,7 @@ categories = ["gui", "web-programming"]
 [workspace.dependencies]
 dioxus-code = { version = "0.1.1", path = "." }
 dioxus-code-editor = { version = "0.1.2", path = "code-editor", default-features = false }
+betlang = { version = "0.1.0" }
 
 [package]
 name = "dioxus-code"
@@ -43,7 +44,11 @@ rustdoc-args = ["--cfg", "docsrs"]
 [features]
 default = ["macro"]
 macro = ["dep:dioxus-code-macro", "dioxus-code-macro/lang-rust"]
-runtime = ["arborium/lang-rust", "dep:arborium-tree-sitter"]
+runtime = [
+    "arborium/lang-rust",
+    "dep:arborium-tree-sitter",
+    "dep:betlang",
+]
 all-languages = [
     "runtime",
     "arborium/all-languages",
@@ -260,6 +265,7 @@ arborium-theme = "2.16.0"
 arborium-tree-sitter = { version = "2.16.0", optional = true }
 dioxus = { version = "0.7.0", default-features = false, features = ["lib"] }
 dioxus-code-macro = { version = "0.1.0", path = "dioxus-code-macro", default-features = false, optional = true }
+betlang = { workspace = true, optional = true }
 
 [build-dependencies]
 arborium = { version = "2.16.0", default-features = false }

Cargo.toml

@@ -21,8 +21,8 @@ A small Dioxus component for rendering source code with proper highlighting. Par
 
 Two ways to highlight:
 
-- **[`code!`] macro** — parses at compile time and embeds the highlighted spans. Default.
-- **[`SourceCode`]** — parses at runtime. Opt in with the `runtime` feature for dynamic source text.
+- **[`code!`] macro** — parses at compile time. The runtime ships only the spans, no parser. Default.
+- **[`SourceCode`]** — parses at runtime. Opt in with the `runtime` feature when the source isn't known until the user types it.
 
 ## Quick start
 
@@ -51,7 +51,7 @@ When the file extension is ambiguous, pass [`CodeOptions::builder`] with [`CodeO
 
 ## Runtime highlighting
 
-For editor-style use cases with dynamic source text:
+For editor-style use cases where the source isn't known at compile time:
 
 ```toml
 [dependencies]
@@ -60,23 +60,24 @@ dioxus-code = { version = "0.1", features = ["runtime"] }
 
 ```rust
 # use dioxus::prelude::*;
-use dioxus_code::{Code, Language, SourceCode, Theme};
+use dioxus_code::{Code, CodeOptions, Language, SourceCode, Theme};
 # let user_input = String::new();
 # let _ =
 rsx! {
     Code {
-        src: SourceCode::new(Language::Rust, user_input),
+        src: SourceCode::new(user_input)
+            .with_options(CodeOptions::builder().with_language(Language::Rust)),
         theme: Theme::GITHUB_LIGHT,
     }
 }
 # ;
 ```
 
-Pass a [`Language`] variant when building [`SourceCode`]. The `runtime` feature includes Rust; enable the matching `lang-*` feature, or `all-languages`, for additional grammars.
+Language can be set explicitly with the same [`CodeOptions`] builder used by [`code!`], or auto-detected from the source. The default `runtime` feature includes Rust; pass `lang-python`, `lang-toml`, or `all-languages` for the rest.
 
 ## Editor
 
-[`dioxus-code-editor`] is a sibling crate that pairs the highlighter with a textarea input layer:
+[`dioxus-code-editor`] is a sibling crate that pairs the highlighter with a `contenteditable` input layer:
 
 ```rust
 # use dioxus::prelude::*;
@@ -130,7 +131,7 @@ Code {
 
 ```sh
 dx serve --example dioxus-code-basic       # macro + runtime side by side
-dx serve --example dioxus-code-macro-only  # compile-time highlighted spans
+dx serve --example dioxus-code-macro-only  # compile-time only, no parser in the binary
 dx serve --example dioxus-code-live-input  # textarea bound to runtime highlighter
 ```
 

README.md

@@ -104,25 +104,6 @@ fn main() {
         ));
     }
 
-    generated.push_str(
-        r#"    /// Every syntax theme, in declaration order.
-    ///
-    /// ```rust
-    /// use dioxus_code::Theme;
-    /// assert!(Theme::ALL.contains(&Theme::TOKYO_NIGHT));
-    /// ```
-    pub const ALL: &'static [Theme] = &[
-"#,
-    );
-    for theme in &themes {
-        generated.push_str(&format!("        Self::{},\n", theme.const_name));
-    }
-    generated.push_str(
-        r#"    ];
-
-"#,
-    );
-
     generated.push_str(
         r#"}
 "#,

build.rs

@@ -17,7 +17,7 @@ targets = ["x86_64-unknown-linux-gnu", "wasm32-unknown-unknown"]
 
 [dependencies]
 dioxus = { version = "0.7.0", default-features = false, features = ["lib"] }
-dioxus-code = { workspace = true, features = ["runtime"] }
+dioxus-code = { workspace = true, features = ["lang-toml", "lang-python"] }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 wasm-bindgen = "0.2"
@@ -30,4 +30,6 @@ web-sys = { version = "0.3", features = [
 ] }
 
 [features]
-all-languages = ["dioxus-code/all-languages"]
+default = ["desktop"]
+desktop = ["dioxus/desktop", "dioxus/launch"]
+web = ["dioxus/web", "dioxus/launch"]

code-editor/Cargo.toml

@@ -53,7 +53,7 @@ The component is controlled — drive [`CodeEditorProps::value`] from your own s
 | prop | description |
 |---|---|
 | [`CodeEditorProps::value`] | Current editor contents. |
-| [`CodeEditorProps::language`] | Syntax grammar selection. Pass a [`Language`] variant (for example [`Language::Rust`]) or use [`Language::from_slug`] for runtime slugs. |
+| [`CodeEditorProps::language`] | Tree-sitter grammar selection. Pass a [`Language`] variant (for example [`Language::Rust`]) or use [`Language::from_slug`] for custom slugs. |
 | [`CodeEditorProps::theme`] | Syntax theme selection shared with [`dioxus-code`](https://crates.io/crates/dioxus-code); accepts [`Theme`] or [`CodeTheme`]. |
 | [`CodeEditorProps::line_numbers`] | Show a one-based line gutter. Defaults to `true`. |
 | [`CodeEditorProps::read_only`] | Disable editing while preserving highlighting. |

code-editor/README.md

@@ -5,7 +5,7 @@ use dioxus::prelude::*;
 pub use dioxus_code::Language;
 #[cfg(test)]
 use dioxus_code::Theme;
-use dioxus_code::advanced::{Buffer, CodeThemeStyles, HighlightError, TokenSpan};
+use dioxus_code::advanced::{Buffer, CodeThemeStyles, TokenSpan};
 #[cfg(test)]
 use dioxus_code::advanced::{HighlightSegment, HighlightedSource};
 use dioxus_code::{CodeTheme, SourceCode};
@@ -71,11 +71,6 @@ pub struct CodeEditorProps {
     pub oninput: EventHandler<String>,
 }
 
-struct EditorBuffer {
-    buffer: Option<Buffer>,
-    language: Language,
-}
-
 /// Editable syntax-highlighted code surface.
 ///
 /// The component is controlled by [`CodeEditorProps::value`]; update that value
@@ -101,15 +96,10 @@ struct EditorBuffer {
 /// ```
 #[component]
 pub fn CodeEditor(props: CodeEditorProps) -> Element {
-    let state = use_hook({
+    let buffer = use_hook({
         let value = props.value.clone();
         let language = props.language;
-        move || {
-            Rc::new(RefCell::new(EditorBuffer {
-                buffer: Buffer::new(language, value).ok(),
-                language,
-            }))
-        }
+        move || Rc::new(RefCell::new(Buffer::new(language, value).ok()))
     });
     let edit_tracker = use_hook(|| {
         Rc::new(RefCell::new(edit_capture::InputEditTracker::new(
@@ -119,30 +109,28 @@ pub fn CodeEditor(props: CodeEditorProps) -> Element {
 
     let edit = edit_tracker.borrow_mut().take_for_render(&props.value);
     let snapshot = {
-        let mut slot = state.borrow_mut();
-        if slot.language != props.language {
-            slot.buffer = Buffer::new(props.language, props.value.clone()).ok();
-            slot.language = props.language;
+        let mut buffer_slot = buffer.borrow_mut();
+        if buffer_slot.is_none() {
+            *buffer_slot = Buffer::new(props.language, props.value.clone()).ok();
         }
 
-        match slot.buffer.as_mut() {
+        match buffer_slot.as_mut() {
             Some(buffer) => {
+                if buffer.language() != props.language {
+                    let _ = buffer.set_language(props.language);
+                }
                 if buffer.source() != props.value {
                     let result = match edit {
-                        Some(edit) => match buffer.edit(edit, props.value.clone()) {
-                            Ok(()) => Ok(()),
-                            Err(HighlightError::InvalidEdit { .. }) => {
-                                buffer.replace(props.value.clone())
-                            }
-                            Err(error) => Err(error),
-                        },
+                        Some(edit) => buffer.edit(edit, props.value.clone()),
                         None => buffer.replace(props.value.clone()),
                     };
                     let _ = result;
                 }
                 buffer.highlighted()
             }
-            None => SourceCode::new(props.language, props.value.clone()).into(),
+            None => SourceCode::new(props.value.clone())
+                .with_language(props.language)
+                .into(),
         }
     };
     let lines = snapshot.lines();

code-editor/src/lib.rs

@@ -0,0 +1,38 @@
+use dioxus::prelude::*;
+use dioxus_code::Theme;
+use dioxus_code_editor::{CodeEditor, Language};
+
+const DEMO_CSS: Asset = asset!("/assets/demo.css");
+
+const STARTER: &str = r#"pub fn luminance(rgb: (u8, u8, u8)) -> f32 {
+    let (r, g, b) = rgb;
+    0.2126 * r as f32 + 0.7152 * g as f32 + 0.0722 * b as f32
+}
+"#;
+
+fn main() {
+    dioxus::launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    let mut source = use_signal(|| STARTER.to_string());
+    let language = Language::detect(&source()).unwrap_or(Language::Rust);
+    let language_label = language.slug();
+
+    rsx! {
+        document::Stylesheet { href: DEMO_CSS }
+        main { class: "shell",
+            section { class: "toolbar",
+                h1 { "Code editor component" }
+                span { "{language_label}" }
+            }
+            CodeEditor {
+                value: source(),
+                language,
+                theme: Theme::TOKYO_NIGHT,
+                oninput: move |value| source.set(value),
+            }
+        }
+    }
+}