Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 08:25
    nadenf commented #433
  • Oct 26 04:08
    AlexITC opened #433
  • Oct 20 01:03
    scala-steward closed #425
  • Oct 20 01:03
    scala-steward opened #432
  • Oct 17 02:24
    scala-steward opened #431
  • Oct 17 02:24
    scala-steward opened #430
  • Oct 15 11:10
    scala-steward opened #429
  • Oct 13 18:44
    scala-steward opened #428
  • Oct 11 14:45
    scala-steward opened #427
  • Oct 09 17:39

    shadaj on master

    Adding missing bits (#422) * A… (compare)

  • Oct 09 17:39
    shadaj closed #422
  • Oct 06 19:04
    scala-steward opened #426
  • Oct 04 22:45
    scala-steward opened #425
  • Sep 30 07:42
    mcallisto review_requested #422
  • Sep 30 06:52
    mcallisto synchronize #422
  • Sep 30 06:50
    mcallisto synchronize #422
  • Sep 30 00:18
    shadaj closed #401
  • Sep 30 00:17

    shadaj on master

    Update scalajs-dom to 1.1.0 (#4… (compare)

  • Sep 30 00:17
    shadaj closed #405
  • Sep 30 00:17
    shadaj closed #417
Shadaj Laddad
@shadaj
@griffin-radix_gitlab @mn98 so I have a hunch why IntelliJ support broke with 0.6.6. What version of Scala are you using? Does the plugin show up if you use 2.13 instead?
mn98
@mn98
@shadaj I'm using scala 2.13.3 and:
    "me.shadaj" %%% "slinky-core" % "0.6.6",
    "me.shadaj" %%% "slinky-web" % "0.6.6",
    "me.shadaj" %% "slinky-core-ijext" % "0.6.6",
philip andrew
@PhilAndrew

I don't know if this is a Slinky or ScalablyTyped question but I tried to get React Monaco Editor component to work and yes it works but I have to construct it with "ReactMonacoEditor.withProps(MonacoEditorProps().set("height", "500").set("width", "500"))"

Why? Is there a more normal way to construct it?

I made demo project here https://github.com/PhilAndrew/ReactSlinkyScalablyTyped

With the file of that code here https://github.com/PhilAndrew/ReactSlinkyScalablyTyped/blob/master/react-leaflet/src/main/scala/demo/App.scala

Øyvind Raddum Berg
@oyvindberg
@PhilAndrew how about ReactMonacoEditor.height(500)...?
Øyvind Raddum Berg
@oyvindberg
@PhilAndrew check this video https://scalablytyped.org/docs/flavour#slinky to see typical usage
Griffin Rademacher
@griffin-radix_gitlab
@shadaj I'm using scala 2.13.2
sidnt
@sidnt
umm. why is the slinky hot module needed? because any writes to the projectA-fastopt.js file (by ~fastOptJS task) is automatically picked and deployed by expo to the devices, eg in my case, to android and to the web.
Shadaj Laddad
@shadaj
@sidnt the hot module enables state preservation across reloads; any state in your class components will be serialized and loaded back into the app once the new code loads
Peter Storm
@peterstorm
Hello, I have tried following the tutorial for making a functional component, but when I try to add it to my App component, there is an error saying "Reassignment to val". I'm on newest intelliJ used the slinky g8 template
Peter Storm
@peterstorm
Ah, somehow I got the slinky extension popup to come, didnt have that before, and now it seems to work
Peter Storm
@peterstorm
How about style-components, I can't seem to get that to work with "me.shadaj" %%% "slinky-styled-components" % "0.1.0"
```
[warn]  Note: Unresolved dependencies path:
[error] stack trace is suppressed; run 'last update' for the full output
[error] (update) sbt.librarymanagement.ResolveException: Error downloading me.shadaj:slinky-styled-components_sjs1_2.13:0.1.0
[error]   Not found
[error]   Not found
[error]   not found: C:\Users\phn\.ivy2\local\me.shadaj\slinky-styled-components_sjs1_2.13\0.1.0\ivys\ivy.xml
[error]   not found: https://repo1.maven.org/maven2/me/shadaj/slinky-styled-components_sjs1_2.13/0.1.0/slinky-styled-components_sjs1_2.13-0.1.0.pom
[error] Total time: 1 s, completed 07-10-2020 16:58:47
sidnt
@sidnt
macros are going to be a significant change in scala3. and slinky uses a lot of macros for providing the jsx like syntax. how will this fare with scala3?
Noel Welsh
@noelwelsh
I'm not familiar with the details of Slinky's macros but from using the library I don't think what they do will be difficult to port to Dotty.
Shadaj Laddad
@shadaj
@peterstorm I think slinky-styled-components doesn't support 2.13, but PRs to add support are welcome!
@sidnt it will probably involve a fair bit of effort, but as @noelwelsh said we're not doing too many things that aren't supported by Dotty. The biggest missing thing right now is macro annotations, but I believe the team is aware of this so hopefully there will be a nice solution soon
Matt Hicks
@darkfrog26
Is there any information on how to create facades for custom reactnative components? I'm trying to create a facade for: https://github.com/wxik/react-native-rich-editor but I'm getting errors when I try to run it in Expo. This is my code:
package hello.world

import slinky.core.ExternalComponentWithRefType
import slinky.core.annotations.react

import scala.scalajs.js
import scala.scalajs.js.annotation.JSImport

@js.native
trait RichEditorInstance extends js.Object {
}

@react object RichEditor extends ExternalComponentWithRefType[RichEditorInstance] {
  case class Props(style: js.UndefOr[js.Object] = js.undefined)

  @js.native
  @JSImport("react-native", "RichEditor")
  object Component extends js.Object
  override val component = Component
}
the code does compile
Alexis Hernandez
@AlexITC
@darkfrog26 nice to see you around, it's simpler to use https://scalablytyped.org/ to generate those for you, be sure to check https://github.com/ScalablyTyped/SlinkyDemos
Peter Storm
@peterstorm
Wait, so you can generate facades automatically? For anything?
Anton Sviridov
@keynmol
With ScalablyTyped if there's a typescript definition in the NPM module you're trying to facade, it will be able to generate a Scala.js facade out of that definition, yes
Peter Storm
@peterstorm
Nice!
ill see if i can figure that out
Peter Storm
@peterstorm
Does the slinky extension work with VsCode_
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)
7 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.