Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 20 00:15
    armanbilge synchronize #511
  • Oct 18 19:45
    shadaj demilestoned #233
  • Oct 18 19:37
    shadaj commented #494
  • Oct 17 23:14
    armanbilge opened #511
  • Oct 14 13:17
    oleg-py synchronize #494
  • Oct 14 12:39
    oleg-py synchronize #494
  • Oct 13 05:25
    shadaj commented #494
  • Oct 11 08:31
    oleg-py synchronize #494
  • Oct 11 08:20
    oleg-py synchronize #494
  • Oct 11 07:34
    oleg-py synchronize #494
  • Oct 11 07:23
    oleg-py synchronize #494
  • Oct 09 19:58
    shadaj commented #494
  • Oct 06 20:04
    scala-steward commented #497
  • Oct 06 20:04
    scala-steward closed #497
  • Oct 06 20:04
    scala-steward opened #510
  • Sep 16 23:01
    scala-steward closed #500
  • Sep 16 23:01
    scala-steward commented #500
  • Sep 16 23:01
    scala-steward opened #509
  • Sep 15 00:26
    scala-steward closed #481
  • Sep 15 00:26
    scala-steward commented #481
evbo
@evbo
I always thought case class was the way to go, sorry if I missed it in the docs somewhere to use class. Just weird cause sometimes case class works fine and then in certain edge cases it doesn't. Is there a reason?
shadaj
@shadaj:matrix.org
[m]
@evbo: ah, yeah so Slinky can only perform automatic case class conversions when the type is part of props, so in this case when you return it from a js.native facade there's no automatic conversion and you get an error; when defining the return type of a js.native method, you'll generally have to use a js.Object trait to define that type
Jason Pickens
@steinybot
Any idea why my cleanup function from useEffect is not being called? I tried explicitly typing it as a js.Function but that didn’t help.
Woops never mind. I didn’t even return it. Tut tut.
Jason Pickens
@steinybot
Damn still not working
Jason Pickens
@steinybot
Ah returning a js.Function doesn’t work as that will cause EffectCallbackReturn.fromAny to be used which makes it undefined
shadaj
@shadaj:matrix.org
[m]
we should probably add an EffectCallbackReturn.fromJSFunction
Jason Pickens
@steinybot
Also is it a bug that useState returns a new SetStateHookCallbackinstance each time? I was using this as a dependency in useEffect. It’s not strictly necessary to pass it as a dependency since it should never change but I prefer to include everything rather than having special rules for certain things.
evbo
@evbo

@shadaj:matrix.org thank you! And one excruciatingly difficult typo that can easily happen with a regular class, is for getting to put val in front of the attribute name.

If you don't do that, no compile-time error but it simply won't be included in the js Object!!

Catching that one kept me busy for a few hours :)

Jason Pickens
@steinybot
philip andrew
@PhilAndrew
Wish to do a debounce, any suggestions how?
philip andrew
@PhilAndrew
Ok I hacked together one using setTimeout from scalajs package
Dmitry Anikin
@nizhegorodets

Hi!
How do I import additional js into a component?

I'm trying to import ace-editor as an external component:

  @react
  object AceEditor extends ExternalComponent {

    case class Props(
        value: String,
        name: String,
        fontSize: Int,
        theme: String,
        mode: String,
        width: String,
        setOptions: js.Any,
        onChange: js.Any => Unit
    )

    val component = jsImport

    @JSImport("react-ace", JSImport.Default) @js.native
    private def jsImport: js.Object = js.native
  }

Next I use it:

                AceEditor(
                  value = counterState.editorText,
                  name = "ACE EDITOR",
                  fontSize = 32,
                  theme = "nord_dark",
                  mode = "scala",
                  width = "100%",
                  setOptions = js.Dictionary(
                    "showLineNumbers"           -> true,
                    "enableBasicAutocompletion" -> true,
                    "enableLiveAutocompletion"  -> true,
                    "enableSnippets"            -> true
                  ),
                  onChange = (input: js.Any) => dispatch(SaveEditorText(input.toString))
                )

I want to use the options: enableBasicAutocompletion, enableLiveAutocompletion, enableSnippets

To activate them directly in React is enough to write:

import "ace-builds/src-noconflict/ext-language_tools";

Can you tell me how I can do this import into Slinky? I tried to create a new external component, but nothing worked.

