Leptos compatibility / improved docs

[JosiahParry]

I'm trying to use the api module to create a monaco editor in a leptos app but am struggling. Ideally, it would be very nice to have a leptos feature to accompany the yew one. However, additional documentation that illustrates how to use the api would be very appreciated. I'm doing my best to look at the source code however, it's not very clear how to use the api module.

[dancixx]

@JosiahParry hi, Im waiting for a Leptos module but until Im using this way, maybe this helps you:

pub type ModelCell = Rc<RefCell<Option<CodeEditor>>>;

pub fn query_editor() -> impl IntoView {
  let query_state = use_context::<QueryState>().unwrap();
  let run_query = create_action(move |query_store: &QueryState| {
    let query_store = *query_store;
    async move {
      query_store.run_query().await;
    }
  });
  let editor = use_context::<EditorState>().unwrap().editor;
  let node_ref = create_node_ref();
  let js_clouse = Closure::<dyn Fn()>::new(|| ());
  let _ = use_event_listener(node_ref, ev::keydown, move |event| {
    if event.key() == "Enter" && event.ctrl_key() {
      run_query.dispatch(query_state);
    }
  });
  node_ref.on_load(move |node| {
    let div_element: &web_sys::HtmlDivElement = &node;
    let html_element = div_element.unchecked_ref::<web_sys::HtmlElement>();
    let options = CodeEditorOptions::default().to_sys_options();
    options.set_value(Some("SELECT * FROM users LIMIT 100;"));
    options.set_language(Some("sql"));
    options.set_automatic_layout(Some(true));
    options.set_dimension(Some(&IDimension::new(0, 240)));

    let minimap_settings = IEditorMinimapOptions::default();
    minimap_settings.set_enabled(Some(false));
    options.set_minimap(Some(&minimap_settings));

    let e = CodeEditor::create(html_element, Some(options));
    let key_code = (KeyMod::win_ctrl() as u32) | KeyCode::Enter.to_value(); // | (KeyMod::ctrl_cmd() as u32);
    e.as_ref()
      .add_command(key_code.into(), js_clouse.as_ref().unchecked_ref(), None);
    editor.update(|prev| {
      prev.replace(Some(e));
    });
  });

  div()
    .classes("border-b-1 border-neutral-200 sticky")
    .node_ref(node_ref)
}

[JosiahParry]

@dancixx thank you for sharing this! looks like some of the structs EditorState and QueryState are not available. I'm using something similar which works great for CSR but is failing to render with SSR.

[dancixx]

@JosiahParry

use leptos::{create_rw_signal, RwSignal, SignalGetUntracked};

use crate::query_editor::ModelCell;

#[derive(Copy, Clone, Debug)]
pub struct EditorState {
  pub editor: RwSignal<ModelCell>,
}

impl Default for EditorState {
  fn default() -> Self {
    Self::new()
  }
}

impl EditorState {
  pub fn new() -> Self {
    Self {
      editor: create_rw_signal(ModelCell::default()),
    }
  }

  pub fn get_value(&self) -> String {
    self
      .editor
      .get_untracked()
      .borrow()
      .as_ref()
      .unwrap()
      .get_model()
      .unwrap()
      .get_value()
  }

  pub fn set_value(&self, value: &str) {
    self
      .editor
      .get_untracked()
      .borrow()
      .as_ref()
      .unwrap()
      .get_model()
      .unwrap()
      .set_value(value);
  }
}


#[derive(Clone, Copy, Debug)]
pub struct QueryState {
  #[allow(clippy::type_complexity)]
  pub sql_result: RwSignal<Option<(Vec<String>, Vec<Vec<String>>)>>,
  pub is_loading: RwSignal<bool>,
  pub saved_queries: RwSignal<BTreeMap<String, String>>,
}

impl Default for QueryState {
  fn default() -> Self {
    Self::new()
  }
}

impl QueryState {
  pub fn new() -> Self {
    Self {
      sql_result: create_rw_signal(None),
      is_loading: create_rw_signal(false),
      saved_queries: create_rw_signal(BTreeMap::new()),
    }
  }

[broxamson]

let me third the update for leptos documentation lol