Everything about Slinky -- issues, ideas for features, where it's being used, and more
Reader/Writer derivation, since @react isn't required to use Slinky
sometimes i find js.Any to be suitable as a type (usually in avoiding overly complex union types) for when I have no really breakable logic interacting with a given variable, but at some point I need to convert a case class to that js.Any type.
How do I tell slinky to convert my case class to a js.Any explicity so that the attributes have the same names as the case class in the javascript?
Hi all, I have a feeling this question is extremely basic, but I can't find a working example. When I try to add readOnly := true to a textarea like so:
textarea(
rows := props.numberOfRows.toString,
cols := props.numberOfColumns.toString,
readOnly := true,
defaultValue := "Blah"
)I get the following compilation error:
found : slinky.core.AttrPair[slinky.web.html._readOnly_attr.type]
required: slinky.core.TagMod[slinky.web.html.textarea.tag.type]]could someone please educate me here on how this is achieved?
Ah, I got the above working like this:
private val readOnlyAttr = CustomAttribute[Boolean]("readOnly")
textarea(
rows := props.numberOfRows.toString,
cols := props.numberOfColumns.toString,
readOnlyAttr := true,
defaultValue := "Blah"
)Would someone mind pointing me in the direction of some learning materials on why the custom things are necessary? I'm very green in the world of html!
2 replies
Hi all, I hope this is the right place to ask about slinky-styled-components. Whilst getting started with this (using version 0.1.0+10-b09028e5) I've experimented with a simple styled div:
val divRef = useRef[Div](null)
val styledDiv = styled.div(css"""width: 100%; height: 640px;""")
styledDiv(ref := divRef)Then the thing that's attempting to render itself within that div is trying to call attachShadow on that div element, only to be told that attachShadow is not a function on that element. A quick search on the web didn't yield a great deal other than make sure the html element supports attachShadow, which div should. Does anyone have any experience with this kind of error or any thoughts on what the issue might be? Many thanks!
There is open issues for it, so we can hope they get resolved in the near future.
I took a tour over the Play-JSON & Magnolia progress and value classes, opaque types, nested sealed traits, default values, are the biggest issues currently with migrating to Scala 3.
I've been experimenting with making Slinky, Scala 3 compatible, but I ran out of time for the time being, most of the work I've done is updating dependencies and splitting code that isn't compatible anymore.
I've barely started to look into the macros, my unfamiliarity with Scala 2&3 macros, made it a bigger endeavor, so not any progress to report.
I have a branch on my on fork here: https://github.com/Asamsig/slinky/tree/scala-3-support
The basic derivations should be quite straightforward with Mirrors as you've done, the problem is what you say, that they currently don't support, recursive case classes, value classes, default values and such, so for now we won't be able to give parity with Scala 2 Slinky.
Perhaps we can finish up a MVP, with what is supported now, document unsupported things, and have a Beta release or something for Scala 3 😎
someProps = Some(reactElement) even though that props attribute wasn't an Option type it was uncaught. So I removed the Some and it made no difference.
Option conversion falls under that
all good, this only came up because I am trying to tuck as much logic as possible into the JVM, which boils down to ReactElement.asInstanceOf[SomeCaseClassThatExtendsAnyVal]
So that on the JVM side I at least have the ability of handling the ReactElement objects. But now that I know option counts as a ReactElement I need to rethink my strategy a bit
@shadaj:matrix.org figured out an answer to my question up above
Whenever js Objects don't seem to automatically be read correctly into the case class, for some reason just treating them as a class that extends js.Object appears to work.
Is this intended?
Example:
The notorious react-table has a hook, useTable that returns a ton of stuff, but for example here is a working facade:
@js.native
@JSImport("react-table", JSImport.Default)
object ReactTableLibrary extends js.Object {
def useTable(props: js.Object, plugins: js.Any*): TableProps = js.native
}If I use a case class I will get the [object object] is not an instance of TableProps error, forcing me to instead return a js.Object and then dynamically building the case class myself!
val props = useTable(...).asInstanceOf[js.Dynamic]
val typedProps = TableProps(
props.selectDynamic("headerGroups").asInstanceOf[js.Array[HeaderGroup]],
props.selectDynamic("rows").asInstanceOf[js.Array[Row]],
props.selectDynamic("prepareRow").asInstanceOf[js.Function1[Row, Unit]]
)If instead I define TableProps as a regular class that extends js.Object, no need for gross dynamic selecting, slinky works!
// solution:
class TableProps(
val headerGroups: js.Array[HeaderGroup],
val rows: js.Array[Row],
val prepareRow: js.Function1[Row, Unit]
) extends js.Objectclass. Just weird cause sometimes case class works fine and then in certain edge cases it doesn't. Is there a reason?
js.native facade there's no automatic conversion and you get an error; when defining the return type of a js.native method, you'll generally have to use a js.Object trait to define that type
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(???)).