ScalablyTyped/community

https://scalablytyped.org/docs/plugin

Øyvind Raddum Berg

@oyvindberg

Do you use the source generator plugin then?

Binh Nguyen

@ngbinh

yes

I am using ScalablyTypedConverterGenSourcePlugin with stSourceGenMode := SourceGenMode.Manualand stFlavour := Flavour.Japgolly
`

Øyvind Raddum Berg

@oyvindberg

Right, I suppose that code may have moved from package to object, and you may have old class files laying around maybe? Or even duplicated source code

Try clean first

Then maybe grep around to see if there is any duplication

Because the library itself should work, it's used in a demo, and the demo repos double as integration tests

Binh Nguyen

@ngbinh

@oyvindberg will try. If not, then I should have a minimal reproduce repo

Øyvind Raddum Berg

@oyvindberg

yeah thanks, that would be useful

Binh Nguyen

@ngbinh

@oyvindberg https://github.com/ngbinh/scalablyTypedDemo looks like the generated code has problem with -Ymacro-annotations. Removing that option then everything compiles well

Binh Nguyen

@ngbinh

filed ScalablyTyped/Converter#254

Binh Nguyen

@ngbinh

@oyvindberg updated ScalablyTyped/Converter#254 that shows another issue where the generated code fails to compile even without macro annotations

nafg

@nafg

Any way to move Material-UI 4 support forward?

Or even Material-UI 5

Øyvind Raddum Berg

@oyvindberg

of course there is a version 5 coming, heh

I'm not working on it, unfortunately

so the story is the same as before. we need an implementation of some very hard to write code

nafg

@nafg

ok I guess I have to continue using my material-ui facade generator

If you want to collaborate on the "very hard to write code" somehow lmk

Øyvind Raddum Berg

@oyvindberg

@nafg I'd very much welcome collaborations for that. I didn't mean to be dramatically vague with that very hard to write code, I just thought I had provided some details about it before :)

Alexis Hernandez

@AlexITC

@nafg what are you using? I'm stuck in material-ui 3, and I use this

nafg

@nafg

@AlexITC https://github.com/nafg/scalajs-facades

Philipp Dörfler

@phdoerfler

Hi! I'd like to use cytoscape.js from Scala.js. There's an example conversion: https://github.com/ScalablyTyped/Distribution/tree/master/c/cytoscape but if I try to do that conversion myself following https://scalablytyped.org/docs/plugin, I get stuck at the point where I'd need to specify TS types. I don't find any on npm, so where did ScalablyTyped get theirs from? Unfortunately I could not find any details in the conversion example as to how that example was generated.

Philipp Dörfler

@phdoerfler

To elaborate: https://github.com/DefinitelyTyped/DefinitelyTyped does not have any definitions for cytoscape, nor does npm (to my knowledge). I did find this issue, however: cytoscape/cytoscape.js#1012 which claims that TS definitions are being worked on and / or that work on that has been completed.
There's also: DefinitelyTyped/DefinitelyTyped#4763 which pointed me to https://github.com/phreed/ts-typings/blob/cytoscape/index.d.ts but really, I'm searching for the needle in the haystack and I just want to know what I gotta do to use cytoscape from Scala.js and you guys seem to have figured that out already :P

Philipp Dörfler

@phdoerfler

I discovered https://www.typescriptlang.org/dt/search and it's great! I think this should be mentioned on the ScalablyTyped website where it says "Version numbers and @types packages are probably most conveniently found at npmjs.com.".
Anyways, that search indicates that there are indeed types for cytoscape: https://www.npmjs.com/package/@types/cytoscape. I expected those to show up on npm when I searched for cytoscape but they don't.
So, turns out, the reason npm complained was that whilst there are types available, they are not available for the version I specified. 3.18.1 is what I had wanted, 3.14.12 is what is available. Mystery solved. Thanks for coming to my TED talk.

Philipp Dörfler

@phdoerfler

my generated main.js contains var $i_cytoscape = require("cytoscape");. However, I need this to run in the browser and Chrome is not happy about a require showing up. I suppose this is ScalaJSBundler's doing?

Øyvind Raddum Berg

@oyvindberg

Hey thanks for that @phdoerfler , I didn't know it existed either. Can you PR the change to the docs folder in the converter-repo maybe?

Also yes, you'll need the bundler for that

I noticed there were react components for cytoscape too, so you might consider trying it with the slinky flavour

Philipp Dörfler

@phdoerfler

@oyvindberg thanks for spotting the react components, I might give that a try! The generated code is a bit awkward to use and whilst I got it to load in the browser it doesn't really seem to do much of anything that I'm asking it to do. Unfortunately I gotta go right now. I want to get a minimal hello world example working and then put it on GitHub (with ScalaSteward enabled and Mergify so it keeps itself up to date).

I'm a big fan of graph theory and Cytoscape can do some cool stuff: https://js.cytoscape.org/#demos

it's not just for rendering graphs either, it does A* and whatnot

That's my humble goal: To convert this simple example: https://github.com/cytoscape/cytoscape.js-blog/blob/gh-pages/public/demos/getting-started/index.html

Anyways, gotta go now

Philipp Dörfler

@phdoerfler

it doesn't really seem to do much of anything that I'm asking it to do

Bit embarrassing but I simply forgot I last ran fastOptJS::webpack instead of ~fastOptJS::webpack. It's working now :)

So whilst the original JS version looks like this:

var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    {
      data: {
        id: 'ab',
        source: 'a',
        target: 'b'
      }
    }]
});

With ScalablyTyped my code looks like this:

import typings.cytoscape.mod.{apply => cytoscape, _}
val cy: Core = cytoscape(new CytoscapeOptions {
  container = document.getElementById("cy").asInstanceOf[HTMLElement]
  elements = js.Array(
    ElementDefinition(NodeDataDefinition().setId("a")),
    ElementDefinition(NodeDataDefinition().setId("b")),
    ElementDefinition(EdgeDataDefinition("a", "b")))
})

@oyvindberg How can I help the converter out to generate less awkward code?

Philipp Dörfler

@phdoerfler

Hey thanks for that @phdoerfler , I didn't know it existed either. Can you PR the change to the docs folder in the converter-repo maybe?

Yeah, sure! (assuming I won't forget)

Øyvind Raddum Berg

@oyvindberg

import org.scalajs.dom.document
import org.scalajs.dom.raw.HTMLElement
import typings.cytoscape.mod.{apply => cytoscape, _}

val cy: Core = cytoscape(
  CytoscapeOptions()
    .setContainer(document.getElementById("container").asInstanceOf[HTMLElement])
    .setElementsVarargs(
      ElementDefinition(NodeDataDefinition().setId("a")),
      ElementDefinition(NodeDataDefinition().setId("b")),
      ElementDefinition(EdgeDataDefinition("a", "b"))
    )
)

Øyvind Raddum Berg

@oyvindberg

@phdoerfler I made a quick react demo for this, seems to work well ScalablyTyped/SlinkyDemos@623eae8

Philipp Dörfler

@phdoerfler

This message was deleted

@oyvindberg oh neat, I'll check that out tomorrow! Fwiw I was able to still use scalajs-bundler, after adding:
webpackBundlingMode := BundlingMode.LibraryAndApplication()
and using
./target/scala-2.13/scalajs-bundler/main/scala-js-tutorial-fastopt-bundle.js
(and then)
~fastOptJS::webpack.

I also set
stEnableScalaJsDefined := Selection.NoneExcept("cytoscape")

^ here's the result of me porting this demo: https://github.com/cytoscape/cytoscape.js-blog/blob/gh-pages/public/demos/getting-started/index-addingNodes.html

Philipp Dörfler

@phdoerfler

I'm hoping to put it up by tomorrow

Øyvind Raddum Berg

@oyvindberg

cool

You hopefully shouldn't need stEnableScalaJsDefined by the way

Philipp Dörfler

@phdoerfler

yeah that was when I still thought I'd need to manually extend the traits created by the converter. It was just by looking at the generated code that I realised that there are ways around that.

Philipp Dörfler

@phdoerfler

@oyvindberg In case you're a VS code user, I threw up a liveshare session, feel free to take a look around and prod and change things while I'm gone. There's a bunch of settings I am not sure about. They might be obsolete but I have seen them in the introductory video for ScalablyTyped such as scalaJSLinkerConfig ~= (_.withSourceMap(false)).
I'll be back in a bit: https://prod.liveshare.vsengsaas.visualstudio.com/join?5ED92136C14903849C204D7BB232936D084F

Philipp Dörfler

@phdoerfler

@oyvindberg https://github.com/phdoerfler/Cytoscape-scalajs-helloworld thoughts?

Øyvind Raddum Berg

@oyvindberg

@phdoerfler looks all good to me :)

Where communities thrive

People

Repo info

Activity