shadaj/slinky

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

Zhange

@zhan-ge

@iamswapnil44_twitter I dont remember the concrete exception I have meet when update from 0.6.3 to 0.6.4, but fixed with some changes as below, you can try this:

//build.sbt
libraryDependencies += "me.shadaj" %%% "slinky-core" % "0.6.4+2-3c8aef65"
libraryDependencies += "me.shadaj" %%% "slinky-web"  % "0.6.4+2-3c8aef65"
libraryDependencies += "me.shadaj" %%% "slinky-hot"  % "0.6.4+2-3c8aef65”

version in webpack := "4.41.6"
version in startWebpackDevServer := “3.10.3"

//libraryDependencies += "org.scalatest" %%% "scalatest" % "3.0.5" % Test
//scalacOptions += "-P:scalajs:sjsDefinedByDefault”

//plugins.sbt
addSbtPlugin("org.scala-js"  % "sbt-scalajs"         % "1.0.0")
addSbtPlugin("ch.epfl.scala" % "sbt-scalajs-bundler" % "0.17.0")

SWAPNIL SONAWANE

@iamswapnil44_twitter

Thanks @zhan-ge it works :)

Luciano

@lJoublanc

Hi All, just getting started and curious to see how this works.
Forgive me for the really simple question, but running the hello world g8 template, what am I supposed to actually see? When I run the test task, I get:

[info] Writing and bundling the test loader
[info] AppTest:
[info] - Renders without crashing

And compile complains there is no main class? Probably need to look at the Scala.js documentation ...

Luciano

@lJoublanc

I can use dev defined in build.sbt. Maybe it's worth adding this to your quickstart, for dumb people like me :grin:

SWAPNIL SONAWANE

@iamswapnil44_twitter

Hi All, does anyone have example on slinky routers. Currently i am using scalably Typed router as below :

def home = div(h2("Welcome to Home Page"))
li(className := "nav-item nav-link", Link[js.Object](to = "/")("Home")),
Route(RouteProps(exact = true, path = "/", render = _ => home)),

Shadaj Laddad

@shadaj

