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
evbo
@evbo

and another smaller question, how do you get external objects to appear as "ReactElement"? For instance, I am importing an icon:

@js.native
@JSImport("@atlaskit/icon/glyph/unlock", JSImport.Default)
object UnlockIcon extends js.Object

And if I put it as the button text it complains it is not of type ReactElement

shadaj
@shadaj:matrix.org
[m]
@evbo: you can just have the UnlockIcon extend ReactElement instead of js.Object
Alexander Samsig: that would be very helpful! does SmallestModules work with functional components?
2 replies
evbo
@evbo
doh! so obvious thanks. What about the deserialization I posted above - have you seen that before? My hack is pretty brutal but works
Oleg Pyzhcov
@oleg-py
Are there any developments on Scala 3 support?
shadaj
@shadaj:matrix.org
[m]
Alexander Samsig: thanks for the repro! will take a look, but it does sound like it could just be a Scala.js bug
@oleg-py: not yet, unfortunately haven't gotten the time to work on it yet. The main work is porting Reader/Writer derivation, since @react isn't required to use Slinky
evbo
@evbo

sometimes i find js.Any to be suitable as a type (usually in avoiding overly complex union types) for when I have no really breakable logic interacting with a given variable, but at some point I need to convert a case class to that js.Any type.

How do I tell slinky to convert my case class to a js.Any explicity so that the attributes have the same names as the case class in the javascript?

mn98
@mn98

Hi all, I have a feeling this question is extremely basic, but I can't find a working example. When I try to add readOnly := true to a textarea like so:

        textarea(
          rows := props.numberOfRows.toString,
          cols := props.numberOfColumns.toString,
          readOnly := true,
          defaultValue := "Blah"
        )

I get the following compilation error:

 found   : slinky.core.AttrPair[slinky.web.html._readOnly_attr.type]
 required: slinky.core.TagMod[slinky.web.html.textarea.tag.type]]

could someone please educate me here on how this is achieved?

mn98
@mn98

Ah, I got the above working like this:

    private val readOnlyAttr = CustomAttribute[Boolean]("readOnly")

    textarea(
      rows := props.numberOfRows.toString,
      cols := props.numberOfColumns.toString,
      readOnlyAttr := true,
      defaultValue := "Blah"
    )

Would someone mind pointing me in the direction of some learning materials on why the custom things are necessary? I'm very green in the world of html!

2 replies
mn98
@mn98

Hi all, I hope this is the right place to ask about slinky-styled-components. Whilst getting started with this (using version 0.1.0+10-b09028e5) I've experimented with a simple styled div:

    val divRef = useRef[Div](null)
    val styledDiv = styled.div(css"""width: 100%; height: 640px;""")
    styledDiv(ref := divRef)

Then the thing that's attempting to render itself within that div is trying to call attachShadow on that div element, only to be told that attachShadow is not a function on that element. A quick search on the web didn't yield a great deal other than make sure the html element supports attachShadow, which div should. Does anyone have any experience with this kind of error or any thoughts on what the issue might be? Many thanks!

mn98
@mn98
@shadaj is the “attachShadow” issue the same or similar?
mn98
@mn98
I confirmed that the attachShadow issue only occurs when using a slinky styled div, it works ok when using a regular slinky html div with a regular css style in the html.
Oleg Pyzhcov
@oleg-py
@shadaj:matrix.org I took a look into that derivation and it seems to be pretty standard TC derivation - is there any specific reason I'm missing as to why Magnolia has been removed?
shadaj
@shadaj:matrix.org
[m]
@oleg-py: at least a couple years ago, Magnolia would perform the actual derivation at runtime (so the macro would just collect metadata), which resulted in a lot of code bloat; so Slinky moved to a custom derivation system that allows the specific TC instances to be created at expansion time (along with a bunch of caching logic), which shaved off a good 100KiB from gzip bundles of a production app
Since Scala 3 is going to be supported in beta mode initially anyways, it could make sense to have Slinky use Magnolia there
Alexander Samsig
@asamsig:matrix.org
[m]
I have been researching the read/write-macro, and the new Mirror-API seems like a great fit, except it doesn't support value classes and default values at the moment.
There is open issues for it, so we can hope they get resolved in the near future.
Alexander Samsig
@asamsig:matrix.org
[m]

