Macro import_components

macro_rules! import_components {
    { #[$from:meta] } => { ... };
    {
    #[$from:meta]
    $( #[$meta:meta] )*
    $vis:vis $Component:ident $( , $( $tail:tt )* )?
  } => { ... };
    {
    #[$from:meta]
    $( #[$meta:meta] )*
    $Component:ident as $vis:vis $Name:ident $( , $( $tail:tt )* )?
  } => { ... };
}

This macro can be used to import JS React components for Rust consumption via wasm-bindgen.

Make sure that the components you import use the same React runtime as specified for wasm-react.

Example

Assume the JS components are defined and exported in /.dummy/myComponents.js:

import "https://unpkg.com/react/umd/react.production.min.js";

export function MyComponent(props) { /* … */ }
export function PublicComponent(props) { /* … */ }
export function RenamedComponent(props) { /* … */ }

Then you can import them using import_components!:

import_components! {
  #[wasm_bindgen(module = "/.dummy/myComponents.js")]

  /// Some doc comment for the imported component.
  MyComponent,
  /// This imported component will be made public.
  pub PublicComponent,
  /// You can rename imported components.
  RenamedComponent as pub OtherComponent,
}

Now you can include the imported components in your render function:

fn render(&self) -> VNode {
  h!(div).build(
    MyComponent::new()
      .attr("prop", &"Hello World!".into())
      .build(())
  )
}

Defining Custom Convenience Methods

MyComponent::new() returns an H<MyComponent> which can be used to define convenience methods by using a new extension trait:

trait HMyComponentExt {
  fn prop(self, value: &str) -> Self;
}

impl HMyComponentExt for H<MyComponent> {
  fn prop(self, value: &str) -> Self {
    self.attr("prop", &value.into())
  }
}

/* … */

fn render(&self) -> VNode {
  h!(div).build(
    MyComponent::new()
      .prop("Hello World!")
      .build(())
  )
}