Skip to content

Commit 95b4d9a

Browse files
committed
Fill in the readme.
1 parent e61d27a commit 95b4d9a

File tree

1 file changed

+115
-1
lines changed

1 file changed

+115
-1
lines changed

README.md

+115-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,118 @@
22

33
A [Vite](https://vitejs.dev/) plugin for [Scala.js](https://www.scala-js.org/).
44

5-
Work in progress.
5+
## Usage
6+
7+
We assume that you have an existing Vite and Scala.js sbt project.
8+
If not, [follow the accompanying tutorial](https://github.com/scala-js/scala-js-website/pull/590).
9+
10+
Install the plugin as a development dependency:
11+
12+
```shell
13+
$ npm install -D @scala-js/vite-plugin-scalajs
14+
```
15+
16+
Tell Vite to use the plugin in `vite.config.js`:
17+
18+
```javascript
19+
import { defineConfig } from "vite";
20+
import scalaJSPlugin from "@scala-js/vite-plugin-scalajs";
21+
22+
export default defineConfig({
23+
plugins: [scalaJSPlugin()],
24+
});
25+
```
26+
27+
Finally, import the Scala.js output from a `.js` or `.ts` file with
28+
29+
```javascript
30+
import 'scalajs:main.js';
31+
```
32+
33+
which will execute the main method of the Scala.js application.
34+
35+
The sbt project must at least be configured to use ES modules.
36+
For the best feedback loop with Vite, we recommend to emit small modules for application code.
37+
If your application lives in the `my.app` package, configure the sbt project with the following settings:
38+
39+
```scala
40+
scalaJSLinkerConfig ~= {
41+
_.withModuleKind(ModuleKind.ESModule)
42+
.withModuleSplitStyle(
43+
ModuleSplitStyle.SmallModulesFor(List("my.app")))
44+
},
45+
```
46+
47+
## Configuration
48+
49+
The plugin supports the following configuration options:
50+
51+
```javascript
52+
export default defineConfig({
53+
plugins: [
54+
scalaJSPlugin({
55+
// path to the directory containing the sbt build
56+
// default: '.'
57+
cwd: '.',
58+
59+
// sbt project ID from within the sbt build to get fast/fullLinkJS from
60+
// default: the root project of the sbt build
61+
projectID: 'client',
62+
63+
// URI prefix of imports that this plugin catches (without the trailing ':')
64+
// default: 'scalajs' (so the plugin recognizes URIs starting with 'scalajs:')
65+
uriPrefix: 'scalajs',
66+
}),
67+
],
68+
});
69+
```
70+
71+
## Importing `@JSExportTopLevel` Scala.js members
72+
73+
`@JSExportTopLevel("foo")` members in the Scala.js code are exported from the modules that Scala.js generates.
74+
They can be imported in `.js` and `.ts` files with the usual JavaScript `import` syntax.
75+
76+
For example, given the following Scala.js definition:
77+
78+
```scala
79+
import scala.scalajs.js
80+
import scala.scalajs.js.annotation._
81+
82+
@JSExportTopLevel("ScalaJSLib")
83+
class ScalaJSLib extends js.Object {
84+
def square(x: Double): Double = x * x
85+
}
86+
```
87+
88+
we can import and use it as
89+
90+
```javascript
91+
import { ScalaJSLib } from 'scalajs:main.js';
92+
93+
const lib = new ScalaJSLib();
94+
console.log(lib.square(5)); // 25
95+
```
96+
97+
### Exports in other modules
98+
99+
By default, `@JSExportTopLevel("Foo")` exports `Foo` from the `main` module, which is why we import from `scalajs:main.js`.
100+
We can also split the Scala.js exports into several modules.
101+
For example,
102+
103+
```scala
104+
import scala.scalajs.js
105+
import scala.scalajs.js.annotation._
106+
107+
@JSExportTopLevel("ScalaJSLib", "library")
108+
class ScalaJSLib extends js.Object {
109+
def square(x: Double): Double = x * x
110+
}
111+
```
112+
113+
can be imported with
114+
115+
```javascript
116+
import { ScalaJSLib } from 'scalajs:library.js';
117+
```
118+
119+
The Scala.js documentation contains [more information about module splitting](https://www.scala-js.org/doc/project/module.html).

0 commit comments

Comments
 (0)