scalablytyped/demos

Demos for ScalablyTyped

Demos for ScalablyTyped

This is a collection of tiny demo projects to show off how we can use javascript libraries from scala.js

React demos

All react demos are now moved to separate repositories by the react library they use. See slinky demos here

Browser demos

d3

Demo

It uses d3 to generate a rather fancy spinning globe. Demo is converted from here

sbt> d3/start starts a webpack-dev-server at http://localhost:8001 .

google-maps

Demo

The demo loads the google maps javascript as distributed by google (see index.html ). It's very simple usage, it just shows the location of a few beaches.

sbt> google-maps/start starts a webpack-dev-server at http://localhost:8002 .

jquery

Demo

This demo shows how to interact with old-style javascript. Jqueryui is a global library (as in, not a module), so you'll see the code touches an object to include it. It also extends jquery with more functionality, so you'll see an explicit cast to tell the compiler about this. This is poor mans interface augmentation (a mechanism by which typescript does this automatically)

Libraries used

• jquery
• jqueryui

sbt> jquery/start starts a webpack-dev-server at http://localhost:8003 .

Vue

Demo

This demo showcases a pretty simple todo app (stolen and adapted from scalajs-vue). Some templating is done in index.html, while a bunch of stuff is done in Scala.

From its design it's pretty clear that Vue was designed by javascript people. Trying to obtain type safety in this mess will probably never be worth it, but at least now you can try! :) sbt> vue/start starts a webpack-dev-server at http://localhost:8004 .

Three.js

Demo

A fancy animation of a horse, stolen from three.js demos. sbt> three/start starts a webpack-dev-server at http://localhost:8005 .

Reveal.js

Demo

Write your talks in scala.js! This uses highlight.js and reveal.js along with scalajs-react. adapted from scala-reveal-js, sbt> reveal/start starts a webpack-dev-server at http://localhost:8006 .

Chart.js

Demo

Simple charting using canvas elements. Shows off how to work with the DOM as well as how to use chart.js. Heavily adapted from the retyped demo, sbt> chart/start starts a webpack-dev-server at http://localhost:8007 .

Angular 8

Demo

Let's be nice and say that Angular is a reasonable alternative for creating a frontend app. If you agree, now is your chance to use it with Scala.js.

Adapted from sherpal's prototype. sbt> angular/start starts a webpack-dev-server at http://localhost:8008 .

P5

Demo

Demo adapted from documentation sbt> p5/start starts a webpack-dev-server at http://localhost:8009 .

Leaflet

Demo

Demo adapted from scalajs-leaflet sbt> leaflet/start starts a webpack-dev-server at http://localhost:8010 .

Onsenui

Demo Adapted from documentation

sbt> onsenui/start starts a webpack-dev-server at http://localhost:8011 .

phaser

Demo Adapted from animation/create-from-sprite-config example

sbt> phaser/start starts a webpack-dev-server at http://localhost:8012 .

Pixi

Demo This is the translation of some of the examples into Scala.

Pixi.js is a library to render blazingly fast 2D animations on Canvas, using WebGL under the hood.

sbt> pixi/start starts a webpack-dev-server at http://localhost:8013 .

You will be presented with a menu that has the same structure as the examples from the Pixi website.

Electron

Implements the backend/mainprocess part of an Electron app in Scala.js, though it would be easy to do the frontend as well (in another module).

Start the project like this:

sbt>electron/run

Again adapted from sherpal's work.

Node demos

lodash

This is a very simple app which uses a few functions from lodash. sbt> lodash/run runs the demo in node.

node-express

This demo is a HTTP endpoint written in express, which runs on node. Adapted from this

sbt> node-express/run will start it.

You'll need for instance curl to test it:

> curl http://localhost:3000/welcome
#Hello, World!

> curl http://localhost:3000/welcome/foo
# Hello, foo!

typescript

sbt> typescript/run runs the typescript compiler on two files (one of which is meant to fail). It accepts parameters to specify other files if you want to play around.

cypress

sbt> cypress/run runs a basic test

Your demo here! :)

Pull requests most welcome!

demos's Issues

Every Demo link is broken.

I tried a dozen demo links and they all 404.

Trying to use ScalaJs 1.0.0

I'm trying to use ScalablyTyped for the first time and was unable to use it with scala 1.0.0.

I'm doing anything wrong. Does anyone have an idea of how can I investigate the problem?
Any help would be appreciated. Thanks in advance!

I updated the file project/plugins.sbt to:

addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.0.0")
addSbtPlugin("ch.epfl.scala" % "sbt-scalajs-bundler" % "0.16.0")

resolvers += Resolver.bintrayRepo("oyvindberg", "converter")
addSbtPlugin("org.scalablytyped.converter" % "sbt-converter" % "1.0.0-beta4")

and when running any demo three/start I get:

sbt:demos> three/start 
[info] Updating NPM dependencies
[info] Using lockfile /home/fabio/workspace/Demos/three/yarn.lock
[info] yarn install v1.15.2
[info] [1/4] Resolving packages...
[info] [2/4] Fetching packages...
[info] info [email protected]: The platform "linux" is incompatible with this module.
[info] info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[info] [3/4] Linking dependencies...
[info] [4/4] Building fresh packages...
[info] Done in 4.04s.
[error] stack trace is suppressed; run last three / Compile / stImport for the full output
[error] (three / Compile / stImport) java.lang.NoSuchMethodError: 'java.lang.String org.scalajs.sbtplugin.ScalaJSCrossVersion$.currentBinaryVersion()'
[error] Total time: 5 s, completed Feb 16, 2020, 11:44:35 PM


sbt:demos> last three/Compile/stImport
[error] java.lang.NoSuchMethodError: 'java.lang.String org.scalajs.sbtplugin.ScalaJSCrossVersion$.currentBinaryVersion()'
[error]         at org.scalablytyped.converter.plugin.ScalablyTypedConverterPlugin$.$anonfun$stScalaJsBundlerIntegration$6(ScalablyTypedConverterPlugin.scala:100)
[error]         at scala.Function1.$anonfun$compose$1(Function1.scala:49)
[error]         at sbt.internal.util.$tilde$greater.$anonfun$$u2219$1(TypeFunctions.scala:62)
[error]         at sbt.std.Transform$$anon$4.work(Transform.scala:67)
[error]         at sbt.Execute.$anonfun$submit$2(Execute.scala:281)
[error] 	at sbt.internal.util.ErrorHandling$.wideConvert(ErrorHandling.scala:19)
[error] 	at sbt.Execute.work(Execute.scala:290)
[error] 	at sbt.Execute.$anonfun$submit$1(Execute.scala:281)
[error] 	at sbt.ConcurrentRestrictions$$anon$4.$anonfun$submitValid$1(ConcurrentRestrictions.scala:178)
[error] 	at sbt.CompletionService$$anon$2.call(CompletionService.scala:37)
[error] 	at java.base/java.util.concurrent.FutureTask.run(FutureTask.java:264)
[error] 	at java.base/java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:515)
[error] 	at java.base/java.util.concurrent.FutureTask.run(FutureTask.java:264)
[error] 	at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
[error] 	at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
[error] 	at java.base/java.lang.Thread.run(Thread.java:834)
[error] (three / Compile / stImport) java.lang.NoSuchMethodError: 'java.lang.String org.scalajs.sbtplugin.ScalaJSCrossVersion$.currentBinaryVersion()'