If this is your first stab at functional-ish UI (or web UI at all) then there are going to be a whole lot more moments like this, trust me
CSS in particular is a nightmare
good luck and have fun
Then I found Scala and tried react through it. Never going back.
@elkhadirzyad instead of
a(b) you now have to compose TagMods by TagMod(a, b). If you're upgrading from 1.1.1 I strongly recommend you go through all the changelogs from 1.1.1 to 1.7.0. I know it's a good 15 minutes of nothing but reading but there are plenty of other changes you'll run into as well if you're upgrading from 1.1.1. Firstly it's all documented in the changelogs; secondly, you should run the migration scripts that are in a lot of the changelogs as it will automate the majority of the upgrade for you. Good luck!
Something like this: https://github.com/chandu0101/scalajs-react-template
But with sjs 1.1.0 and sjs-react 1.7.5
But with sjs 1.1.0 and sjs-react 1.7.5
@arminio I had similar pain recently in trying to get started with the simplest of examples. Here's a TODO app I finally got working with no small amount of help from @sloshy!
yup, it works! thanks again @mn98
you should speak with @japgolly to add it (https://github.com/mn98/scalajs-react-examples) to git repos home page as a working bare project
you should speak with @japgolly to add it (https://github.com/mn98/scalajs-react-examples) to git repos home page as a working bare project
1 reply
@arminio @japgolly Hi both, fwiw I tidied up the project skeleton a bit. If it's at all helpful, please do feel free to reference/fork/whatever it.
do someone worked on material ui 3.9.4 (proposed by https://scalablytyped.org), i need help to do a demo of the component "Stepper" with "Steps", any help ?
hello everyone, I have a project containing all material ui demos, since autocomplete does not exist, i tried to rely on downshift (https://github.com/trepidacious/scalajs-react-downshift) to create one, in compilation i have no errors, but when i run the app , i got the error below, someone can help ?
I felt curious enough about whether downshift worked with ST (because I need some autocompletion as well and had worked with it before) that I ported the first example I found: https://github.com/ScalablyTyped/SlinkyDemos/blob/master/downshift/src/main/scala/demo/Demo.scala
I guess both slinky and scalajs-react misses syntax for spread props, otherwise it worked perfectly
@oyvind i have spread in red, what am i missing ?
now i have error
in line 590
Wrap it in triple backticks - ```
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?
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
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?
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
renderIntoDocumentis 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