Everything about Slinky -- issues, ideas for features, where it's being used, and more
Hi all - I've been using Scala for several years now but I'm new to React/JS/UI so please forgive me if this question seems a bit naive!
Is this React snippet...
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}...written like this in Slinky...
@react class Something extends StatelessComponent {
case class Props(ref: ReactRef[Div] = React.createRef[Div])
override def render(): ReactElement = {
div(ref := props.ref)
}
}...which compiles fine for me, or is there a more 'correct' way? Just want to make sure I get the basics right as I'm learning. Thanks!
val x = " <div className="App">
<Foo name="Russ"/>
</div>"
val y = "<div className="App"><Foo name="Russ"/></div>"
A question regarding Slinky's native TouchableOpacity component. Which is the correct way to pass for example the whenPressed: () => Unit value to its onPress prop?
I used to write TouchableOpacity(onPress = props.whenPressed.apply) but this no longer works in my updated React Native environment, I get the following error: Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Instead if I use a Slinky's native Button component, for example Button(onPress = props.whenPressed, title = "Click me") everything works just fine.
case class Props(onPress: () => Unit, style: js.UndefOr[js.Object] = js.undefined)?
Foo, which I assume is a React component, AFAIK there's no way to convert the string to a React element (other than writing a custom parser)
...the
onPressis optional so should probably beonPress: js.UndefOr[() => Unit] = js.undefined.
Updated the PR, but if you prefer you can turn it down and leave everything like it is now, it was probably an IntelliJ issue on my side.
But in any case defining prop types as optional shouldn't have caused an infinite loop, that's probably a separate issue.
That was probably me trying to use apply.
@Shailpat3Shane_twitter since your example code contains a reference to
Foo, which I assume is a React component, AFAIK there's no way to convert the string to a React element (other than writing a custom parser)
@shadaj my bad there is no custom component just simple html <div>
<p>Status Messages</p>
</div>
dangerouslySetInnerHTML (https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml)
Hi there, I have been working with useEffect, but when I try cleanup this doesn't work. I have opened an issue with all information. Thanks!
Hi All ,
I am writing a test cases of functional component using munit and below is the code :
import components.ErrorComponent
import munit.FunSuite
import org.scalajs.dom.document
import slinky.core.FunctionalComponent
import slinky.web.ReactDOM
class ErrorComponentTestSuite extends FunSuite {
test("Can render a functional component") {
val container = document.createElement("div")
val component = FunctionalComponent[Int](_.toString)
ReactDOM.render(component(1), container)
assert(container.innerHTML == "1")
}
}whenever i execute this code using command testOnly etlflow.components.ErrorComponentTestSuite it fails with an error :
etlflow.components.ErrorComponentTestSuite:
==> X etlflow.components.ErrorComponentTestSuite.Can render a functional component 0.01s scala.scalajs.js.JavaScriptException: ReferenceError: window is not definedAny idea what i am doing wrong here ?
I have this
def keyHandler(evt: SyntheticKeyboardEvent[dom.html.Input]) =
if(evt.key == "Enter") props.updateTags(props.tags + (tagRef.current.value))
else ()and I get the complaint
[error] overloaded method := with alternatives:
[error] (v: Option[() => Unit])slinky.core.OptionalAttrPair[slinky.web.html._onKeyDown_attr.type] <and>
[error] (v: () => Unit)slinky.core.AttrPair[slinky.web.html._onKeyDown_attr.type] <and>
[error] [T <: slinky.core.TagElement](v: slinky.web.SyntheticKeyboardEvent[T#RefType] => Unit): slinky.core.AttrPair[T]
[error] cannot be applied to (slinky.web.SyntheticKeyboardEvent[org.scalajs.dom.html.Input] => Unit)
[error] onKeyDown := (keyHandler _))TagElement constraint comes from. I can't see it in the code. And I don't understand what I'm supposed to write to create an event handler of the correct type.
SyntheticKeyboardEvent has no subtype constraint, and neither does SyntheticEvent.
:= (evt) => keyHandler(evt)? Slinky uses a bit of implicit trickery in order to have the event's element type match the tag that the attribute is being applied to, I wonder if there's some issue with partially applied functions here. You are setting this attribute on an input tag, right?
Hi all. Thoroughly enjoying Slinky to build my app using functional components with hooks. I've hit a road block with useContext in that I can't figure out how to set the value. I naively thought it would be similar to useState like so:
val (thing, setThing) = useContext(MyContexts.thing)which I believe is how it works in vanilla React. This doesn't appear to be the case with Slinky (version 0.6.5). Could someone please explain how to use context with functional components in Slinky? What have I misunderstood? Thanks!
It doesn't seem to provide a way to set the context from the result of the
useContext hook. Note that React doesn't do this either: https://reactjs.org/docs/hooks-reference.html#usecontext You set the context using a Provider.
MyContexts.thing.Provider approach within the functional component that sets the value and render all consumers of that value within the body of that provider.On a slightly related note, is there a recommended/efficient way of sharing state globally?
Hey there; loving this library so far!
I am running into an issue with the react-router facade when trying to use activeClassName with NavLink. I'm not sure why, since I think I'm using it the same way NavLink is used for the sidebar on the Slinky docs site, and that works perfectly.
Minimal example of what isn't working for me:
@react object Homepage {
case class Props()
val component = FunctionalComponent[Props] { props =>
NavLink(
to = "/about",
activeClassName = Some("bar")
)(
className := "foo"
)(
"About"
)
}
}
ReactDOM.render(
Router(
history = History.createBrowserHistory()
)(
Switch(
Route("/", Homepage.component, exact = true),
Route("/about", Homepage.component),
Route("*", Homepage.component)
)
),
container
)The link itself works, and goes to the /about page, but the bar class doesn't get added when /about is the current page.
Any thoughts on what I might be doing wrong would be greatly appreciated!
On a slightly related note, is there a recommended/efficient way of sharing state globally?
@mn98 not sure if it can be of interest in your search, but I wrote this example about using Diode https://github.com/mcallisto/slinky-diode-todomvc
I'm having troubles to translate this to slinky external components, the official docs has no similar example, any hint is appreciated: http://recharts.org/en-US/guide/getting-started
The js side is:
import { LineChart, Line } from 'recharts';
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
const renderLineChart = (
<LineChart width={400} height={400} data={data}>
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
</LineChart>
);Hello @shadaj, I have the following question.
Is there a drier or more idiomatic way in Slinky to achieve the following:
def toOption[T](ot: T | Null): Option[T] = Option(ot.asInstanceOf[T])
var swi: Option[ScrollViewInstance] = None
val scrollView = ScrollView().withRef(nullableRef => swi = toOption(nullableRef))
swi.head.scrollToEnd()That is, using the scrollToEnd method of the slinky.native.ScrollView component?
@react style? Currently the docs suggest this isn't supported. This would help me consolidate quite a bit of duplicate code in the future. I can work around it for now, was just curious, thanks!