Everything about Slinky -- issues, ideas for features, where it's being used, and more
FunctionalComponent
constructor to introduce the necessary calls to the React Refresh runtime (mostly around hooks). Then, it should hopefully be a fairly straightforward drop-in to enable the plugin.
Hi, I was experimenting with including react chakra-ui. As per their docs, I need to include their <ChakraProvider> component as the root component. I saw the slinky docs and did the following
@JSImport("@chakra-ui/react", "ChakraProvider")
@js.native
object Chakra extends js.Object {
val ChakraProvider: js.Object = js.native
}
@react object ChakraProvider extends ExternalComponentNoProps {
val component = Chakra.ChakraProvider
}
@JSExportTopLevel("App")
@react class App extends StatelessComponent {
type Props = Unit
def render = {
ChakraProvider (
Counter()
)
}
}
and I am getting the following error
[error] /Users/praburajan/projects/learn/scala/react/my-app/src/main/scala/com/myden/App.scala:27:2: type Props is not a member of String | scala.scalajs.js.Object
[error] @react object ChakraProvider extends ExternalComponentNoProps {
[error] ^
[error] one error found
[error] (Compile / compileIncremental) Compilation failed
How can I use this and other external library react components with props (types defined in typescript) in a slinky project? The chakra-provider code is here - https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/chakra-provider.tsx
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `App$`.
import * as Chakra from "@chakra-ui/react"
, while what you wrote would translate to import {ChakraProvider as Chakra} from "@chakra-ui/react"
js.UndefOr[A]
, but you should be able to use Option if we're talking about slinky props - not sure about nested subtypes, but js.UndefOr
never fails. Also I only write facades' API for stuff I use, not every feature of the library.
Cool. When I try js.UndefOr[A] like so.. compilation fails. It still expects me to pass those properties
object Box extends ExternalComponent {
case class Props(w: js.UndefOr[String],
bg: js.UndefOr[String],
color: js.UndefOr[String],
p: js.UndefOr[Int])
val component = ChakraBox
}
Compilation fails with [error] /Users/praburajan/projects/learn/scala/react/my-app/src/main/scala/com/myden/App.scala:64:20: not enough arguments for method apply: (w: scala.scalajs.js.UndefOr[String], bg: scala.scalajs.js.UndefOr[String], color: scala.scalajs.js.UndefOr[String], p: scala.scalajs.js.UndefOr[Int]): com.myden.Box.Props in object Props.
[error] Unspecified value parameters color, p.
[error] Box(Box.Props(w = "80%", bg="tomato")) (
[error] ^
ChakraProviderComp (
Box(Box.Props(w = "80%", bg="tomato")) (
Counter()
)
)
monaco
or editor
from within editorDidMount
and set things on them. perhaps that'll help. otherwise you typically get references to mounted components with react references