Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 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
  • Sep 30 00:16
    shadaj closed #419
Noel Welsh
@noelwelsh
Sorry, I don't really understand the inner workings of expo, so I can't help further. Only thing I could find is that React Native uses a file watching service called watchman, and you could configure that to ignore your project directory: https://facebook.github.io/watchman/docs/config.html
Øyvind Raddum Berg
@oyvindberg
You typically need to increase the number of open files for your system/user @keynmol
Vitaly Lavrov
@lavrov
I have been playing with Slinky recently. Managed to build the project with Mill. If anyone is interested check it out https://github.com/lavrov/scalajs-slinky-mill
Cilo Riveros
@cilicio

Hi, I been working with fuctional components, and I need something like componentWillUnmount in react class component. In react documentation says that we must return a function in useEffect Hook like:

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

I'm trying doing this:

    val cleanup: js.Function = () => {
      dom.console.log("cleanup")
    }

    useEffect({ () =>
      dom.console.log("effect");
      cleanup
    })

But it never prints cleanup. Is this feature supported? Am I wrong about something?

Ramnivas Laddad
@ramnivas
This feature is supported and we use it a lot. Take a look at https://github.com/kladdad/use-slinky-hooks/blob/master/src/main/scala/com/payalabs/slinky/hooks/WindowsHooks.scala to see how it differs from yours.
Shadaj Laddad
@shadaj
@cilicio it should work if you remove the : js.Function, since Slinky looks for a regular Scala function and performs the conversion under-the-hood
@lavrov that's very awesome! could you create a PR to add a link to it from the docs?
Cilo Riveros
@cilicio
It works!! I was having trouble understanding the life cycle of my app. Thank you for your great work.
Alexander Samsig
@Asamsig
Hey @shadaj, I'm working on a personal static website for fun, and I based it on the Slinky docs. Would you be interested in me making a PR with bumps to various NPM dependencies and minor changes to make it work with the newest versions ?
Shadaj Laddad
@shadaj
@Asamsig that would be great! the docs site is using some fairly old package versions, would be nice to have it up to date since it often serves as an example for SSR/prerendering
Alexander Samsig
@Asamsig
Awesome, I'll work on it and throw up a PR when it is ready. :)
Have you thought anything about what the upcoming code splitting functionality in Scala.js might mean for Slinky? Or I guess maybe it will be more for the samples, and not Slinky directly.
ldeck
@ldeck

Hey all, newbie question: what’s the trick for running tests in IntelliJ?
This works:

sbt new shadaj/create-react-scala-app.g8
cd myapp
sbt test

I’ve tried disabling/enabling ‘Enable loading external extensions’ mentioned here but this doesn’t seem to make any difference.

But importing the project into IntelliJ, and running AppTest.scala

java.lang.NoClassDefFoundError: org/scalatest/tools/Runner
    at org.jetbrains.plugins.scala.testingSupport.scalaTest.ScalaTestRunner.runScalaTest2(ScalaTestRunner.java:133)
    at org.jetbrains.plugins.scala.testingSupport.scalaTest.ScalaTestRunner.main(ScalaTestRunner.java:27)
Caused by: java.lang.ClassNotFoundException: org.scalatest.tools.Runner
    at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:583)
    at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
    at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521)
    ... 2 more
mcallisto
@mcallisto
Hi @shaday, following into the steps of ScalablyTyped/SlinkyDemos react-native, I have opened a PR shadaj/expo-template-scala#6 to upgrade the Expo Slinky Template from Expo SDK 35 to 37.
mvillafuertem
@mvillafuertem
Hi all. How can I render this simple component with slinky? Thanks!
import * as React from "react";
import { withTheme, WithTheme } from "@material-ui/core/styles";

function MyComponent(props: WithTheme) {
  return <div>{props.theme.direction}</div>;
}

export default withTheme()(MyComponent);
import org.scalajs.dom
import slinky.core.annotations.react
import slinky.core.{ FunctionalComponent, ReactComponentClass }
import slinky.web.ReactDOM
import slinky.web.html.div
import typings.materialUiCore.stylesMod
import typings.materialUiCore.withThemeMod.{ ThemedComponentProps, WithTheme }

object Demo extends  App {
  @react object MyComponent {
    case class Props(withTheme: WithTheme)
    val component: FunctionalComponent[Props] = FunctionalComponent[Props](props =>
      div(props.withTheme.theme.direction.toString))
  }

  val app: ReactComponentClass[ThemedComponentProps] = stylesMod.withTheme()(MyComponent(_: WithTheme))

  final def main(args: Array[String]): Unit = {
    ReactDOM.render(
      app,
      dom.document.getElementById("container")
    )
  }
}
[error]  found   : slinky.core.ReactComponentClass[typings.materialUiCore.withThemeMod.ThemedComponentProps]
[error]  required: slinky.core.facade.ReactElement
[error]       app,
[error]       ^
Øyvind Raddum Berg
@oyvindberg
@mvillafuertem I havent found a good way to apply functions to components in slinky, the complication is that you need to access the underlying javascript component hidden inside the FunctionalComponent. One pattern which worked was this https://github.com/ScalablyTyped/SlinkyDemos/blob/master/react-mobx/src/main/scala/demo/ObserverComponent.scala
also note that the material-ui demos have a few other ways to inject themes
mvillafuertem
@mvillafuertem

Thanks @oyvindberg. I was exploring the material-ui documentation and looking for other ways to inject themes.

I have created a simple project to test my application, but I get an error. Any suggestion of how could I fix it ?

https://github.com/mvillafuertem/slinky/runs/1016017665?check_suite_focus=true

[error] org.scalajs.jsenv.UnsupportedInputException: Unsupported input: List(Script(/home/runner/work/slinky/slinky/target/scala-2.13/test-classes/react/umd/react.development.js), Script(/home/runner/work/slinky/slinky/target/scala-2.13/test-classes/react-dom/umd/react-dom.development.js), Script(/home/runner/work/slinky/slinky/target/scala-2.13/test-classes/react-dom/umd/react-dom-test-utils.development.js), Script(/home/runner/work/slinky/slinky/target/scala-2.13/test-classes/react-dom/umd/react-dom-server.browser.development.js), CommonJSModule(/home/runner/work/slinky/slinky/target/scala-2.13/scalajs-bundler/test/slinky-material-ui-test-fastopt.js))
Øyvind Raddum Berg
@oyvindberg
That umd seems like a red flag to me, otherwise I'm not sure. I would get it working with production code before moving on to testing as I know scalajs-bundler has/had some problems there
mn98
@mn98
Hi, all! I'm new to Slinky and have been enjoying how closely it resembles vanilla React. It's compiling and running fine for me, however, I'm unable to get Intellij (2020.2) to prompt me to enable Slinky support as detailed here. I can limp along with all the red ink in the IDE, but I'd much rather enjoy the full experience! Any guidance would be much appreciated!
mn98
@mn98

Also, I tried, unsuccessfully, to apply the workaround mentioned in shadaj/slinky#273 by adding the following to build.sbt:

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

And I tried this with the app created following the Create React Scala App guide.

Shadaj Laddad
@shadaj
@Asamsig code splitting is something I am very excited about! Should work with Slinky out-of-the-box at release, but there may be some potential for tighter integrations with features like React.lazy
@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
Shadaj Laddad
@shadaj
@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>