shadaj/slinky

Everything about Slinky -- issues, ideas for features, where it's being used, and more

Peter Storm

@peterstorm

Im trying to use the ScalablyTyped plugin for typescript types, but it hangs on trying to build the standard library or something?

Phase3Compile.scala:125 Building C:\Users\phn.ivy2\local\org.scalablytyped\std_sjs1_2.13\4.0-34aa7a\jars\std_sjs1_2.13.jar... [thread => 177, project => conn...

Anyone have experience with that? It's been going for ages and complains about spending too much time garbarge collecting

Im using sbt

Alexis Hernandez

@AlexITC

You need to increase the memory, latest versions need a lot, this worked for me, create .sbtopts with

-J-Xmx4G
-J-XX:MaxMetaspaceSize=4G
-J-XX:+CMSClassUnloadingEnabled

Peter Storm

@peterstorm

Thanks that worked!

Pascal Mengelt

@pme123

Is there an example on how to integrate JavaScript code that is not a React Component? According to the doc are External Components just for them.
I have the following I want to use with Slinky. Using External Components did not work.

import Modeler from 'bpmn-js/lib/Modeler';

const modeler = new Modeler({
  container: $modelerContainer,
  moddleExtensions: {
    custom: customModdleExtension
  },
  keyboard: {
    bindTo: document.body
  }
});

nafg

@nafg

@pme123 just refer to regular scala.js docs

Pascal Mengelt

@pme123

@nafg - thanks I found my problem - see https://stackoverflow.com/questions/64740345/how-to-translate-javascript-class-to-scalajs/64741174#64741174

Peter Storm

@peterstorm

Is it possible to import an scss file and use the classes defined in that?

Peter Storm

@peterstorm

Is it just like example app, where you just import it as an js object, and make the styles available via a private val?

Peter Storm

@peterstorm

And how do I do an aria-hidden, I can see there's a WithDash class, but I'm unsure of the syntax

Peter Storm

@peterstorm

Ah it was in the docs

But I get this error when I try to do it to an svg tag:

type mismatch;
 found   : slinky.core.AttrPair[slinky.web.html._aria_attr.type]
 required: slinky.core.TagMod[slinky.web.svg.svg.tag.type]

Peter Storm

@peterstorm

Hmm does sass loading even work in scala JS / slinky?

Peter Storm

@peterstorm

Ok, figured out the sass part, but still dont understand the type mismatch above

Mardo Del Cid

@mardo

Hi Guys, I think 0.6.6 doesn’t come with IntelliJ support. I’m testing on IntelliJ 2020.2.3. 0.6.5 works for me though.

Peter Storm

@peterstorm

No one able to help with this please?

Error is this: type mismatch; found : slinky.core.AttrPair[slinky.web.html._aria_attr.type] required: slinky.core.TagMod[slinky.web.svg.svg.tag.type]

nafg

@nafg

Just a guess, are you missing an import?

scalajs-react has similar types and it relies on an implicit, which means you need a certain import

Peter Storm

@peterstorm

Maybe? :D Which one would that be?

nafg

@nafg

dunno, look at some example project source files

Peter Storm

@peterstorm

Yeah, there's not a lot of that going around :(

Øyvind Raddum Berg

@oyvindberg

@peterstorm my guess is that the slinky dom dsl has declared that aria attributes are not valid for svg elements, this is done through implicits. Check the companion object of the svg you're using, you can copy/paste and customize one of the implicits to explicitly allow it in your code

Peter Storm

@peterstorm

Uh, I have no idea how to do that :(

Maybe it's because it uses the wrong operator? Its overloaded and can come from different places

But an AttrPair extends a TagMod

Peter Storm

@peterstorm

I figured it out by mistake! ?D

I was using the wrong aria

but then I did a role and it prefixed it all with slinky.web.svg and I thought, maybe there's an aria one for that

And there was! :D

Peter Storm

@peterstorm

Oh, but there's not data tag in there, damn :(

Peter Storm

@peterstorm

I'm trying to pass a component as props to another component, like so:

But the compiler says value apply is not a member of slinky.core.facade.ReactElement

The react annotation

Peter Storm

@peterstorm

Well, i guess that doesnt work. How would i pass a component as props then?

Alexis Hernandez

@AlexITC

that's the way to pass the component, I even have something similar (see), sometimes the macro highlights errors but sbt compiles fine

Peter Storm

@peterstorm

@AlexITC Can you point me to where you use that componenet, and pass another component to it? Can't seem to find that :D

1 reply

I'm probably super confused because it's in a trait, and without the react annotation, but it's a cool project to learn from it seems!

1 reply

Peter Storm

@peterstorm

Ah found it. But whati wanna do is give the actual component as a prop. Like if you defined your own component with @react and a val as a functional component

how do i pass that whole component as a type?

though i guess I could just use vals... hmm, I’ll look at that

Alexis Hernandez

@AlexITC

generally it shouldn't be a problem to propagate a component, it is likely you have a different issue, if you post a snippet, I can take a look

Peter Storm

@peterstorm

Yeah, I'll give it a go again, and else I'll post a snippet. But what would be the type of an object that you created with the @react annotation? If I wanted to pass an object like that around?

Alexis Hernandez

@AlexITC

ReactElement is fine, what matters is the component

Peter Storm

@peterstorm

Ok, now that I have this component that I want to take another component as children

@JSImport("resources/scss/card/style.scss", JSImport.Default)
@js.native
object Style extends js.Object

@react
object Card {

    private val css = Style

    case class Props(title: String, className: String, children: ReactElement)

    val component = FunctionalComponent[Props] { props =>
        Grid(className := s"{props.className} cardWrapper")(
            Grid(className := "cardHeader")(
                div(className := "cardHeaderLeft")(
                    h3(props.title)
                )
            ), props.children
        )
    }
}

Where communities thrive

People

Repo info

Activity