An example of using Scala.js with sbt, Vite, Laminar and Chart.js

License: Apache License 2.0

Scala 87.81% HTML 5.67% JavaScript 3.32% CSS 3.20%

scalajs-sbt-vite-laminar-chartjs-example's Introduction

Scala.js with sbt, Vite, Laminar and Chart.js

This is an example of putting together:

Scala.js
sbt
Vite
Laminar
Chart.js, statically typed with ScalablyTyped

If you don't want the project walkthrough in its entirety, you can specify up to which stage of the guide to include by cloning a specific branch:

Install

You need to explicitly install the following software:

sbt, as part of getting started with Scala (or if you prefer, through its standalone download)
Node.js

Other software will be downloaded automatically by the commands below.

Prepare

Before doing anything, including before importing in an IDE, run

$ npm install

Development

Open two terminals. In the first one, start sbt and, within, continuously build the Scala.js project:

$ sbt
...
> ~fastLinkJS
...

In the second one, start the Vite development server with

$ npm run dev
...

Follow the URL presented to you by Vite to open the application.

You can now continuously edit the Main.scala file, and Vite will automatically reload the page on save.

Production build

Make a production build with

$ npm run build

You can then find the built files in the dist/ directory. You will need an HTTP server, such as python3 -m http.server, to open the files, as Vite rewrites <script> tags to prevent cross-origin requests.

scalajs-sbt-vite-laminar-chartjs-example's People

Contributors

Stargazers

Watchers

Forkers

quafadas r4ravi2008 russwyte fredferrao danielmoss beastneedsmoretorque scalway xerial deliganli marcgrue sahataba bphenriques landlockedsurfer gmkumar2005 sbendiola spaceunifyfifty benluo

scalajs-sbt-vite-laminar-chartjs-example's Issues

npm run dev causes 'sbt process failed with exit code 1'

Hi
When trying the example step by step - I get the following exception running npm run dev:

