Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Sep 16 23:01
    scala-steward closed #500
  • Sep 16 23:01
    scala-steward commented #500
  • Sep 16 23:01
    scala-steward opened #509
  • Sep 15 00:26
    scala-steward closed #481
  • Sep 15 00:26
    scala-steward commented #481
  • Sep 15 00:26
    scala-steward opened #508
  • Sep 13 16:57
    Asamsig commented #456
  • Sep 13 12:28
    dkirchhof commented #498
  • Sep 13 12:27
    dkirchhof closed #498
  • Sep 13 12:27
    dkirchhof commented #498
  • Sep 12 03:49

    shadaj on v0.6.8

    (compare)

  • Sep 11 22:16

    shadaj on act-facade

    (compare)

  • Sep 11 22:16

    shadaj on external-component-export

    (compare)

  • Sep 11 22:16

    shadaj on scala-2.13-any

    (compare)

  • Sep 11 22:16

    shadaj on intellij-standalone-plugin

    (compare)

  • Sep 11 20:57

    shadaj on master

    Release v0.6.8 (compare)

  • Sep 11 20:43
    shadaj demilestoned #495
  • Sep 11 20:43
    shadaj milestoned #495
  • Sep 11 17:54

    shadaj on master

    Remove errant println (#507) (compare)

  • Sep 11 17:54
    shadaj closed #507
nafg
@nafg
@shadaj:matrix.org is there a way to automate keeping the g8 repo up to date?
Mark Lewis
@MarkCLewis
@alvinj, yeah, you can use a much simpler setup for that. You really only need the client subproject.
Eric K Richardson
@ekrich
@nafg Scala Steward helps - not automated but.
nafg
@nafg
I saw elsewhere, there's a "hack" to get scala steward to work on g8 repos, if you duplicate deps into the top build then it will detect the updates and then the string replacing logic will find it even in the template project build
Eric K Richardson
@ekrich
Yeah, plus to do this well you have to set it up so you can do CI - not really that much fun. Have you thought of examples in your project? - this is not super easy for a user to use though.
Alexander Weinmann
@lyrx
Hi, is there a way to automatically transform a simple html snippet into a ReactComponent for slinky?
Anything that saves me some typing would be great!!
vonchav
@voonchav_gitlab
Alexander Weinmann
@lyrx
Thanks!
evbo
@evbo

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

Alexander Weinmann
@lyrx
Hi guys, I am not really deap into slinky, nor am I a React-Expert in any way. But I chose to use slinky for quite a while now, just to get things done, knowing only as much as I need to use it. Maybe my repo (just a small website) is now clean enough to publish it: https://github.com/lyrx/lyrxp2p . Thanks to slinky and also scalablyped. I would hate doing plain Javascript!!
mn98
@mn98

@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.

evbo
@evbo

Thanks @mn98 ! while that works I wonder, is form.tag.RefTypesomehow aliased to form.html?

I love scala's type-driven culture, but this is where typing can become cumbersome and easy to lose track of ;)

evbo
@evbo

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
@shadaj:matrix.org
[m]
@evbo to the IntelliJ errors, I'll take a look; there was a bug in IntelliJ a long time ago that had trouble with similar code, but that got fixed, so I wonder if somehow the bug is back
on the function passing issue, that's odd; by default Slinky Readers/Writers automatically convert between Scala and JS function types; could you share an expanded example of how you're calling into the JS API?
evbo
@evbo

@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?

Alexander Samsig
@asamsig:matrix.org
[m]
Hi shadaj, it seems to be a requirement to export components as 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.
Alexander Samsig
@asamsig:matrix.org
[m]
:pointup: Edit: Hi shadaj, it seems to be a requirement to export components as `ReactComponentClass[]`, to be able to use them from JS, is there an easier way than to explicitly do that?
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.
shadaj
@shadaj:matrix.org
[m]
@evbo: hmm, very interesting! I wonder if the type for style is too lax. Yeah, feel free to open an issue.
Alexander Samsig: yeah, unfortunately there's no better solution since we need to derive 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
If you can share, it would be great to see a simple example of using Slinky with Next.js in open-source! That's a common request from developers.
Alexander Samsig
@asamsig:matrix.org
[m]
After having done some for testing, it is very succinct, when using Functional components.
I'm planning on sharing it, but it is very bare bones at the moment, and you wouldn't be able to build a proper application, with how I've done it so far.
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'm afraid the best way to do it, would be to have entry points in TypeScript/JavaScript and simply import and export Slinky components in them, since you can't make scalajs output a folder structure that Next.js would like.
I've debated doing some Webpack magic, but I doubt it would work well
shadaj
@shadaj:matrix.org
[m]
Ah, nice. I guess you might need to manually write or generate some glue JS code that can present separate "pages" to Next.js while routing to a common Scala.js library under the hood.
Yep, probably best to avoid Webpack magic, that tends to create trouble later on. It would be super cool to see if Scala.js' bundle splitting works with the glue pages approach, since the async imports that Next.js uses could result in much smaller chunks.
Alexander Samsig
@asamsig:matrix.org
[m]
The downsides is two build tools, currently I've experimented with the new module splitting.
shadaj
@shadaj:matrix.org
[m]
I guess eventually there could be an SBT plugin that wraps around the Next.js CLI tools, but probably will be more work than the benefit of saving a terminal tab while you're still in prototyping mode 😄
Alexander Samsig
@asamsig:matrix.org
[m]
Haha, absolutely, Next.js is also very opinionated, so much easier to just let it be, and use JS glue code to bring in Slinky components.
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.
Alexander Samsig
@asamsig:matrix.org
[m]

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.

Alexander Samsig
@asamsig:matrix.org
[m]
shadaj: I've managed to create a very basic Next.js app now with Slinky, I'm just following along the "Create Next.js app", it is actually working quite well, though I did encounter some issues with 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
shadaj
@shadaj:matrix.org
[m]
Alexander Samsig: you'll have to treat Component as a ReactComponentClass[js.Object], then wrap it into a local ExternalComponent so that you can construct it with the given props
awesome to see the example! I'll investigate what's going on with ModuleSplitStyle.SmallestModules, there are some hacks that Slinky uses that depend on a couple of Scala.js internals so it is possible that those are breaking
1 reply
evbo
@evbo

I have a callback function for a Select Input that the javascript library sends me a simple object of what was selected: {label: String, value: String}

If I let Slinky's Reader deserialize this for me though I get (from js console):

e$2: $c_Lcom_me_data_FieldOption
Lcom_me_data_FieldOption__f_label: "New Feature"
Lcom_me_data_FieldOption__f_value: "feature"

This works fine for scalajs, but the issue is that inside my callback I need to yet again call another js function, passing it this object. It doesn't like seeing the fully qualified names of course.

Is this kind of interop in slinky supported?

evbo
@evbo
of course, I can just convert my FieldOption into a js.Object but Im wonering if there's automation for this?:
jsCallbackInsideMyScalajsCallback(
  js.Dynamic.literal("label" -> fieldOption.label, "value" -> fieldOption.value)
)
evbo
@evbo

and another smaller question, how do you get external objects to appear as "ReactElement"? For instance, I am importing an icon:

@js.native
@JSImport("@atlaskit/icon/glyph/unlock", JSImport.Default)
object UnlockIcon extends js.Object

And if I put it as the button text it complains it is not of type ReactElement

shadaj
@shadaj:matrix.org
[m]
@evbo: you can just have the UnlockIcon extend ReactElement instead of js.Object
Alexander Samsig: that would be very helpful! does SmallestModules work with functional components?
2 replies
evbo
@evbo
doh! so obvious thanks. What about the deserialization I posted above - have you seen that before? My hack is pretty brutal but works
Oleg Pyzhcov
@oleg-py
Are there any developments on Scala 3 support?
shadaj
@shadaj:matrix.org
[m]
Alexander Samsig: thanks for the repro! will take a look, but it does sound like it could just be a Scala.js bug
@oleg-py: not yet, unfortunately haven't gotten the time to work on it yet. The main work is porting Reader/Writer derivation, since @react isn't required to use Slinky
evbo
@evbo

sometimes i find js.Any to be suitable as a type (usually in avoiding overly complex union types) for when I have no really breakable logic interacting with a given variable, but at some point I need to convert a case class to that js.Any type.

How do I tell slinky to convert my case class to a js.Any explicity so that the attributes have the same names as the case class in the javascript?

mn98
@mn98

Hi all, I have a feeling this question is extremely basic, but I can't find a working example. When I try to add readOnly := true to a textarea like so:

        textarea(
          rows := props.numberOfRows.toString,
          cols := props.numberOfColumns.toString,
          readOnly := true,
          defaultValue := "Blah"
        )

I get the following compilation error:

 found   : slinky.core.AttrPair[slinky.web.html._readOnly_attr.type]
 required: slinky.core.TagMod[slinky.web.html.textarea.tag.type]]

