ScalablyTyped/community

https://scalablytyped.org/docs/plugin

elkhadirzyad

@elkhadirzyad

@AlexITC , i want to include val classes = styles1(js.undefined) but i dont know where

Alexis Hernandez

@AlexITC

See this another example

elkhadirzyad

@elkhadirzyad

@AlexITC thank u, however i use scalajs react not slinky, i have State(), Prop(), Backend(), render() functions, i dont know where to put this line val classes = styles1(js.undefined) in order to use styles, when i put it inside render(), the page is blank

Alexis Hernandez

@AlexITC

oh, apologize, I got used to slinky and forgot that there are other flavours

elkhadirzyad

@elkhadirzyad

@oyvindberg , any idea where to put the line val classes = styles(js.undefined), when i put it in render, it gives blank page

Øyvind Raddum Berg

@oyvindberg

@elkhadirzyad render is probably the right place for it. checkout the error message in the browser console

@lavrov yes, "foo" | "bar" will be interesting, and also T | Null, and just general type inference and compile times. I hope it will be a big improvement :)

Øyvind Raddum Berg

@oyvindberg

@peterstorm I gave refs a shot now. it'll be fairly untyped, and refs are almost always the wrong answer, but if you really have to you just have to handle null case (in this case with an Option)

diff --git a/material-ui/src/main/scala/demo/button/Button.scala b/material-ui/src/main/scala/demo/button/Button.scala
index 56de112..f01beaf 100644
--- a/material-ui/src/main/scala/demo/button/Button.scala
+++ b/material-ui/src/main/scala/demo/button/Button.scala
@@ -12,7 +12,7 @@ import typings.materialUiCore.createMuiThemeMod.{Theme, ThemeOptions}
 import typings.materialUiCore.spacingMod.SpacingOptions
 import typings.materialUiCore.{stylesMod, components => Mui}
 import typings.materialUiStyles.components.ThemeProvider
-import typings.std.global.window
+import typings.std.global.{console, window}

 import scala.scalajs.js

@@ -47,10 +47,17 @@ object ButtonTest {
       s"Increment it, ${props.name}"
     )

+    val ref = Hooks.useRef[Any](null)
+
     div(
       /* text field controlled by the value of the state hook above*/
-      Mui.TextField.StandardTextFieldProps().value(state).disabled(true),
-      incrementButton
+      Mui.TextField.StandardTextFieldProps().value(state).disabled(true).innerRef(ref),
+      incrementButton,
+      Option(ref.current).map(x => {
+        val dynamic = x.asInstanceOf[js.Dynamic]
+        console.warn(dynamic)
+        "has reference"
+      })
     )
   }
 }

Peter Storm

@peterstorm

Ah ok, didn’t know refs was not the right answer. I solved it using useState instead and the onchange property, but thanks a lot for getting back :)

Øyvind Raddum Berg

@oyvindberg

most usage of ref is to break reacts rules. in a few cases you have to though, so it's nice that it at least kind of works

Peter Storm

@peterstorm

Anybody know why a Material Dialog doesn’t want to preserve styling when I give it Grid with container flag, and children as Grid with item flag? Everything just fills the whole page. I’m using a full screen Dialog.

Alexis Hernandez

@AlexITC

@oyvindberg did you ever deployed the material-ui generated code to maven central?

elkhadirzyad

@elkhadirzyad

hello @oyvindberg , i have a question about useState() function, is it mandatory to use it inside ScalaFnComponent type ?

Øyvind Raddum Berg

@oyvindberg

@AlexITC no, didnt get around to it

@elkhadirzyad read the react hooks documentation

Jason Pickens

@steinybot

What should I do in the situation where the generated class extends a base class and I need to call the constructor defined on the base class?

export as namespace ProgressBar;

declare const main: {
    Circle: typeof Circle;
};

export = main;

declare class Circle extends Shape {
    readonly containerAspectRatio: 1;
}

declare class Shape {
    constructor(container: SVGPathElement | string | null, opts?: PathDrawingOptions);
}

Which TypeScript seems to allow:

const circle = new ProgressBar.Circle('#example-percent-container', {
    color: '#FCB03C',
    strokeWidth: 3,
    trailWidth: 1,
    text: {
        value: '0',
    },
});

ScalablyTyped generates:

object ^ {
  var Circle: Instantiable0[typings.progressbarJs.circleMod.^] = js.native
}

class ^ () extends Circle

trait Circle
  extends typings.progressbarJs.shapeMod.^ {
  val containerAspectRatio: `1` = js.native
}

class ^ () extends Shape {
  def this(container: String) = this()
  def this(container: SVGPathElement) = this()
  def this(container: String, opts: PathDrawingOptions) = this()
  def this(container: Null, opts: PathDrawingOptions) = this()
  def this(container: SVGPathElement, opts: PathDrawingOptions) = this()
}

Jason Pickens

