Everything about Slinky -- issues, ideas for features, where it's being used, and more
useState returns a new SetStateHookCallbackinstance each time? I was using this as a dependency in useEffect. It’s not strictly necessary to pass it as a dependency since it should never change but I prefer to include everything rather than having special rules for certain things.
@shadaj:matrix.org thank you! And one excruciatingly difficult typo that can easily happen with a regular class, is for getting to put val in front of the attribute name.
If you don't do that, no compile-time error but it simply won't be included in the js Object!!
Catching that one kept me busy for a few hours :)
Hi!
How do I import additional js into a component?
I'm trying to import ace-editor as an external component:
@react
object AceEditor extends ExternalComponent {
case class Props(
value: String,
name: String,
fontSize: Int,
theme: String,
mode: String,
width: String,
setOptions: js.Any,
onChange: js.Any => Unit
)
val component = jsImport
@JSImport("react-ace", JSImport.Default) @js.native
private def jsImport: js.Object = js.native
}Next I use it:
AceEditor(
value = counterState.editorText,
name = "ACE EDITOR",
fontSize = 32,
theme = "nord_dark",
mode = "scala",
width = "100%",
setOptions = js.Dictionary(
"showLineNumbers" -> true,
"enableBasicAutocompletion" -> true,
"enableLiveAutocompletion" -> true,
"enableSnippets" -> true
),
onChange = (input: js.Any) => dispatch(SaveEditorText(input.toString))
)I want to use the options: enableBasicAutocompletion, enableLiveAutocompletion, enableSnippets
To activate them directly in React is enough to write:
import "ace-builds/src-noconflict/ext-language_tools";Can you tell me how I can do this import into Slinky? I tried to create a new external component, but nothing worked.
@JSImport object for the additional import and make sure your code uses it somehow (for example throw an exception if it is null) so that Scala.js doesn't dead-code eliminate it
But this kind of file helped me
@JSImport("ace-builds/src-noconflict/ext-language_tools", JSImport.Default)
@js.native
object ReactAceExtLanguageTools extends js.Object {}with
val component: FunctionalComponent[Props] = FunctionalComponent { props =>
val vanilla = ReactAceVanilla
val resolver = ReactAceWebpackResolver
val tools = ReactAceExtLanguageToolsBut I had to include also ace-builds/webpack-resolver and ace-builds/src-noconflict/ace for themes and modes to work.
For some reason I was getting some undefined variable ace error for importing just one theme without the resolver+vanilla library, not sure what I was doing wrong as I was following react-ace docs, but at least it seems to work like this now, hopefully at least.
Any idea what might be causing this? Been using Slinky for a while and it just doesn't like this new component for whatever reason.
error] /Users/jason/source/goodcover/core/client-comp/src/main/scala/web/cps/InputRadio.scala:14:2: Unused import
[error] @react object InputRadio {
[error] ^
[error] one error foundIt must be some sort of import coming from the macro expansion. If I remove the macro then there is no unused import error.
2 replies
def propsWithClassName[P](props: P, className: ClassName)(implicit ev: Writer[P]): js.Object = {
val propsObj = writeProps(props).asInstanceOf[js.Object with js.Dynamic]
propsObj.className = className.unwrap
propsObj
}Writer but if that has already been imported then you get a second unused import.
Newby question: I'm trying to use the 'useState' hook to store an option case class:
val (code:Option[CaseClass], updateCode) = useState(None)
1 reply
:point_up: Edit: Newbee question: I'm trying to use the 'useState' hook to store an optional case class:
val (code:Option[CaseClass], updateCode) = useState(None)
This doesn't seem to work (at least IntelliJ doesn't like it). If I invoke 'useState' with scala classes that map to javascript primitives, it works fine.
I also use diode in my project. It can handle elements that are case classes just fine. I was looking into the diode implementation. It also uses the 'useState' hook, but doesn't seem to run into the problem I'm having. I can't untangle the part I need to fix my issue vs. the part that implements their notion of a structured store.
Short term, I can just use diode to model state that goes beyond javascript primitives. But I'd rather use 'useState' for instances where I need case-class component state that no one else needs to see.
FunctionalComponentForwardedRef to a FunctionalComponent? As in React.memo(React.forwardRef(???)).
I'm trying to use following pattern with Slinky:
@JSImport("react-select", JSImport.Default)
@js.native
object ReactSelectComponent extends js.Object {
val Async: js.Object = js.native
}
@react
object ReactSingleSelectTest extends ExternalComponent {
type OnChange = ReactSelection => Unit
case class Props(
onChange: UndefOr[OnChange] = js.undefined,
options: UndefOr[Seq[ReactSelection]] = js.undefined,
isClearable: UndefOr[Boolean] = js.undefined
)
override val component = ReactSelectComponent
}
case class ReactSelection(label: String, value: String, group: Option[String] = None)in component
def searchChanged(s: ReactSelection): Unit = {
println(s)
}
val select = ReactSingleSelectTest(
options = Seq(ReactSelection(s"Value 1", "Value 1"), ReactSelection("Value 2", "Value 2")),
onChange = searchChanged _,
isClearable = true
)Basically React-Select offers X-button to clear. In JedWatson/react-select#2159 it says to check for null. However here I'm getting an error before the searchChanged-function of:
Uncaught TypeError: Cannot read properties of null (reading 'label') at $c_Lcom_client_components_reactselect_ReactSingleSelectTest$$anon$7.eval [as forceRead__sjs_js_Object__Lcom_client_components_reactselect_ReactSelection]
Is there any way to get around of this somehow? Can I somehow type the type OnChange = Null | ReactSelection => Unit or something else?
I enjoyed using slinky in the "scala 2 days", and could get what I needed done without too much trouble or bad-taste-in-the-mouth (not always the case with so many other UI libraries, so thank you and congratulations @shadaj for creating and sharing it!) despite having never used react directly. It seems after @oleg-py made a nice contribution back in the summer there is still a long way to go (including identifying what must be done), and nobody has the skills and/or time.
@ramnivas - could I ask if you guys have decided to keep learnraga at scala 2 for the foreseeable future?
@asaadza: I can only speak for myself, but Scala 3 is still early, IntelliJ isn't super smooth with it yet, and macros need more work.
So I don't think there is a very strong push for Scala 3 at the moment.
The PR open for Scala 3 support is quite far, but it doesn't have support for the @react annotation, which means the user experience won't be great.
Give it a few more months and the ecosystem will be available ready for Scala 3.
The point about IntelliJ is mostly to show that Scala 3 isn't fully mainstream yet, if not even IntelliJ has seamless support yet.
I'm not the guy for lightweight IDEs, I'm way too accustomed to the benefits of a fullblown IDE.
Scala 3 will get there, but Scala 2 is not in its grave yet.
@react if that's something people would use!
apply problem (which would probably be sufficient for those who prefer functional components anyway) so slinky react UI development is still the nicest and most intuitive UX in scalajs land.
I'm not sure if this is a bug with Slinky reader, but I am using Reader[MyClass] when calling a facade that returns a JSON object in order to deserialize it into MyClass
It tricks the scala compiler into assuming the type of the result is MyClass but unfortunately Option[String] types are actually just String causing runtime exceptions
Is there a way to get a Reader to honor Option types? MyClass has an attribute that is Option[String], so could Reader[MyClass] return Some("text") instead of just "text"?
I've got a question about Reader. I'm trying to create a Reader[NoYes] for:
final case class NoYes(value: Option[Boolean], onChange: Boolean => Unit)And it blows up in slinky.readwrite.FunctionReaders#function1 when the component tries to call onChange saying fn is not a function. It's not a function because fn is undefined. It wasn't entirely clear where fn was coming from, it seemed to be part of the anonymous function.
Stepping through the JS code, the Reader[NoYes] was trying to read o.value and o.onChange instead of the actual properties which is some long fully qualified name with . replaced with _. Presumably this is the Reader macro doing this? I've never had a problem before. Any idea why this one is different?
.onChange on the read value corresponds to calling .onChange on the original value.
ReactComponentClass. Turns out I didn't need this (I accidentally used React.memo from ST and not the Slinky one).
@shadaj:matrix.org with Slinky being such a great advent, have you (un)seriously considered a Svelte companion-repo to Slinky?: https://svelte.dev/
Looks awesome but I'm too invested in React, unless the tides were to change (some day)...
zetashift: mostly, the API is identical except for not having the @react macro available, so you'll have to manually use ComponentWrapper for class components and create a nicer apply yourself
but other than that, we actually share all the unit test code between Scala 2 and 3 so things are actually mostly source compatible too