nostr/nak
1
0
Fork 0
mirror of https://github.com/fiatjaf/nak.git synced 2024-12-22 18:15:51 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

react, slinky, esbuild and a readme.

Browse Source
This commit is contained in:
fiatjaf 2022-02-22 12:21:47 -03:00
parent fecbf2d940
commit ab841df209
8 changed files with 45 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,2 +1,5 @@
target
.bsp
globals.bundle.js
yarn.lock
node_modules

11
README.md Normal file
View File

@ -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`.

7
build.js Executable file
View File

@ -0,0 +1,7 @@
#!/usr/bin/env node
require('esbuild').buildSync({
entryPoints: ['globals.js'],
outfile: 'globals.bundle.js',
bundle: true
})

4
build.sbt
View File

@ -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"

2
globals.js Normal file
View File

@ -0,0 +1,2 @@
window.React = require('react')
window.ReactDOM = require('react-dom')

1
index.html
View File

@ -1,4 +1,5 @@
<meta charset=utf-8>
<title>title</title>
<body></body>
<script src=globals.bundle.js></script>
<script src=target/scala-2.13/app-fastopt/main.js></script>

10
package.json Normal file
View File

@ -0,0 +1,10 @@
{
"scripts": {
"start": "./build.js && sbt ~fastLinkJS"
},
"dependencies": {
"esbuild": "^0.14.23",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}

10
src/main/scala/app/main.scala
View File

@ -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")
)
}
}