Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Apr 10 15:34
    AlexITC opened #474
  • Mar 31 17:22
    scala-steward closed #464
  • Mar 31 17:22
    scala-steward commented #464
  • Mar 31 17:22
    scala-steward opened #473
  • Mar 29 18:44
    scala-steward closed #467
  • Mar 29 18:44
    scala-steward commented #467
  • Mar 29 18:44
    scala-steward opened #472
  • Mar 12 20:28
    scala-steward closed #470
  • Mar 12 20:28
    scala-steward commented #470
  • Mar 12 20:28
    scala-steward opened #471
  • Mar 11 06:10
    scala-steward opened #470
  • Mar 10 07:31
    scala-steward closed #468
  • Mar 10 07:31
    scala-steward commented #468
  • Mar 10 07:31
    scala-steward opened #469
  • Mar 08 00:12
    scala-steward opened #468
  • Mar 02 10:25
    zakpatterson closed #307
  • Feb 27 19:58
    scala-steward closed #460
  • Feb 27 19:58
    scala-steward commented #460
  • Feb 27 19:58
    scala-steward opened #467
  • Feb 27 01:14
    scala-steward opened #466
Dan Di Spaltro
@dispalt
Has anyone attempted to integrate, https://github.com/pmmmwh/react-refresh-webpack-plugin I did a pretty poor attempt and didn't get there.
shadaj
@shadaj:matrix.org
[m]
@dispalt: this is something I've been meaning to get to for a while, but just haven't had the time yet unfortunately; the biggest change that's required is to macro-ify the FunctionalComponent constructor to introduce the necessary calls to the React Refresh runtime (mostly around hooks). Then, it should hopefully be a fairly straightforward drop-in to enable the plugin.
Prabu
@praburajan

Hi, I was experimenting with including react chakra-ui. As per their docs, I need to include their <ChakraProvider> component as the root component. I saw the slinky docs and did the following

@JSImport("@chakra-ui/react", "ChakraProvider")
@js.native
object Chakra extends js.Object {
  val ChakraProvider: js.Object = js.native
}

@react object ChakraProvider extends ExternalComponentNoProps {
  val component = Chakra.ChakraProvider
}

@JSExportTopLevel("App")
@react class App extends StatelessComponent {
  type Props = Unit

  def render = {
    ChakraProvider (
      Counter()
    )
  }
}

and I am getting the following error

