The biggest change for this release is that it correctly integrates webpack into the dev build, which means you can use npm dependencies now 🎉 .

This is a fix I avoided for a while, because the official webpack task would generate stale outputs when run in continue (i.e. live reloading) mode. We've hacked around it for now, but you can follow the related youtrack issue if you want to see if a real fix ever makes it down the pipeline.

This change will require some minor migration steps for legacy projects, which are discussed at the bottom of this release.

But first, the features and fixes!

Frontend

• Fixed the drag and drop Modifier.onDrop modifier, which was broken.
• Added missing [user-select](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) values.
• Added a slug parameter to the PageContext class.

Silk

• Updated tooltips so you can put newlines in their text now.

Icons

• Added the ability to configure sizes for Font Awesome icons.
  • See also: https://fontawesome.com/docs/web/style/size

Gradle

• Added support for webpack when using the kobweb run command.
• Expose a Project.kobwebBuildTarget value that users can use in their own build scripts to see if Kobweb is targetting a DEBUG or RELEASE build.
• Kobweb applications no longer force "whole-program" granularity. However, you may want to experiment adding it back, as for some projects, it can result is a smaller final binary size.
  • To do this, add kotlin.js.ir.output.granularity=whole-program to your project's gradle.properties file.

Templates

• All templates have been updated to take advantage of the webpack changes.
• The site and site/empty templates have been renamed to app and app/empty since they now have a site subfolder in them, and site/site looks funny.
• The app and app/empty templates now put their Kobweb code into a submodule instead of at the root of the project.
  • While slightly more complex than a simple project with no submodules, this is a more realistic layout in most projects. It makes it trivial, for example, to add other submodules (e.g. libraries or other multiplatform app)

Migration Steps

If you are updating a legacy project to v0.11.6, you should be aware that your Kobweb configuration (.kobweb/conf.yaml) will be pointing at the wrong dev script location.

If you don't change it, you will try to run your web app and it will fail to load, leaving you with a blank screen. If you look at the page's console, you'll see an error message talking about not being able to load a module due to missing dependencies.

There are two issues with that JS file:

1. It doesn't get transformed by Webpack, which is important if you want to use any npm dependencies in your project.
2. The Kobweb Gradle plugin no longer forces "whole-program" granularity, so the file you're pointing at will no longer be a monolithic one, missing its dependencies.

To fix this, you can do either of these steps:

1. (Preferred) Change your .kobweb/conf.yaml dev script value to point at the Webpack output location.

Before:

server:
  files:
    dev:
      script: "build/js/packages/example/kotlin/example.js"

After:

server:
  files:
    dev:
      script: "build/developmentExecutable/example.js"

1. (If you know what you're doing) Explicitly set your project to whole-program granularity, by adding the following to your project's gradle.properties:

kotlin.js.ir.output.granularity=whole-program

You can read more about granularity at the official docs.

Note that you can do both of these steps. You can experiment with whole-program (or per-module, the default) granularity to see if it affects the size of the final JS code that gets generated from a kobweb export.