Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 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
  • Sep 15 00:26
    scala-steward opened #508
  • Sep 13 16:57
    Asamsig commented #456
  • Sep 13 12:28
    dkirchhof commented #498
  • Sep 13 12:27
    dkirchhof closed #498
  • Sep 13 12:27
    dkirchhof commented #498
  • Sep 12 03:49

    shadaj on v0.6.8

    (compare)

  • Sep 11 22:16

    shadaj on act-facade

    (compare)

  • Sep 11 22:16

    shadaj on external-component-export

    (compare)

  • Sep 11 22:16

    shadaj on scala-2.13-any

    (compare)

  • Sep 11 22:16

    shadaj on intellij-standalone-plugin

    (compare)

  • Sep 11 20:57

    shadaj on master

    Release v0.6.8 (compare)

  • Sep 11 20:43
    shadaj demilestoned #495
  • Sep 11 20:43
    shadaj milestoned #495
  • Sep 11 17:54

    shadaj on master

    Remove errant println (#507) (compare)

  • Sep 11 17:54
    shadaj closed #507
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(???)).