This is a plugin that has no peer dependencies. What piral-svelte
brings to the table is a set of Pilet API extensions that can be used with piral
or piral-core
.
The set includes a Svelte converter for any component registration, as well as a fromSvelte
shortcut together with a svelte-extension
web component.
By default, these API extensions are not integrated in piral
, so you'd need to add them to your Piral instance.
The following functions are brought to the Pilet API.
Transforms a standard Svelte component into a component that can be used in Piral, essentially wrapping it with a reference to the corresponding converter.
::: summary: For pilet authors
You can use the fromSvelte
function from the Pilet API to convert your Svelte components to components usable by your Piral instance.
Example use:
import { PiletApi } from '<name-of-piral-instance>';
import SveltePage from './Page.svelte';
export function setup(piral: PiletApi) {
piral.registerPage('/sample', piral.fromSvelte(SveltePage));
}
Within Svelte components the Piral Svelte extension component can be used by referring to svelte-extension
, e.g.,
<svelte-extension name="name-of-extension"></svelte-extension>
Alternatively, if piral-svelte
has not been added to the Piral instance you can install and use the package also from a pilet directly.
import { PiletApi } from '<name-of-piral-instance>';
import { fromSvelte } from 'piral-svelte/convert';
import SveltePage from './Page.svelte';
export function setup(piral: PiletApi) {
piral.registerPage('/sample', fromSvelte(SveltePage));
}
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:
npm i svelte-loader --save-dev
The Webpack configuration can be rather simplistic, as shown on the svelte-loader readme. 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:
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., viapiral-cli-webpack5
You can do that via:
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.:
const extendWebpack = require('piral-svelte/extend-webpack');
module.exports = extendWebpack({
emitCss: false,
compilerOptions: {
css: false,
},
});
You can also customize the options even more:
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
Using Svelte with Piral is as simple as installing piral-svelte
. In the pilets using Svelte, svelte
and parcel-plugin-svelte
should be installed, too.
import { createSvelteApi } from 'piral-svelte';
The integration looks like:
const instance = createInstance({
// important part
plugins: [createSvelteApi()],
// ...
});
:::
The essential registration can be simplified like (e.g., for a tile):
import { PiletApi } from 'sample-piral';
import Tile from './Tile.svelte';
export function setup(app: PiletApi) {
app.registerTile(app.fromSvelte(Tile), {
initialColumns: 2,
initialRows: 2
});
}
For the associated Svelte code the following (standard) form applies:
<script>
// use from props
export let columns;
export let rows;
</script>
<style>
h1 {
text-align: center;
}
</style>
<h1>Hello {columns} x {rows}!</h1>
For Svelte to work the Svelte compiler and the associated Parcel plugin need to be installed.
npm i svelte parcel-plugin-svelte --save-dev
Furthermore, since Svelte distributes its source code as ES6 we need to change the browserslist
setting in the package.json of the pilet:
{
// ...
"browserslist": [
"last 1 chrome versions"
],
}
Piral is released using the MIT license. For more information see the license file.