failed to load config from /Users/mpa/dev/experiments/scalajs-sbt-vite-laminar-chartjs-example/vite.config.js
error when starting dev server:
Error: sbt process failed with exit code 1
    at printSbtTask (file:///Users/mpa/dev/experiments/scalajs-sbt-vite-laminar-chartjs-example/vite.config.js.timestamp-1670515518441.mjs:20:11)
    at file:///Users/mpa/dev/experiments/scalajs-sbt-vite-laminar-chartjs-example/vite.config.js.timestamp-1670515518441.mjs:24:21
    at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async loadConfigFromBundledFile (file:///Users/mpa/dev/experiments/scalajs-sbt-vite-laminar-chartjs-example/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:62827:21)
    at async loadConfigFromFile (file:///Users/mpa/dev/experiments/scalajs-sbt-vite-laminar-chartjs-example/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:62712:28)
    at async resolveConfig (file:///Users/mpa/dev/experiments/scalajs-sbt-vite-laminar-chartjs-example/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:62336:28)
    at async createServer (file:///Users/mpa/dev/experiments/scalajs-sbt-vite-laminar-chartjs-example/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:61636:20)
    at async CAC.<anonymous> (file:///Users/mpa/dev/experiments/scalajs-sbt-vite-laminar-chartjs-example/node_modules/vite/dist/node/cli.js:707:24)

After trying some stuff, here is what worked for me (Mac OS):

Missing source maps for React

Wondering if someone else has seen this and found a workaround:

Sourcemap for "/root/git/app/client/target/scala-3.2.0-RC2/client-fastopt/internal-dd54354c54b6cbff7852ab859460a6d93fcdeeba.js"

According to github issues, this should have been resolved on Vite's end with their react plugin, so perhaps could this be due to differences in how scalajs libraries have unusual paths for Vite to resolve?

vitejs/vite#5562

I am using:

"devDependencies": {
"@tauri-apps/cli": "1.0.5",
"@types/react": "18.0.15",
"@types/react-dom": "18.0.6",
"@vitejs/plugin-react": "2.0.1",
"vite": "3.0.8",
"tailwindcss": "3.1.6",
"postcss": "8.4.14",
"autoprefixer": "10.4.7"
}

Fails to render chart for Chart.js 3 and 4

This demo fails to render a chart when moving to Chart.js versions 3 and 4.

Multiple failures occur. Changing associated dependency versions has no negative impact.

And @types/chart.js is not required for Chart.js 3 and 4. Both versions refactored the component API and fixed numerous bugs, according to Chart.js docs.

This particular project ( https://github.com/objektwerks/scalablytyped ) attempts to replicate this project with enhancements and newer versions of Chart.js 3 and 4.

These issues are beyond my skill level --- namely, ScalablyTyped. :) Would a custom mapping work better?

Suggestion: Add at least 1 chart library to Scala.js. A well maintained Scala.js chart library would reenergize the Scala.js community, IMHO. Because a mobile web app without a few charts is scary. ;)

Chart Rendering Fails

When running Main in the browser and adding data, the Chart.js chart fails to render.

I mimicked this project ( see: Personal Project ), with updated dependencies and the like. Yet the Chart.js chart still fails to render.

I'm seeing the following 2 runtime errors ( see: Personal Project: App ):

`type` = ChartType.bar // bar is not a registered controller
yAxes = js.Array(new CommonAxe { // invalid scale configuration for yAxes

I'm searching for a fix at this time.

`java.lang.StackOverflowError` crash when running `npm run dev`

If I manually run in a shell sbt --error "print myFrontEndModule/fastLinkOutputDir", sbt exists with 0 but if I run sbt --error --batch "print myFrontEndModule/fastLinkOutputDir", then sbt crashes with:

java.lang.StackOverflowError
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5074)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
       ...

sbt version: 1.9.6
Scala version: 2.13.12
ScalaJS version: 1.14.0
OS: macOS
Node version: v20.8.0

Edit:
Insterestingly, adding -mem 4096 fixes this issue when I launch the sbt command manually in a shell:

sbt -mem 4096 --error --batch "print myFrontEndModule/fastLinkOutputDir"

but when I run npm run dev, then I always have a similar stackoverflow error:

java.lang.StackOverflowError
        at java.base/java.util.regex.Pattern$Slice.match(Pattern.java:4265)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
        at java.base/java.util.regex.Pattern$Loop.match(Pattern.java:5078)
        at java.base/java.util.regex.Pattern$GroupTail.match(Pattern.java:5000)
        at java.base/java.util.regex.Pattern$BranchConn.match(Pattern.java:4878)
        at java.base/java.util.regex.Pattern$CharProperty.match(Pattern.java:4110)
        at java.base/java.util.regex.Pattern$Branch.match(Pattern.java:4914)
        at java.base/java.util.regex.Pattern$GroupHead.match(Pattern.java:4969)
...
failed to load config from /Users/jules/.../vite.config.js
error when starting dev server:
Error: sbt process failed with exit code 1
    at printSbtTask (file:///...vite.config.js.timestamp-1696411233087-090230946b924.mjs:23:11)
    at file:///.../vite.config.js.timestamp-1696411233087-090230946b924.mjs:26:31

npm run dev hangs

user@hp-laptop:~/Dev/Scala/scalajs-sbt-vite-laminar-chartjs-example-scalablytyped-end-state$ npm run dev

> [email protected] dev
> vite

[info] welcome to sbt 1.8.2 (Eclipse Adoptium Java 11.0.17)
[info] loading global plugins from /home/user/.sbt/1.0/plugins
[info] loading settings for project scalajs-sbt-vite-laminar-chartjs-example-scalablytyped-end-state-build from plugins.sbt ...
[info] loading project definition from /home/user/Dev/Scala/scalajs-sbt-vite-laminar-chartjs-example-scalablytyped-end-state/project
[info] loading settings for project livechart from build.sbt ...
[info] set current project to livechart (in build file:/home/user/Dev/Scala/scalajs-sbt-vite-laminar-chartjs-example-scalablytyped-end-state/)
[info] sbt server started at local:///home/user/.sbt/1.0/server/e4aef4330ff55f755220/sock
[info] started sbt server
>....>....>....>....

Doesn't seem to do anything on those >...

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

sjrd / scalajs-sbt-vite-laminar-chartjs-example Goto Github PK