Everything about Slinky -- issues, ideas for features, where it's being used, and more
anyone thought of a good way to catch unnecessary renders with Scala/Slinky? I find it tough remembering all the various ways React shallow equality checking will decide if something must re-render or not... has anyone found clever ways for this to be caught as compile-time checks?
For instance, couldn't props be analyzed at compile-time to detect if re-renders will occur just based on prop argument types alone?
Thanks!
On a separate note, does slinky have a way of referencing the this keyword for e.g. a div? As is done here?:
https://stackoverflow.com/a/54109948/1080804
@react support since with this system clients can't access any APIs beyond what are defined in the Base type, but it's a promising step!
I posted here a few years ago asking but I'm wondering again if anyone has gotten this neat React library to work? I can run it successfully but the Slinky objects have unexpected JS names and so it is barely able to correctly log which components are rendering and why:
https://github.com/welldone-software/why-did-you-render
I'd love if someone from the Slinky community can share how they optimize re-rendering (if not this tool)!
Hmmm.. am I understanding correctly your suggestion is having val writer = Implicitly[Writer[MyProps]] for each component so that on the JS side the library can "see" them?
I'm pretty okay with implicitly defining writers if I can do so conditionally. Since this is dev only performance is probably least concern. Thanks, hopefully I understood correctly what you meant!
Very interesting. Maybe a separate library in Scala3 could write macros generating the writers, that way it stays isolated from slinky. You could run this library as a separate "dev" project in SBT that depends on your original source project (multi module build). I don't know about you guys, but I've been bundling lately with vite and this would be super simple and fast!
The hard part is of course inlining these expressions by passing a package name to a scala 3 macro and telling it to traverse all sub packages and apply these definitions for you everywhere an Object exists that contains a Props case class (I only use React Hooks exclusively so not sure how this would look for class-based)... but that sure sounds fun!
Anyone else implemented Suspense for data fetching? It's a little awkward, where React expects you to throw a Promise indicating a "pending" state!
But, thankfully Scalajs supports throwing arbitrary objects :)
Im wondering would this make a good PR for Slinky having a built-in so-called "PromiseWrapper" for Suspense to work with data fetching in addition to lazy components?
Hello, I have a question for Scala-js interop with JavaScript/TypeScript libraries here - https://stackoverflow.com/questions/73527626/importing-settings-initializesdk-from-react-native-fbsdk-next-fails-with-typeerr
Any insights will be appreaciated.
Settings.initializeSDK because that will be assumed to be a key "Settings.initializeSDK". Instead, you'll need to first define a nested variable that imports just Settings and then on that define a native initializeSDK function
Something like
@react object FunctionalApp {
case class Props(name: String)
val component = FunctionalComponent[Props] { _ =>
View(
style = literal(followed by
object Main {
if (LinkingInfo.developmentMode) {
hot.initialize()
}
@JSExportTopLevel("app")
val app = FunctionalApp
}passes sbt fastOptJs
But fails while rendering the app
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
This error is located at:
in RCTView (at View.js:32)
in View (at AppContainer.js:92)
in RCTView (at View.js:32)
in View (at AppContainer.js:119)
in AppContainer (at renderApplication.js:43)
in DanceApp(RootComponent) (at renderApplication.js:60)
Hi. I'm new to Slinky (and also JS in general). I have a problem getting the example to work. I created the default app and then run sbt dev. Now, I'd expect to see s.th. like URL for the server. Instead I get
[info] Starting webpack-dev-server
[success] Total time: 83 s (01:23), completed Oct 3, 2022, 3:34:52 PM
[info] sbt server started at local:///home/node/.sbt/1.0/server/775977e90c0248119ff3/sock
[info] started sbt serverand netstat -ae doesn't show any open ports. Note that I am running the whole thing in a node:18.10.0-based development container (with SBT, etc. added).
Is it correct, that I should actually see a message about localhost:8080? And then, what could be wrong? I'm not (yet) familiar with webpack and don't know how it determines what it does. A search also did not reveal anything about a webpack server running on a socket 8-/. How can I configure the webpack-started server that is started via sbt dev?
5 replies
It is possible to implement react-router-dom useParams()? I have implemented something like this but I get ClassCastException in val id = RouterDomHooks.useParams()
@js.native
@JSImport("react-router-dom", JSImport.Default)
object RouterDomHooks extends js.Object {
def useParams[T](): T = js.native
}Thanks
Is there a way to get setState callback to compile into js Functions for a facade?:
[error] |Found: (setSorting :
[error] | slinky.core.facade.SetStateHookCallback[
[error] | scalajs.js.Array[String]
[error] | ]
[error] |)
[error] |Required: scalajs.js.Function1[scalajs.js.Array[String], Unit]
[error] |I can get this to work by wrapping the setState like so, but it feels like too much boilerplate: MyFacade( (data:js.Array[String]) => setSorting(data) )
ReactElement corresponds to a JSX element being rendered by a React component, but is a different type than actual DOM values so there's no way to convert between the two; if you need to integrate a third-party library, the trick is to use refs to get a hold of the DOM node corresponding to a React element, and then having the library render contents to that node
Readercompiles fine but hits a Class Cast Exception with Seq: class Test(val labels: Seq[String]) extends js.Object
val r = implicitly[Reader[Test]]
val result: Test = r.read(js.Dynamic.literal(labels = js.Array("apple", "banana")))
val (labels, setLabels) = useState[Seq[String]](seq())
setLabels(result.labels)org.scalajs.linker.runtime.UndefinedBehaviorError: java.lang.ClassCastException: apple,banana is not an instance of scala.collection.immutable.Seq
js.Object, Slinky completely bypasses readers and just casts the JS value into the class; you'll want case class Test(labels: Seq[String]) for the reader to do its magic
@shadaj:matrix.org how hard would it be to Slinkify this do you think?
This one may be a keeper :)