Edward A. Maxedon, Sr.
@edadma
can i use the ant design component library with Slinky?
Alexander Samsig
@asamsig:matrix.org
[m]
@edadma: absolutely, https://github.com/ScalablyTyped/SlinkyDemos/tree/master/antd, head over to the ScalablyTyped channel for specific questions regarding ScalablyTyped.
shadaj
@shadaj:matrix.org
[m]
@nizhegorodets: looks like the library probably has some mutability involved; what you'll need to do is create another @JSImport object for the additional import and make sure your code uses it somehow (for example throw an exception if it is null) so that Scala.js doesn't dead-code eliminate it
peterstorm
@peterstorm:matrix.org
[m]
Is Slinky ready for Scala 3 yet? Sorry for asking, didn't seem to be able to find it in the releases
shadaj
@shadaj:matrix.org
[m]
soon! see shadaj/slinky#494
Matias Partanen
@mpartan
@nizhegorodets How do you get theme nord-dark and mode-scala there working? Those are separate files as well; shouldn't you have to import them besides the ext-language-tools?
Matias Partanen
@mpartan

But this kind of file helped me

@JSImport("ace-builds/src-noconflict/ext-language_tools", JSImport.Default)
@js.native
object ReactAceExtLanguageTools extends js.Object {}

with

  val component: FunctionalComponent[Props] = FunctionalComponent { props =>
    val vanilla = ReactAceVanilla
    val resolver = ReactAceWebpackResolver
    val tools = ReactAceExtLanguageTools

But I had to include also ace-builds/webpack-resolver and ace-builds/src-noconflict/ace for themes and modes to work.

For some reason I was getting some undefined variable ace error for importing just one theme without the resolver+vanilla library, not sure what I was doing wrong as I was following react-ace docs, but at least it seems to work like this now, hopefully at least.

Jason Pickens
@steinybot:matrix.org
[m]

Any idea what might be causing this? Been using Slinky for a while and it just doesn't like this new component for whatever reason.

error] /Users/jason/source/goodcover/core/client-comp/src/main/scala/web/cps/InputRadio.scala:14:2: Unused import
[error] @react object InputRadio {
[error]  ^
[error] one error found

It must be some sort of import coming from the macro expansion. If I remove the macro then there is no unused import error.

2 replies
Matias Partanen
@mpartan
I guess you need to extends a Slinky component?
Jason Pickens
@steinybot:matrix.org
[m]
When I add this it causes problems:
  def propsWithClassName[P](props: P, className: ClassName)(implicit ev: Writer[P]): js.Object = {
    val propsObj = writeProps(props).asInstanceOf[js.Object with js.Dynamic]
    propsObj.className = className.unwrap
    propsObj
  }
Jason Pickens
@steinybot:matrix.org
[m]
Ah I figured it out. The macro is adding an import for Writer but if that has already been imported then you get a second unused import.
Jason Pickens
@steinybot:matrix.org
[m]
Hmm can't reproduce it in a new project with exactly the same code and versions. Weird.
edlott@sbcglobal.net
@edlott:matrix.org
[m]

Newby question: I'm trying to use the 'useState' hook to store an option case class:

val (code:Option[CaseClass], updateCode) = useState(None)

1 reply
edlott@sbcglobal.net
@edlott:matrix.org
[m]

:point_up: Edit: Newbee question: I'm trying to use the 'useState' hook to store an optional case class:

val (code:Option[CaseClass], updateCode) = useState(None)

This doesn't seem to work (at least IntelliJ doesn't like it). If I invoke 'useState' with scala classes that map to javascript primitives, it works fine.

I also use diode in my project. It can handle elements that are case classes just fine. I was looking into the diode implementation. It also uses the 'useState' hook, but doesn't seem to run into the problem I'm having. I can't untangle the part I need to fix my issue vs. the part that implements their notion of a structured store.

Short term, I can just use diode to model state that goes beyond javascript primitives. But I'd rather use 'useState' for instances where I need case-class component state that no one else needs to see.

Jason Pickens
@steinybot:matrix.org
[m]
Is it possible to get from a FunctionalComponentForwardedRef to a FunctionalComponent? As in React.memo(React.forwardRef(???)).
Matias Partanen
@mpartan

I'm trying to use following pattern with Slinky:

@JSImport("react-select", JSImport.Default)
@js.native
object ReactSelectComponent extends js.Object {

  val Async: js.Object = js.native
}
@react
object ReactSingleSelectTest extends ExternalComponent {
  type OnChange = ReactSelection => Unit

  case class Props(
      onChange: UndefOr[OnChange] = js.undefined,
      options: UndefOr[Seq[ReactSelection]] = js.undefined,
      isClearable: UndefOr[Boolean] = js.undefined
  )

  override val component = ReactSelectComponent
}

case class ReactSelection(label: String, value: String, group: Option[String] = None)

in component

