by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Sep 14 19:15
    scala-steward opened #419
  • Sep 08 23:38
    scala-steward opened #418
  • Sep 08 17:45
    scala-steward opened #417
  • Sep 08 09:13
    mvillafuertem commented #416
  • Sep 08 08:46
    mvillafuertem commented #416
  • Sep 08 07:28
    mvillafuertem commented #416
  • Sep 07 23:09
    ramnivas commented #416
  • Sep 07 19:45
    mvillafuertem commented #416
  • Sep 07 19:35
    mvillafuertem edited #416
  • Sep 07 19:35
    mvillafuertem commented #288
  • Sep 07 19:34
    mvillafuertem edited #416
  • Sep 07 19:30
    mvillafuertem edited #416
  • Sep 07 19:30
    mvillafuertem opened #416
  • Sep 07 18:10
    mvillafuertem commented #288
  • Sep 06 18:15
    mvillafuertem closed #415
  • Sep 06 18:15
    mvillafuertem commented #415
  • Sep 06 17:44
    ramnivas commented #415
  • Sep 06 17:10
    mvillafuertem edited #415
  • Sep 06 17:09
    mvillafuertem edited #415
  • Sep 06 16:39
    mvillafuertem edited #415
Shadaj Laddad
@shadaj
@ldeck I believe that IntelliJ doesn't support running Scala.js tests yet, so you won't be able to run tests directly; however IntelliJ does have a feature to run tests through SBT, which should work
@mn98 that's odd, usually adding the library dependency definitely gets things to work; does it work if you manually add the JAR (https://repo1.maven.org/maven2/me/shadaj/slinky-core-ijext_2.13/0.6.5+31-43e32880/)?
mn98
@mn98

Aha, @shadaj, I tried again with build.sbt but this time added the following:

libraryDependencies += "me.shadaj" %% "slinky-core-ijext" % "0.6.5+31-43e32880"

On reloading the project Intellij then prompted me to enable the extension! Key differences are %%% -> %% and taking the full version from your mvn link. Thanks very much for the prompt!
It would be preferable if it just worked automagically, but perhaps in the meantime some additional README instructions for this manual workaround could be helpful for new starters?

mn98
@mn98
image.png
@shadaj The last remaining issue I'm experiencing is another Intellij-ism (again, it compiles and runs fine). Taking the code from the Todo example on the Slinky homepage I am getting a couple of type errors above in the presentation compiler. Expected?
mn98
@mn98
@shadaj For clarity, the Form and Input types being used are import org.scalajs.dom.html.{Form, Input}.
Shadaj Laddad
@shadaj
@mn98 hmm, seems like there may be a bug with how IntelliJ handles dependent types; probably best way to look into this is trying to come up with a minimal reproducer to send to the IntelliJ team
I'll look into adding the libraryDependencies fix as another workaround to the docs: shadaj/slinky#410
mn98
@mn98
@shadaj, thanks! Fiddling around with ScalablyTyped + Slinky now. Fun stuff :-)
mn98
@mn98

Hi all - I've been using Scala for several years now but I'm new to React/JS/UI so please forgive me if this question seems a bit naive!
Is this React snippet...

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

...written like this in Slinky...

@react class Something extends StatelessComponent {
  case class Props(ref: ReactRef[Div] = React.createRef[Div])
  override def render(): ReactElement = {
    div(ref := props.ref)
  }
}

...which compiles fine for me, or is there a more 'correct' way? Just want to make sure I get the basics right as I'm learning. Thanks!

Noel Welsh
@noelwelsh
React is moving away from components to functions and hooks. The Slinky equivalent of "functions" in this context is FunctionalComponent. So I'd look at using them instead
mn98
@mn98
@noelwelsh, thanks, that is very interesting. Hooks seem to take React in a more pure, functional direction, which makes a lot of sense. I think I will skip straight to them!
Ramnivas Laddad
@ramnivas
@mn98 As @noelwelsh mentioned functional component is the way to go. Besides being in sync with the current trend in React, we saw about 20% reduction in our code.
mn98
@mn98
@ramnivas that sounds great! Functional components are also more inline with the rest of my code, which is largely leveraging cats-effect. I'm already finding the functional components easier to reason about.
nafg
@nafg
This message was deleted
Hooks are not pure
mn98
@mn98
I knew someone would pick me up on that slip :-)
nafg
@nafg
:laughing:
Shane
@Shailpat3Shane_twitter
How can I convert HTML escape string to ReactElement ?
val x = " <div className="App">
        <Foo name="Russ"/>
      </div>"
val y = "&lt;div className=&quot;App&quot;&gt;&lt;Foo name=&quot;Russ&quot;/&gt;&lt;/div&gt;"
ReactElement from this ^^
mcallisto
@mcallisto

A question regarding Slinky's native TouchableOpacity component. Which is the correct way to pass for example the whenPressed: () => Unit value to its onPress prop?

I used to write TouchableOpacity(onPress = props.whenPressed.apply) but this no longer works in my updated React Native environment, I get the following error: Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Instead if I use a Slinky's native Button component, for example Button(onPress = props.whenPressed, title = "Click me") everything works just fine.

mcallisto
@mcallisto
Should not this https://github.com/shadaj/slinky/blob/691fca60703a08d735381025094b0572d207eda8/native/src/main/scala/slinky/native/TouchableOpacity.scala#L10 be changed to case class Props(onPress: () => Unit, style: js.UndefOr[js.Object] = js.undefined)?
mcallisto
@mcallisto
@shadaj I am proposing a PR on this, see shadaj/slinky#412
Shadaj Laddad
@shadaj
@mcallisto looking at the React Native docs, the onPress is optional so should probably be onPress: js.UndefOr[() => Unit] = js.undefined. But in any case defining prop types as optional shouldn't have caused an infinite loop, that's probably a separate issue.
@Shailpat3Shane_twitter since your example code contains a reference to Foo, which I assume is a React component, AFAIK there's no way to convert the string to a React element (other than writing a custom parser)
mcallisto
@mcallisto

...the onPress is optional so should probably be onPress: js.UndefOr[() => Unit] = js.undefined.

Updated the PR, but if you prefer you can turn it down and leave everything like it is now, it was probably an IntelliJ issue on my side.

But in any case defining prop types as optional shouldn't have caused an infinite loop, that's probably a separate issue.

That was probably me trying to use apply.

Shane
@Shailpat3Shane_twitter

@Shailpat3Shane_twitter since your example code contains a reference to Foo, which I assume is a React component, AFAIK there's no way to convert the string to a React element (other than writing a custom parser)

@shadaj my bad there is no custom component just simple html <div> <p>Status Messages</p> </div>

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.