payalabs / scalajs-react-bridge Goto Github PK

Requires japgolly/scalajs-react#556

scalajs-react v1.2.0 has a number of API changes that appear to be breaking for this tool. Supporting the new version would be awesome.

We could do type checking better in the macro itself and able to deal with #1

I'm trying to integrate your library but got the following error when compiling

[error] /path/to/my/scala/file.scala: not found: type JsWriter
[error] TagsInput(defaultValue = Seq("some", "default", "values"))()

My usage:

case class TagsInput(id: js.UndefOr[String]  = js.undefined, className: js.UndefOr[String] = js.undefined,
                     ref: js.UndefOr[String] = js.undefined, key: js.UndefOr[Any] = js.undefined,
                     defaultValue: js.UndefOr[Seq[String]] = js.undefined,
                     value: js.UndefOr[Array[String]] = js.undefined,
                     placeholder: js.UndefOr[String] = js.undefined,
                     onChange: js.UndefOr[js.Array[String] => Unit] = js.undefined,
                     validate: js.UndefOr[String => Boolean] = js.undefined,
                     transform: js.UndefOr[String => String] = js.undefined)
  extends ReactBridgeComponent

<.div(^.cls := "form-controls",
    TagsInput(defaultValue = Seq("some", "default", "values"))()
)

Can you please help me resolve this?

Currently, we blindly assume that if a property is of the Map type, the key must be of the String type and proceed to converting to a literal. We need to protect against other types of keys better.

This solution should be documented as it's an integral part:

#33

Hi,
I've tried to use react-select component through react bridge but got errors.

Uncaught Error: Cannot find module 'react-dom'
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `ItemsPage`.
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `ItemsPage`.
Uncaught TypeError: Cannot read property 'remove' of undefined

I've created repo with example for easy reproduce.
Thanks.

I'm sorry to open an issue on this, as its much less a scalajs-react-bridge issue than a react setup issue, but if anyone has expertise on this, I figure it is you.

In order to wrap an component, what setup do you have to do so that react-bridge can find it? I'm currently using scalajs-bundler to bundle npm components into webpack, which I assume makes components available in JS land via require. But what do you have to do in the scalajs side so that it is visible to be wrapped?

Hi !

Trying to create a facade for antd, specially antd.Table
The following minimalistic facade works:

package facades.antd.data
import com.payalabs.scalajs.react.bridge.{ReactBridgeComponent, WithProps}
import japgolly.scalajs.react.raw.React

import scala.scalajs.js
import scala.scalajs.js.annotation.JSImport

object Table extends ReactBridgeComponent {

  @js.native
  trait ColumnProps[T] extends js.Object {
    var title: React.Node
    var key: String
    var render: js.UndefOr[(js.Dynamic, T, Int) => React.Node] // text, record, index => Node
    var dataIndex: String
  }

  @JSImport("antd", "Table")
  @js.native
  object RawComponent extends js.Object

  override lazy val componentValue = RawComponent

  def apply[T](columns: js.Array[ColumnProps[T]], dataSource: js.Array[T], bordered: Boolean = false, childrenColumnName: js.UndefOr[js.Array[String]] = js.undefined): WithProps =
    auto

}

Used like this:

  @JSExportAll
  case class User(name: String, email: String)
        Table[User](
          columns = (0 to 1)
            .map(
              e => {
                val cp = new js.Object().asInstanceOf[ColumnProps[User]]
                cp.title = <.span(e.toString).rawElement
                cp.key = e.toString
                cp.dataIndex = "name"
                cp
              }
            )
            .toJSArray,
          dataSource = (0 to 100)
            .map(e => {
              User(s"User $e", s"[email protected]")
            })
            .toJSArray
        )()

I would like to use the same "easy" writing style (e.g. apply the rewrite macro) I can use in the apply method, for ColumnProps (e.g. VdomNode instead of .rawElement, etc.)

anyone can help me with that?

First of all, thank you for this great library!

I am trying to use it to declare a facade for https://github.com/moroshko/react-autosuggest. One of the properties of this component (renderSuggestion) is a render function, which should return a React component. I tried declaring it as a function (...) => CallbackTo[VdomNode], but when I do this I get a compilation error: value toJs is not a member of <notype> on the autoNoChildren macro.

Is this functionality supported? If so, how should I declare this property?

Thank you!

I followed your instructions as

• Create a simple element

case class TagsInput(id: js.UndefOr[String]  = js.undefined, className: js.UndefOr[String] = js.undefined,
                     ref: js.UndefOr[String] = js.undefined, key: js.UndefOr[Any] = js.undefined,
                     defaultValue: js.UndefOr[Seq[String]] = js.undefined,
                     value: js.UndefOr[Array[String]] = js.undefined,
                     placeholder: js.UndefOr[String] = js.undefined,
                     onChange: js.UndefOr[js.Array[String] => Unit] = js.undefined,
                     validate: js.UndefOr[String => Boolean] = js.undefined,
                     transform: js.UndefOr[String => String] = js.undefined)
  extends ReactBridgeComponent