I took a tour over the Play-JSON & Magnolia progress and value classes, opaque types, nested sealed traits, default values, are the biggest issues currently with migrating to Scala 3.

I've been experimenting with making Slinky, Scala 3 compatible, but I ran out of time for the time being, most of the work I've done is updating dependencies and splitting code that isn't compatible anymore.

I've barely started to look into the macros, my unfamiliarity with Scala 2&3 macros, made it a bigger endeavor, so not any progress to report.

I have a branch on my on fork here: https://github.com/Asamsig/slinky/tree/scala-3-support

Oleg Pyzhcov
@oleg-py
@asamsig:matrix.org I've made a PR against your fork with some derivation things. It doesn't seem too impossible to make new derivation, but there are cases like recursive case classes I've no idea how to make work, and there are cases where there's nothing out of the box, like non-case AnyVal classes.
Alexander Samsig
@asamsig:matrix.org
[m]
@oleg-py: Awesome!
The basic derivations should be quite straightforward with Mirrors as you've done, the problem is what you say, that they currently don't support, recursive case classes, value classes, default values and such, so for now we won't be able to give parity with Scala 2 Slinky.
Perhaps we can finish up a MVP, with what is supported now, document unsupported things, and have a Beta release or something for Scala 3 😎
Oleg Pyzhcov
@oleg-py
it's possible that value classes and default values can be achieved using custom reflect-macro-generated mirror-like things like I made for unions, though my macro experience ain't that big either
evbo
@evbo

I'm noticing Option[ReactElement] compiles just the same in slinky as ReactElement?

Is that intentional? Seems a little too loose

Just found some old code that was setting a props like someProps = Some(reactElement) even though that props attribute wasn't an Option type it was uncaught. So I removed the Some and it made no difference.
shadaj
@shadaj:matrix.org
[m]
@evbo yeah, this is intentional since React has specific support for optional elements (null in JS land)
evbo
@evbo
gotcha, but fwiw wouldn't it be better on all fronts to require it to be explicitly typed to help when one wants to enforce non null? Could also help with readability, e.g.: val a: ReactElement = Some(Some("but I am not supposed to be an option"))
shadaj
@shadaj:matrix.org
[m]
hmm, yeah that's a tricky design question; so far, Slinky has erred on the side of "if this is supported and meaningful in React, then it should be supported in Scala", so the Option conversion falls under that
evbo
@evbo

all good, this only came up because I am trying to tuck as much logic as possible into the JVM, which boils down to ReactElement.asInstanceOf[SomeCaseClassThatExtendsAnyVal]

So that on the JVM side I at least have the ability of handling the ReactElement objects. But now that I know option counts as a ReactElement I need to rethink my strategy a bit

evbo
@evbo

@shadaj:matrix.org figured out an answer to my question up above

Whenever js Objects don't seem to automatically be read correctly into the case class, for some reason just treating them as a class that extends js.Object appears to work.

Is this intended?

Example:

The notorious react-table has a hook, useTable that returns a ton of stuff, but for example here is a working facade:

@js.native
@JSImport("react-table", JSImport.Default)
object ReactTableLibrary extends js.Object {
  def useTable(props: js.Object, plugins: js.Any*): TableProps = js.native
}

If I use a case class I will get the [object object] is not an instance of TableProps error, forcing me to instead return a js.Object and then dynamically building the case class myself!

val props = useTable(...).asInstanceOf[js.Dynamic]

val typedProps = TableProps(
props.selectDynamic("headerGroups").asInstanceOf[js.Array[HeaderGroup]],
props.selectDynamic("rows").asInstanceOf[js.Array[Row]],
props.selectDynamic("prepareRow").asInstanceOf[js.Function1[Row, Unit]]
)

If instead I define TableProps as a regular class that extends js.Object, no need for gross dynamic selecting, slinky works!

// solution:
class TableProps(
                  val headerGroups: js.Array[HeaderGroup],
                  val rows: js.Array[Row],
                  val prepareRow: js.Function1[Row, Unit]
                ) extends js.Object
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?