Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 16:07
    jeluyapp opened #573
  • Jun 22 05:59

    shadaj on main

    Update sbt-scalafix to 0.10.0 (… (compare)

  • Jun 22 05:59
    shadaj closed #564
  • Jun 22 05:59

    shadaj on main

    Update sbt-sonatype to 3.9.13 (… (compare)

  • Jun 22 05:59
    shadaj closed #571
  • Jun 20 23:43

    shadaj on main

    Have Scala Steward always updat… (compare)

  • Jun 20 23:40
    shadaj synchronize #536
  • Jun 20 23:40

    shadaj on main

    Update sbt-idea-plugin to 3.13.… (compare)

  • Jun 20 23:40
    shadaj closed #565
  • Jun 20 17:40

    shadaj on fix-docs-ssr

    (compare)

  • Jun 20 17:39

    shadaj on main

    Fix docs SSR unnecessarily depe… (compare)

  • Jun 20 17:39
    shadaj closed #572
  • Jun 20 17:16
    shadaj opened #572
  • Jun 20 17:16

    shadaj on fix-docs-ssr

    Fix docs SSR unnecessarily depe… (compare)

  • Jun 04 19:24
    shadaj commented #569
  • May 24 20:12
    scala-steward opened #571
  • May 24 16:42
    evbo commented #330
  • May 19 13:48
    evbo commented #196
  • May 13 10:51
    scala-steward closed #542
  • May 13 10:51
    scala-steward commented #542
nafg
@nafg
Slinky comes ready with full integration with familiar tools like [...] React DevTools.
For instance with scalajs-react props and state that are scala objects are very hard to understand in react dev tools
Does Slinky do something special to improve on this?
Fabio Epifani
@epifab
:wave: is Slinky ready for Scala 3? I've noticed the annotation package is missing...
Alexis Hernandez
@AlexITC
Slinky 0.7.0 supports scala 3, the drawback is that the @react macro won't work
Fabio Epifani
@epifab
I am new to Slinky, is there an example of defining components without those annotations?
shadaj
@shadaj:matrix.org
[m]
@epifab: take a look at the component styles section of https://slinky.dev/docs/writing-components/
the macro annotation was designed to not do too much magic, so it just compiles down to the regular API
@nafg: yep, that's exactly one of the things we do; in dev mode the Scala components use reader/writer pairs to make the states easier to view in the devtools
Fabio Epifani
@epifab
@shadaj:matrix.org thanks. is there an equivalent for ExternalComponentWithRefType?
shadaj
@shadaj:matrix.org
[m]
@epifab: you can just use that in Scala 3! The @react annotation on external components only adds the nice apply method, but doesn't do any other rearranging.
Fabio Epifani
@epifab
ah great. thank you!
the problem I have now though is method deriveWriter in trait MacroWriters does not match type slinky.readwrite.Writer[Props]
Fabio Epifani
@epifab
hmm strange, it seems to work if the props case class includes up to 27 properties. with 28 properties it throws method summonAll is declared as erased, but is in fact used
and from 29 properties the errors I mentioned before
feels like a bug
Fabio Epifani
@epifab
nafg
@nafg
@shadaj:matrix.org meaning that the objects passed to react under the hood are not the user's Scala object but a serialization of it?
shadaj
@shadaj:matrix.org
[m]
Yeah, only for supported types in dev mode with hot-reloading enabled however. If you use a custom unknown type Slinky will just pass it through as-is.
jmaamo
@jmaamo
Hi There! I'm doing some research on react/scala-js that somehow lead me to slinky. With my limited experience, I was wondering how routing is best implemented in slinky. Thanks for the help.
Alexis Hernandez
@AlexITC
@jmaamo react-router-dom is the way I have saw more frequently, be sure to check these:
jmaamo
@jmaamo
Thanks, @AlexITC - i'll definitely check these out.
jmaamo
@jmaamo
@AlexITC/@shadaj:matrix.org - I just want to let you all know that I'm progressing well in my research work. So far, I'm extremely happy with what I learned. I believe what you guys are doing are phenomenal !!!
Jason Pickens
@steinybot
Is there a way to improve errors like this:
...
react-dom.development.js:12657 The above error occurred in the <Component> component:

    at eval (webpack:///./target/scala-2.13/client-fastopt/slinky.core.FunctionalComponent.js?:77:59)
    at eval (webpack:///./target/scala-2.13/client-fastopt/slinky.core.FunctionalComponent.js?:77:59)
    at eval (webpack:///./target/scala-2.13/client-fastopt/slinky.core.FunctionalComponent.js?:77:59)
    at eval (webpack:///./target/scala-2.13/client-fastopt/slinky.core.FunctionalComponent.js?:77:59)
shadaj
@shadaj:matrix.org
[m]
@steinybot: is your app built in Scala.js dev mode? source maps should load and the name of the component should have been updated to the name of the containing object
Jason Pickens
@steinybot
I think it is built in dev mode (I’ll double check). In previous projects I’ve had a lot of problems getting source maps and stack traces to work properly (in so far that I had to customise the webpack plugin and write a custom error mapper).
What would show the name in this case? Is it Slinky that would replace the eval with the component? Source maps by themselves would only map FunctionalComponent.js to FunctionalComponent.scala right?
jmaamo
@jmaamo
Any idea how to implement "tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}" in slinky?
peterstorm
@peterstorm:matrix.org
[m]
What’s the pattern in Scala 3 without the react annotation for functional components?
Alexis Hernandez
@AlexITC
I just migrated one library to Scala 3 and I'm migrating some apps, the simplest way is to do by hand what @react does (example), this way, you don't need to change the way you create components
peterstorm
@peterstorm:matrix.org
[m]
AlexITC (Alexis Hernandez): Exactly what I was looking for, thanks!
Dan Di Spaltro
@dispalt
@shadaj:matrix.org to fix that stack trace issue @steinybot is talking about, we ended up going with this solution https://gist.github.com/dispalt/741121b9e90fc0969bcd5a2292a348f0 basically the inlining makes the stack trace point to the callsite
peterstorm
@peterstorm:matrix.org
[m]
Anyone got an example of styled-components and slinky for Scala3?
peterstorm
@peterstorm:matrix.org
[m]
Also, if anyone has an example of using cats effect with Slinky it would be immensely helpful!
Alexis Hernandez
@AlexITC
I think that's very unlikely to work decently as the approaches are somewhat incompatible, you can get better luck with https://github.com/raquo/laminar (which isn't react)
shadaj
@shadaj:matrix.org
[m]
peterstorm: shouldn't be too tricky to cross-build the existing facade to Scala 3, since we don't use too many advanced features. Will look into it!
Also for Cats Effect, you'd probably need to set up some React hooks so that events can be propagated between the two systems. I'm not super familiar with using Cats Effect however, so not super sure what would be involved in detail.
peterstorm
@peterstorm:matrix.org
[m]
Awesome, thank you!
peterstorm
@peterstorm:matrix.org
[m]
shadaj: Yeah, I’m not entirely sure on how to do that interop either. I see Scala React has some interop done. I might check out how that’s is done, and see if I can port it.
evbo
@evbo

Hi, what unit testing frameworks are people using with slinky react components?

Waiting for scalajs to transpile slows down testing. I've done some pretty extreme things, like deembedding parts of my code into cross compiled scala/scalajs projects, where pure scala unit tests execute lightening fast, but this has limitations. Anyone figure out super fast way to unit test?

shadaj
@shadaj:matrix.org
[m]
In private Slinky projects, I've just used ScalaTest for the core UI, and try to move as much code as possible into shared folders (as you described) so that more tests can run on the JVM.
2 replies
evbo
@evbo
Yeah me too, where this gets tricky though is when you need to unit test a component. What I've done is store ReactComponents as JVM Objects and then the if/else for/each and other logic structures live in JVM code that just returns the end result list of components to display. But this is the only work around I've found but it's pretty clunky
evbo
@evbo
also, I noticed my slinky code is failing CSP since my policy does not allow unsafe-inline. I have lots of react buttons that have onClick handlers as well as inline style. Are these both no-nos for CSP? What are easy work arounds? I like inline onClick and styles, is there are a way to get the best of both worlds?
shadaj
@shadaj:matrix.org
[m]
Hmm, when you set onClick handlers through React you should be fine CSP wise. But you won't be able to create inline style tags so you will have to just set style properties locally perhaps?
2 replies
evbo
@evbo
Thanks!

I'm wondering if anyone in the slinky community does any code-splitting? I've been generating some bigger bundle sizes and was just reading about React.lazy, but unfortuntely did that not get implemented in Slinky?:
shadaj/slinky#196

Are there other workarounds people use to code-split and lazy load their app progressively? This was a good read for anyone not familiar:
https://www.freecodecamp.org/news/how-to-use-react-lazy-and-suspense-for-components-lazy-loading-8d420ecac58/

shadaj
@shadaj:matrix.org
[m]
Ah yeah we should get React.lazy in now, shouldn't be too much work. On bundle splitting that's something on my backlog (I want to set up a new template that has split modules by default), but haven't put it together just yet.
evbo
@evbo
awesome! I'm looking forward to it thanks
evbo
@evbo
also, how does one know which version of React the latest slinky is compatible with. Is it safe to always assume the latest React will always work?
shadaj
@shadaj:matrix.org
[m]
yeah, React makes breaking changes very infrequently, and Slinky doesn't use any private APIs so generally the latest React will just work