Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Apr 01 09:04
    mcallisto opened #339
  • Mar 23 15:42
    mcallisto opened #338
  • Mar 10 13:51
    mcallisto opened #337
  • Mar 02 13:38
    Katrix opened #336
  • Mar 01 04:13

    shadaj on hot-loading-store-in-module

    (compare)

  • Mar 01 04:13

    shadaj on master

    Store hot reloading proxies in … (compare)

  • Mar 01 04:13
    shadaj closed #335
  • Mar 01 04:13
    shadaj closed #331
  • Mar 01 03:44
    shadaj synchronize #335
  • Mar 01 03:44

    shadaj on hot-loading-store-in-module

    Store hot reloading proxies in … (compare)

  • Mar 01 03:43
    shadaj opened #335
  • Mar 01 03:42

    shadaj on hot-loading-store-in-module

    Store hot reloading proxies in … (compare)

  • Mar 01 02:54

    shadaj on no-constructor-patching

    (compare)

  • Mar 01 02:54

    shadaj on master

    Drop constructor patching to su… (compare)

  • Mar 01 02:54
    shadaj closed #334
  • Mar 01 02:54
    shadaj closed #332
  • Mar 01 02:35
    shadaj commented #332
  • Mar 01 02:34
    shadaj commented #332
  • Mar 01 02:34
    shadaj edited #334
  • Mar 01 02:33
    shadaj opened #334
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 :)
I have just modified in a separate branch the official template, so that the (few) diffs are easier to understand
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.