• Use the case class in another component

import com.payalabs.scalajs.react.bridge._

<.div(^.cls := "form-controls",
    TagsInput(defaultValue = Seq("foo", "bar"))()
)

Both scalajs-react-bridge and react-tagsinput.js are added in the SBT as following

val scalajsDependencies = Def.setting(Seq(
    ...
    "com.payalabs" %%% "scalajs-react-bridge" % "0.2.0-SNAPSHOT"
))

val jsDependencies = Def.setting(Seq(
    // react.js
    "org.webjars.bower" % "react" % Versions.reactjs
      / "react-with-addons.js"
      minified "react-with-addons.min.js"
      commonJSName "React",

    "org.webjars.bower" % "react" % Versions.reactjs
      / "react-dom.js"
      minified  "react-dom.min.js"
      dependsOn "react-with-addons.js"
      commonJSName "ReactDOM",

    "org.webjars.bower" % "react" % Versions.reactjs
      / "react-dom-server.js"
      minified  "react-dom-server.min.js"
      dependsOn "react-dom.js"
      commonJSName "ReactDOMServer",

    ...

    ProvidedJS / "external/js/react-tagsinput/react-tagsinput.js"
      minified "external/js/react-tagsinput/react-tagsinput.js"
      dependsOn "React"
  ))

The app is compiled successfully by SBT. But when loading the page using the TagsInput component, I got the following message

Warning: React.createElement: type should not be null, undefined, boolean, or number. 
It should be a string (for DOM elements) or a ReactClass (for composite components). 
Check the render method of `ProfilePage`.

Do you know how to resolve this?

Any chance for a new release? There's been quite a few additions and I've found myself needing to patch in stuff that already exists since the last one.

I tried the last few hours to get a JsWriter[A | B] working, but without any success. Maybe someone else got an idea?

Bridge doesn't have possibilities to use scalajs-react MonocleReact/ScalazReact without workarounds.

Hi

Is it still possible to use this project? sbt doesn't like the documented way to include it:

sbt.ResolveException: unresolved dependency: com.payalabs#scalajs-react-bridge_sjs0.6_2.11;0.4.0-SNAPSHOT: not found

Hi There,

Considering following code:

object TagsInput extends ReactBridgeComponent {
  def apply(defaultValue: js.UndefOr[Seq[String]] = js.undefined,
            value: js.UndefOr[Seq[String]] = js.undefined,
            placeholder: js.UndefOr[String] = js.undefined,
            onChange: js.UndefOr[js.Array[String] => Callback] = js.undefined,
            validate: js.UndefOr[String => CallbackTo[Boolean]] = js.undefined,
            transform: js.UndefOr[String => CallbackTo[String]] = js.undefined): WithPropsNoChildren = autoNoChildren
}

Is it possible to get Ref of TagInput:

div(
  TagsInput(value = Seq("foo","bar"), onChange = printSequence _).withRef(ref)
)

Regards,

Syed

having same name as js component will leads to confusion !
example :
material ui expose a component TextField , as TextField is generic we must check package while importing :s , i prefer adding a prefix/suffix MuiTextField

i see you have config for name space instead of that let the user define final name ( namespace.jsname= mui.TextField / ReactTags) ?

Hi Ramnivas,
I've already posted same issue.

I've tried to use react-select component through react bridge but got errors.

Uncaught Error: Cannot find module 'react-dom'
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `ItemsPage`.
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `ItemsPage`.
Uncaught TypeError: Cannot read property 'remove' of undefined

I've created repo with example for easy reproduce.

You've closed issue with comment

I tried the example app you provided. I am getting the same error even when I remove the scalajs-react-bridge dependency (along with the Select component). So the issue seems to be with how react dependencies are pulled in and not with scalajs-react-bridge. I don't have much experience with js dependencies through build.sbt (I use webpack instead as shown in https://github.com/payalabs/scalajs-react-bridge-example).

I am closing the issue since it seems unrelated to scalajs-react-bridge.

I followed your comment and fix js dependency error but I still get errors on wrong react element creation.

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `ItemsPage`.
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `ItemsPage`.

Maybe you can help me with this. Sample repo was updated.

Just FYI, scalajs-react 1.4.0 changes some implicits, leading to missing methods while linking with 0.7.0, which is compiled against 1.3.1.

Update of scalajs-react dependency version and recompilation is enough to make it work.

You need to send a pull request updating https://github.com/scala-steward-org/repos/blob/master/repos-github.md, then you'll automatically get pull requests with library dependency updates

Hi,
maybe I'm doing this wrong, but I think only this works:

 onClose: () => Callback

and not this:

 onClose: Callback

imo the second variant would be nice to have

We're generating JsWriters with macros and it seems that value toJs is not a member of <notype> is regressing from issue #36

When using ^.key := "key" with react bridge components the key isn't applied to the component.
This is due to a bug in the function com.payalabs.scalajs.react.extractPropsAndChildren - a call to addKeyToProps() is missing on the builder.