@iamswapnil44_twitter you can take a look at the Slinky docs source (https://github.com/shadaj/slinky/blob/master/docs/src/main/scala/slinky/docs/Main.scala#L46) for a lightweight example of using React Router from Slinky

SWAPNIL SONAWANE

@iamswapnil44_twitter

Thanks for the help @shadaj. I have one more doubt on how to send the props using slinky react router. Currently i am trying like below but it is giving me an error :

Route(path = "/revenue", component = { props => EtlJobRoutes(revenueJobList,revenuePropsList,props.`match`)}),

what is an appropriate way to send props using slinky router ?

Shadaj Laddad

@shadaj

@iamswapnil44_twitter since component needs to be a React component, you'll need to either wrap the function in FunctionalComponent(...) or create that component as a separate @react class component

SWAPNIL SONAWANE

@iamswapnil44_twitter

@shadaj The component is already wrap in FunctionalComponent(...). Take a look :

@react object EtlJobRoutes {
  case class Props(jobList: List[EtlJobName], propsList:List[PropType], matchArg: `match`[_])
  val component = FunctionalComponent[Props] { props =>

    Fragment(
      div(className := "col")(
        div(className := "card")(
          div(className := "card-body")(
            ul(className := "list-group")(
              props.jobList.map( job_name =>
                li(className := "list-group-item")(
                  Link[js.Object](to = props.matchArg.url + "/" + job_name)(s"$job_name")
                )
              )
            )
          )
        )
      ),
      div(className := "col")(
        div(className := "card")(
          div(className := "card-body")(
            Route(
              RouteProps(
                path = props.matchArg.path + "/:topicId",
                render = routeProps => EtlJobProps(props.propsList, routeProps.`match`.asInstanceOf[`match`[EtlJobProps.Param]])
              )
            )
          )
        )
      )
    )
  }
}

or am i doing something wrong here ?

Ramnivas Laddad

@ramnivas

Which version of react-router are you using. If 5.1+, you might have better experience with useParams().

Zhange

@zhan-ge

Hey guys, is there a way to implement props merge or inhert, eg:

type Props = {|
  ...FormStyle,
  ...FormEvents,
  ...MouseEvents,
  ...PointerEvents,
  ...FocusEvents,
  ...KeyboardEvents,
  ...ClipboardEvents,
  +placeholder?: string,
  //...
|};

Personally I think copy&paste is not the best practice…🤔

Shadaj Laddad

@shadaj

@zhan-ge unfortunately, there's no equivalent for that in Scala. What we would need is some type of way to merge case class definitions, but that doesn't exist in the language yet

Zhange

@zhan-ge

@shadaj All right, thanks a lot!

Øyvind Raddum Berg

@oyvindberg

well there is non-native javascript traits with inheritance. trait Props extends FormStyle with .... Not that it's the boilerplate-saver it is in javascript

Alexander Weinmann

@lyrx

Hi, is there an example of how to use slinky with sjs 1.0.X and sbt ? (I have trouble getting the dependencies right)

mcallisto

@mcallisto

Hi @lyrx maybe this can help https://github.com/mcallisto/slinky-diode-todomvc, is updated to sjs 1.0.0

Alexander Weinmann

@lyrx

Yes, that helped! In my case the precompiler annotations had been ignored. No idea which dependency was outdated, but with your example I got it working again.

Pascal Mengelt

@pme123

@mcallisto thanks this helped me as well - sadly going with the documentation did not work for me.

mcallisto

@mcallisto

@pme123 @lyrx happy it helped :+1:

Shadaj Laddad

@shadaj

@pme123 yeah, the docs are aimed at Scala.js 0.6 for now since the ecosystem hasn't been fully ported just yet. Will look into having the config for both versions in the docs.

mvillafuertem

@mvillafuertem

Hi everybody, I'm trying use this library https://github.com/fisshy/react-scroll.

this is my code, but I don't know if this is correct, because I get error. I would be grateful If you have any suggestion

@js.native
trait animateScroll extends js.Object {

  def scrollToTop(): Unit = js.native

}
@js.native
@JSImport("react-scroll", JSImport.Default)
object animateScroll extends animateScroll

Compile / npmDependencies += "react-scroll" -> "1.7.16"

Uncaught TypeError: $moduleDefault(...).scrollToTop is not a function
    at eval (Footer.scala:23)
    at $c_sjsr_AnonFunction1.apply__O__O (AnonFunctions.scala:27)
    at eval (Any.scala:136)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
    at executeDispatchesAndRelease (react-dom.development.js:3278)

Thanks !!

Shadaj Laddad

@shadaj

@mvillafuertem instead of importing as JSImport.Default, you'll probably need to import "animateScroll" since there are many different values being exported by the module; JSImport.Default corresponds to import foo from 'bar' where foo is what you want to receive

mvillafuertem

@mvillafuertem

@shadaj thanks for your answer!!

SOLUTION

@js.native
trait AnimateScroll extends js.Object {
  def scrollToTop(): Unit = js.native
}


@js.native
trait ReactScroll extends js.Object {

  var animateScroll: AnimateScroll = js.native

}
@js.native
@JSImport("react-scroll", JSImport.Namespace)
object ReactScroll extends ReactScroll

msinton

@msinton

Sorry for newb question - I'm creating a react native app using the expo template repo. I've read that it is recommended to use scalajs-bundler - is this also true for react-native and expo?

msinton

@msinton

Also, if I want to use react-native-svg, some instructions say I need to do expo install react-native-svg does that still apply here?

SWAPNIL SONAWANE

@iamswapnil44_twitter

Hello Channel , is there any way to set parent component state from child component using setState method ?

msinton

@msinton

I'm really struggling to use image assets with an expo app. Is there some trick to loading the assets so they can be "required"?

ENOENT: no such file or directory, scandir '/Users/.../expo-template-scala/target/scala-2.13/scalajs-bundler/main/assets/images

I have

@JSImport("./assets/images/fish.png", JSImport.Default)
@js.native
object Fish extends js.Object

Paolo Picci

@qqupp

Hello Channel, First time trying this library. I was trying to display a component with a check box and after trying many (wrong) things

@react class ItemComponent extends StatelessComponent {

  case class Props(item: Item)

  val `type` = new CustomAttribute[String]("type")

  override def render(): ReactElement =
        input( `type` := "checkbox" )

Is there any other way to do it?

Ramnivas Laddad

@ramnivas

@iamswapnil44_twitter In general, that is not possible directly in React and hence in Slinky. What you can do, however, is pass a function that updates the state to the child component.

@qqupp I don't think you need to define a custom attribute here. So the following should work:

import slinky.web.html._

...
input(`type` :=  "checkbox")

Clint Combs

@ClintCombs

I'm exploring various Scala.js libraries, including Slinky - looks like nice work. :thumbsup: It appears to be actively maintained, but I'm curious if contributions to the project are being accepted. I see only @shadaj committing directly to master. Am I mistaken? Again, thanks for the work on Slinky.

Shadaj Laddad

@shadaj

@ClintCombs most of the recent releases have been driven by community contributions! See https://github.com/shadaj/slinky/commits/master, I'm guessing the commits you are seeing are due to Slinky using squash-and-merge for pull requests to maintain a 1:1 PR to master commit correspondence

Clint Combs

@ClintCombs

Thanks @shadaj . That's good to hear and explains what I was seeing on the github network diagram.

SWAPNIL SONAWANE

@iamswapnil44_twitter

Hi Team ,

Is there any way to set interval value dynamically into componentDidmount method. As per my requirement Whenever any user sets an interval value from outside that value needs to be get set. I am sending this interval value as a props to component (in which i have componentDidmount). To get the user set value every-time i need to reopen that component again from UI. Render method shows the user set values quickly but not componentdidmount method. Please suggest.

My code :

object DbJobList extends ComponentWrapper {

  type Props = Int

  case class State(job_run_id:String)

  class Def(jsProps: js.Object) extends Definition(jsProps) {

    override def initialState = State("test")

    private val interval = props * 1000
    private var handle:SetIntervalHandle = null
    private def callAndSetState(): Future[String] = {
    setState(
          State("Sample")
       )

 override def componentDidMount(): Unit = {
      callAndSetState()
      handle = RawTimers.setInterval(() => callAndSetState(), interval)
    }

override def componentWillUnmount(): Unit = {
      clearInterval(handle)
    }

 override def render(): ReactElement = {
        div(h3(s"Job Level Info  : " + props)
}

call to this component is :

//This interval value is set by user dynamically from UI
Route(RouteProps(path = "/dbjoblist", render = _ => DbJobList(interval)))

Thanks.

mcallisto

@mcallisto

Hi @shadaj I have figured out a simple straightforward pipeline for making an Electron app.
It involves just adding a package.json and a build/index.js file to a Slinky web project.
Are you interested in making a demo or a template out of it?

trepidacious

@trepidacious

Sounds cool, do you have an example?

mcallisto

@mcallisto

@trepidacious I am preparing one, I just don't know how is better constructed (a .g8 or not) and where to place it

trepidacious

@trepidacious

@mcallisto Ah me neither, just a basic project would be interesting, I had an electron app set up before but I need to update it for scala 2.13 and scalajs 1.0 so I'd be interested in looking at your approach :)

mcallisto

@mcallisto

Done, see https://github.com/mcallisto/create-react-scala-app.g8/tree/electron

I have just modified in a separate branch the official template, so that the (few) diffs are easier to understand

@trepidacious see https://github.com/shadaj/create-react-scala-app.g8/compare/master...mcallisto:electron

trepidacious

@trepidacious

Looks nice, works for me :) I've not used electron-forge, I used electron-builder last time I tried this

There's a string "probatio_electron" that I guess maybe should be set by the g8 template?

mcallisto

@mcallisto

There's a string "probatio_electron" that I guess maybe should be set by the g8 template?

:+1: thank you, now is correct

Shadaj Laddad

@shadaj

@mcallisto this is awesome! If you could make a PR to add this to the docs, would be glad to merge it in!

mcallisto

@mcallisto

@shadaj yes, I can definitely try, would be ok a new page like https://slinky.dev/docs/electron/ ?

Shadaj Laddad

@shadaj

@mcallisto Yup, that would be great! Could go next to "React Native and VR"

mcallisto

@mcallisto

@shadaj done, see shadaj/slinky#339

Zhange

@zhan-ge

Hi channel, is there a way to declare external component without @react annotation? this annotation makes intellij idea too slow.

Where communities thrive

People

Repo info

Activity