could someone please educate me here on how this is achieved?

mn98
@mn98

Ah, I got the above working like this:

    private val readOnlyAttr = CustomAttribute[Boolean]("readOnly")

    textarea(
      rows := props.numberOfRows.toString,
      cols := props.numberOfColumns.toString,
      readOnlyAttr := true,
      defaultValue := "Blah"
    )

Would someone mind pointing me in the direction of some learning materials on why the custom things are necessary? I'm very green in the world of html!

2 replies
mn98
@mn98

Hi all, I hope this is the right place to ask about slinky-styled-components. Whilst getting started with this (using version 0.1.0+10-b09028e5) I've experimented with a simple styled div:

    val divRef = useRef[Div](null)
    val styledDiv = styled.div(css"""width: 100%; height: 640px;""")
    styledDiv(ref := divRef)

Then the thing that's attempting to render itself within that div is trying to call attachShadow on that div element, only to be told that attachShadow is not a function on that element. A quick search on the web didn't yield a great deal other than make sure the html element supports attachShadow, which div should. Does anyone have any experience with this kind of error or any thoughts on what the issue might be? Many thanks!

mn98
@mn98
@shadaj is the “attachShadow” issue the same or similar?
mn98
@mn98
I confirmed that the attachShadow issue only occurs when using a slinky styled div, it works ok when using a regular slinky html div with a regular css style in the html.
Oleg Pyzhcov
@oleg-py
@shadaj:matrix.org I took a look into that derivation and it seems to be pretty standard TC derivation - is there any specific reason I'm missing as to why Magnolia has been removed?