typings.std.Partial[typings.interactjsTypes.typesMod.OrBoolean[typings.interactjsTypes.pluginMod.DraggableOptions]] for instance is very javascripty
DraggableOptions | boolean) because Partial, whatever that means
Partial<DraggableOptions>, but not Partial<DraggableOptions | boolean> (if that is what OrBoolean does)
Listener is awkward because it's an untyped vararg function. there is no good scala syntax for that
I am guessing that this would be right?
interact(element).draggable(
DraggableOptions()
.setOnstart(((event: InteractEvent) => println(event)).asInstanceOf[ListenersArg])
.asInstanceOf[Partial[OrBoolean[DraggableOptions]]],
)While that does compile, it does not run. Javascript complains that:
scala.scalajs.js.JavaScriptException: TypeError: $$x1.draggable is not a functionimport typings.interactjsInteract.mod.{default => interact}
import typings.interactjsTypes.dropPluginMod.interactjsCoreInteractEventAugmentingMod.InteractEvent
import typings.interactjsTypes.pluginMod.DraggableOptions
import typings.interactjsTypes.typesMod.{ListenersArg, OrBoolean}
import typings.std.Partialimport typings.interactjs.mod.{default => interact} instead of what I did before since the @interactjs/interact namespace does not seem to be importable. It's probably a package that just contains the typings and nothing else.That plus casting to
js.Function1 before now makes it work.
interact.asInstanceOf[InteractStatic]
Hey!
First of all, congratulations on the project, it's really cool :) I tried it out this morning and everything works really well!
Unfortunately, however, this afternoon I got this error:
Bundling the application with its NPM dependencies
[error] ModuleNotFoundError: Module not found: Error: Can't resolve 'js-quadtree/dist/QuadTree' in '/home/gianluca/Programming/IdeaProjects/scala-boids/boids/js/target/scala-3.1.3/scalajs-bundler/mainI'm using js-quadtree (https://www.npmjs.com/package/js-quadtree), if I just write typings.jsQuadtree.jsQuadtreeRequire it's ok, but if I import QuadTree (import typings.jsQuadtree.quadTreeMod.QuadTree) it gives me the error above.
Any ideas?
The npmDependecies are:
Compile / npmDependencies ++=
Seq(
"@types/p5" -> "1.4.2",
"js-quadtree" -> "3.3.6",
"p5" -> "1.4.2"
),
typings.jsQuadtree.mod.QuadTree instead, see https://scalablytyped.org/docs/usage#modules
react-router-dom and RouteProps.setPath?
set manually..."...
useLocation - it now returns any, for some reason...
hello @oyvindberg , i'm always trying with Tabs in mui5, i could not find the appropriate props, in mui 3, it was
Tabs(activeTabId)
.withKey(key)
// .id(key)
.className(s"HicpTabsHeader ${className}")
.indicatorColor(indicatorColor)
.textColor(textColor)
.centered(centered)in mui 5, here is the definition of Tabs :
object Tabs {
def apply(
p: /* props */ (DefaultComponentProps[
TabsTypeMap[
js.Object,
js.Function1[
/* props */ OverridePropsExtendButtonBaseTypeMapButtAbout | DefaultComponentPropsExtendButtonBaseTypAction,
Element | Null
]
]
]) with `26`
): Default[js.Object] = new Default[js.Object](js.Array(this.component, p.asInstanceOf[js.Any]))
@JSImport("@mui/material", "Tabs")
@js.native
val component: js.Object = js.native
implicit def make(companion: Tabs.type): Default[js.Object] = new Default[js.Object](js.Array(this.component, js.Dictionary.empty))()
}
Am I doing something wrong, I want to try to get some very basic bindings going for https://www.npmjs.com/package/edgedb and this is my build.sbt:
name := "EdgeDB Scala.js experiment"
lazy val root = project
.in(file("."))
.enablePlugins(ScalaJSPlugin)
.enablePlugins(ScalablyTypedConverterPlugin)
.settings(
scalaVersion := "3.1.3",
scalaJSUseMainModuleInitializer := true,
Compile / npmDependencies ++= Seq(
"edgedb" -> "latest",
)
)The result seems to be a [success] but I don't see any generated classes
import typings.interactjsTypes.dropPluginMod.DropzoneOptions
import typings.interactjsTypes.gesturePluginMod.GesturableOptions
import typings.interactjsTypes.interactEventMod.EventPhase
import typings.interactjsTypes.pluginMod.DraggableOptions
import typings.interactjsTypes.resizePluginMod.ResizableOptions
import typings.interactjsTypes.typesMod.{ListenersArg, OrBoolean, Target}
import typings.interactjsTypes._
import typings.std.Partial
import scala.scalajs.js
object InteractJSHelper {
type InteractEvent = interactEventMod.InteractEvent[Any, EventPhase]
type DragEvent = InteractEvent
type DropEvent = InteractEvent
type GestureEvent = gesturePluginMod.GestureEvent
type ResizeEvent = resizePluginMod.ResizeEvent[EventPhase]
/** Converts any [[scala.Function1]] whose parameter contains any [[InteractEvent]] to an InteractJS compatible one */
implicit def scalaFunction2ListenersArg[E <: InteractEvent](fn: E => Unit): ListenersArg =
(fn: js.Function1[E, Unit]).asInstanceOf[ListenersArg]
/** Converts any type `T` to a `Partial[OrBoolean[T]]` where required */
implicit def any2PartialOrBoolean[T](obj: T): typings.std.Partial[typesMod.OrBoolean[T]] =
obj.asInstanceOf[typings.std.Partial[typesMod.OrBoolean[T]]]
@js.native
private trait InteractableActions extends anon.InteractableActions {
override def draggable(options: Boolean): InteractableActions = js.native
override def draggable(options: Partial[OrBoolean[DraggableOptions]]): InteractableActions = js.native
override def dropzone(options: Boolean): InteractableActions = js.native
override def dropzone(options: DropzoneOptions): InteractableActions = js.native
override def gesturable(options: Boolean): InteractableActions = js.native
override def gesturable(options: Partial[OrBoolean[GesturableOptions]]): InteractableActions = js.native
override def resizable(options: Boolean): InteractableActions = js.native
override def resizable(options: Partial[OrBoolean[ResizableOptions]]): InteractableActions = js.native
}
@js.native
private trait InteractStatic extends interactStaticMod.InteractStatic {
override def apply(target: Target): InteractableActions = js.native
override def apply(target: Target, options: optionsMod.Options): InteractableActions = js.native
}
val interact = typings.interactjs.mod.default.asInstanceOf[InteractStatic]
}
I've had a quick stab at creating a Slinky demo for it here, but I've failed miserably. I think I'm missing something fundamental. It would be great if anyone is able to offer me any hints or solutions as to why I can't get the chart to 'embed'. Thanks!
I got a little further with the Vega-Lite example and pushed the changes to the same repo linked above. Now I'm battling with how to set some of the 'encoding' parameters on the chart.
Also, I see lots of DevTools warnings in Chrome, e.g.
DevTools failed to load source map: Could not load content for webpack:///node_modules/vega-embed/build/vega-embed.module.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEMEIs there anything I can do to remedy those?
2 replies
@mn98 I hope your experiments are going well. A while back, I also wanted scala to do more with vega / lite. This is off topic - but after a while playing with them in scalably typed and learning, I went my own way and did something slightly different. I would note in general, it's worth knowing scalably typed, because it's amazing. In the very specific case of vega / lite, I ended up writing my own much more custom wrapper around it, leaning into it's JSON-ness, rather than it's typescript-ness.
https://quafadas.github.io/dedav4s/
If you do give it a go any feedback would be welcomed... but either way wishing you luck with whatever works!
VisualizationSpec, I'm still stumped on the "encoding" piece!I'm using ScalablyTyped for a host of other libraries and it is indeed amazing and a largely painless experience.
Your alternative approach looks very interesting indeed, I shall certainly have a play around with that! After all, I'm just looking for a good charting experience with scala-js.
Partial, so you end up with monstrosities like js.UndefOr[Partial[js.UndefOr[LatLongDef[F]]]]
encoding thing you're missing, note that typings.vegaEmbed.mod.default takes a spec which can have one of many shapes. one of them is TopLevelLayerSpecField, which has an encoding member. maybe some of the other have that as well
https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser? Any public prior art :-)?
Architecturally speaking. Should it possible to:
1) develop a Scala.JS React component which uses some NPM packages with types generated using ScalablyTyped
2) publish this component in a package repository (e.g. an Artifactory Maven repository) as a Scala.JS JAR
3) use this Scala.JS component in a project which doesn't integrate with or use the ScalablyTyped plugin
I executed step no. 1 and no. 2., but it seems that on step no. 3. i.e. when I'm attempting to build the project sbt seems to be trying to read ScalablyTyped definitions. E.g. my component uses Fuse.JS and even though it was compiled and published to a repo, the non-ScalablyTyped project is still trying to once again find and use ScalablyTyped definitions.
[2022-09-23T06:53:38.671Z] [error] Error downloading org.scalablytyped:fuse_dot_js_sjs1_2.13:6.6.2-5a0c84
[2022-09-23T06:53:38.671Z] [error] Not found
[2022-09-23T06:53:38.671Z] [error] Not found
[2022-09-23T06:53:38.671Z] [error] not found: /home/<BUILD_USER>/.ivy2/local/org.scalablytyped/fuse_dot_js_sjs1_2.13/6.6.2-5a0c84/ivys/ivy.xml
[2022-09-23T06:53:38.671Z] [error] not found: https://<PRIVATE_REPO_1>/org/scalablytyped/fuse_dot_js_sjs1_2.13/6.6.2-5a0c84/fuse_dot_js_sjs1_2.13-6.6.2-5a0c84.pom
[2022-09-23T06:53:38.671Z] [error] not found: https://<PRIVATE_REPO_2>/org.scalablytyped/fuse_dot_js_sjs1_2.13/6.6.2-5a0c84/ivys/ivy.xmlTL;DR - Is it possible to somehow export a ScalablyTyped Scala.JS package and have it be standalone i.e. independant of ScalablyTyped?
Ah. I see that the published ScalablyTyped Scala.js React component artifact consists of an SJS JAR and a POM file referring to dependencies on org.scalablytyped.... I guess the solution to my problem might be to also publish these ScalablyTyped-generated packages from the cache into the Maven repository alongside my component. That way whomever imports my component would have everything ready and available and wouldn't need to depend on ScalablyTyped - thereby making my component standalone.
P.S. Sorry for the rubber duck debugging :D