Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Jan 22 00:51

    oyvindberg on gh-pages

    Deploy website Deploy website … (compare)

  • Jan 22 00:44

    oyvindberg on v1.0.0-beta29.2

    (compare)

  • Jan 22 00:44

    oyvindberg on v1.0.0-beta29-patch

    Update ammonite-ops to 2.3.8 Update sbt-mdoc to 2.2.13 Better error logging in CI and 12 more (compare)

  • Jan 22 00:44

    oyvindberg on gh-pages

    Deploy website Deploy website … (compare)

  • Jan 18 20:06

    oyvindberg on master

    Update sbt-mdoc to 2.2.15 (compare)

  • Dec 19 2020 17:56

    oyvindberg on master

    Update library-developer.md Ad… (compare)

  • Dec 15 2020 02:32

    oyvindberg on scala-companion-objects

    (compare)

  • Dec 14 2020 23:08

    oyvindberg on scala-companion-objects

    Generate more specific types fo… (compare)

  • Dec 14 2020 01:25

    oyvindberg on v1.0.0-beta29.1

    (compare)

  • Dec 14 2020 01:25

    oyvindberg on v1.0.0-beta29-patch

    Another bugfix for remote cache (compare)

  • Dec 14 2020 01:25

    oyvindberg on gh-pages

    Deploy website Deploy website … (compare)

  • Dec 14 2020 00:55

    oyvindberg on master

    Restore compatibility with old … (compare)

  • Dec 14 2020 00:24

    oyvindberg on master

    Restore compatibility with old … (compare)

  • Dec 14 2020 00:03

    oyvindberg on master

    Another bugfix for remote cache (compare)

  • Dec 13 2020 12:17

    oyvindberg on master

    Reintroduce `^` classes (compare)

  • Dec 11 2020 09:55

    oyvindberg on gh-pages

    Deploy website Deploy website … (compare)

  • Dec 11 2020 09:54

    oyvindberg on master

    add scalablytyped icon (#235) … (compare)

  • Dec 11 2020 09:49

    oyvindberg on master

    try to speed up CI (compare)

  • Dec 11 2020 09:40

    oyvindberg on improve-class-extraction

    (compare)

  • Dec 11 2020 09:40

    oyvindberg on master

    Improve ExtractClasses and Reso… (compare)

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