Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 28 20:51
    scala-steward closed #611
  • Nov 28 20:51
    scala-steward commented #611
  • Nov 28 20:51
    scala-steward opened #616
  • Nov 24 20:11
    scala-steward closed #610
  • Nov 24 20:11
    scala-steward commented #610
  • Nov 24 20:11
    scala-steward opened #615
  • Nov 24 20:10
    scala-steward closed #603
  • Nov 24 20:10
    scala-steward commented #603
  • Nov 24 20:10
    scala-steward opened #614
  • Nov 24 20:10
    scala-steward closed #602
  • Nov 24 20:10
    scala-steward commented #602
  • Nov 24 20:10
    scala-steward opened #613
  • Nov 15 06:16
    scala-steward commented #536
  • Nov 15 06:16
    scala-steward opened #612
  • Nov 10 21:18
    scala-steward closed #609
  • Nov 10 21:18
    scala-steward commented #609
  • Nov 10 21:18
    scala-steward opened #611
  • Nov 05 01:25
    scala-steward opened #610
  • Nov 05 01:25
    scala-steward opened #609
  • Nov 02 23:37
    scala-steward opened #608
evbo
@evbo

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?

Domantas Petrauskas
@ptrdom
@evbo I doubt Slinky or Scala.js can help you with that, but there are different state handling libraries you could look into - https://frontendmastery.com/posts/the-new-wave-of-react-state-management/.
evbo
@evbo

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

asaadza
@asaadza
@shadaj:matrix.org fyi: scala 3.1.3 "Possibility to generate arbitrary class implementations in macros" - more interesting examples in the tests.
shadaj
@shadaj:matrix.org
[m]
@asaadza: interesting, I think we need a bit more to bring @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!
evbo
@evbo

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)!

shadaj
@shadaj:matrix.org
[m]
ah interesting, I guess if you could enable props readers/writers for all components that would work, but at a pretty heavy performance penalty
evbo
@evbo

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!

shadaj
@shadaj:matrix.org
[m]
yep! this would require some changes to Slinky though, so that the writers are automatically instantiated for each component (and then in dev mode those would be used, in prod mode they'd probably be nulled out)
it's a change that's intriguing to make, but may also be potentially chaotic since writing and reading can break things like referential equality
evbo
@evbo

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!

Ronaldo Alves de Abreu
@deabreu

Hi guys, could you help me with a REALY silly question? Please?

I know nothing about react development and I'm trying to run the slinky seed project as generated by sbt new.

As I run dev on sbt shell, a server is brought up. But in which port is it been set to run?

shadaj
@shadaj:matrix.org
[m]
@deabreu: by default, the server starts on port 8080
3 replies
evbo
@evbo

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?

evbo
@evbo
also, for over a year now React dropped render in favor of createRoot. Without this, you get a warning that your app will behave as a React 16 app. Do we want a PR for including createRoot or is that already in the wings?
evbo
@evbo
@shadaj:matrix.org submitted a PR for these both! Still a WIP but should give a rough idea
Arindam Ray
@ArinRayAtCornerStoneFS
@ArinRayAtCornerStoneFS
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.
shadaj
@shadaj:matrix.org
[m]
@ArinRayAtCornerStoneFS: ah, so you can't directly refer to nested paths 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
Arindam Ray
@ArinRayAtCornerStoneFS

@shadaj:matrix.org Thanks for responding
Something like

@js.native
@JSImport("react-native-fbsdk-next", "Settings")
object FbSdkSettings extends js.Object {
  def initializeSDK(): Nothing = js.native
}

Also results in the same error.

I've added to the SO question.
Arindam Ray
@ArinRayAtCornerStoneFS
Is there a good slinky-native sample mobile app that I could look at the source at?
In order to get ready answers for questions like - Could my main app component also be functional and if so what does the idiom look like in practice?

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)
Arindam Ray
@ArinRayAtCornerStoneFS
Also, is also something like this possible with Slinky? - https://dev.to/vladimirvovk/react-native-conditional-rendering-16eo
evbo
@evbo
has anyone thought about making a parser to convert html tags into Slinky code? Save a lot of time :)
Naftoli Gugenheim
@nafg
@evbo I think there are some half-baked ones IIRC, I wrote one for scalajs-react that requires it to be valid xml
Philip Reiner Kensche
@vinjana

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 server

and 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?

Alexis Hernandez
@AlexITC
usually it gets exposed at localhost:8080
check the logs to verify you do not got any errors printed
5 replies
TH Lim
@sshark

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

Alexis Hernandez
@AlexITC
I think that works right away with scalablytyped
TH Lim
@sshark
I will explore that but just in case scalablytped is not an option for me
evbo
@evbo

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) )

evbo
@evbo
I am using Scala3 by the way
Kobulyanskiy Roman
@burbaki
Hi guys. sorry for silly question. How can I wrap org.scalajs.dom.div, for instance, to ReactElement?I'm using thirdparty library, and it returns org.scalajs.dom._ types.
shadaj
@shadaj:matrix.org
[m]
@burbaki: so 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
@evbo: we could probably add an implicit for that, to help with referential equality anyways
Kobulyanskiy Roman
@burbaki
@shadaj:matrix.org Thanks a lot. I think that direct conversion is impossible, but had to ask. Thanks a lot.
evbo
@evbo
@shadaj:matrix.org thank you, and am I doing something totally wrong here?! On Scala3 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
evbo
@evbo
The weird thing is if I println(JSON.stringify(result)) it looks fine. But as soon as I try to set another variable with the expectant type it crashes
evbo
@evbo
to resolve, using js.Array works. I suspect this is an issue only for Scala3 because I don't remember this being an issue before
Binh Nguyen
@ngbinh
Hi, has anyone here successfully migrated a large codebase from scalajs-react to Slinky?
shadaj
@shadaj:matrix.org
[m]
@evbo: if your class extends 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
@ngbinh: learnraga.com used to be a fully scalajs-react website that was migrated to Slinky, was involved with that
Nigel Eke
@nigeleke
Just wondering - for Scala3 - what's the @react MyComponent... equivalent ?
evbo
@evbo

@nigeleke none yet I don't think :)

see discussion with examples here:
shadaj/slinky#569

@shadaj:matrix.org how hard would it be to Slinkify this do you think?

https://qwik.builder.io/

This one may be a keeper :)

shadaj
@shadaj:matrix.org
[m]
might be possible to fork Slinky's functional components support for it, I wonder how much it depends on analyzing the JS sources though