sbt-svelte integrates Webpack + Svelte into Playframework's asset generation.
It eliminates the need to run a separate node process to hot-reload your Svelte code. Moreover, it enables you to mix between SPA and non-SPA pages in your application; it's your choice whether to use SPA or not.
It works with both sbt run
(which hot-reloads the code changes) and sbt stage
.
Please see the example project in the folder test-play-project
.
test-play-project
.Add the below line to project/plugins.sbt
:
lazy val root =
Project("plugins", file(".")).aggregate(SbtSvelte).dependsOn(SbtSvelte)
lazy val SbtSvelte = RootProject(uri("https://github.com/tanin47/sbt-svelte.git#<pick_a_commit>"))
Create `webpack.config.js. Below is a working minimal example:
"use strict";
const sveltePreprocess = require("svelte-preprocess");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require("path");
module.exports = {
mode: 'development',
resolve: {
alias: {
svelte: path.join(process.env.NODE_PATH, 'svelte/src/runtime')
},
extensions: ['.mjs', '.js', '.svelte'],
mainFields: ['svelte', 'browser', 'module', 'main'],
conditionNames: ['svelte', 'browser']
},
module: {
rules: [
{
test: /\.svelte$/,
use: {
loader: 'svelte-loader',
options: {
emitCss: true,
preprocess: sveltePreprocess({}),
}
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
]
},
plugins: [
new MiniCssExtractPlugin(),
],
};
You should NOT specify module.exports.output
because sbt-svelte will automatically set the field.
Your config file will be copied and added with some required additional code. Then, it will used by sbt-svelte when compiling the components.
When running sbt-svelte, we print the webpack command with the modified webpack.config.js
, so you can inspect the config that we use.
build.sbt
Specifying necessary configurations:
lazy val root = (project in file(".")).enablePlugins(PlayScala, SbtWeb, SbtSvelte) // Enable the plugin
// The location of the webpack binary. For windows, it might be `webpack.cmd`.
Assets / SvelteKeys.svelte / SvelteKeys.webpackBinary := "./node_modules/.bin/webpack"
// The location of the webpack configuration.
Assets / SvelteKeys.svelte / SvelteKeys.webpackConfig := "./webpack.config.js"
The plugin compiles *.svelte
within app/assets
.
For the path app/assets/svelte/components/some-component.svelte
, the output JS should be at http://.../assets/svelte/components/some-component.js
.
It should also work with @routes.Assets.versioned("svelte/components/some-component.js")
.
The exported module name is the camel case of the file name. In the above example, the module name is SomeComponent
.
Therefore, we can use the component as shown below:
<script src='@routes.Assets.versioned("svelte/components/some-component.js")'></script>
<link rel="stylesheet" href='@routes.Assets.versioned("svelte/components/some-component.css")'>
<div id="app"></div>
<script>
new SomeComponent.default({
target: document.getElementById('app'),
props: {
someProp: 'prop'
}
});
</script>
Please see the folder test-play-project
for a complete example.
Please feel free to open an issue to ask questions. Let us know how you want to use the plugin. We want to help you use the plugin successfully.
The project welcomes any contribution. Here are the steps for testing when developing locally:
npm install
in order to install packages needed for the integration tests.sbt test
to run all tests.test-play-project
, run npm install
, and run sbt run
.We are not publishing a jar file anymore. You can use it by referencing a github URL with a specific commit directly.