Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 17 12:13
    scala-steward closed #466
  • May 17 12:13
    scala-steward commented #466
  • May 17 12:13
    scala-steward opened #479
  • May 16 04:50
    jedahu commented #478
  • May 16 04:49
    jedahu opened #478
  • May 16 03:35
    jedahu synchronize #476
  • May 14 21:28

    shadaj on bring-back-dd-dt

    (compare)

  • May 14 21:28

    shadaj on master

    Bring back the dd and dt tags, … (compare)

  • May 14 21:28
    shadaj closed #477
  • May 14 20:41
    shadaj opened #477
  • May 14 20:41

    shadaj on bring-back-dd-dt

    Bring back the dd and dt tags, … (compare)

  • May 14 02:19
    shadaj commented #476
  • May 13 21:54
    jedahu opened #476
  • Apr 21 19:26
    Taig commented #475
  • Apr 21 19:24
    Taig commented #475
  • Apr 21 18:15

    shadaj on master

    Update error-boundaries.md (#47… (compare)

  • Apr 21 18:15
    shadaj closed #474
  • Apr 21 18:15
    shadaj labeled #475
  • Apr 21 18:14
    shadaj commented #475
  • Apr 18 11:10
    Taig edited #475
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
1 reply
Matias Partanen
@mpartan

I guess it's not the best to start as your second external component, but, I need drag and drop support in the application so trying to do react-beautiful-dnd (https://github.com/atlassian/react-beautiful-dnd) with React. I haven't done much Scala.js either.

So I'm wondering if it's a component like that where it's rendering a function and not a React Node (https://codesandbox.io/s/k260nyxq9v, e,g. <Draggable key={item.id} draggableId={item.id} index={index}> {(provided, snapshot) => ( ... </Draggable>. Is there any example or library that has a similar setup to show it could be done with Slinky wrapper?

philip andrew
@PhilAndrew

In this i'm using Monaco editor, the final bundled and fastopt Javascript file size becomes about 2.5Mb, I'm wondering how to get the file size down.

There are two files output:
react-leaflet-opt.js is 604k
react-leaflet-opt-bundle.js is 2.5Mb

I'm using react-monaco-editor which I think bundles up into this -

Compile / npmDependencies ++= Seq(
  "react-monaco-editor" -> "0.40.0", // https://www.npmjs.com/package/react-monaco-editor
  "bulma" -> "0.9.1"
),

Is there a way to not have it bundle into the javascript file but be used as a library where I can load the react-monaco-editor javascript from some URL independently in the HTML page?

philip andrew
@PhilAndrew
For example I can see in the smaller javascript file there are requirement statements ba=require("./style.css"),ca=require("react"),da=require("react-dom"),ea=require("react-monaco-editor"), and I would think that somehow I could make the require for react-monaco-editor be not bundled up
shadaj
@shadaj:matrix.org
[m]
@mpartan: it looks like there are TypeScript definitions at https://www.npmjs.com/package/@types/react-beautiful-dnd, so you should be able to use ScalablyTyped!
Matias Partanen
@mpartan
Thanks, I actually switched to react-dnd as it seemed a bit more simple. However I need to have the same element as draggable and droppable, I wonder how I could set multiple refs for a single component with Slinky, is it even possible.
@react object DndTableRow {
  type Props = DndTableRowProps

  case class Collected(isOver: Boolean, canDrop: Boolean)

  val component: FunctionalComponent[Props] = FunctionalComponent { props =>
    val (Collected(canDrop, isOver), drop) = useDrop(
      DropTargetHookSpec[DragObject, DropResult, Collected]("draggableType")
        .setDrop((dragObject, _) => new DropResult(s"droppableText received ${dragObject.name}"))
        .setCollect(monitor => Collected(monitor.isOver(), monitor.canDrop()))
    )

    val isActive = canDrop && isOver

    val (isDragging, drag, _) = useDrag(
      DragSourceHookSpec[DragObject, DropResult, Boolean]("draggableType")
        .setItem(new DragObject(props.id))
        .setEnd { (item, monitor) =>
          alert(
            s"You dropped ${item.name} into ${Option(monitor.getDropResult[DropResult]().asInstanceOf[DropResult]).map(_.name)}!"
          )
        }
        .setCollect(monitor => monitor.isDragging())
    )

    val opacity = if (isDragging) "0.4" else "1"

    tr(
      key := props.id,
      ref := drop, // <= will drop this one with the next line
      ref := drag,
      style := js.Dynamic.literal(
        opacity = opacity
      )
    )(
      props.children
    )

  }
}

class DragObject(val name: String) extends js.Object
class DropResult(val name: String) extends js.Object

case class DndTableRowProps(id: String, children: Seq[ReactElement])
Matias Partanen
@mpartan
This seems like a workaround with TS/JS, but I'm not sure how to implement it in Scala.js side : https://github.com/react-dnd/react-dnd/issues/1483#issuecomment-714475759
I guess in React ref= can be a function as well but I suppose it's not doable with Slinky ref :=as there is no overloaded function
Matias Partanen
@mpartan
val combinedRef = useRef[org.scalajs.dom.html.Div](null)
val dragRef = drag.asInstanceOf[js.Function1[ReactRef[org.scalajs.dom.html.Div], ReactRef[org.scalajs.dom.html.Div]]]
val dropRef  = drop.asInstanceOf[js.Function1[ReactRef[org.scalajs.dom.html.Div], ReactRef[org.scalajs.dom.html.Div]]]
dragRef(dropRef(combinedRef))

    tr(
      ref := combinedRef
How it seems to work now :)
zetashift
@zetashift
Will Scala 3 top level function definitions allow Slinky to have functional components without wrapping it in an object?
shadaj
@shadaj:matrix.org
[m]
@zetashift: yes! will probably still need a macro to get the nice apply with inlined props but won't need a wrapping object anymore
zetashift
@zetashift
very cool!!
mn98
@mn98
Hi all, this may be a very silly question, but... how do I set the style of a slinky.web.html.div element? Should I be using slinky-styled-components?
mn98
@mn98
I haven't done anything with styling yet and I have zero css experience! I'm genuinely looking for any advice/opinions on how to proceed.
zetashift
@zetashift
@mn98 maybe you can simply use the tag style thing: https://slinky.dev/docs/the-tag-api/ (It's under section 'Styles')