Everything about Slinky -- issues, ideas for features, where it's being used, and more
eval with the component? Source maps by themselves would only map FunctionalComponent.js to FunctionalComponent.scala right?
@react does (example), this way, you don't need to change the way you create components
Hi, what unit testing frameworks are people using with slinky react components?
Waiting for scalajs to transpile slows down testing. I've done some pretty extreme things, like deembedding parts of my code into cross compiled scala/scalajs projects, where pure scala unit tests execute lightening fast, but this has limitations. Anyone figure out super fast way to unit test?
2 replies
unsafe-inline. I have lots of react buttons that have onClick handlers as well as inline style. Are these both no-nos for CSP? What are easy work arounds? I like inline onClick and styles, is there are a way to get the best of both worlds?
onClick handlers through React you should be fine CSP wise. But you won't be able to create inline style tags so you will have to just set style properties locally perhaps?
2 replies
I'm wondering if anyone in the slinky community does any code-splitting? I've been generating some bigger bundle sizes and was just reading about React.lazy, but unfortuntely did that not get implemented in Slinky?:
shadaj/slinky#196
Are there other workarounds people use to code-split and lazy load their app progressively? This was a good read for anyone not familiar:
https://www.freecodecamp.org/news/how-to-use-react-lazy-and-suspense-for-components-lazy-loading-8d420ecac58/
React.lazy in now, shouldn't be too much work. On bundle splitting that's something on my backlog (I want to set up a new template that has split modules by default), but haven't put it together just yet.
that's very cool! I think probably that would make sense as a separate project that just provides binary-compatible implementations of the Slinky APIs that run on the JVM
I think in general, having Slinky itself provide JVM implementations is going to be tricky because ensuring correct behavior would require basically reimplementing React, and in addition there would be no good way to test components that call out to external JS libraries
yeah that's what I'm thinking too. I separate project that provides fixtures for calling hooks in the right order, which itself gets (slowly) tested using React Testing Library. Since React versions don't change often, you'd seldom have to maintain these fixtures and once they are working reliably well you use them to test hooks from the JVM in your project, which runs lightening fast.
Basically it would be a state machine that would register each function you pass it as triggering certain behavior, which in turn would decide which hooks to call (such as useEffect, etc.)
More light weight question:
What's the defacto way to display an svg from a JSImport? Do I need to use @react to turn it into a ReactElement? Or is there a shorter syntax?
But if I put that same expression in a val ("a"), this works:
div( a )
Is there any way to move the Props definition into JVM? It's just a case class, but if I try:
type Props = someJVMImport.JVMProps
It works but requires I pass a case class to the component rather than having the prop args automatically tupled. Is there a trick to getting that tupled at compile-time for me: comp(like, this) instead of: comp(JVMProps(like, this))
Props type is declared directly as a case class
Props you'll have to use a regular apply function
Maybe this is an anti pattern, but I made a useCallback whereby the underlying callback takes a setState function as an argument.
Is it expected that when I call setState(true)it will re-render over and over again (even though the boolean never changes)? In other words, is React's equality checks no longer in place due to passing it as an arg to the callback rather than a dependency? Or is this not expected behavior of slinky?
react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
on primereact front I get:
ReferenceError: React is not defined
at Object../node_modules/primereact/button/button.jswhich is quite surprising given that if I drop primereact and use a slinky.web.html.button instead it works just fine
@shadaj:matrix.org this one definitely feels like a bug, I'm just not sure if it's Slinky or not. What do you think, should I toss it in github issue?
tiptap is a text editor that uses proseMirror under the covers. You'r supposed to be able to pass useState setters to it's onUpdate function, but in doing so it seems the setter falls out of scope:
function $s_Lcom_tiptap_RichTextEditor$$anon$1__onUpdate__Lcom_tiptap_RichTextEditor$$anon$1__Lcom_tiptap_TipTapShim$EditorUpdate__V(this$1, update) {
var this$ = this$1[$m_sjsr_PrivateFieldsSymbolHolder$().sjsr_PrivateFieldsSymbolHolder$__f_privateFieldsSymbol].setText$1;
var newState = new $c_s_Some($as_T(update.editor.getHTML()));
this$(newState)
}fails with:
TypeError: undefined is not an object (evaluating 'this$1[$m_sjsr_PrivateFieldsSymbolHolder$().sjsr_PrivateFieldsSymbolHolder$__f_privateFieldsSymbol].setText$1')
However, I found a (disgusting) workaround by creating an intermediary object:
object propsShim {
var fakeTheScope: Option[String] => Unit = _ => println("not set")
}Then, inside my component, I give that object my setText:
propsShim.fakeTheScope = props.setText
val editor: Option[Editor] = useEditor(new EditorOptions{
val extensions = js.Array()
val content = ""
override def onUpdate(update: EditorUpdate): Unit = {
// TODO: this should be just a call to props.setText
fakeTheScope(Some(update.editor.getHTML()))
}
})Here is how it should "just work" in a pure js version:
https://stackoverflow.com/questions/68822574/how-can-i-grab-the-text-value-from-content-in-tiptap-react-typescript-wysiwyg
useState setters, maybe it is a Scala.js bug?