Everything about Slinky -- issues, ideas for features, where it's being used, and more
html.Element is sufficient for the core interface. Just created shadaj/slinky#477 to bring the tags back.
@react would look
1 reply
sbt new shadaj/create-react-scala-app.g8 to get that project running, but I’m trying to understand what the bare minimum essentials are. Thanks.
https://github.com/MarkCLewis/play-scalajs-slinky
@alvinj, this is a repository that I set up for students this semester. It is basically an updated one like for the videos, but with more current versions of everything.
fastOptJS. That is automatically run and the result put in the proper place by doing run in sbt and loading a page. I believe you can do client/fastOptJS if you want to specifically compile the Scala.js code as it is all in the client sub-project.
found another intellij hiccup using your example here:
https://github.com/shadaj/slinky/blob/fddd16ab76161c876e2be57171b00d79e6af87dc/docs/src/main/scala/slinky/docs/homepage/TodoApp.scala#L45
The code is fine, but intellij incorrectly says there's an error, expecting TagElement#RefType instead of html.Form for the event type argument to handleSubmit
@evbo I saw many of those spurious errors within Intellij too. I 'fixed' them by changing the type parameters of the SyntheticEvent:
def doSomething(e: SyntheticEvent[form.tag.RefType, Event]): Unit = { /*...*/ }
...
form(onSubmit := doSomething _)( /*...*/ )where that form is a slinky.web.html.form. This appears to compile, run fine and appease Intellij's presentation compiler.
Also, @shadaj I have an interesting use-case I've never seen before in scalajs that I'm wondering if you feel slinky should support:
atlaskit (atlassian Jira) uses an interesting approach where they pass props containing a function (e.g. onChange event callbacks) into a js Object, like so (here is just a snippet:)
export default function Form(props) {
var formRef = useRef(null);
var onSubmitRef = useRef(props.onSubmit);
onSubmitRef.current = props.onSubmit;
var _useState = useState(function () {
var finalForm = createForm({
onSubmit: function onSubmit() {
// when defined inside a js Object, scala arrow style function types aren't correctly converted to js.Function types
return onSubmitRef.current.apply(onSubmitRef, arguments);
},
...What I've noticed is if I try to use Slinky's converters it fails to recognize my onSubmit callback as a function, but if I simply use js.Function1[...] it works as expected.
So is this a possible limitation with how slinky converts types that interests you? Or is this just stinky js code not worth the effort supporting?
Just a thought, is it due to the js API calling apply(...) on the function? Does slinky not expect that?
@shadaj:matrix.org thank you, I have a couple tech debt items in my code I hope this next week to comb through once again and will post back with more info for you.
In the meantime, here's a fun brain teaser! This actually compiles and sadly fails horribly with confusing error logs at runtime! It was late and I wasn't paying attention to what I was typing.
Do you think it just is what it is, or might slinky be able to catch this during compilation?:
div()(
div(style := /*what if this is a dangerous typo? compiler should catch it!*/
h3(style := js.Dynamic.literal("marginBottom" -> 20))("no idea!"),
"why this compile?!"
)
)Results at runtime with:
Uncaught TypeError: Cannot convert a Symbol value to a string
at RegExp.test (<anonymous>)
Want me to file a bug for this?
ReactComponentClass[_], to be able to use them from JS, is there an easier way than to explicitly do that? I'm currently struggling with components that has props, since they can't be easily implicitly converted via the ReactComponentClass conversions.I'm trying to make a MVP with Slinky and Next.js, I've gotten propless functional&class component working for now.
I'm working on a MVP with Slinky and Next.js, I've gotten functional & class components working, but I'm hoping for a way with less boilerplate, I guess creating a macro for next.js could be a solution.
style is too lax. Yeah, feel free to open an issue.
Reader and Writer instances when exporting a component and want to avoid doing that by default for all components since it can increase code size a lot; a macro would probably be the way to go for frameworks like Next.js which have a well-known project structure
Currently I've set the Scalajs output directory to a
pages-folder, so that Next.js works, but that isn't really optimal, especially if you need dynamic routing etc.
I've debated doing some Webpack magic, but I doubt it would work well
Currently I'm exporting Slinky components directly, and that actually works too, but unfortunately the routing in Next.js is based on folder structure, which is probably not feasible to achieve with pure Scala.js.
I think I'll proceed with the glue code approach, and see if I can port one of the official Next.js samples to Slinky.
shadaj: I hit my first real hurdle, do you have any suggestions on how to do this in Slinky?
function App({ Component, pageProps }) {
return <Component {...pageProps} />
}It is for making a base component that is responsible for initializing all pages, see https://nextjs.org/docs/advanced-features/custom-app for more info.
ModuleSplitStyle.SmallestModules + Class components + fastLinkJS, the error message said that java.lang.object reference was undefined or something similar, fullLinkJS worked fine though. I fixed it by removing the last Class component I had, since it was just for testing class components anyway.It did work with
ModuleSplitStyle.FewestModules, but then compilation with Next.js took several seconds, so really not an option, but who needs class components anyway! ;)The link is here: https://github.com/Asamsig/next-slinky-example