Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Dec 01 23:45

    shadaj on update-setup-scala

    (compare)

  • Dec 01 23:45

    shadaj on master

    Update olafurpg/setup-scala to … (compare)

  • Dec 01 23:45
    shadaj closed #452
  • Dec 01 22:47
    shadaj opened #452
  • Dec 01 22:47

    shadaj on update-setup-scala

    Update olafurpg/setup-scala to … (compare)

  • Dec 01 08:27
    scala-steward opened #451
  • Nov 29 20:37
    evbo commented #273
  • Nov 29 03:47
    evbo commented #273
  • Nov 27 17:54
    scala-steward closed #437
  • Nov 27 17:54
    scala-steward opened #450
  • Nov 25 11:14
    scala-steward closed #443
  • Nov 25 11:14
    scala-steward opened #449
  • Nov 24 18:53
    shadaj closed #448
  • Nov 24 18:53
    shadaj commented #448
  • Nov 24 14:51
    zhiwilliam opened #448
  • Nov 23 04:12
    scala-steward closed #444
  • Nov 23 04:12
    scala-steward opened #447
  • Nov 22 00:04
    scala-steward closed #445
  • Nov 22 00:04
    scala-steward opened #446
  • Nov 18 16:24
    scala-steward closed #441
Shadaj Laddad
@shadaj
@peterstorm yes! I use Metals as my daily driver for Slinky (and other) projects
@/all I'm working on my personal statement for PhD applications, and wanted to put together a list of real-world uses of Slinky. If you're okay with your organization being mentioned in my statement as an example of a Slinky user, would love to hear about how you're using Slinky! (even if you'd prefer not to reveal the organization, would still love to hear about your experiences)
9 replies
mcallisto
@mcallisto

I have

@JSImport("./assets/images/fish.png", JSImport.Default)
@js.native
object Fish extends js.Object

I am going back to this question by @msinton , since I am currently stuck on the same... In React Native, where do you place a local image in order for it to be found by the @JSImport?

mcallisto
@mcallisto
Has someone an example of this being already solved?
František Kocun
@fokot
what ui library would you recommend for an slinky app which will be used probably 99% from the phone? it sill be simple to-do list like app but i will need nice touch support and animations for sliding tabs etc. and it needs to be fast. slinky-materials-ui?
mn98
@mn98

Hi all, I'm sure I'm missing something really obvious here. I'm trying to add a checkbox like so:

            input(`type` := "checkbox", id := thing, name := thing),
            label(`for` := thing, thing)

but of course for does not exist. Perhaps I don't need the label, but I'd like to understand how to define one. Thanks!

mn98
@mn98
Even better, if anyone would be kind enough to point me at a working example of a checkbox that would be great.
mn98
@mn98
I dropped the for and after battling with the onChange over the reused React SyntheticEvent I now have a working collection of checkboxes.
I'm still curious about the for though if anyone has any insight.
Joan Goyeau
@joan38

@mcallisto In my project I have:

  @JSImport("./images/argus-logo.svg", JSImport.Default) @js.native
  object ArgusLogo extends js.Object

And that file is in src/main/js/images/argus-logo.svg

And my webpack config contains:
module.exports = {
  module: {
    rules: [
      { test: new RegExp("\\.css$"), use: ["style-loader", "css-loader"] },
      { test: new RegExp("\\.(svg|png|jpg|gif)$"), use: "file-loader" }
    ]
  }
}
Took me some time to figure this out but works great
mcallisto
@mcallisto

Took me some time to figure this out but works great

@joan38 thank you! I have been helped to find a somehow simpler solution, identifying the correct relative dir (in relation to target). I will add it to a demo and post here the details.

mn98
@mn98
@shadaj @joan38 I've been using Play+Slinky so I'm curious to understand how you do all the routing/json/sse/streaming between the client and server with just Slinky. Or have I misunderstood and there is no jvm 'server' in this case?
I'm quite new to JS app dev generally so please feel free to spell out the obvious to me!
Ramnivas Laddad
@ramnivas
@mn98 We don't use Play, but based on our experience, routing will be handled in client (we use React Router). In our case, the server (written in Scala) simply provides the API (a mix of REST and GraphQL); the client is otherwise disconnected from the server implementation.
mn98
@mn98
@ramnivas thanks very much, I shall do some homework!
František Kocun
@fokot
@mn98 or you can use https://github.com/lihaoyi/autowire if you want to call scala function in code which in reality will be call to server
Pascal Mengelt
@pme123
I was wondering if there is an example with the following 'features':
  • sbt multi-modules (server / client / shared)
  • using a CSS library like Semantic-UI
  • using REST-APIs and Websockets
    Examples or Projects that use parts of my list are of course also welcome;).
2 replies
Gabor Juhasz
@gjuhasz86
hi, is there a way to create a component that has a generic type parameter?
@react class MyComponent[T] extends Component { ... }
Pascal Mengelt
@pme123

