scalajs-react
Facebook's React on Scala.js
General Scala-JS page building advice needed. Most of the examples seem to be of the pattern where the main into which your single page application will go is between the tags in a landing page html file. How do you handle the need to insert something in the meta area of the dom? Do I need to render my landing page dynamically from the server to accomplish this? My specific need is to inject a script tag into the meta area of an already defined static html page. I'm using scalajs-react.
Source: (StackOverflow)
I'm building a scalajs-react app (version 0.9.0) and I have a RouterConfigDsl that maps all my various (static) routes to scalajs-react pages in my app. My server side uses Java Servlets (not Play) and I would like to be able to occasionally invoke an arbitrary servlet WITHOUT the RouterConfigDsl router intercepting that and redirecting me to a 404 page when it can't find a scalajs-react page for it. Is there some pattern for doing this or do I have to plumb everything through single-page app pages in my application router source file (that which contains my RouterConfigDsl implementation)?
Source: (StackOverflow)
What is the difference between these Scala.js React.js libraries and why should I choose one over the other ?
- Xored Scalajs-react - Last commit was 8 months ago. So I'm guessing the development is not active anymore.
- Scalajs-react - Very active and very complete and comes with a custom URL Router. But the API's seems to be stepping away from the way actual Javascript React code is written and there is no support for React-native and the addition of Scalaz and Monocle fattens up the library increases the size of Javascript that browser has to download. The document says Scalaz & Monocle are opt-in, so I'm guessing by default Scalaz & Monocle are excluded ? I personally feel that this library could just be a very simple facade to the React.js code which would have made it easier to update to newer version React.js and it not being a simple facade means more Javascript code that will get generated and more code the browser will have to download. I may be wrong here, please correct me ?
- SRI - Newcomer and the facades looks very much complete and has support for Web, Relay and React native but have no URL Router support and no DOM DSL. The facade APIs looks very lean and very similar as writing Javascript React.js code. But it is fairly new and may be not production ready ?
Please correct me if I am wrong as there are too many options to choose here and wish there was one way to write React.js code in Scala.js.
Source: (StackOverflow)
I've been using scalajs-dom v 0.8.1 and trying to mix webjars within my SBT project. When I do this, I'm getting one final ambiguous JS reference that I can't figure out. I think it is between the webjars I want to use (that include jquery v 2.1.4) and scala-js. I tried using the ManifestFilters SBT filter but it does not seem to help (or I don't know the correct syntax). Does anyone have a useful way to debug these kinds of errors? (see below for SBT output when issuing the 'fastOptJS' task)
[error] - Ambiguous reference to a JS library: jquery.js
[error] Possible paths found on the classpath:
[error] - META-INF/resources/webjars/jquery/2.1.4/dist/jquery.js
[error] - META-INF/resources/webjars/jquery/2.1.4/src/jquery.js
[error] originating from: spJS:compile, spJS:compile
Source: (StackOverflow)
How to exclude scalajs dependencies using sbt-scalajs plugin ?
I'm trying to import the following library
"org.webjars.bower" % "react-bootstrap-datetimepicker" % "0.0.14" / "react-bootstrap-datetimepicker.js"
But this library is downloading other dependencies ("react" and "react-bootstrap") which are already in my project and I'm getting version clashes.
I've tried using the exclude function
"org.webjars.bower" % "react-bootstrap-datetimepicker" % "0.0.14" exclude ("org.webjars.bower", "react")
but this does not allow me to append / "react-bootstrap-datetimepicker.js" to the command.
The exception I get is:
org.scalajs.core.tools.classpath.JSLibResolveException: Some references to JS libraries could not be resolved:
- Ambiguous reference to a JS library: react-bootstrap.js
Possible paths found on the classpath:
- META-INF/resources/webjars/react-bootstrap/0.16.1/react-bootstrap.js
- META-INF/resources/webjars/react-bootstrap/0.23.7/react-bootstrap.js
originating from: adminJS:compile
at org.scalajs.core.tools.classpath.PartialClasspath.resolveAllResourceNames(PartialClasspath.scala:137)
at org.scalajs.core.tools.classpath.PartialClasspath.resolveDependencies(PartialClasspath.scala:80)
at org.scalajs.core.tools.classpath.PartialClasspath.resolve(PartialClasspath.scala:64)
at org.scalajs.sbtplugin.ScalaJSPluginInternal$$anonfun$11.apply(ScalaJSPluginInternal.scala:140)
at org.scalajs.sbtplugin.ScalaJSPluginInternal$$anonfun$11.apply(ScalaJSPluginInternal.scala:137)
at scala.Function1$$anonfun$compose$1.apply(Function1.scala:47)
at sbt.$tilde$greater$$anonfun$$u2219$1.apply(TypeFunctions.scala:40)
at sbt.std.Transform$$anon$4.work(System.scala:63)
at sbt.Execute$$anonfun$submit$1$$anonfun$apply$1.apply(Execute.scala:226)
at sbt.Execute$$anonfun$submit$1$$anonfun$apply$1.apply(Execute.scala:226)
at sbt.ErrorHandling$.wideConvert(ErrorHandling.scala:17)
at sbt.Execute.work(Execute.scala:235)
at sbt.Execute$$anonfun$submit$1.apply(Execute.scala:226)
at sbt.Execute$$anonfun$submit$1.apply(Execute.scala:226)
at sbt.ConcurrentRestrictions$$anon$4$$anonfun$1.apply(ConcurrentRestrictions.scala:159)
at sbt.CompletionService$$anon$2.call(CompletionService.scala:28)
at java.util.concurrent.FutureTask.run(FutureTask.java:266)
at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511)
at java.util.concurrent.FutureTask.run(FutureTask.java:266)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
at java.lang.Thread.run(Thread.java:745)
Source: (StackOverflow)
Basically, I'm searching for useful react-bootstrap wrapper. During reviewing different possibilities i've found this github project. I've forked them and start updating versions. But after updating scalajs-react version from 0.8.1 to 0.9.2 i've stuck in a rut with html.Element vs dom.Element.
Affix object call getDOMNode() on scope
val domNode = scope.getDOMNode()
Earlier domNode was extend type TopNode = html.Element but in newest version domNode extend type TopNode = dom.Element that don't have values such as 'className', 'offsetHeight' and 'style'. So I get compilation failures
[error] /Users/vl/dev/git/scalajs-react-bootstrap/core/src/main/scala/com/acework/js/components/bootstrap/Affix.scala:94: value offsetHeight is not a member of japgolly.scalajs.react.TopNode
[error] } else if (offsetBottom.isDefined && (position.top + domNode.offsetHeight >= scrollHeight - offsetBottom.get)) {
[error] ^
[error] /Users/vl/dev/git/scalajs-react-bootstrap/core/src/main/scala/com/acework/js/components/bootstrap/Affix.scala:102: value style is not a member of japgolly.scalajs.react.TopNode
[error] domNode.style.top = ""
[error] ^
[error] /Users/vl/dev/git/scalajs-react-bootstrap/core/src/main/scala/com/acework/js/components/bootstrap/Affix.scala:53: value className is not a member of japgolly.scalajs.react.TopNode
[error] var className = affixRegexp.replaceAllIn(node.className, "")
[error] ^
How can I manage it in newest scalajs-react version? (As I understand this functionality were moved to separate project 'scalajs-dom')
Source: (StackOverflow)
I have some state-modifying tasks needed to be run inside componentDidMount as well inside button click handlers defined in renderS method.
Tasks have a lot of common code so i've decided to join them inside one class, that receives scope and applies necessary actions.
Trouble is: inside renderS method i have access to ComponentScopeU[...] and inside componentDidMount i have ComponentScopeM[...]
I've found that to access .props i need to verify my scope have supertrait ComponentScope_P[...], to access .state my scope should have supertrait ComponentScope_S[...] and to have ability to .modState i should pass implicitly CompStateAccess[...].
So currently i have code like this
case class State(...)
type ScopePS = ComponentScope_P[Int] with ComponentScope_S[State]
type StateAccess[C] = CompStateAccess[C, State]
implicit class MyActions[T <: ScopePS : StateAccess](scope: T) {...}
It's working but i wonder how could this be simplified, i.e. how could props\state be accessed inside renderS and componentDidMount via common code?
Source: (StackOverflow)
How do we handle app-jsdeps.js and app-opt.js in a large Scala.js React applications with a lot of js code & dependencies ?
I've build my first web application using @japgolly scalajs-react using @ochrons spa-tutorial example but even after optimising it the size of app-jsdeps.js (only 10 external JS deps) and app-opt.js file is around 900kb which is taking about 8 seconds to download before the page loads.
What do we usually do in this situation ?
- Do we split the app into multiple html pages on the server where each page will have it's own
app-jsdeps.js and app-opt.js files which means new React-router for each page ?
- Or do we split the
app-jsdeps.js and app-opt.js into multiple files so that the download happens concurrently instead of one big chunk ?
Source: (StackOverflow)
I have trouble to mix autowire calls with scalajs-react components. Here is a simple example using scalajs-react v0.10.0 + autowire v0.2.5
case class User(name: String)
class Backend($: BackendScope[Unit, User]) {
def mounted: Callback = {
val future: Future[User] = AjaxClient[Api].getUser(123).call()
//FIXME: how to get deal with it?
CallbackTo { future.foreach(user => $.modState(_ => user)) }
}
}
val Main = ReactComponentB[Unit]("Main")
.initialState(User("N/A"))
.backend(new Backend(_))
.render { $ =>
val name = $.state.name
<.p(s"User name is $name")
}
.componentDidMount(_.backend.mounted)
.buildU
State modification doesn't work here. How can I combine Future and Callback?
Update (27/10/15)
My autowire client
package example
import scalajs.concurrent.JSExecutionContext.Implicits.runNow
import org.scalajs.dom
import upickle._
import default._
import scala.concurrent.Future
object AjaxClient extends autowire.Client[Js.Value, Reader, Writer] {
def write[Result: Writer](r: Result) = default.writeJs(r)
def read[Result: Reader](p: Js.Value) = default.readJs[Result](p)
override def doCall(req: Request): Future[Js.Value] = {
println(req)
dom.ext.Ajax.post(
url = "/api/autowire/" + req.path.mkString("/"),
headers = Map("Content-Type" -> "application/json"),
data = json.write(Js.Obj(req.args.toSeq :_*))
).map(_.responseText)
.map{t => println(t); t}
.map(json.read)
}
}
Source: (StackOverflow)
I've got an existing HTML page that I have transcribed into scalajs-react scalatags in a ReactComponentB object, but the output is slightly different from the original HTML. Is there a way I can render out the HTML from the ReactComponentB so that I can compare it with my original HTML?
Source: (StackOverflow)