Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 02:23
    evbo opened #484
  • Jun 14 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
Dan Di Spaltro
@dispalt
@shadaj:matrix.org ^
shadaj
@shadaj:matrix.org
[m]
@dispalt: yeah most likely, since it will be some time until scalajs-bundler gets support
mn98
@mn98
@shadaj thanks for 0.6.7 and the new plugin! Slinky really is a fabulous piece of kit!
Dan Di Spaltro
@dispalt
@shadaj:matrix.org i've been noodling on attempting it, but haven't worked up the courage
Eric K Richardson
@ekrich
Maybe it wouldn't be too bad :wink:
mn98
@mn98
Hi all, I'm using @react functional components with hooks and I'm trying to figure out how to define a ref (via useRef) to the child component from within the parent component. My motivation here is to then access state on the child component via childRef.current.... The child defines its state with the useState hook. Any help greatly appreciated! Thanks.
mn98
@mn98
I'm now trying to achieve the above with forwardRef to expose an imperative API to access the internal state of the child, but I'm not sure it's the right approach...
mn98
@mn98

I still haven't figured this out. In my 'parent' functional component I have something like:

val thingPicker = useRef[FunctionalComponent[ThingPicker.Props]](null) // doesn't compile because of the 'null'
...
def usePickedThing = { val thing = thingPicker.current.pickedThing; ... }
...
div(ref := thingPicker)(ThingPicker(...))

If I'm missing something really obvious here regarding how to access a child's state from the parent using functional components, I would be very grateful for some pointers!

mn98
@mn98

When I attempt the forwardRef approach to access the internal state it is always null in the imperative handler when child's state is changed.
Within the child, a ThingPicker:

      useImperativeHandle(ref, () => {
        new PickedThing {
          override def pickedThing: Thing = thing // <-- this always throws saying thing is null
        }
      })

Within the parent:

div(ThingPicker().withRef(r => setLocalState(r.pickedThing)))

It's probably right that the imperative code throws given state is updated asynchronously, but I still need educating on this.

Øyvind Raddum Berg
@oyvindberg
Consider ref your last option, possibly before Context. Try to give the child component an onPicked callback prop
mn98
@mn98
I’ll look into that, thanks very much!
zetashift
@zetashift
I created a basic slinky project using create-react-scala.g8 and am getting the following error: https://dpaste.com/5XKC6NGPV do I have something set up incorrectly?
mn98
@mn98
@oyvindberg thanks again for the tip, a callback prop worked well. In my case the callback sets some state on the parent.
My whole Ref approach stemmed from the Refs on Slinky Components example. I thought there might be an equivalent approach for functional components.
mn98
@mn98
I wanted to avoid duplicating the child's state within the parent.
nafg
@nafg
@shadaj:matrix.org suggestion, fork scalajs-bundler and delete all the parts not related to generating package.json (i.e. keeping just npmDependencies functionality) and publish that as its own plugin. Later scalajs-bundler could be refactored to use it if they want, or they could move the npm-dependencies plugin back in but publish it as a standalone artifact.
Then you can build a plugin that's focused on bundling, perhaps via snowpack, that will be easy to switch to/from scalajs-bundler
IOW if "generating package.json from transitive metadata defined in sbt" were standalone then there can be competing plugins focused on bundling alone, that all depend on the npm-dependencies sbt plugin
onanpetrovich
@onanpetrovich
Please. How to connect akka-http with the slinky.
On current moment index.html from slinky placed to server/resources.
Inside connect script /client..../...-fastopt. js and loader/js. Not worked
1 reply
Dan Di Spaltro
@dispalt
@nafg oh man I've thought about this like 15 different ways
shadaj
@shadaj:matrix.org
[m]
@nafg: hmm, yeah that's definitely an interesting idea; I also remember there was work on a reverse mode idea where you could compile Scala.js code through a Webpack plugin
@onanpetrovich: you'll probably get a better answer in Akka HTTP rooms, since there aren't many special things that you have to do with Slinky apps as long as you can grab the bundled JS file
nafg
@nafg
@shadaj:matrix.org the problem is that doesn't help for other bundlers
peterstorm
@peterstorm:matrix.org
[m]
Does anyone have an example of ssr with slinky, where the route is dynamic? Like opening a blogpost by slug for example?
shadaj
@shadaj:matrix.org
[m]
peterstorm: the Slinky docs (although prerendered) do dynamically use the path when determining how to SSR each page (https://github.com/shadaj/slinky/blob/master/docs/src/main/scala/slinky/docs/Main.scala#L94)
peterstorm
@peterstorm:matrix.org
[m]
Ah, I didn't look close enough it seems, thank you! I'll try and figure it out :D
Yuriy Yarosh
@yuriy-yarosh

Having trouble with scala.js deps management... quite confused
scala.js mention

I'm getting value can only be used within a task or setting macro with every %%% both in build.sbt and Dependencies.scala

I'm not quite sure how to initialize a libraryDep setting via lazy val in here

lazy val web: immutable.Seq[ModuleID] = "me.shadaj" %%% "slinky-core" % SlinkyVersion ::                                                    ^
build.sbt:33: error: `value` can only be used within a task or setting macro, such as :=, +=, ++=, Def.task, or Def.setting.
  "me.shadaj" %%% "slinky-web" % SlinkyVersion ::

I've imported %%% via import org.portablescala.sbtplatformdeps.PlatformDepsPlugin.autoImport._

Yuriy Yarosh
@yuriy-yarosh
mvillafuertem
@mvillafuertem
Hi all, any example importing an image? using react-native.
mvillafuertem
@mvillafuertem
I just found out that it is the same as with React
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! 😄