Ran into an issue when eradicating scala.collection.Seq from the codebase in favor of scala.collection.immutable.Seq after seeing mutable structures being passed around. Turns out the immutable seq wasn't being JsWriter.toJsd, changing it to a js.Array meant that the values inside the array/seq weren't being toJsd, so had to declare the field in the wrapper as being explicitly a scala.collection.Seq. Would be nice to have a JsWriter for immutable Seqs

Case1

i have MuiMenu component ,it accepts a array of js object for menuItems prop,

its more safe to accept menuItems : JArray[MuiMenuItem] instead of JArray[js.Object]

and in macro we just do
p.updateDynamic("menuItems")(menuItems.map(_.toJson))

it'll be simple to implement , one way is we just define a trait JSScalaType with an abstract method toJson ... and end user must extend that .. (Note: names are arbitary .. )

Case2

some props of js component accepts only few values of a type

menuType : ReactProps.oneOf(LINK,SUBHEADER)

in my code i am using value classes for this purpose ..

menuType: js.UndefOr[MuiMenuItemType] = js.undefined


class MuiMenuItemType private(val name: String) extends AnyVal

object MuiMenuItemType {

  val SUBHEADER = new MuiMenuItemType("SUBHEADER")
  val LINK = new MuiMenuItemType("LINK")
  val NESTED = new MuiMenuItemType("NESTED")

  def newType(name: String) = new MuiMenuItemType(name)


}

// while passing to js comp i am accessing its public field
    menuType.foreach(v => p.updateDynamic("menuType")(v.name))

any thoughts on how we can handle this case2 ..

Maybe I'm being a little dense but should we be able to set the key for a given component as shown in the scala-js-react docs? Can't seem to get anything working.

Currently, we transform Seq and Map parameters to case classes to js.Array and literal, but still require parameters to callback functions to be of js types (see onChange of TagsInput for example). It will be nice to allow callbacks to specify normal Scala types.

Hi,

I see that #46 is merged quite a while ago.

Could you please consider having a release with these changes?

Thanks in advance!

So this error appears and it really isn't clear what it means or what it relates to.

I ran into this error when I created the Navbar, Nav, NavbarHeader, NavbarBrand. It broke the javascript and nothing is rendered.

Do you have any clue how I can fix this?

client-jsdeps.js:22536Warning: Unknown props `bsClass`, `bsStyle`, `expanded`, `onToggle` on <nav> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in nav (created by Navbar)
    in Navbar (created by Uncontrolled(Navbar))
    in Uncontrolled(Navbar) (created by Router)
    in div (created by Router)
    in div (created by Router)
    in Routerwarning @ client-jsdeps.js:22536warnUnknownProperties @ client-jsdeps.js:10112handleElement @ client-jsdeps.js:10123onBeforeMountComponent @ client-jsdeps.js:10128(anonymous function) @ client-jsdeps.js:10165emitEvent @ client-jsdeps.js:10162onBeforeMountComponent @ client-jsdeps.js:10409mountComponent @ client-jsdeps.js:14463performInitialMount @ client-jsdeps.js:6390mountComponent @ client-jsdeps.js:6264mountComponent @ client-jsdeps.js:14467performInitialMount @ client-jsdeps.js:6390mountComponent @ client-jsdeps.js:6264mountComponent @ client-jsdeps.js:14467mountChildren @ client-jsdeps.js:12817_createInitialChildren @ client-jsdeps.js:7780mountComponent @ client-jsdeps.js:7605mountComponent @ client-jsdeps.js:14467mountChildren @ client-jsdeps.js:12817_createInitialChildren @ client-jsdeps.js:7780mountComponent @ client-jsdeps.js:7605mountComponent @ client-jsdeps.js:14467performInitialMount @ client-jsdeps.js:6390mountComponent @ client-jsdeps.js:6264mountComponent @ client-jsdeps.js:14467performInitialMount @ client-jsdeps.js:6390mountComponent @ client-jsdeps.js:6264mountComponent @ client-jsdeps.js:14467mountComponentIntoNode @ client-jsdeps.js:12180perform @ client-jsdeps.js:18733batchedMountComponentIntoNode @ client-jsdeps.js:12201perform @ client-jsdeps.js:18733batchedUpdates @ client-jsdeps.js:10503batchedUpdates @ client-jsdeps.js:16382_renderNewRootComponent @ client-jsdeps.js:12360_renderSubtreeIntoContainer @ client-jsdeps.js:12446render @ client-jsdeps.js:12467$c_Ladmin_Admin$.main__V @ Admin.scala:16$c_Ladmin_Admin$.$$js$exported$meth$main__O @ Admin.scala:14$c_Ladmin_Admin$.main @ Admin.scala:14(anonymous function) @ client-launcher.js:2
client-jsdeps.js:22536 Warning: Unknown props `fluid`, `componentClass` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Grid)
    in Grid (created by Navbar)
    in nav (created by Navbar)
    in Navbar (created by Uncontrolled(Navbar))
    in Uncontrolled(Navbar) (created by Router)
    in div (created by Router)
    in div (created by Router)
    in Router