@steinybot

What’s with the Instantiable0 type? At the end of the day Circle is just a function. Maybe I’ll cast it.

Øyvind Raddum Berg

@oyvindberg

This is actually ScalablyTyped/Converter#167 @steinybot . For now you'll have to copy/paste the whole class ^ () extends Circle and add the wanted constructor by hand, should be easy enough

I havent prioritized it since it doesnt come up that often, and I havent understood how it actually works in typescript yet

Instantiable0 is actually the class as a function, it has a newInstance0 method on it

Jason Pickens

@steinybot

Thanks for that. I was a bit surprised myself when I discovered that TypeScript allows this. The lack of an update to date specification is annoying. I found the heated debate about getting that updated and that got pretty nasty. Shame they seem to have abandoned the spec.

Makes me very greatful for the SIP :)

Jason Pickens

@steinybot

Is this conversion correct?

export = Sortable;
declare class Sortable {
…
}
declare namespace Sortable {
…
}

to:

@JSImport("sortablejs", JSImport.Namespace)
@js.native
class ^ protected () extends Sortable {
  def this(element: HTMLElement, options: Options) = this()
}

@JSImport("sortablejs", JSImport.Namespace)
@js.native
object ^ extends js.Object {
…
}

I’m getting a TypeError when trying to instantiate the class saying that it is not a constructor. It looks like its ending up as the module.
The library docs say:

import Sortable from "sortablejs”;
var sortable = new Sortable(…)

So shouldn’t it be:

@JSImport("sortablejs", JSImport.Default)

Øyvind Raddum Berg

@oyvindberg

@steinybot the translation is correct, the type declaration doesnt match the example as far as I understand. It only works if you use something like typescripts esModuleInterop compiler flag. Maybe the type definitions are outdated?

Jason Pickens

@steinybot

@JSImport("sortablejs", JSImport.Namespace) corresponds to import * as ^ from “sortablejs” which imports all the exports under the namespace of ^ right? So how can ^ be a class?

Or is it more like import ^, * as ^ from "sortablejs”;?

Øyvind Raddum Berg

@oyvindberg

it corresponds to import Sortable = require('sortablejs') in typescript

Jason Pickens

@steinybot

Actually I think that is what it should be but in Scala.js that would be:

@JSImport("sortablejs", JSImport.Default)
@js.native
class ^ protected () extends Sortable {
  def this(element: HTMLElement, options: Options) = this()
}

@JSImport("sortablejs", JSImport.Namespace)
@js.native
object ^ extends js.Object {
…
}

wouldn’t it?

The whole JS module thing does my head in

FWIW changing it to what I posted works.

Øyvind Raddum Berg

@oyvindberg

the type definition you posted above is that of a commonjs module, where the class is the entire module. this is not supported by standard es6 modules. However, the project itself is probably actually defined as an es6 module, where the class has the name default. The reason why this works in typescript is that the esModuleInterop compiler flag generates code that tries both ways somehow

so yes, you can do what you did and copy/paste the code and change the import - that will work

and even better PR a change to wherever the type definitions are

It would probably be possible to support the esModuleInterop behaviour in ST, but I haven't done any research in that direction

Jason Pickens

@steinybot

Ok thanks. Sorry for the confusion. Just so I understand, what should the TS type definition look like?

Øyvind Raddum Berg

@oyvindberg

nothing to be sorry about, this is highly confusing also in typescript

it should say export default Sortable instead of export = Sortable

Jason Pickens

@steinybot

Ah yep gotcha.

Peter Storm

@peterstorm

So I have this datatype that extends js.Object, because I want to use it with recharts, but it doesnt recharts says that datatype is not a js.Object... is there any way around that?

Or is there a way to convert a List to a js.Array?

Peter Storm

@peterstorm

Actually, I just need it for labels, so I could just pass a second argument with label names, but still, if anyone has any suggestions :)

Carlos Quiroz

@cquiroz

Hi, I’m tringy to generate a facade for broadcast-channel and the generated code looks like:

@JSImport("broadcast-channel/types/broadcast-channel", "BroadcastChannel")
@js.native
class BroadcastChannel[T] protected () extends js.Object {

However, the file at broadcast-channel/types/broadcast-channel is a types script fills, specifically broadcast-channel.d.ts

I’m not sure if that is supported, is it?

When I try to use it I get errors while bundling that the file cannot be loaded

Øyvind Raddum Berg

@oyvindberg

@cquiroz import it through typings.broadcastChannel.mod, the mod package typically corresponds to the root module of a library

what you're seeing is a typescript pattern where they somehow invent a fake module for type definitions and then reexport it into the proper module. This means that in typescript you can say import {BroadcastChannel} from "broadcast-channel/types/broadcast-channel", and it will compile and fail in the same way. the problem for ST is that there is in general no way of knowing if a module actually exists or not

Where communities thrive

People

Repo info

Activity