ScalablyTyped/community

https://scalablytyped.org/docs/plugin

Jason Pickens

@steinybot:matrix.org

ST is creating typings.antd.components.Form.Form which looks like:

  object Form {

    @scala.inline
    def apply[Values](): SharedBuilder_FormItemProps_1607966002[Values] = {
      val __props = js.Dynamic.literal()
      new SharedBuilder_FormItemProps_1607966002[Values](js.Array(this.component, __props.asInstanceOf[FormItemProps[Values]]))
    }

    @JSImport("antd", "Form.Item")
    @js.native
    val component: js.Object = js.native

    implicit def make[Values](companion: Form.type): SharedBuilder_FormItemProps_1607966002[Values] = new SharedBuilder_FormItemProps_1607966002[Values](js.Array(this.component, js.Dictionary.empty))()

    def withProps[Values](p: FormItemProps[Values]): SharedBuilder_FormItemProps_1607966002[Values] = new SharedBuilder_FormItemProps_1607966002[Values](js.Array(this.component, p.asInstanceOf[js.Any]))
  }

Shouldn't this be named typings.antd.components.Form.Item?

Øyvind Raddum Berg

@oyvindberg

@steinybot:matrix.org yes, the components folder is special. pretty much everything else of the generated code is 1-1 from typescript. The different "flavour"s are more advanced codegen which generates more idiomatic scala code based on the types in the generated code.

so when you specify stFlavour := Flavour.Slinky and run the conversion, a program will run which tries to identify all react components, names them, builds a hierarchy of them, tries to deduplicate, and outputs something which is hopefully very nice to use in the components folder. think of it as providing nicer syntax, somewhat similar to what JSX does in Javascript

Øyvind Raddum Berg

@oyvindberg

Also yes, that component name is a bug. unfortunately naming the components is a bit harder than you would think, and I haven't had much time to invest into that part of the code. feel free to open an issue though

Jason Pickens

@steinybot:matrix.org

[m]

I appreciate you taking the time to answer my questions. I hope to be able to help out sometime, even if it is just with docs.

One other question. antd has a Radio.Group which looks like:

declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>>;

https://unpkg.com/browse/antd@4.16.13/es/radio/group.d.ts

This comes out as:

  @JSImport("antd/lib/radio/group", JSImport.Default)
  @js.native
  val default: ReactComponentClass[ForwardRefExoticComponent[RadioGroupProps with RefAttributes[HTMLDivElement]]] = js.native

Is there a way to actually use this? In TS MemoExoticComponent is still callable because it extracts the props from the nested component. Going from MemoExoticComponent to ReactComponentClass doesn't seem to work in the same way.

Jason Pickens

@steinybot:matrix.org

[m]

Doesn't look like Slinky has a good representation for MemoExoticComponent so I'm not sure what ST should be doing in this case.

Øyvind Raddum Berg

@oyvindberg

no problem @steinybot:matrix.org

this taps into some react things I'm not familiar with honestly

