Search code examples
piral

Simpler way of integrating pilets in app shell

I wonder what is the easiest way to work on an app shell and experiment with several Pilets and their API when all those Pilets are just local files of the shell itself. Meaning: No fetching from a local server, no build steps of creating Pilet projects based on a dev version of the shell. Simply creating Pilets as files like it would be when creating a React component.

Solution

  • We have an option called availablePilets, which can be used to also inject already available pilets.

    This option is especially useful in server-side rendering scenarios or other optimization cases, when you already have the (evaluated) code ready and good to go - no dynamic loading wanted or required.

    Potential way:

    import { availablePilets } from './pilets';

renderInstance({
  availablePilets,
  // other options
});

    See https://github.com/smapiot/piral/blob/develop/src/samples/sample-piral-core/src/index.tsx for a more detailed example.

    A pilet could look / would be like https://github.com/smapiot/piral/blob/develop/src/samples/sample-piral-core/src/pilets/search.tsx (indeed you could just create the object wrapper with the metadata on the fly, too).

    export const MyPilet: Pilet = {
  name: 'my-pilet',
  setup(app) {
    // ... code
  },
};

    Hope that helps!