shadaj/slinky

Everything about Slinky -- issues, ideas for features, where it's being used, and more

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

https://github.com/shadaj/slinky/blob/master/core/src/main/scala/slinky/core/ExternalComponent.scala#L11

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

https://github.com/rpiaggio/scalajs-react-beautiful-dnd/tree/master/facade/src/main/scala/react/beautifuldnd

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

Where communities thrive

People

Repo info

Activity