def searchChanged(s: ReactSelection): Unit = {
      println(s)
    }

    val select = ReactSingleSelectTest(
      options = Seq(ReactSelection(s"Value 1", "Value 1"), ReactSelection("Value 2", "Value 2")),
      onChange = searchChanged _,
      isClearable = true
    )

Basically React-Select offers X-button to clear. In JedWatson/react-select#2159 it says to check for null. However here I'm getting an error before the searchChanged-function of:

Uncaught TypeError: Cannot read properties of null (reading 'label') at $c_Lcom_client_components_reactselect_ReactSingleSelectTest$$anon$7.eval [as forceRead__sjs_js_Object__Lcom_client_components_reactselect_ReactSelection]

Is there any way to get around of this somehow? Can I somehow type the type OnChange = Null | ReactSelection => Unit or something else?

philip andrew
@PhilAndrew
Hello, using react router, how can I programmatically change the route?
asaadza
@asaadza
...can anybody suggest a decent alternative to slinky for scala 3 projects?
I enjoyed using slinky in the "scala 2 days", and could get what I needed done without too much trouble or bad-taste-in-the-mouth (not always the case with so many other UI libraries, so thank you and congratulations @shadaj for creating and sharing it!) despite having never used react directly. It seems after @oleg-py made a nice contribution back in the summer there is still a long way to go (including identifying what must be done), and nobody has the skills and/or time.
@ramnivas - could I ask if you guys have decided to keep learnraga at scala 2 for the foreseeable future?
Alexander Samsig
@asamsig:matrix.org
[m]

@asaadza: I can only speak for myself, but Scala 3 is still early, IntelliJ isn't super smooth with it yet, and macros need more work.

So I don't think there is a very strong push for Scala 3 at the moment.

The PR open for Scala 3 support is quite far, but it doesn't have support for the @react annotation, which means the user experience won't be great.

Give it a few more months and the ecosystem will be available ready for Scala 3.

asaadza
@asaadza
@asamsig:matrix.org I like scala 3 and almost all the libraries we use already have some level of scala 3 support. Personally, I would not recommend starting any new project in scala 2, and because I prefer to use uptodate (but well enough proven) stuff, when I can, any project that is not deliberately being left to slowly die will be ported to scala 3 whenever possible. AFAIK, slinky does not depend on any scala libs that are still at scala 2 level, anyway, so I was just wondering whether/when it might be available for scala 3, because if it was possible, I would definitely choose/recommend it. Obviously, if there is no real demand yet for a scala 3 version (eg, if people are generally happy to still use scala 2, or people with commercial apps consider scala 3 to be a risk, or a distraction that is non-essential for their business) that may also be a clue, so thanks for the feedback and for starting the effort with @oleg-py in the summer!
asaadza
@asaadza
... and metals has pretty good scala 3 support too, btw, in case you did not try it yet.
Alexander Samsig
@asamsig:matrix.org
[m]

The point about IntelliJ is mostly to show that Scala 3 isn't fully mainstream yet, if not even IntelliJ has seamless support yet.

I'm not the guy for lightweight IDEs, I'm way too accustomed to the benefits of a fullblown IDE.

Scala 3 will get there, but Scala 2 is not in its grave yet.

asaadza
@asaadza
... don't worry, scala 2 will be around for ages. Try ,metals, you'll be amazed. I love IJ, but metals has now ahead in some areas. The only thing I miss from IJ is probably "search for symbol everywhere" (metals finds types, but not members).
2 replies
shadaj
@shadaj:matrix.org
[m]
Yeah, I think full Scala 3 support will take a while since many metaprogramming features that Slinky uses aren't there yet. However, I'd be open to merging in preliminary Scala 3 support without @react if that's something people would use!
asaadza
@asaadza
@shadaj:matrix.org +1
Alexis Hernandez
@AlexITC

I'd be open to merging in preliminary Scala 3 support without @react if that's something people would use!

My team will happily use it that way

Myyk Seok
@myyk
I was just doing a toy project, but I too would have enjoyed the preliminary Scala 3 support
asaadza
@asaadza
@shadaj:matrix.org another not so obvious, but in my opinion very valuable benefit of releasing a "preliminary Scala 3 support without @react" Slinky is that people who have the imagination and skill will have a good base/foundation (ie the build and all the MDN based code generation/type projections/named params etc already working and proven) to try out alternatives/different ideas on for the apply problem (which would probably be sufficient for those who prefer functional components anyway) so slinky react UI development is still the nicest and most intuitive UX in scalajs land.
Ryne Flood
@ryne.flood_gitlab
@shadaj:matrix.org +1
Arman Bilge
@armanbilge
@shadaj:matrix.org would you mind approving the workflow on my PR? Thanks in advance!