Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Mar 02 10:25
    zakpatterson closed #307
  • Feb 27 19:58
    scala-steward closed #460
  • Feb 27 19:58
    scala-steward commented #460
  • Feb 27 19:58
    scala-steward opened #467
  • Feb 27 01:14
    scala-steward opened #466
  • Feb 27 01:14
    scala-steward opened #465
  • Feb 14 21:35
    scala-steward synchronize #451
  • Feb 14 20:53

    shadaj on master

    Update sbt-sonatype to 3.9.5 (#… (compare)

  • Feb 14 20:53
    shadaj closed #435
  • Feb 14 20:53

    shadaj on master

    Update sbt to 1.4.7 (#462) (compare)

  • Feb 14 20:53
    shadaj closed #462
  • Feb 12 12:10
    scala-steward closed #442
  • Feb 12 12:10
    scala-steward commented #442
  • Feb 12 12:10
    scala-steward opened #464
  • Feb 04 06:45

    shadaj on v0.6.7

    (compare)

  • Feb 04 01:54

    shadaj on master

    Release v0.6.7 (compare)

  • Feb 02 22:32
    scala-steward opened #463
  • Jan 31 07:43
    scala-steward opened #462
  • Jan 28 07:49
    sidnt opened #461
  • Jan 15 19:35

    shadaj on master

    Add dependency on Java IntelliJ… (compare)

Shane
@Shailpat3Shane_twitter
which is basically a string I will receive I would make it as React component and render it
Shadaj Laddad
@shadaj
@Shailpat3Shane_twitter ah, in that case you may want to look at dangerouslySetInnerHTML (https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml)
Shane
@Shailpat3Shane_twitter
@shadaj Thank you I will try that
mvillafuertem
@mvillafuertem

Hi there, I have been working with useEffect, but when I try cleanup this doesn't work. I have opened an issue with all information. Thanks!

shadaj/slinky#415

Ramnivas Laddad
@ramnivas
@mvillafuertem Added a comment and solution to the issue (basically not a Slinky issue, but related to silent implicit conversions to js.Function)
mvillafuertem
@mvillafuertem
Thanks a lot @ramnivas !!
SWAPNIL SONAWANE
@iamswapnil44_twitter

Hi All ,

I am writing a test cases of functional component using munit and below is the code :

import components.ErrorComponent
import munit.FunSuite
import org.scalajs.dom.document
import slinky.core.FunctionalComponent
import slinky.web.ReactDOM

class ErrorComponentTestSuite extends FunSuite {

test("Can render a functional component") {
    val container = document.createElement("div")
    val component = FunctionalComponent[Int](_.toString)
    ReactDOM.render(component(1), container)

    assert(container.innerHTML == "1")
  }

}

whenever i execute this code using command testOnly etlflow.components.ErrorComponentTestSuite it fails with an error :

etlflow.components.ErrorComponentTestSuite:
==> X etlflow.components.ErrorComponentTestSuite.Can render a functional component 0.01s scala.scalajs.js.JavaScriptException: ReferenceError: window is not defined

Any idea what i am doing wrong here ?

Shadaj Laddad
@shadaj
@iamswapnil44_twitter do you have jsdom setup to emulate the DOM APIs? You'll need to add something like Test / jsEnv := new org.scalajs.jsenv.jsdomnodejs.JSDOMNodeJSEnv() to your build.sbt to enable it
Noel Welsh
@noelwelsh
Hi! I can't figure out how to write an event handler that responds to onKeyDown. My issue is constructing the type of the event. Can anyone help? Thanks!
Noel Welsh
@noelwelsh

I have this

    def keyHandler(evt: SyntheticKeyboardEvent[dom.html.Input]) =
      if(evt.key == "Enter") props.updateTags(props.tags + (tagRef.current.value))
      else ()

and I get the complaint

[error]  overloaded method := with alternatives:
[error]   (v: Option[() => Unit])slinky.core.OptionalAttrPair[slinky.web.html._onKeyDown_attr.type] <and>
[error]   (v: () => Unit)slinky.core.AttrPair[slinky.web.html._onKeyDown_attr.type] <and>
[error]   [T <: slinky.core.TagElement](v: slinky.web.SyntheticKeyboardEvent[T#RefType] => Unit): slinky.core.AttrPair[T]
[error]  cannot be applied to (slinky.web.SyntheticKeyboardEvent[org.scalajs.dom.html.Input] => Unit)
[error]               onKeyDown := (keyHandler _))
I don't understand where the subtype TagElement constraint comes from. I can't see it in the code. And I don't understand what I'm supposed to write to create an event handler of the correct type.
E.g. SyntheticKeyboardEvent has no subtype constraint, and neither does SyntheticEvent.
Shadaj Laddad
@shadaj
@noelwelsh Hmm, that method declaration should have worked, the event type looks right. Could you try := (evt) => keyHandler(evt)? Slinky uses a bit of implicit trickery in order to have the event's element type match the tag that the attribute is being applied to, I wonder if there's some issue with partially applied functions here. You are setting this attribute on an input tag, right?
Noel Welsh
@noelwelsh
Yes, it's an input. Your proposed change works.
Thanks! (Though it would be good to understand what's going on. I tracked this down to generated code but I'm struggling to figure out how it all hangs together.)
Shadaj Laddad
@shadaj
Yeah, it would be great to have some more detailed docs on how the tags API works. I'll look into adding some soon
mn98
@mn98

Hi all. Thoroughly enjoying Slinky to build my app using functional components with hooks. I've hit a road block with useContext in that I can't figure out how to set the value. I naively thought it would be similar to useState like so:

val (thing, setThing) = useContext(MyContexts.thing)

which I believe is how it works in vanilla React. This doesn't appear to be the case with Slinky (version 0.6.5). Could someone please explain how to use context with functional components in Slinky? What have I misunderstood? Thanks!

Noel Welsh
@noelwelsh
I haven't used the API but there is this documentation: https://github.com/shadaj/slinky/blob/master/docs/public/docs/context.md
It doesn't seem to provide a way to set the context from the result of the useContext hook. Note that React doesn't do this either: https://reactjs.org/docs/hooks-reference.html#usecontext You set the context using a Provider.
mn98
@mn98
@noelwelsh thanks, yes, I just finished reading through the docs myself a few minutes ago and realised I need to use the MyContexts.thing.Provider approach within the functional component that sets the value and render all consumers of that value within the body of that provider.
On a slightly related note, is there a recommended/efficient way of sharing state globally?
Griffin Rademacher
@griffin-radix_gitlab

Hey there; loving this library so far!

I am running into an issue with the react-router facade when trying to use activeClassName with NavLink. I'm not sure why, since I think I'm using it the same way NavLink is used for the sidebar on the Slinky docs site, and that works perfectly.

Minimal example of what isn't working for me:

    @react object Homepage {

      case class Props()

      val component = FunctionalComponent[Props] { props =>
        NavLink(
          to = "/about",
          activeClassName = Some("bar")
        )(
          className := "foo"
        )(
          "About"
        )
      }
    }

    ReactDOM.render(
      Router(
        history = History.createBrowserHistory()
      )(
        Switch(
          Route("/", Homepage.component, exact = true),
          Route("/about", Homepage.component),
          Route("*", Homepage.component)
        )
      ),
      container
    )

The link itself works, and goes to the /about page, but the bar class doesn't get added when /about is the current page.

Any thoughts on what I might be doing wrong would be greatly appreciated!

mcallisto
@mcallisto

On a slightly related note, is there a recommended/efficient way of sharing state globally?

@mn98 not sure if it can be of interest in your search, but I wrote this example about using Diode https://github.com/mcallisto/slinky-diode-todomvc

mn98
@mn98
@mcallisto thanks very much, diode looks very interesting and your demo is nice and slick! My current experiment is written in Play+Slinky with local state/context managed within React components and some global state managed with fs2. I'll certainly read through the diode docs and see if it might make better sense to manage client-side state with diode.
Shadaj Laddad
@shadaj
@griffin-radix_gitlab my guess is that something is going wrong with the route that's being selected, perhaps the top-level /about route is shadowing activation of the inner /about route? Might be helpful to use the devtools to see which routes are being selected
Alexis Hernandez
@AlexITC

I'm having troubles to translate this to slinky external components, the official docs has no similar example, any hint is appreciated: http://recharts.org/en-US/guide/getting-started

The js side is:

import { LineChart, Line } from 'recharts';
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];

const renderLineChart = (
  <LineChart width={400} height={400} data={data}>
    <Line type="monotone" dataKey="uv" stroke="#8884d8" />
  </LineChart>
);
mn98
@mn98
Hi all. I'm trying to put together a Slinky example using 'server sent events' but I'm hitting a few stumbling blocks. While I continue stumbling my way through, is anyone aware of any existing examples out there? Thanks!
Shadaj Laddad
@shadaj
@AlexITC you'll want to add an additional children: ReactElement* to the props definition of your external component to enable taking those as a curried parameter
@mn98 you might want to take a look at https://github.com/Team846/funky-dashboard, something I built a while ago with Slinky that uses server sent events as a simpler alternative to WebSockets (we needed to implement the server in Scala Native, so had to implement everything from scratch which made WebSockets hard to use)
mn98
@mn98
@shadaj thanks very much, I'll take a look! I got my example working this afternoon using Play+Slinky, but I have some odd behaviour with the browser hanging when I try to navigate away from my 'ticking clock' using the address bar.
mcallisto
@mcallisto

Hello @shadaj, I have the following question.
Is there a drier or more idiomatic way in Slinky to achieve the following:

def toOption[T](ot: T | Null): Option[T] = Option(ot.asInstanceOf[T])

var swi: Option[ScrollViewInstance] = None
val scrollView = ScrollView().withRef(nullableRef => swi = toOption(nullableRef))
swi.head.scrollToEnd()

That is, using the scrollToEnd method of the slinky.native.ScrollView component?

mn98
@mn98
Hi all! Is there a plan to support typed props for functional components in the @react style? Currently the docs suggest this isn't supported. This would help me consolidate quite a bit of duplicate code in the future. I can work around it for now, was just curious, thanks!
Peter Storm
@peterstorm
Hello! How can I specify which port I want the dev server to run on?
Noel Welsh
@noelwelsh
Peter Storm
@peterstorm
Cheers @noelwelsh, i'll try that!
Shadaj Laddad
@shadaj
@mcallisto typed props are a bit tricky for functional components since it's unclear what the props type of the functional component object should be; I feel like it might be okay to type the component as FunctionalComponent[Props[_]] but need to think a bit more about this
@mcallisto you might be able to simplify toOption a bit by adding T <: AnyRef, which should eliminate the need for the cast; unfortunately not much more that can be improved, but perhaps useRef could simplify the code a bit?
mn98
@mn98
@shadaj thanks for confirming re typed props, I can work around that. I’m finding Slinky to be a huge productivity boost. Are there any industrial use cases of this library yet?
Ramnivas Laddad
@ramnivas
@mn98 We have launched https://learnraga.com that is completely written in Slinky.
Anton Sviridov
@keynmol
wow that is very cool
mn98
@mn98
@ramnivas that is cool, indeed!
Griffin Rademacher
@griffin-radix_gitlab
What's the word on IntelliJ support lately? I was able to use the workaround (https://gitter.im/shadaj/slinky?at=5f44b861dfaaed4ef50a5029) to install the IntelliJ extension successfully for Slinky 0.6.5, but I can't get it to work with 0.6.6. I've tried using the version numbers 0.6.5+31-43e32880, 0.6.6, 0.6.6+1-83a94445, and 0.6.6+4-7d07b9a5 for the ijext Maven artifact with Slinky 0.6.6, but I only get a prompt to enable the extension with Slinky 0.6.5 and artifact version 0.6.5-*. I don't get the prompt that's supposed to come up according to the docs with either version of Slinky. Is this something wrong with my machine, or have others also not been able to use the IntelliJ extension with 0.6.6? (Also, I'm on IntelliJ 2020.1.1, but the problem showed up for me on 2020.2.2 as well)
mn98
@mn98
@griffin-radix_gitlab I've also had problems since I moved to 0.6.6, while the workaround had done the trick for me with 0.6.5. I'm just living with the red ink for the time being.
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