Everything about Slinky -- issues, ideas for features, where it's being used, and more
```
[warn] Note: Unresolved dependencies path:
[error] stack trace is suppressed; run 'last update' for the full output
[error] (update) sbt.librarymanagement.ResolveException: Error downloading me.shadaj:slinky-styled-components_sjs1_2.13:0.1.0
[error] Not found
[error] Not found
[error] not found: C:\Users\phn\.ivy2\local\me.shadaj\slinky-styled-components_sjs1_2.13\0.1.0\ivys\ivy.xml
[error] not found: https://repo1.maven.org/maven2/me/shadaj/slinky-styled-components_sjs1_2.13/0.1.0/slinky-styled-components_sjs1_2.13-0.1.0.pom
[error] Total time: 1 s, completed 07-10-2020 16:58:47
@sidnt it will probably involve a fair bit of effort, but as @noelwelsh said we're not doing too many things that aren't supported by Dotty. The biggest missing thing right now is macro annotations, but I believe the team is aware of this so hopefully there will be a nice solution soon
Is there any information on how to create facades for custom reactnative components? I'm trying to create a facade for: https://github.com/wxik/react-native-rich-editor but I'm getting errors when I try to run it in Expo. This is my code:
package hello.world
import slinky.core.ExternalComponentWithRefType
import slinky.core.annotations.react
import scala.scalajs.js
import scala.scalajs.js.annotation.JSImport
@js.native
trait RichEditorInstance extends js.Object {
}
@react object RichEditor extends ExternalComponentWithRefType[RichEditorInstance] {
case class Props(style: js.UndefOr[js.Object] = js.undefined)
@js.native
@JSImport("react-native", "RichEditor")
object Component extends js.Object
override val component = Component
}
the code does compile
@darkfrog26 nice to see you around, it's simpler to use https://scalablytyped.org/ to generate those for you, be sure to check https://github.com/ScalablyTyped/SlinkyDemos
ill see if i can figure that out
@/all I'm working on my personal statement for PhD applications, and wanted to put together a list of real-world uses of Slinky. If you're okay with your organization being mentioned in my statement as an example of a Slinky user, would love to hear about how you're using Slinky! (even if you'd prefer not to reveal the organization, would still love to hear about your experiences)
9 replies
I have
@JSImport("./assets/images/fish.png", JSImport.Default) @js.native object Fish extends js.Object
I am going back to this question by @msinton , since I am currently stuck on the same... In React Native, where do you place a local image in order for it to be found by the @JSImport?
Hi all, I'm sure I'm missing something really obvious here. I'm trying to add a checkbox like so:
input(`type` := "checkbox", id := thing, name := thing),
label(`for` := thing, thing)but of course for does not exist. Perhaps I don't need the label, but I'd like to understand how to define one. Thanks!
Took me some time to figure this out but works great
@shadaj @joan38 I've been using Play+Slinky so I'm curious to understand how you do all the routing/json/sse/streaming between the client and server with just Slinky. Or have I misunderstood and there is no jvm 'server' in this case?
I'm quite new to JS app dev generally so please feel free to spell out the obvious to me!
I'm quite new to JS app dev generally so please feel free to spell out the obvious to me!
@mn98 We don't use Play, but based on our experience, routing will be handled in client (we use React Router). In our case, the server (written in Scala) simply provides the API (a mix of REST and GraphQL); the client is otherwise disconnected from the server implementation.
You can see more details in https://www.youtube.com/watch?v=pBtsgex2gUE and https://www.youtube.com/watch?v=G4GQIbzMfjU
@mn98 or you can use https://github.com/lihaoyi/autowire if you want to call scala function in code which in reality will be call to server
small bug in documentation ( https://slinky.dev/docs/the-tag-api/ )?
input(onChange := (event) => {
println("the value of this input element was changed!")
})does not work - this works:
input(onChange := (event => {
println(s"the value of this input element was changed!")
}))Only difference are the parentheses.
hi, is there anything special needed to get
https://scalafiddle.io/sf/qJcjX5e/18 (couldn't make it work locally either)
onKeyPress working? Looks like it never gets called.https://scalafiddle.io/sf/qJcjX5e/18 (couldn't make it work locally either)
If you change your element to input, it works fine (unless the element has focus, it won't receive any key events):
input(
onClick:= (_ => println(s"MOUSE")),
onKeyPress:= (_ => println(s"KEYBOARD"))
)Also, onKeyPress is deprecated (but works), so you should be using onKeyDown (https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event)
Hi, I write a blog, translating the intro tutorial of react to Slinky. Before I publish it, I thought to get some feedback from Slinky cracks;).
Is there any example for functional components depending on generic types? apparently, def component[D] = FuncionalComponent[Props[D]] {...} is not enough
@react must annotate:
[error] - a class that extends (Stateless)Component,
[error] - an object that extends ExternalComponent(WithAttributes)(WithRefType)
[error] - an object defining a `val component = FunctionalComponent(...)`
[error] @react class RemoteDataLoaderComponent {I have tried some variations without luck
correction, my only approach until now is defining a base trait that uses the generic type, requiring to extend such component every time, I'd like to get to use functions only:
trait RemoteDataLoaderBase[D] {
case class Props(fetcher: () => Future[D], render: D => ReactElement)
val theComponent: FunctionalComponent[Props] = FunctionalComponent[Props] { ...}
}
@react object MyProductsSummaryLoader extends RemoteDataLoaderBase[GetTrackedProductsResponse] {
val component = theComponent
}
Another question, I'm struggling to force a refresh for the whole component, given react-faq, something as simple as this custom hook should be enough, but for some reason, it isn't, I have added debug logs, and the counter gets updated properly but the component isn't rendered again as expected:
def forceRefresh() = {
val (_, increment) = Hooks.useReducer[Int, Int](_ + _, 0)
() => increment(1)
}
thanks, it's basically the same as what I posted, I think my problem relates to a component that uses the
Hooks.setEffect(..., ""), which prevents the effect from running multiple times, unfortunately, I have no idea how to force such effect to run again without getting in executed indefinitely
Anyway, I ended up writing this: https://github.com/wiringbits/cazadescuentos/blob/master/lib/ui/src/main/scala/net/wiringbits/cazadescuentos/ui/components/RemoteDataLoaderBase.scala
I'm not 100% happy with the solution but it works, thanks for the help
@shadaj yeah really great work you and the Slinky community did -keep up the excellent work:). By the way I saw that the link not works anymore - here is the published one:
https://pme123.medium.com/slinky-doing-react-the-scala-way-f78ccf42bf8f
https://pme123.medium.com/slinky-doing-react-the-scala-way-f78ccf42bf8f