shadaj/slinky

Everything about Slinky -- issues, ideas for features, where it's being used, and more

Eduardo Gonzalez

@wmeddie

Once I get my project in a usable state I’ll try and help out with the docs. I can at least make some suggestions on the places where I got hung up.

Øyvind Raddum Berg

@oyvindberg

That would be great! I'm starting to think the experience with slinky and ST is becoming awesome, and I see it as the only real alternative to typescript if you want to reuse existing libraries. But of course the getting started experience is not there yet

Eduardo Gonzalez

@wmeddie

I see tweets from Japgolly saying that he started with xml but abandoned it because his tags library was better... but You can’t see the xml version anywhere to compare.

Jeff Simpson

@fooblahblah

Thanks @oyvindberg . I got pulled on another feature, but when I get back to it I'll try and find something useful to work off.

Øyvind Raddum Berg

@oyvindberg

:thumbsup:

for me it's easy to imagine a few things @wmeddie , xml is clunky to write (you need interpolations and end tags), I have no idea how intellij would pick up allowed attributes to help you with auto-completion, and finally the syntax is deprecated

Eduardo Gonzalez

@wmeddie

Everybody says clunky, but yeah you know JSX, HTML, axml, XAML. These are all things.

I guess I have to try it and see.

Eduardo Gonzalez

@wmeddie

Yeah… looks much better with XML….

getting that onchange= to work right is probably 99% of the problem though I would imagine.

Jason Pickens

@steinybot

One question I’ve been wondering. Does anyone know why we don’t use the XML literal support in Scala to make things more like JSX? Has anyone tried it?

Adam asked Shadaj this question on the Corecursive podcast (https://corecursive.com/044-shadaj-laddad-react-and-scala-js/) at 19:40. The answer is that XML literals in Scala has an uncertain future.

Olivier NOUGUIER

@cheleb

You meant a certain unfuture :D

Shadaj Laddad

@shadaj

@steinybot answering your question from quite a bit above, to interact with external components (even if they're functional components), you should use ExternalComponent. In release mode, we don't convert Scala props to JS equivalents when using FunctionalComponent, so the JS implementation wouldn't be able to read the props

2 replies

@oyvindberg totally agree about the getting started experience, it would be great to add some docs to the Slinky site on how to use ScalablyTyped bindings, perhaps in a mini-tutorial format?

Øyvind Raddum Berg

@oyvindberg

@shadaj I have a few important tweaks left before things work well enough, and after that the getting started experience is going to be top priority :) I'm not sure what form it will take, mini-tutorials or otherwise, but I hope that after some rounds of iteration we can make everything manageable. I'm pretty confident that we're onto something though, the developer experience with ST and slinky is really starting to shape up I think.

Eduardo Gonzalez

@wmeddie

Is material-ui really finiky in general or am I just holding it wrong?

Like, I have a div(CssBaseline, AppBar(Toolbar, Drawer), div(content)) But the content is somehow filling up the AppBar?

Todd O'Bryan

@toddobryan

What's the right Slinky type to use for something that in TypeScript expects a React.ReactNode?

Shadaj Laddad

@shadaj

@toddobryan the equivalent in Slinky is ReactElement

Todd O'Bryan

@toddobryan

Thanks!

Răzvan Rotaru

@roti

Hi everyone

I decided to give slinky a try :), and have two questions:
when defining the properties of an external component:

can I use other types instead of case classes?
is it a problem if I extend the case class, to have some code sharing for common properties

Shadaj Laddad

@shadaj

@roti

yes, as long as there is a Writer instance available (for example, Seq/Map and js.Any types work out of the box)
nope, that should work just fine!

Jeff Simpson

@fooblahblah

@oyvindberg I was able to get back to the problem I posted and have figured it out. Without providing all the code it might not make total sense, but I had misunderstood how the pagination component should be written and was using my own FunctionalComponent[PagingProps] type instead of the one provided by the scalablytyped bindings FunctionalComponent[TablePaginationActionsProps]. Once I used the correct props an implicit in ReactComponentClass.functionalComponentToClass kicked and everything started working.

Alexis Hernandez

@AlexITC

I'm following the getting started tutorial, got to the intellij step, explaining this but I don't see any message asking me to enable slinky support, is there a way to enable this manually? Thanks

Starting with Slinky 0.5.0, the @react macro annotation is implemented with Macro Paradise to ensure compatibility with future versions of Scala, so a small extra step is required to enable IDE support in IntelliJ (version 2018.3 or higher is required). After loading, your project, uncheck Enable loading external extensions in Settings > Languages & Frameworks > Scala > Extensions, hit apply, re-check it, and hit apply again. After applying these settings and refreshing your SBT project again, IntelliJ will pop up with a request to enable Slinky support.

It's worth adding that I'm on scala 2.13, sjs 1.0.0

Alexis Hernandez

@AlexITC

Apparently it used to be a problem shadaj/slinky#273 but I'm experiencing it

