That did it.
How do I create a props for slinky that also extends
RefAttributes?
The generated component definition is:
@js.native
trait CompoundedComponent
extends StObject
with ForwardRefExoticComponent[CheckboxProps with RefAttributes[HTMLInputElement]] {
There is an
apply method for CheckboxProps but that only gives me a CheckboxProps and not a CheckboxProps with RefAttributes[HTMLInputElement].
Ah well I can do
CheckboxProps().combineWith(RefAttributes[HTMLInputElement]()). Is that the best way?
Feels like there ought to be a simpler way since one would always have to do that.
Though if this is react you may want to check out the react flavours which generate react boilerplate for you
Thanks. Yes this is react (slinky). I'm not too sure where I should be looking.
I've meant to work on this documentation, but this is an entry point https://scalablytyped.org/docs/flavour
https://github.com/ScalablyTyped/SlinkyDemos/blob/master/antd/src/main/scala/demo/App.scala here is a sample of what usage looks like
Oh cool, thanks for that. That demo also uses antd but doesn't seem to have this awkwardness. Something must be different. I'll clone that and dig a bit deeper.
Found one thing I wasn't doing right. I was importing from
import typings.antd.checkboxMod instead of import typings.antd.components. Is components just a convention?
The other main difference is that the demo uses the fluent API and never uses
withProps.
ST is creating typings.antd.components.Form.Form which looks like:
object Form {
@scala.inline
def apply[Values](): SharedBuilder_FormItemProps_1607966002[Values] = {
val __props = js.Dynamic.literal()
new SharedBuilder_FormItemProps_1607966002[Values](js.Array(this.component, __props.asInstanceOf[FormItemProps[Values]]))
}
@JSImport("antd", "Form.Item")
@js.native
val component: js.Object = js.native
implicit def make[Values](companion: Form.type): SharedBuilder_FormItemProps_1607966002[Values] = new SharedBuilder_FormItemProps_1607966002[Values](js.Array(this.component, js.Dictionary.empty))()
def withProps[Values](p: FormItemProps[Values]): SharedBuilder_FormItemProps_1607966002[Values] = new SharedBuilder_FormItemProps_1607966002[Values](js.Array(this.component, p.asInstanceOf[js.Any]))
}Shouldn't this be named typings.antd.components.Form.Item?
@steinybot:matrix.org yes, the
components folder is special. pretty much everything else of the generated code is 1-1 from typescript. The different "flavour"s are more advanced codegen which generates more idiomatic scala code based on the types in the generated code.
so when you specify
stFlavour := Flavour.Slinky and run the conversion, a program will run which tries to identify all react components, names them, builds a hierarchy of them, tries to deduplicate, and outputs something which is hopefully very nice to use in the components folder. think of it as providing nicer syntax, somewhat similar to what JSX does in Javascript
I appreciate you taking the time to answer my questions. I hope to be able to help out sometime, even if it is just with docs.
One other question. antd has a Radio.Group which looks like:
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>>;https://unpkg.com/browse/antd@4.16.13/es/radio/group.d.ts
This comes out as:
@JSImport("antd/lib/radio/group", JSImport.Default)
@js.native
val default: ReactComponentClass[ForwardRefExoticComponent[RadioGroupProps with RefAttributes[HTMLDivElement]]] = js.nativeIs there a way to actually use this? In TS MemoExoticComponent is still callable because it extracts the props from the nested component. Going from MemoExoticComponent to ReactComponentClass doesn't seem to work in the same way.
Doesn't look like Slinky has a good representation for
MemoExoticComponent so I'm not sure what ST should be doing in this case.
this taps into some react things I'm not familiar with honestly
can you still use it like a normal react component in typescript though, do you know? one thing which can easily be changed is to translate the whole thing to
ReactComponentClass[RadioGroupProps with RefAttributes[HTMLDivElement].
It's a bit funny in JSX, I'm not sure why.
Yeah. Just expanding the TS types, the nested component disappears so just going to
ReactComponentClass[RadioGroupProps with RefAttributes[HTMLDivElement] I think is the best solution.
right. looking at https://github.com/ScalablyTyped/Converter/blob/master/scalajs/src/main/scala/org/scalablytyped/converter/internal/scalajs/flavours/ReactNames.scala#L40 it seems
ForwardRefExoticComponent just needs to be added to the list
1 reply
I'll make a PR soonish
I still have no clue what an exotic component is
My guess is that has something to do with
$$typeof (https://overreacted.io/why-do-react-elements-have-typeof-property/)
Although I thought
ReactElement would have that too 🤔
hello mr @oyvind, when i try to compile the react dnd demo i have the above error
in any case try to create a
val foo: RefFn[TopNode] = node => ... and give that to untypedRef, that should help the compiler out
@oyvindberg the function is `` implicit def whyyyDoesItHaveToBeSoComplicated: ValueType[HTMLElement => Callback, RefFn[HTMLElement]] =
ValueType[HTMLElement => Callback, RefFn[HTMLElement]] { (consume, f) =>
val massaged: RefFn[HTMLElement] =
(e: HTMLElement | Null) => Option(e.asInstanceOf[HTMLElement]).foreach(e => f(e).runNow())
ValueType[HTMLElement => Callback, RefFn[HTMLElement]] { (consume, f) =>
val massaged: RefFn[HTMLElement] =
(e: HTMLElement | Null) => Option(e.asInstanceOf[HTMLElement]).foreach(e => f(e).runNow())
consume(massaged)
} `` should i replace html eimplicit def whyyyDoesItHaveToBeSoComplicated: ValueType[HTMLElement => Callback, RefFn[HTMLElement]] =
ValueType[HTMLElement => Callback, RefFn[HTMLElement]] { (consume, f) =>
val massaged: RefFn[HTMLElement] =
(e: HTMLElement | Null) => Option(e.asInstanceOf[HTMLElement]).foreach(e => f(e).runNow())
consume(massaged)
} `` i should replace HTMlelement with TopNode ?@oyvind when i replace the function with
implicit def importantFunctionTodragTopNode :ValueType[HTMLElement => Callback, RefFn[TopNode]] =
ValueType[HTMLElement => Callback, RefFn[TopNode]] { (consume, f) =>
val massaged: RefFn[TopNode] =
(e: TopNode | Null) => Option(e.asInstanceOf[HTMLElement]).foreach(e => f(e.asInstanceOf[HTMLElement]).runNow())
consume(massaged)
}the drag is not working anymore
the original function is
implicit def importantFunctionTodrag: ValueType[HTMLElement => Callback, RefFn[HTMLElement]] =
ValueType[HTMLElement => Callback, RefFn[HTMLElement]] { (consume, f) =>
val massaged: RefFn[HTMLElement] =
(e: HTMLElement | Null) => Option(e.asInstanceOf[HTMLElement]).foreach(e => f(e).runNow())
consume(massaged)
}
Any particular reason for using
js.Any over Any? Sébastien is saying that js.Any should never really be used except for in extends (https://matrix.to/#/!GPcZOobOJQzJgrKPRT:gitter.im/$ytxkthOd4OpqjqyVRH__7iVQv7QlSmyttWrOFvS_YR8?via=gitter.im&via=matrix.org)
I'd be happy to change it, it should be quite easy
The issue is when
value?: any becomes value: UndefOf[js.Any]. There is no Evidence[String, js.Any] so you can't do value = "foo".