From ab841df209d2025e01031c3ccd39db9ec2d4e49f Mon Sep 17 00:00:00 2001 From: fiatjaf Date: Tue, 22 Feb 2022 12:21:47 -0300 Subject: [PATCH] react, slinky, esbuild and a readme. --- .gitignore | 3 +++ README.md | 11 +++++++++++ build.js | 7 +++++++ build.sbt | 4 +++- globals.js | 2 ++ index.html | 1 + package.json | 10 ++++++++++ src/main/scala/app/main.scala | 10 ++++++++-- 8 files changed, 45 insertions(+), 3 deletions(-) create mode 100644 README.md create mode 100755 build.js create mode 100644 globals.js create mode 100644 package.json diff --git a/.gitignore b/.gitignore index c3f9f81..5ba93fa 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,5 @@ target .bsp +globals.bundle.js +yarn.lock +node_modules diff --git a/README.md b/README.md new file mode 100644 index 0000000..6acbfe8 --- /dev/null +++ b/README.md @@ -0,0 +1,11 @@ +This is a boilerplate for [ScalaJS](https://www.scala-js.org) + [React](https://reactjs.org) apps using [Slinky](https://slinky.dev/). + +Most boilerplates and tutorials for ScalaJS out there use [scajajs-bundler](https://scalacenter.github.io/scalajs-bundler/), which wraps [Webpack](https://webpack.js.org) and is probably great, but not for me. I don't like _Webpack_, but would be fine if it worked, however I get very confused about it, get different errors every time I try and I don't like that I don't understand what it is doing. + +Apparently all _scalajs-bundler_ does is bundle together the [npm](https://www.npmjs.com) packages into the same file that results from the _ScalaJS_ compilation. + +Here instead we have two files: one is the one that comes from _ScalaJS_, `target/scala-2.13/app-fastopt/main.js` and the other is one that comes from `globals.js` when built with [esbuild](https://esbuild.github.io/), `globals.bundle.js`. These two are included in `index.html`. + +To start building your app, run `yarn start` (or `npm run start`) and it will bundle the dependencies then start watching the Scala files and rebuilding the main app. + +If you want to add a new _npm_ dependency, modify `globals.js` and restart `yarn start`. diff --git a/build.js b/build.js new file mode 100755 index 0000000..1c59117 --- /dev/null +++ b/build.js @@ -0,0 +1,7 @@ +#!/usr/bin/env node + +require('esbuild').buildSync({ + entryPoints: ['globals.js'], + outfile: 'globals.bundle.js', + bundle: true +}) diff --git a/build.sbt b/build.sbt index 78c4e9c..f8bd0d1 100644 --- a/build.sbt +++ b/build.sbt @@ -1,9 +1,11 @@ enablePlugins(ScalaJSPlugin) +// enablePlugins(ScalaJSBundlerPlugin) name := "app" scalaVersion := "2.13.7" scalaJSUseMainModuleInitializer := true -mainClass := Some("app.Main") libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "2.1.0" +libraryDependencies += "me.shadaj" %%% "slinky-core" % "0.7.0" +libraryDependencies += "me.shadaj" %%% "slinky-web" % "0.7.0" diff --git a/globals.js b/globals.js new file mode 100644 index 0000000..1d80bad --- /dev/null +++ b/globals.js @@ -0,0 +1,2 @@ +window.React = require('react') +window.ReactDOM = require('react-dom') diff --git a/index.html b/index.html index d6bcfad..68eae10 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,5 @@ title + diff --git a/package.json b/package.json new file mode 100644 index 0000000..add86a3 --- /dev/null +++ b/package.json @@ -0,0 +1,10 @@ +{ + "scripts": { + "start": "./build.js && sbt ~fastLinkJS" + }, + "dependencies": { + "esbuild": "^0.14.23", + "react": "^17.0.2", + "react-dom": "^17.0.2" + } +} diff --git a/src/main/scala/app/main.scala b/src/main/scala/app/main.scala index 599f80a..f1f7dc1 100644 --- a/src/main/scala/app/main.scala +++ b/src/main/scala/app/main.scala @@ -1,13 +1,19 @@ package app -import org.scalajs.dom import org.scalajs.dom.document +import slinky.web.ReactDOM +import slinky.web.html._ object Main { def main(args: Array[String]): Unit = { val div = document.createElement("div") - div.id = "main" + div.id = "root" document.body.appendChild(div) println("Hello!") + + ReactDOM.render( + h1("Hello, world?"), + document.getElementById("root") + ) } }