piral-svelte
    TypeScript icon, indicating that this package has built-in type declarations

    0.14.9 • Public • Published

    Piral Logo

    Piral Svelte · GitHub License npm version tested with jest Gitter Chat

    This is a plugin that only has a peer dependency to piral-core. 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.

    Documentation

    The following functions are brought to the Pilet API.

    fromSvelte()

    Transforms a standard Svelte component into a component that can be used in Piral, essentially wrapping it with a reference to the corresponding converter.

    Usage

    ::: 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., via piral-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()],
      // ...
    });

    :::

    Pilet Usage

    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"
      ],
    }

    License

    Piral is released using the MIT license. For more information see the license file.

    Install

    npm i piral-svelte

    Homepage

    piral.io

    DownloadsWeekly Downloads

    471

    Version

    0.14.9

    License

    MIT

    Unpacked Size

    28.6 kB

    Total Files

    41

    Last publish

    Collaborators

    • florianrappl