by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 31 03:00
    scala-steward opened #378
  • May 31 01:02

    shadaj on master

    Allow exporting external compon… (compare)

  • May 31 01:02
    shadaj closed #377
  • May 31 01:02
    shadaj closed #336
  • May 30 23:47
    shadaj opened #377
  • May 30 23:47
    shadaj milestoned #377
  • May 30 23:46

    shadaj on external-component-export

    Allow exporting external compon… (compare)

  • May 30 21:46
    shadaj closed #304
  • May 30 21:46
    shadaj edited #304
  • May 30 21:46

    shadaj on master

    Add facades for the `act` testi… (compare)

  • May 30 21:46
    shadaj closed #376
  • May 30 20:38
    shadaj synchronize #376
  • May 30 20:38

    shadaj on act-facade

    Run scalafmt (compare)

  • May 30 20:33
    shadaj opened #376
  • May 30 20:33
    shadaj milestoned #376
  • May 30 20:33

    shadaj on act-facade

    Add facades for the `act` testi… (compare)

  • May 29 23:17

    shadaj on master

    Update sbt-scalafix to 0.9.16 (… (compare)

  • May 29 23:17
    shadaj closed #374
  • May 29 23:17

    shadaj on master

    Update sbt to 1.3.11 (#375) (compare)

  • May 29 23:17
    shadaj closed #375
Shadaj Laddad
@shadaj
@mvillafuertem you might be able to user Server Side Rendering APIs (https://reactjs.org/docs/react-dom-server.html), but not too many options otherwise since Slinky just forwards to the internal React model for elements
1 reply
ThirdLaw Development
@3rdLaw
Hi I am new to slinky and react, so I'm probably doing something wrong here, but I made the follow small update to the starter project (adding the ListComponent below), and despite providing the recommended key prop to Fragment, I'm still getting the Warning: Each child in a list should have a unique "key" prop. msg in the console on page load?
@react class App extends StatelessComponent {
  type Props = Unit

  def render() = {
    org.scalajs.dom.console.info("Hi!")
    div(className := "App")(
      header(className := "App-header")(
        img(src := ReactLogo.asInstanceOf[String], className := "App-logo", alt := "logo"),
        h1(className := "App-title")("Welcome to React (with Scala.js!)")
      ),
      ul(className := "listClassName", key := "abc1234")(
        Range(0, 5).map(x => ListComponent(x, x.toString + "abc"))
      )
    )

  }
}

@react object ListComponent {
  case class Props(id: Int, name: String)
  val component = FunctionalComponent[Props] { props =>
    Fragment(key := props.id.toString)(
      li(className := "feed-li")(s"${props.id}, ${props.name}")
    )
  }
}
Shadaj Laddad
@shadaj
@3rdLaw when you generate many elements in Range(0, 5).map(x => ListComponent(x, x.toString + "abc")), you need to assign a key to each of them with .withKey() (https://slinky.dev/docs/writing-components/). You shouldn't need a fragment in ListComponent since the array is getting created at a higher level.
ThirdLaw Development
@3rdLaw
Thanks @shadaj !
Todd O'Bryan
@toddobryan
If anyone saw my question earlier, I figured it out. I was using -> instead of => in Scala. There are too many languages! :-)
Todd O'Bryan
@toddobryan
I'm trying to use Play for my server backend and Slinky for my client frontend. Does anyone have an example of this set-up anywhere? I feel like I'm pretty close, but I'm not sure which plugins I need to use and enable on which subproject to get everything to just magically work. (Right now, I'm getting an error "Uncaught ReferenceError: require is not defined at React.scala:66" which points to the third line of:
@js.native
@JSImport("react", JSImport.Namespace, "React")
private[slinky] object ReactRaw extends js.Object {
  def createElement(
Todd O'Bryan
@toddobryan
I think that means that Slinky can't find some JS dependency, but I'm having trouble figuring out where the problem is.
Todd O'Bryan
@toddobryan
I think the problem is that I'm trying to use ScalaJS 1, but Play-Json doesn't have support, yet.
Øyvind Raddum Berg
@oyvindberg
"require is not defined" means you have to run webpack to make a javascript bundle with all the dependencies, like react. I have no idea about play, but typically scalajs-bundler does that
Todd O'Bryan
@toddobryan

Yeah. I have

    npmDependencies in Compile ++= Seq(
      "react" -> "16.13.1",
      "react-dom" -> "16.13.1"
    )

in my client settings, as well as enablePlugins(ScalaJSPlugin, ScalaJSWeb, ScalaJSBundlerPlugin), but I don't think everything is integrating the way it's supposed to.

(Or, rather, I don't think I'm using the incantations in the way I should be to get them to all work.)
I guess what I should do is start with something much simpler and try adding pieces one at a time, so that I have some idea where the problem is.
Todd O'Bryan
@toddobryan
OK. I've gotten things working, given up on Play, and am trying to just create a simple server/client thing.
Octav Zaharia
@octavz
hi, can anyone point me to some example on how to use the router i am evaluating the library for a project but I have troubles finding some examples or tutorials. thank you.
Octav Zaharia
@octavz
I found the only place where router is used in the docs, but it is unclear to me how to use it with FunctionalComponents and props
i get errors like:
Uncaught org.scalajs.linker.runtime.UndefinedBehaviorError: java.lang.ClassCastException: undefined is not an instance of java.lang.String
Todd O'Bryan
@toddobryan
@octavz Which router do you mean?
Octav Zaharia
@octavz
react-router the one coming with the lib
@toddobryan
Todd O'Bryan
@toddobryan
It doesn't actually "come with" the lib, I don't think. You have to add react-router-dom as a separate dependency in the same way you add react and react-dom to the project in build.sbt.
Octav Zaharia
@octavz
I did that and basic works, but I have no clue how to use it with props
I am obviously new to this, but I am familiar with react and Scala, Scala. js and slinky don't really click for me 100% at this point, so any help would be appreciated. thank you.
Todd O'Bryan
@toddobryan
I'm in the same boat, actually. Just started yesterday.
So my question is, how do you deal with children of a Slinky-defined component? I think I checked everywhere in the docs, and there's no example of a component that you've defined in Scala with children, either just plain HTML or other components.
Øyvind Raddum Berg
@oyvindberg
@octavz You should post a (preferably minimized) code sample of what you're trying to do
it's impossible to guess otherwise
that error message is scala.js way of telling you that you're not getting the object you're expecting
you have said something along the lines of class Foo {def bar: String}, but at runtime you're not getting a Foo, you're getting an empty object - something like that
click into your browsers debugger to see what exactly failed, set breakpoint and inspect and most of the time it becomes obvious
Todd O'Bryan
@toddobryan
If I'm trying to provide typings for an external component (as https://slinky.dev/docs/external-components/ ), what should the type be for the children prop? Or do the children get handled automatically?
Øyvind Raddum Berg
@oyvindberg
It's automatic, it's handled through a builder-like thing which is instantiated when you use it
Octav Zaharia
@octavz
@oyvindberg I thought I explained quite clearly, how do I use the router with a FunctionalComponent that has props? it works w/o props, but I don't knos how to pass props. I would show some code if I knew how to write it. I need the simplest example to start with. thank you.
Øyvind Raddum Berg
@oyvindberg
render instead of component, probably
Hernancito
@hernansaab
Sometimes doing facades on components can be extremely heavy, for example react-beautiful-dnd:
Here is a link to a facade for scalajs
The problem is that since slinky does not have this implementation, I have to copy it from scala-js-react
And you guys have not deployed slinky-scalajsreact-interop for scala 2.13
This means I have to re adapt my project to an older version of scala. Is there a way out of this ugly problem?
Hernancito
@hernansaab
correction, your interop does not support scalajs 1.X
Mathieu Prevel
@mprevel

Hi everybody!

I'm new to slinky (and react) and I try to add a "onKeyPress" event to a div with no success.

import org.scalajs.dom.html.Div
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.web.SyntheticKeyboardEvent
import slinky.web.html.className
import slinky.web.html.div
import slinky.web.html.onKeyPress

@react object MyTest {
  type Props = Unit

  val component: FunctionalComponent[Props] = FunctionalComponent[Props] { _ =>
    def handleKeyPress(e: SyntheticKeyboardEvent[Div]): Unit = println(e.key)
    div(className := "test")(
      onKeyPress := { handleKeyPress(_) },
      "Hello"
    )
  }
}

Any idea on what's wrong with my code ?

I mean it does not compile.
overloaded method := with alternatives:
[error]   (v: Option[() => Unit])slinky.core.OptionalAttrPair[slinky.web.html._onKeyPress_attr.type] <and>
[error]   (v: () => Unit)slinky.core.AttrPair[slinky.web.html._onKeyPress_attr.type] <and>
[error]   [T <: slinky.core.TagElement](v: slinky.web.SyntheticKeyboardEvent[T#RefType] => Unit): slinky.core.AttrPair[T]
[error]  cannot be applied to (slinky.web.SyntheticKeyboardEvent[org.scalajs.dom.html.Div] => Unit)
[error]       onKeyPress := { handleKeyPress(_) },
[error]                  ^
[error] one error found
Vitaly Lavrov
@lavrov
Moving onKeyPress to the first parameter list solves the problem
    div(className := "test", onKeyPress := { handleKeyPress(_) })(
      "Hello"
    )
Mathieu Prevel
@mprevel
@lavrov thanks. I had another issue previously on the first parameters but it disappeared with this small sample. I should have retried.
zetashift
@zetashift
Sorry for the smallest of small nitpicks, but shouldn't the react-anotation label for the issues page: https://github.com/shadaj/slinky/issues be named react-annotation?
Shadaj Laddad
@shadaj
@zetashift haha good catch! trying to type fast also means occasionally losing a character here and there
@octavz are you passing the functional component to a Route? or are you trying to render some children of a Route with a functional component? I could imagine some weird behavior happening with the former, higher-order components are a bit tricky in general
Hernancito
@hernansaab
Where are the tests for these libraries, specifically react-dnd? Adapting the examples from js is not straightforward sometimes