japgolly/scalajs-react

Facebook's React on Scala.js + α

elkhadirzyad

@elkhadirzyad

@oyvind i have spread in red, what am i missing ?

Rohan Sircar

@rohan-sircar

Does it compile?

elkhadirzyad

@elkhadirzyad

with implicit class SpreadOps it works

now i have error

in line 590

Rohan Sircar

@rohan-sircar

Put the code in code tags please

Wrap it in triple backticks - ```

elkhadirzyad

@elkhadirzyad

Armin Keyvanloo

@arminio

Hi all,
I need some help setting up my first unit test for sjs react. I have the following test:

import utest._
.....

object TestTest extends TestSuite {

  val tests: Tests = Tests {

    "plainElement" - {
      val re: VdomElement = <.div("Good")
      val c               = ReactTestUtils.renderIntoDocument(re)
      test(c, """<div>Good</div>""")
    }
  }
}

When I run it I get this error:

- TestTest.plainElement.0 2ms 
  scala.scalajs.js.JavaScriptException: ReferenceError: document is not defined
    <jscode>.Object.renderIntoDocument(react-dom-test-utils.development.js:1163)
    japgolly.scalajs.react.test.ReactTestUtils$.renderIntoDocument(ReactTestUtils.scala:66)
    <jscode>.array$9(Chicken.scala:51)
    scala.scalajs.runtime.AnonFunction0.apply(AnonFunctions.scala:22)

So renderIntoDocument is erroring as there are no documents to render to.
Does anyone know what is causing this?

Armin Keyvanloo

@arminio

In the setup section of this page: https://github.com/japgolly/scalajs-react/blob/master/doc/TESTING.md#test-scripts
it says:
// React JS itself. // NOTE: Requires react-with-addons.js instead of just react.js

I am not entirely sure what that means and how to set up the reacts addson via the scalajs-bundler

Any help will be much appreciated

Armin Keyvanloo

@arminio

In addition to the above, I have also tried using test-state.
Things are starting to get really frustrating for me.
My test (copied from the test-state example) fail with this error:

-------------------------------- Running Tests --------------------------------
X app.TodoTest 0ms 
  scala.scalajs.js.JavaScriptException: ReferenceError: Sizzle is not defined
    teststate.domzipper.sizzle.Exports.$init$(Exports.scala:7)
    app.MyTestState$.<init>(MyTestState.scala:8)
    app.MyTestState$.<clinit>(MyTestState.scala:8)
    app.TodoTestDsl$.<init>(TodoTestDsl.scala:68)
    app.TodoTestDsl$.<clinit>(TodoTestDsl.scala:58)
    app.TodoTest$.<init>(TodoTest.scala:16)
    app.TodoTest$.<clinit>(TodoTest.scala:8)
    <jscode>.{anonymous}()(TodoTest.scala:8)
    scala.scalajs.reflect.LoadableModuleClass.loadModule(Reflect.scala:24)
    utest.PlatformShims$.loadModule(PlatformShims.scala:26)
[info] 
[error] Failed tests:
[error]         app.TodoTest
[error] (Test / test) sbt.TestsFailedException: Tests unsuccessful
[error] Total time: 3 s, completed 07-Sep-2020 17:32:07
sbt:client>

This is my sbt:

lazy val client = (project in file("client"))
  .enablePlugins(ScalaJSPlugin)
  .enablePlugins(ScalaJSBundlerPlugin)
  .settings(
    scalaJSUseMainModuleInitializer := true,
    libraryDependencies ++= Seq(
      "com.github.japgolly.scalajs-react" %%% "core"              % "1.7.5",
      "com.github.japgolly.scalajs-react" %%% "extra"             % "1.7.5",
      "com.github.japgolly.scalacss"      %%% "ext-react"         % "0.6.1",
      "com.lihaoyi"                       %%% "upickle"           % "1.2.0",
      "io.suzaku"                         %%% "diode-react"       % "1.1.13",
      "com.lihaoyi"                       %%% "autowire"          % "0.3.2",
      "com.github.japgolly.scalajs-react" %%% "test"              % "1.7.5" % Test,
      "org.querki"                        %%% "jquery-facade"     % "2.0" % Test,
      "com.lihaoyi"                       %%% "utest"             % "0.7.5" % Test,
//      "com.github.japgolly.test-state"    %%% "core"              % TestStateVer % "test",
//      "com.github.japgolly.test-state"    %%% "dom-zipper"        % TestStateVer % "test",
      "com.github.japgolly.test-state"    %%% "dom-zipper-sizzle" % TestStateVer % "test",
      "com.github.japgolly.test-state"    %%% "ext-scalajs-react" % TestStateVer % "test",
      "com.github.julien-truffaut"        %%% "monocle-core"      % "2.0.4",
      "com.github.julien-truffaut"        %%% "monocle-macro"     % "2.0.4",
      "com.github.japgolly.scalajs-react" %%% "ext-monocle-cats"  % "1.7.5",
      "org.scala-js"                      %%% "scalajs-java-time" % "1.0.0" % Test
    ),
    npmDependencies in Compile ++= Seq(
//      "sizzle"    → "2.3.0",
      "react"     -> "16.13.1",
      "react-dom" -> "16.13.1",
      "bootstrap" → "4.5.2",
      "jquery"    → "1.9.1",
      "popper.js" → "1.16.1"
    )

  )
  .settings(addCompilerPlugin("org.scalamacros" %% "paradise" % "2.1.1" cross CrossVersion.full))
  .settings(testFrameworks += new TestFramework("utest.runner.Framework"))

Can someone please give me hand to resolve these issues?

Armin Keyvanloo

@arminio

Also I would like to mention that:
val TestStateVer = "2.4.1"

Armin Keyvanloo

@arminio

This is now fixed:

When I run it I get this error:

- TestTest.plainElement.0 2ms 
  scala.scalajs.js.JavaScriptException: ReferenceError: document is not defined
    <jscode>.Object.renderIntoDocument(react-dom-test-utils.development.js:1163)
    japgolly.scalajs.react.test.ReactTestUtils$.renderIntoDocument(ReactTestUtils.scala:66)
    <jscode>.array$9(Chicken.scala:51)
    scala.scalajs.runtime.AnonFunction0.apply(AnonFunctions.scala:22)

So renderIntoDocument is erroring as there are no documents to render to.
Does anyone know what is causing this?

This was fixed by adding requireJsDomEnv in Test := true to build.sbt

But still haven't found a solution to the Test State issue above (Sizzle is not defined)

Can anyone help please?

Armin Keyvanloo

@arminio

FIXED
oh... I added .enablePlugins(JSDependenciesPlugin) and the Sizzle is not defined issue went away!

So even though I don't use the JSDependenciesPlugin myself, it seems that it needs to be enabled for the com.github.japgolly.test-state" %%% "dom-zipper-sizzle dependency to work

Armin Keyvanloo

@arminio

Is my understanding correct?

Armin Keyvanloo

@arminio

Hi @japgolly, would you be able to tell me plz what the Sack class represents in TestState?

nafg

@nafg

@arminio if you provide a link maybe someone else can

Armin Keyvanloo

@arminio

@arminio if you provide a link maybe someone else can

https://github.com/japgolly/test-state/blob/6c256a7d3669b09443f1bed79b046659bc74e186/core/shared/src/main/scala/teststate/data/Sack.scala

nafg

@nafg

I just did some browsing, it looks like it's used by the implementation as a typeclass for quasi-derivation internally

Anyway he doesn't reply here much, you might try tweeting him or opening an issue on the repo asking for to add a few lines of documentation ("private internal implementation detail" or an explanation of how people can use it)

David Barri

@japgolly

Oh wow, what funny timing this is for me to check in here :D

David Barri

@japgolly

@nafg is right. My habit when in front of a computer is to spend about 5-10 reading reddit or whatever, then it's just full-steam-ahead coding non-stop. I find the burden of having to reply to github, email, and twitter sometimes more than enough so it's extremely rare that I go out looking for more spaces to reply / chat / talk. I'm just a work machine. So yeah sorry @arminio, I hope there's enough knowledge around people here that everyone can help everyone out. Otherwise feel free to raise a StackOverflow question or Github issue if no one knows, I'll try to make time to respond but there might be a wait because I've literally got months and months worth of work already queued up.

David Barri

@japgolly

@arminio To answer the question about Sack though, it's pretty funny that you're peeking around there. I'm gonna guess that you inspected a type and the IDE dealiased the type for you. As you can see from the subtypes, a Sackis a value, a recursive product or a recursive coproduct. @nafg made an educated guess that it's related to typeclass derivation but it's actually the structure of all composable concepts in Test State. Users are not supposed to know about it because it's part of the internal API and you never interact with it directly. The public types that you should know about are documented here https://github.com/japgolly/test-state/blob/master/doc/TYPES.md and under-the-hood, some of them dealias to Sacks. If you want to be explicit about your Test State types, use the type members provided on your dsl object. This is an example: https://github.com/japgolly/test-state/blob/master/example-react/src/test/scala/teststate/example/react/TodoTestDsl.scala#L76

Oh and everything is plural. There's no dsl.Action vs dsl.Actions; the type is always the plural form even if the value contains only one action.

@arminio Yes, you're exactly right about JSDependenciesPlugin

David Barri

@japgolly

So it seems some of the documentation has become stale in the post-Scala.JS-1.0-world, @arminio it'd be really appreciated if you would kindly submit a PR, or even an issue with a list of changes you had to make, so that we can update the doc for future users.

And sorry you bumped into a few problems. Glad to hear you got it sorted out

Armin Keyvanloo

@arminio

Thanks for replying to all my queries above @japgolly :thumbsup:
I am planing to create a PR of the test-state documentation once I have everything working.
Would you be able to tell me what's the best way to ask test-state related questions on stackoverflow?

Should I simply tag my test-state questions with scalajs-react?

Armin Keyvanloo

@arminio

So it seems some of the documentation has become stale in the post-Scala.JS-1.0-world, @arminio it'd be really appreciated if you would kindly submit a PR, or even an issue with a list of changes you had to make, so that we can update the doc for future users.

@japgolly PR for a small update to the test-state documentation raised:
japgolly/test-state#144

nafg

@nafg

val state: StateSnapshot[State] = ???
val field1Snapshot = state.zoomStateL(State.field1)
val field2Snapshot = state.zoomStateL(State.field2)

field1Snapshot.setState(x) >> field2Snapshot.setState(y)

Is there any way to make that work?

Because of the way it works it seems like the second setState essentially overrides the first

Is there a way to decompose and then recompose state-setting like that?

mvillafuertem

@mvillafuertem

@japgolly Hi I have been working so far with slinky, I have created a project with some examples of hooks. now I would like to know how to write custom hooks using scalajs-react. Any example using useMemo, useContext or useRef without declaring components? Here my example in Slinky.

https://github.com/mvillafuertem/scalajs-react-hooks/tree/master/modules

Artsiom Miklushou

@mikla

Hi,

Is it okay to have EmptyVDomElement contstucted as VdomElement.apply(null) ?

Carlos Quiroz

@cquiroz

There is an EmptyVdom instance

Artsiom Miklushou

@mikla

Ended up using React.Fragment. Thx

Mathieu Prevel

@mprevel

Hi,

What is the best way to use a callback in a facade exposing a js.Any => js.Any function ?
Should I use a (x:js.Any) => Callback(...).runNow() ?

☮ David Barri ☮ 🖤 ✊🏿

@japgolly_twitter

Hey. The .toJsFn1 method on your callback sounds like what you're looking for.

Mathieu Prevel

@mprevel

Maybe I'm wrong, but I cannot use .toJsFn1 if I need to use the function parameter in the Callback ?

David Barri

@japgolly

Oh my bad I didn't realise you were using the parameter. In that case, you've got two options: (1) exactly what you wrote above, (2) use CallbackKleisli and then call .toJsFn. (1) is nice and simple and (2) is a great option if you're doing lots of composition but in many cases it's likely to just be over-engineering for no benefit so you'll have to access your situation and choose whichever's best. Hope that helps

Mathieu Prevel

@mprevel

Thanks. :) In my current case it is a simple Callback that reads the event target value to update the current component state, so I'll go for (1). But it is good to know about option (2) for more complex cases.

Binh Nguyen

@ngbinh

have anyone tried to update to reactjs 1.7.0? https://reactjs.org/blog/2020/10/20/react-v17.html not sure if scala.js react will just work with it

Where communities thrive

People

Repo info

Activity