[error] /Users/praburajan/projects/learn/scala/react/my-app/src/main/scala/com/myden/App.scala:27:2: type Props is not a member of String | scala.scalajs.js.Object
[error] @react object ChakraProvider extends ExternalComponentNoProps {
[error] ^
[error] one error found
[error] (Compile / compileIncremental) Compilation failed

How can I use this and other external library react components with props (types defined in typescript) in a slinky project? The chakra-provider code is here - https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/chakra-provider.tsx

Oleg Pyzhcov
@oleg-py
you don't need @react on external components without props
Prabu
@praburajan
Ok, with that it compiles, but at runtime, it still does not render. It throws the following errors. If you see the implementation of ChakraProvider fro the link I gave above, it returns a React element and actually takes in a Props. However, all of the props have default values and you dont need to pass anything. That is why I tried defining the ChakraProvider scala type without props.
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App$`.
Oleg Pyzhcov
@oleg-py
Well, 1) it's a functional component so you have to use component with props if you want any of them (all optional tho) and 2) your import is probably wrong, I think you need JSImport.Namespace instead of "ChakraProvider".
namespace would translate to something like import * as Chakra from "@chakra-ui/react", while what you wrote would translate to import {ChakraProvider as Chakra} from "@chakra-ui/react"
Prabu
@praburajan
I just need import { ChakraProvider } from "@chakra-ui/react", how do I write that?
Oleg Pyzhcov
@oleg-py

Pretty sure that's just

@JSImport("@chakra-ui/react", "ChakraProvider")
@js.native
object ChakraProvider extends js.Object // no members

though I wouldn't know cause I'm too lazy for granular imports for now :D

Prabu
@praburajan
With that it works! Very helpful @oleg-py. If you see their typescript type def for their props, it is nested with many typescript types. How do I translate them into scala types? Is there some utility that I can use to translate them to scala case class or do I have to go through, understand the types and define them myself? Moreover, their implementation handles default values. Is there a way in scala for me to specify optional parameters in scala? Do I have to wrap them as Option[T] ?
Oleg Pyzhcov
@oleg-py
Well, you can look into scalablytyped which is a TS -> SJS facades already converted and addable to build.sbt, though it's a tiny bit less than seamless. Or you can define types yourself. My preferred way for optional fields is to wrap them as js.UndefOr[A], but you should be able to use Option if we're talking about slinky props - not sure about nested subtypes, but js.UndefOr never fails. Also I only write facades' API for stuff I use, not every feature of the library.
Prabu
@praburajan

Cool. When I try js.UndefOr[A] like so.. compilation fails. It still expects me to pass those properties

object Box extends ExternalComponent {
  case class Props(w: js.UndefOr[String],
                   bg: js.UndefOr[String],
                   color: js.UndefOr[String],
                   p: js.UndefOr[Int])
  val component = ChakraBox
}

Compilation fails with [error] /Users/praburajan/projects/learn/scala/react/my-app/src/main/scala/com/myden/App.scala:64:20: not enough arguments for method apply: (w: scala.scalajs.js.UndefOr[String], bg: scala.scalajs.js.UndefOr[String], color: scala.scalajs.js.UndefOr[String], p: scala.scalajs.js.UndefOr[Int]): com.myden.Box.Props in object Props. [error] Unspecified value parameters color, p. [error] Box(Box.Props(w = "80%", bg="tomato")) ( [error] ^

I am calling the Box component like
ChakraProviderComp (
      Box(Box.Props(w = "80%", bg="tomato")) (
        Counter()
      )
    )
Prabu
@praburajan
Ok, I was able to fix it like this
object Box extends ExternalComponent {
  case class Props(w: js.UndefOr[String] = js.undefined,
                   bg: js.UndefOr[String] = js.undefined,
                   color: js.UndefOr[String] = js.undefined,
                   p: js.UndefOr[Int] = js.undefined)
  val component = ChakraBox
}
Thanks @oleg-py
peterstorm
@peterstorm:matrix.org
[m]
@oleg-py Hope it’s ok to ping you here, but I’m interested in using shirokeno for my next project, just wondered if there are any examples with slinky and tagless final style somewhere?
peterstorm
@peterstorm:matrix.org
[m]
oleg-py (Oleg Pyzhcov): Sorry, now I’m tagging you 😅
Oleg Pyzhcov
@oleg-py
@peterstorm:matrix.org I have an old pet project there using shironeko+tf, though since I've been using it in a private project, my style has evolved a bit, and there are things lacking in the library (like Resource support, or good handling of multiple stores) which I plan™ to redesign™ for dotty+ce3, so if it's something serious, you might consider another library or waiting :D
(note that the project probably won't compile due to ScalablyTyped version I used was deleted :c)
peterstorm
@peterstorm:matrix.org
[m]
I want to have fun while writing code, and your library looks awesome, so I’ll mess around with it! And looking forward to CE3 support! 😄
Oh I starred that project ages ago, awesome! 😄
peterstorm
@peterstorm:matrix.org
[m]
oleg-py (Oleg Pyzhcov): Is it possible to use with functional components?
peterstorm
@peterstorm:matrix.org
[m]
Can someone explain to me how the slinky docs are serverside renderes (or is it just prerendered) with no server backing it? :D I'm still trying to wrap my head around it :D
peterstorm
@peterstorm:matrix.org
[m]
Ah, is it this plugin that does it? static-site-generator-webpack-plugin
Oleg Pyzhcov
@oleg-py
@peterstorm:matrix.org your shironeko containers will be neither plain nor functional components. For the rest of the app you can use whatever style you want.
shadaj
@shadaj:matrix.org
[m]
peterstorm: yep! that's the plugin that prerenders all the pages
Ján Nosál
@JanNosal
Hi, fist of all thanks for your work @shadaj:matrix.org . I am trying to write tests. Do you know what should I do to use React Testing Library?
Ján Nosál
@JanNosal
hmm, I have just found out the easiest way might be to use https://github.com/japgolly/scalajs-react/blob/master/doc/TESTING.md, am I right?
zetashift
@zetashift
Ján Nosál
@JanNosal
@zetashift doesn't that one depend on the ScalablyTyped React too?
Ján Nosál
@JanNosal
but yeah, I get it could work, I am going to try, thank you.
*bet
zetashift
@zetashift
You could always ask in the ScalablyTyped Gitter, the maintainer is active there
Ján Nosál
@JanNosal
@zetashift the one you have suggested is quite old. However I compiled the newer version with ScalablyTyped, and though not everything is working correctly, I am at least using it as a reference and creating the typings manually. Seems to be working well so far ... Thanks.
1 reply
zetashift
@zetashift
@JanNosal Ah, I didn't know! I actually never used React Testing, was trying to help :P, good to hear there is some progress!
shadaj
@shadaj:matrix.org
[m]
@JanNosal: it's great that React Testing works well! So far Slinky doesn't have one official testing solution since there are a bunch of options in the React community (Enzyme comes to mind as an alternative). If you're noticing bugs with the ScalablyTyped generated bindings, I'd definitely encourage publishing your patches somewhere, that would help move towards building a solid Slinky interface for it!
Ján Nosál
@JanNosal
@zetashift You did help. Brainstorming is usually helpful even if I didn't go with your exact suggestion in the end - you helped me decide what to do. Thanks.
@shadaj:matrix.org Thanks. Sure, once I have something more or less complete, I'll definitely consider to give something back to the community.
Alexis Hernandez
@AlexITC
is there any example for implementing an error boundary?
Matias Partanen
@mpartan
This message was deleted
shadaj
@shadaj:matrix.org
[m]
@AlexITC: https://slinky.dev/docs/error-boundaries/ might help, though the docs are focused on class components
Alexis Hernandez
@AlexITC
I saw that one, I think that I tried it but it didn't worked right away, in any case, I didn't tried enough, I'll check it later
thanks
Alexis Hernandez
@AlexITC
indeed, there are some minor errors, I'll get you a PR soon to fix those
philip andrew
@PhilAndrew
Hello ! I wish to call a Javascript function on one of the react components from one part of the page, how can I do that?
I have a component like this, ReactMonacoEditor..theme("vs-dark"), what I want to do is from another part of the page when user clicked a link to set the text inside this component
how can I refer to it from the other part of the page?
how can I call the javascript method?
Alexis Hernandez
@AlexITC
you need a js facade to do that, if there are typescript definitions for that method, scalablytyped can likely generate the facade for you
Øyvind Raddum Berg
@oyvindberg
@PhilAndrew looks like you may already have seen it, but check out https://github.com/ScalablyTyped/SlinkyDemos/blob/master/monaco/src/main/scala/demo/Main.scala where you can grab ahold of monaco or editor from within editorDidMount and set things on them. perhaps that'll help. otherwise you typically get references to mounted components with react references