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
Alexis Hernandez
@AlexITC
If anyone can look into this issue, I'd appreciate it, I'm failing to get hot-reload working on the scalablytyped slinkydemos repo: ScalablyTyped/SlinkyDemos#33
Shadaj Laddad
@shadaj
@mn98 hmm, I'm looking at the recent publishing logs and it appears that something changed after version 0.6.5+15-fa93d141; before, the IntelliJ plugin was published under the name slinky-core-ijext_2.12 (and 2.13) but after that it's only been published under slinky-core_sjs0.6_2.12 (and 2.13)
Shadaj Laddad
@shadaj
@AlexITC hmm, what is the behavior you're seeing? Also are you using functional components? Those don't support hot reloading yet
Alexis Hernandez
@AlexITC
The behavior I see is a blank page where the js is supposed to be loaded, but no errors or content is displayed, those demos do use functional components but I never thought that was the potential cause because I have another project with functional components where hot reloading seems to work properly
indeed, I just verified hot reloading seems to work in such other project, which I created from the slinky template, and updated to use functional components
Alexis Hernandez
@AlexITC
on the linked PR, I feel the problem may be related to one of the webpack configs, but to be honest I'm not that familiar with webpack and the js side, I'm also a recent slinky adopter, and I'm still getting using to some pieces like hot reloading
Alexis Hernandez
@AlexITC
now that I think about it, it is possibly something different what I see on the functional components side, the hot reloading ends up refreshing the page when I believe it shouldn't, but, in any case, that's far better than no hot-reloading at all
Alexis Hernandez
@AlexITC
I have created shadaj/create-react-scala-app.g8#16 to illustrate that, I tried again, and hot reloading is working properly with functional components
philip andrew
@PhilAndrew
How to use an existing React library in my project? Such as https://www.npmjs.com/package/react-monaco-editor
philip andrew
@PhilAndrew
Is it something like:
@JSImport("resources/node_modules/monaco-editor", JSImport.Default)
@js.native
object MonacoEditor extends js.Object
philip andrew
@PhilAndrew
I think what I want after some research is scalablytyped and slinky as a simple demo github project for using one simple react component
1 reply
philip andrew
@PhilAndrew
A small demo project like this would be useful for me and it could also help the community
mn98
@mn98
Slinky + ScalablyTyped has been extremely productive for me. There are already Slinky flavoured examples under ScalablyTyped in github.
Shadaj Laddad
@shadaj
@AlexITC as I mentioned on the PR, hot reloading might work for functional components without hooks, but there's quite a bit of work that's needed to support those that do use hooks. So class components are the way to go if you want hot reloading for now unfortunately. For hot reloading not working in your own project, I agree that it's probably just a Webpack config issue. The best way to debug this is probably just compare against the config in the starter template.
1 reply
@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)
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