Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 00:07
    evbo commented #330
  • Jun 09 00:34
    evbo commented #237
  • Jun 08 17:21
    scala-steward closed #473
  • Jun 08 17:21
    scala-steward commented #473
  • Jun 08 17:21
    scala-steward opened #483
  • Jun 05 14:24
    evbo commented #237
  • Jun 05 14:10
    evbo commented #237
  • Jun 05 14:10
    evbo commented #237
  • Jun 04 16:58
    evbo commented #478
  • Jun 04 16:57
    evbo commented #237
  • Jun 04 16:48
    evbo commented #237
  • Jun 04 16:10
    evbo commented #237
  • Jun 04 16:06
    evbo commented #237
  • Jun 04 16:02
    evbo commented #478
  • Jun 04 14:27
    psylinse commented #461
  • May 31 00:43
    scala-steward closed #480
  • May 31 00:43
    scala-steward commented #480
  • May 31 00:43
    scala-steward opened #482
  • May 28 12:41
    scala-steward closed #465
  • May 28 12:41
    scala-steward commented #465
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')
scala h1(style := js.Dynamic.literal( fontSize = "30px" ))( "hello!" )
mn98
@mn98
@zetashift thanks, that is indeed much simpler! Still, the styled-components thing does look quite cool.
zetashift
@zetashift
Personally, not the biggest fan of styled components, but that might be because I have very little experience with it, and only had bad experience reading some JS React styled components
mn98
@mn98
@zetashift noted, thanks for sharing. I'm a sucker for a shiny website and a good sales pitch :-)
zetashift
@zetashift
@mn98 same actually :D!
Jeremy Hughes
@jedahu
Hi @shadaj:matrix.org I've added more info on my issue: shadaj/slinky-styled-components#6
Ján Nosál
@JanNosal
@mn98 My opinion: It depends on what your goal is. If you are just doing something small, style attribute might be OK. However AFAIK inline styling is discouraged in general (not just in React). You might get into big maintainability issues as your projects grows. I suggest you check CSS-IN-JS (lhttps://reactjs.org/docs/faq-styling.html) solutions in javascript React ecosystem (for example this article https://medium.com/@dmitrynozhenko/9-ways-to-implement-css-in-react-js-ccea4d543aa3), which helps with separations of concerns hence improve maintainability of you project. If there are not typings in scala.js for library of your choice - to write them ad-hoc for just your project is fairly easy (you don't need to cover whole library, just what you need when you need it).
mn98
@mn98
@JanNosal thanks very much, I'll have a read through that material!
Ján Nosál
@JanNosal
@mn98 np. the second link is broken, here once again: https://medium.com/@dmitrynozhenko/9-ways-to-implement-css-in-react-js-ccea4d543aa3 btw styled components is one of the possible solutions.
Jeremy Hughes
@jedahu

I have an issue with slinky-styled-components and lazy object initialization.

Given this definition:

@react object Logo {
  type Props = Unit

  val wordmark = &.a(css"text-align: center;")

  val component = FunctionalComponent[Props] { _ =>
    div(wordmark(href := "https://example.com", img(src := "/image.svg")))
  }
}

Use of Logo() in another component results in a runtime warning about dynamic component creation:

@react object Demo {
  type Props = Unit

  val component = FunctionalComponent[Props] { _ => Logo() }
}
styled-components.browser.esm.js:28 The component styled.a with the id of "sc-hKwCoD" has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component.

I've worked around it by forcing early evaluation of Logo:

@react object Demo {
  type Props = Unit

  Logo

  val component = FunctionalComponent[Props] { _ => Logo() }
}

Anyone have a better approach?

nafg
@nafg
Does Slinky have sample projects, and if so how do you maintain them? (In Slick there's a lot of code in the SBT build dealing with it, which I'd like to simplify or eliminate, and I'm trying to find out what other people do.) For instance, do sample projects each have their own repo or are they subdirectories in the same repo? If the latter, are they part of the main SBT build, do they have their own SBT build, or both? In any case do you automate keeping them up to date, and if so, how?
Øyvind Raddum Berg
@oyvindberg
@nafg in ST there are heaps of demos which are released simultaneously with the converter, ensuring that they all compile with the newest encoding. They are divided into three repos. I wrote this release script https://github.com/ScalablyTyped/Converter/blob/master/release.sc to deal with it. Pretty happy with that setup so far.
Andrija Vranic
@ydrea
hi! where does one report a typo in the documentation?
mazugrin
@mazugrin
Hi, it seems like slinky.web.html.dt and slinky.web.html.dd have disappeared (although slinky.web.html.dl still exists). Does anyone know how I can use a dl without a dt or dd? Thank you!
shadaj
@shadaj:matrix.org
[m]
@jedahu: hmm, that's likely going to just be a limitation imposed by object initialization semantics; manual initialization is probably the way to go unfortunately
@ydrea: just drop an issue on the main GitHub repo!
@nafg: the main "sample" that Slinky has is the docs page, which does a fairly good job of exercising the different features; I maintain it as a subproject so that I can track bundle size effects of PRs
@mazugrin: those were removed recently since they are deprecated elements (and had their corresponding types removed from the official Scala.js DOM types); if you still need to use them, you can just create a custom tag (https://slinky.dev/docs/custom-tags-and-attributes/)
mazugrin
@mazugrin
Sorry - I guess I am wondering why Scala.JS DOM dropped them - do you happen to know why?
shadaj
@shadaj:matrix.org
[m]
Actually, taking a closer look, the types were dropped because html.Element is sufficient for the core interface. Just created shadaj/slinky#477 to bring the tags back.
mazugrin
@mazugrin
Oh cool - I think that makes more sense. I was starting to wonder if there was some moral judgement against using dt or dd!
Alexander Samsig
@asamsig:matrix.org
[m]
Hi @shadaj , is there any work or plans being done yet for migrating to Scala3?
nafg
@nafg
@shadaj:matrix.org follow-up question: Have you ever wanted the sample to be valid as a standalone build?
shadaj
@shadaj:matrix.org
[m]
Alexander Samsig: not quite yet, unfortunately haven't been able to explore what Slinky on Scala 3 would look like yet; I think the core components should work but not sure how @react would look
1 reply