ScalablyTyped/community

https://scalablytyped.org/docs/plugin

Øyvind Raddum Berg

@oyvindberg

it's just a small handful of libraries which end up being so incredibly much source code anyway

I ran dist now and pushed it by the way

Alexis Hernandez

@AlexITC

that sounds reasonable to me, it will definitely help in some of our internal projects because the compile time will be reduced considerably

Øyvind Raddum Berg

@oyvindberg

But @AlexITC if you setup remote cache on s3, ci will be instant

Alexis Hernandez

@AlexITC

Agree, and I plan to do that, but the package maven library can certainly help to new devs because it is less configuration

Øyvind Raddum Berg

@oyvindberg

[warn ] 2020-11-16T00:52:31.544315Z Phase3Compile.scala:144  Built /home/olvind/.ivy2/local/org.scalablytyped.slinky/react_sjs1_3.0.0-M1/16.9-dt-20200711Z-805e37/jars/react_sjs1_3.0.0-M1.jar in 48664 ms [id => react, thread => 1, phase => build, flavour => SlinkyFlavour]

The future is approaching

nafg

@nafg

what future is that?

Øyvind Raddum Berg

@oyvindberg

it's building ST for scala 3.0.0-M1, using 2.13 version of slinky

nafg

@nafg

oh exciting :)

Øyvind Raddum Berg

@oyvindberg

I'm quite curious how it'll turn out with proper union types

Sören Brunk

@sbrunk

🤞

Peter Storm

@peterstorm

Anyone here a master of Refs and MateriaulUI? :D

Peter Storm

@peterstorm

Looks like the inputRef doesnt work on TextFields in Material UI, I get a null Pointer :(

Vitaly Lavrov

@lavrov

I'm quite curious how it'll turn out with proper union types

def foo(color: "primary" | "secondary") would be quite close to TS version :)

nafg

@nafg

@elkhadirzyad where in that line is the error?

elkhadirzyad

@elkhadirzyad

@nafg , its ok

elkhadirzyad

@elkhadirzyad

hello, i want to display the demo of circular progress integration with using styleBuilder given in material ui demos, when i add val classes = styles1(js.undefined), it gives me blank pagen any suggestions`object DemoCircularIntegration {
case class Props()
//val classes = styles(js.undefined)
case class State(loading: Boolean = false, success: Boolean = false) {
def setLoading = copy(success = false, loading = true)

def setSuccess = copy(success = true, loading = false)

}

class Backend(t: BackendScope[Props, State]) {
var timer: js.UndefOr[js.timers.SetTimeoutHandle] = js.undefined

def unmount = Callback {
  timer.foreach(js.timers.clearTimeout)
  timer = js.undefined
}

def setSuccess = Callback {
  timer = js.timers.setTimeout(2000)(t.modState(_.setSuccess).runNow())
}

def handleButtonClick(loading: Boolean) = {
  (t.modState(_.setLoading) >> setSuccess).when(!loading) >> Callback.empty
}
val classes = styles1(js.undefined)

def render(props: Props, state: State): VdomElement = {
 // val css = props.style
 // val classes = css.styles
  //val buttonCss = if (state.success) css.buttonSuccess else css.common.emptyStyle


    <. div(
     <.  div(
          Mui.Fab.color(typings.materialUiCore.mod.PropTypes.Color.primary).onClick(_ => handleButtonClick(state.loading))(

            if (state.success) Muii.Check() else Muii.Save()
          ),
        HicpCircularProgress(size=68,className="fabProgress")().when(state.loading)
        ),
       div(
          HicpRaisedButton(touchTapCallback=_ =>handleButtonClick(state.loading), disabled=state.loading)


          ("Accept terms")
          ),
        HicpCircularProgress(size=24,className="buttonProgress")().when(state.loading)
        )

}

Alexis Hernandez

@AlexITC

See this example

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

Where communities thrive

People

Repo info

Activity