small bug in documentation ( https://slinky.dev/docs/the-tag-api/ )?

input(onChange := (event) => {
  println("the value of this input element was changed!")
})

does not work - this works:

input(onChange := (event => {
        println(s"the value of this input element was changed!")
      }))

Only difference are the parentheses.

Peter Storm
@peterstorm
Can we use Webworkers in Slinky?
Ramnivas Laddad
@ramnivas
Yes, you may.
Gabor Juhasz
@gjuhasz86
hi, is there anything special needed to get onKeyPress working? Looks like it never gets called.
https://scalafiddle.io/sf/qJcjX5e/18 (couldn't make it work locally either)
Ramnivas Laddad
@ramnivas

If you change your element to input, it works fine (unless the element has focus, it won't receive any key events):

      input(
        onClick:= (_ => println(s"MOUSE")),
        onKeyPress:= (_ => println(s"KEYBOARD"))
      )

Also, onKeyPress is deprecated (but works), so you should be using onKeyDown (https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event)

Gabor Juhasz
@gjuhasz86
Thanks, although it looks like even input only fires the keyPress/keyDown events when it is focused. That's not really feasible for my use case.
Pascal Mengelt
@pme123
image.png
Hi, I write a blog, translating the intro tutorial of react to Slinky. Before I publish it, I thought to get some feedback from Slinky cracks;).
Alexis Hernandez
@AlexITC

Is there any example for functional components depending on generic types? apparently, def component[D] = FuncionalComponent[Props[D]] {...} is not enough

@react must annotate:
[error]   - a class that extends (Stateless)Component,
[error]   - an object that extends ExternalComponent(WithAttributes)(WithRefType)
[error]   - an object defining a `val component = FunctionalComponent(...)`
[error]   @react class RemoteDataLoaderComponent {

I have tried some variations without luck

Alexis Hernandez
@AlexITC
correction, my only approach until now is defining a base trait that uses the generic type, requiring to extend such component every time, I'd like to get to use functions only:
trait RemoteDataLoaderBase[D] {
  case class Props(fetcher: () => Future[D], render: D => ReactElement)

  val theComponent: FunctionalComponent[Props] = FunctionalComponent[Props] { ...}
}

@react object MyProductsSummaryLoader extends RemoteDataLoaderBase[GetTrackedProductsResponse] {
  val component = theComponent
}
Alexis Hernandez
@AlexITC
Another question, I'm struggling to force a refresh for the whole component, given react-faq, something as simple as this custom hook should be enough, but for some reason, it isn't, I have added debug logs, and the counter gets updated properly but the component isn't rendered again as expected:
  def forceRefresh() = {
    val (_, increment) = Hooks.useReducer[Int, Int](_ + _, 0)
    () => increment(1)
  }
Alexis Hernandez
@AlexITC
thanks, it's basically the same as what I posted, I think my problem relates to a component that uses the Hooks.setEffect(..., ""), which prevents the effect from running multiple times, unfortunately, I have no idea how to force such effect to run again without getting in executed indefinitely
Shadaj Laddad
@shadaj
@pme123 just took a look at your blog post, and it looks great! It's awesome to see how easy it was to port some JavaScript code to Scala.js with Slinky!
Alexis Hernandez
@AlexITC

Anyway, I ended up writing this: https://github.com/wiringbits/cazadescuentos/blob/master/lib/ui/src/main/scala/net/wiringbits/cazadescuentos/ui/components/RemoteDataLoaderBase.scala

I'm not 100% happy with the solution but it works, thanks for the help

Pascal Mengelt
@pme123
@shadaj yeah really great work you and the Slinky community did -keep up the excellent work:). By the way I saw that the link not works anymore - here is the published one:
https://pme123.medium.com/slinky-doing-react-the-scala-way-f78ccf42bf8f
Peter Storm
@peterstorm
Is there anything wrong with just depending on a CSS framework by getting it in the index.html file, and then just adding classes in the code?
Peter Storm
@peterstorm
Im trying to use the ScalablyTyped plugin for typescript types, but it hangs on trying to build the standard library or something?
Phase3Compile.scala:125 Building C:\Users\phn.ivy2\local\org.scalablytyped\std_sjs1_2.13\4.0-34aa7a\jars\std_sjs1_2.13.jar... [thread => 177, project => conn...
Anyone have experience with that? It's been going for ages and complains about spending too much time garbarge collecting
Im using sbt
Alexis Hernandez
@AlexITC
You need to increase the memory, latest versions need a lot, this worked for me, create .sbtopts with
-J-Xmx4G
-J-XX:MaxMetaspaceSize=4G
-J-XX:+CMSClassUnloadingEnabled
Peter Storm
@peterstorm
Thanks that worked!
Pascal Mengelt
@pme123
Is there an example on how to integrate JavaScript code that is not a React Component? According to the doc are External Components just for them.
I have the following I want to use with Slinky. Using External Components did not work.
import Modeler from 'bpmn-js/lib/Modeler';

const modeler = new Modeler({
  container: $modelerContainer,
  moddleExtensions: {
    custom: customModdleExtension
  },
  keyboard: {
    bindTo: document.body
  }
});
nafg
@nafg
@pme123 just refer to regular scala.js docs
Peter Storm
@peterstorm
Is it possible to import an scss file and use the classes defined in that?
Peter Storm
@peterstorm
Is it just like example app, where you just import it as an js object, and make the styles available via a private val?
Peter Storm
@peterstorm
And how do I do an aria-hidden, I can see there's a WithDash class, but I'm unsure of the syntax
Peter Storm
@peterstorm
Ah it was in the docs
But I get this error when I try to do it to an svg tag: type mismatch; found : slinky.core.AttrPair[slinky.web.html._aria_attr.type] required: slinky.core.TagMod[slinky.web.svg.svg.tag.type]