Alexis Hernandez

@AlexITC

How do you tend to propagate dependencies to stateless components? I haven't used react much but the way I have saw is people tend to just declare global constants in js and import them in the component file, they way I see is to just add the dependencies to the Props but I was looking to add them to the constructor, as it's usual in Scala

Shadaj Laddad

@shadaj

@AlexITC does adding libraryDependencies += "me.shadaj" %% "slinky-core-ijext" % slinkyVersion to your build.sbt work? IntelliJ's detection of the support plugin is a bit flaky unfortunately

Alexis Hernandez

@AlexITC

Yes, but I had to use "0.6.5+21-77c195eb" as 0.6.5 doesn't seem to be available

Hernancito

@hernansaab

@hernansaab
Hey there, for whoever is interested. I posted a blog that deals with using monocle + akka + react in scala.js. If this resonates to anybody, I would appreciate some feedback.
https://randomthroughtsfromnowhere.com/

and yes, react slinky as well

Eduardo Gonzalez

@wmeddie

Sweet

Alexis Hernandez

@AlexITC

@hernansaab what's the usefulness for akka on sjs? I have never understand such need

Hernancito

@hernansaab

The idea is that your front end application has a broker that is in charge of updating the application model. Much the same way people use redux in react apps

the components never get to update the model directly, but through a message broker. This allows for quite a few potential benefits such as able to intercept any of these requests

Alexis Hernandez

@AlexITC

I don't see much difference with streams/observables where you can do the same without all the akka drawbacks but it's likely a matter of taste

Bruno Medeiros

@bruno-medeiros

@AlexITC does adding libraryDependencies += "me.shadaj" %% "slinky-core-ijext" % slinkyVersion to your build.sbt work? IntelliJ's detection of the support plugin is a bit flaky unfortunately

I just had same problem, but had to use version "0.6.5+21-77c195eb" too

I hope this does become a pain point moving forward (out of brittleness) or so, since otherwise Slinky seems pretty damn cool. I've also started trying it out

trepidacious

@trepidacious

I'm just trying to do some SVG from slinky, and struggling to find how to make a rect, or any examples of using the SVG tags.

Ramnivas Laddad

@ramnivas

@trepidacious Here is an example of using SVG from Slinky:

import slinky.web.svg._

svg(width := s"${svgSize}px", height := s"${svgSize}px")(
        circle(
            cx := center,
            cy := yPosition,
            r := circleRadius,
            stroke := fill_color,
            fill := fill_color,
            strokeWidth := stroke_width
          )
)

Shadaj Laddad

@shadaj

@bruno-medeiros given that the latest master builds do work with IntelliJ, hopefully the 0.6.6 release will work with IntelliJ out of the box (not running IntelliJ myself which is why I haven't gotten to testing the plugin detection just yet, but this is definitely a top priority)

Bruno Medeiros

@bruno-medeiros

@shadaj what IDE do you use, out of curiosity? VSCode?

Why does Slinky use it's own hot redploy thing:

    if (LinkingInfo.developmentMode) {
      hot.initialize()
    }

I thought webpack-dev-server already supplied auto redeploy, from what I see here: https://scalacenter.github.io/scalajs-bundler/cookbook.html#webpack-dev-server

trepidacious

@trepidacious

@ramnivas Ah thanks, I've got that going now, I had a conflict with the contents of slinky.web.html._, I missed that things like width were coming from that rather than SVG equivalents!

Bruno Medeiros

@bruno-medeiros

Is it valid to use a Future inside a React state? I'm getting some problems with it.
I'm suspecting this message is telling me not to:

Information:(19, 2) Using fallback derivation for type com.babylonhealth.ember.core.fhir.FhirResource (derivation: MacroReadersImpl)

Ramnivas Laddad

@ramnivas

@bruno-medeiros Conceptually, I don't think it is a good idea to keep a Future inside a state. Generally, you shouldn't change state except through setState or its functional component counterparts. Keeping a Future will violate this requirement.

Bruno Medeiros

@bruno-medeiros

I understand it's bad code, but I'm still wondering why it doesn't work. I have this code:

  val f = /// some future
  assert(f.isCompleted)
  component.setState(f)

Then the components get a re-render trigger, but the future in the state, on the render function, is not completed...

Bruno Medeiros

@bruno-medeiros

Here is simplified full component: https://gist.github.com/bruno-medeiros/78b7d2eb5ad4b09b8ac71bd2ad68fa8e
I get isCompleted: true first, and then isCompleted: false, even though it's the same Future.. :open_mouth:

Shadaj Laddad

@shadaj

@bruno-medeiros I use VSCode with Metals. Slinky needs a hot-loading hook in order to serialize the state into a format that can be transported between versions of your code. Scala.js uses an encoding for Scala objects that requires us to serialize the original state, load the new bundle, and then deserialize it into the latest object encoding

Where communities thrive

People

Repo info

Activity