piral-svelte 0.14.8-beta.3487 → 0.14.8-beta.3490

package/README.md

@@ -51,6 +51,67 @@ export function setup(piral: PiletApi) {
 }
 ```
 
+How you built your Svelte-pilet is up to you. If you use Webpack then the bundler options such as `piral-cli-webpack` or `piral-cli-webpack5` can be leveraged. In these cases you'd need to install the `svelte-loader` package and create a custom *webpack.config.js*:
+
+```sh
+npm i svelte-loader --save-dev
+```
+
+The Webpack configuration can be rather simplistic, as shown on the [svelte-loader readme](https://github.com/sveltejs/svelte-loader). In many cases you can use the convenience `extend-webpack` module.
+
+This is how your *webpack.config.js* can look like with the convenience module:
+
+```js
+const extendWebpack = require('piral-svelte/extend-webpack');
+
+module.exports = extendWebpack({});
+```
+
+For using `piral-svelte/extend-webpack` you must have installed:
+
+- `svelte-loader`
+- `webpack`, e.g., via `piral-cli-webpack5`
+
+You can do that via:
+
+```sh
+npm i svelte-loader piral-cli-webpack5 --save-dev
+```
+
+The available options for `piral-svelte/extend-webpack` are the same as for the options of the `svelte-loader`, e.g.:
+
+```js
+const extendWebpack = require('piral-svelte/extend-webpack');
+
+module.exports = extendWebpack({
+  emitCss: false,
+  compilerOptions: {
+    css: false,
+  },
+});
+```
+
+You can also customize the options even more:
+
+```js
+const extendWebpack = require('piral-svelte/extend-webpack');
+
+const applySvelte = extendWebpack({
+  emitCss: false,
+  compilerOptions: {
+    css: false,
+  },
+});
+
+module.exports = config => {
+  config = applySvelte(config);
+
+  // your changes to config
+
+  return config;
+};
+```
+
 :::
 
 ::: summary: For Piral instance developers
@@ -113,7 +174,7 @@ For Svelte to work the Svelte compiler and the associated Parcel plugin need to
 npm i svelte parcel-plugin-svelte --save-dev
 ```
 
-Furthermore, since Svelte distributes its source code as ES6 we need to change the browserlist setting in the *package.json* of the pilet:
+Furthermore, since Svelte distributes its source code as ES6 we need to change the `browserslist` setting in the *package.json* of the pilet:
 
 ```json
 {

package/extend-webpack.js

@@ -0,0 +1,42 @@
+const { resolve } = require('path');
+
+const svelteLoader = require.resolve('svelte-loader');
+
+module.exports =
+  (options = {}) =>
+  (config) => {
+    if (!config.resolve.alias) {
+      config.resolve.alias = {};
+    }
+
+    if (!config.resolve.extensions) {
+      config.resolve.extensions = ['.mjs', '.js'];
+    }
+
+    if (!config.resolve.mainFields) {
+      config.resolve.mainFields = ['browser', 'module', 'main'];
+    }
+
+    config.resolve.alias.svelte = resolve('node_modules', 'svelte');
+    config.resolve.extensions.push('.svelte');
+    config.resolve.mainFields.unshift('svelte');
+
+    config.module.rules.push(
+      {
+        test: /\.(html|svelte)$/,
+        use: svelteLoader,
+        options: {
+          emitCss: true,
+          ...options,
+        },
+      },
+      {
+        test: /node_modules\/svelte\/.*\.mjs$/,
+        resolve: {
+          fullySpecified: false,
+        },
+      },
+    );
+
+    return config;
+  };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-svelte",
-  "version": "0.14.8-beta.3487",
+  "version": "0.14.8-beta.3490",
   "description": "Plugin for integrating Svelte components in Piral.",
   "keywords": [
     "piral",
@@ -25,7 +25,8 @@
     "lib",
     "src",
     "convert.d.ts",
-    "convert.js"
+    "convert.js",
+    "extend-webpack.js"
   ],
   "repository": {
     "type": "git",
@@ -43,10 +44,10 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-core": "0.14.8-beta.3487"
+    "piral-core": "0.14.8-beta.3490"
   },
   "peerDependencies": {
     "piral-core": "0.14.x"
   },
-  "gitHead": "95872598216edbf8efd99c8b7044094ea209a049"
+  "gitHead": "c8a70566a926e3306ad5aee94e0f3f7b1bc3d690"
 }