can you still use it like a normal react component in typescript though, do you know? one thing which can easily be changed is to translate the whole thing to ReactComponentClass[RadioGroupProps with RefAttributes[HTMLDivElement].

Jason Pickens

@steinybot:matrix.org

[m]

Yeah in TS you can use it: https://codesandbox.io/s/react-memo-forward-ref-r5cec?file=/src/App3.ts

It's a bit funny in JSX, I'm not sure why.

Yeah. Just expanding the TS types, the nested component disappears so just going to ReactComponentClass[RadioGroupProps with RefAttributes[HTMLDivElement] I think is the best solution.

Øyvind Raddum Berg

@oyvindberg

right. looking at https://github.com/ScalablyTyped/Converter/blob/master/scalajs/src/main/scala/org/scalablytyped/converter/internal/scalajs/flavours/ReactNames.scala#L40 it seems ForwardRefExoticComponent just needs to be added to the list

1 reply

I'll make a PR soonish

I still have no clue what an exotic component is

Jason Pickens

@steinybot:matrix.org

[m]

My guess is that has something to do with $$typeof (https://overreacted.io/why-do-react-elements-have-typeof-property/)

Although I thought ReactElement would have that too 🤔

ridaEl

@ridaEl

hello mr @oyvind, when i try to compile the react dnd demo i have the above error

elkhadirzyad

@elkhadirzyad

I have the same problem as @ridaEl

Øyvind Raddum Berg

@oyvindberg

@ridaEl @elkhadirzyad this seems like an error while using refs in scalajs-react. The error message says to use TopNode instead of HTMLElement - does that work?

in any case try to create a val foo: RefFn[TopNode] = node => ... and give that to untypedRef, that should help the compiler out

elkhadirzyad

@elkhadirzyad

@oyvindberg the function is `` implicit def whyyyDoesItHaveToBeSoComplicated: ValueType[HTMLElement => Callback, RefFn[HTMLElement]] =
ValueType[HTMLElement => Callback, RefFn[HTMLElement]] { (consume, f) =>
val massaged: RefFn[HTMLElement] =
(e: HTMLElement | Null) => Option(e.asInstanceOf[HTMLElement]).foreach(e => f(e).runNow())

  consume(massaged)
} `` should i replace html eimplicit def whyyyDoesItHaveToBeSoComplicated: ValueType[HTMLElement => Callback, RefFn[HTMLElement]] =
ValueType[HTMLElement => Callback, RefFn[HTMLElement]] { (consume, f) =>
  val massaged: RefFn[HTMLElement] =
    (e: HTMLElement | Null) => Option(e.asInstanceOf[HTMLElement]).foreach(e => f(e).runNow())

  consume(massaged)
} `` i should replace HTMlelement with TopNode ?

elkhadirzyad

@elkhadirzyad

@oyvind when i replace the function with

implicit def importantFunctionTodragTopNode :ValueType[HTMLElement => Callback, RefFn[TopNode]] =
    ValueType[HTMLElement => Callback, RefFn[TopNode]] { (consume, f) =>
      val massaged: RefFn[TopNode] =
        (e: TopNode | Null) => Option(e.asInstanceOf[HTMLElement]).foreach(e => f(e.asInstanceOf[HTMLElement]).runNow())

      consume(massaged)
    }

the drag is not working anymore

elkhadirzyad

@elkhadirzyad

the original function is

implicit def importantFunctionTodrag: ValueType[HTMLElement => Callback, RefFn[HTMLElement]] =
    ValueType[HTMLElement => Callback, RefFn[HTMLElement]] { (consume, f) =>
      val massaged: RefFn[HTMLElement] =
        (e: HTMLElement | Null) => Option(e.asInstanceOf[HTMLElement]).foreach(e => f(e).runNow())

      consume(massaged)
    }

Jason Pickens

@steinybot:matrix.org

[m]

Any particular reason for using js.Any over Any? Sébastien is saying that js.Any should never really be used except for in extends (https://matrix.to/#/!GPcZOobOJQzJgrKPRT:gitter.im/$ytxkthOd4OpqjqyVRH__7iVQv7QlSmyttWrOFvS_YR8?via=gitter.im&via=matrix.org)

Øyvind Raddum Berg

@oyvindberg

It's pretty arbitrary I'd say, i thought that was most correct @steinybot:matrix.org

I'd be happy to change it, it should be quite easy

Jason Pickens

@steinybot:matrix.org

[m]

The issue is when value?: any becomes value: UndefOf[js.Any]. There is no Evidence[String, js.Any] so you can't do value = "foo".

Rakshith Begane

@raxith_gitlab

If I have to compile React Material-UI to latest version how should I go about it? What are the challenges you would expect me to see

https://github.com/ScalablyTyped/Distribution/tree/master/m/material-ui

Øyvind Raddum Berg

@oyvindberg

It's hard @raxith_gitlab , see the links in ScalablyTyped/Converter#208 . The newer mui components are polymorphic in a way which is very hard to express in scala

That said i do have a plan to support it in some form, but I don't have the time to implement it for quite a while still

1 reply

Alexis Hernandez

@AlexITC

@raxith_gitlab there is an effort to compile those by https://github.com/nafg/scalajs-facades

doofin

@doofin

Hi ,I would like to know how to work with union types, something like this doesn't work(AuthUI.getInstance(): Any) match {case x@AuthUI => } which has the type |[AuthUI, Null]

Øyvind Raddum Berg

@oyvindberg

def asOption[T](ot: T | Null): Option[T] = Option(ot.asInstanceOf[T])

it's far from awesome, but I've been counting on scala 3 to fix the situation, heh. haven't had the opportunity to try that much yet

doofin

@doofin

Thanks,it works ! so the js Null is equal to null in Scala?

Øyvind Raddum Berg

@oyvindberg

Yes it is

doofin

@doofin

How to import individual components from one package? for example , what correspond to import { initializeApp } from 'firebase/app'; ? It seems that only a global firebase object ^ with @JSImport("firebase", JSImport.Default) is generated under typings.firebase.mod.default

doofin

@doofin

oh seems that I should use the one from
ScalablyTyped / Distribution rather than compile from ts source ,is this repo manually improved?

Alexander Samsig

@asamsig:matrix.org

[m]

@doofin: This might be of interest: ScalablyTyped/Converter#338

doofin

@doofin

Thanks,I am using 1.0.0-beta36 which contains this pr,do I need to do extra setup?

Alexander Samsig

@asamsig:matrix.org

[m]

Maybe this message has the information you need: https://matrix.to/#/!QiVIUNmCDUHKlwsXYI:gitter.im/$EZw18nFBD37r6bhmo2JfGr_kiLg9tcrkD6C5NRLqvX0

doofin

@doofin

Thanks,I think most simple method might be just use separate packages for firebase/app ,etc,although it's not recommended

doofin

@doofin

However the versions of those components package have to be manually figured out,their numbering are different

Øyvind Raddum Berg

@oyvindberg

Hey @doofin . The newest versions of firebase are broken unfortunately. I'd recommend using a slightly older version for now and upgrade later. I created an issue to track the fix here ScalablyTyped/Converter#367

I mean surely you can get the newest version to work by digging into the scoped @firebase/foo packages, or by copy/pasting and adapting the imports of some generated code. The firebase/app and so on modules are not generated because of that missing support

doofin

@doofin

I am using firebase 8.10.0 rather than the newest one,maybe it's not old enough?

Where communities thrive

People

Repo info

Activity