You can add support for any logging service provider by using the following logger filters:

• bluebase.logger.log

• bluebase.logger.info

• bluebase.logger.debug

• bluebase.logger.warn

• bluebase.logger.error

Example

Some times developers may need to make their plugins configurable, this may even be necessary in some cases. For example, a Google Analytics plugin may need to have a configuration for tracking code, as this value is different for every project.

In BlueBase it is very each to achieve this using the Configs API. Just set or get a config value anywhere in the plugin's business logic.

There are times, when you may need to define default values for plugin configurations as well. To do this, create a defaultConfigs property in your plugin as shown below:

import { createPlugin } from '@bluebase/core';

export const ExamplePlugin = createPlugin({

    key: 'example',
    name: 'Example Plugin',

    defaultConfigs: {
        'plugin.example.foo': 'bar'
    },

    // ... add other configs, i.e. themes, filters, etc
});

BlueBase will automatically set this value in the Config registry, if a custom value isn't provided.

Plugin Configs Nomenclature

In BlueBase, we use the following naming convention for configs belonging to plugins:

plugin.{key}.{config}

So, as shown in the example plugin above, a config foo for a plugin with key example becomes:

pluign.example.foo

Plugins are the best way to add features to your BlueBase app.

It is recommended to keep all plugins in separate NPM packages. This helps us keep all aspects of an app modular. Adding or removing any feature becomes a matter of enabling or disabling a plugin.

A plugin can be used to do any of the following:

• Subscribe to application's lifecycle events through Filters and override/modify application behaviour in a non-invasive way.

• Add new or modify existing Components in the app. Moreover, plugins can wrap any component in Higher Order Components (HOCs).

• Modify an existing Theme in the app, or extend it to create a new one. It is also possible to create a theme completely from scratch.

• Add new or modify existing routes to the app.

Additionally, plugins can be configurable through Plugin Configs.

You can add support for any analytics service provider by using the bluebase.analytics.track filter.

import { createPlugin } from '@bluebase/core';
​
export const AnalyticsPlugin = createPlugin({
​
    key: 'analytics',
    name: 'Analytics Plugin',
    categories: ['analytics'],

    filters: {
        'bluebase.analytics.track': (data: AnalyticsTrackData) => {
            // send data to analytics provider here
        }
    }
});

There are many ways to register new plugins in BlueBase:

Through BlueBaseApp Component

The easiest way to add a new plugin is pass it as a prop to BlueBaseApp.

import { BlueBaseApp } from '@bluebase/core';
​
const ExamplePlugin = {
​
    name: 'Example Plugin',
    key: 'example-plugin',
​
    // ... other plugin properties
}

export const App = () => (
  <BlueBaseApp plugins={[ExamplePlugin]} />
);

Typically, in a large project you would be using the bluebase.ts file to inject props to your main BlueBaseApp component. It is basically same thing as above.

export default {

    // ...other bluebase.ts properties

    plugins: [{
​
        name: 'Example Plugin',
        key: 'example-plugin',
    ​
        // ... other plugin properties
    }]
}

Through Registry API

You can add new Plugins anywhere in the code by calling the set method of PluginRegistry:

const ExamplePlugin = {
​
    name: 'Example Plugin',
    key: 'example-plugin',
​
    // ... other plugin properties
}
​
await BB.Plugins.register(ExamplePlugin);
await BB.Filters.run('bluebase.plugins.initialize', ExamplePlugin);

Beware though, it is important when a plugin is added to the registry in the system lifecycle. Because all plugins must be initiated, adding them to the registry is not enough.

Plugins are initialised with the bluebase.plugins.initialize.all filter, which in turn calls the bluebase.plugins.initialize filter for each plugin. So you'll either need to run this filter yourself, or add a plugin before the main filter is executed by the system.

Even so, to avoid unknown issues it is recommended to use the first method (Through BlueBaseApp Component).

A plugin can register any number of themes. To do this simple set the themes property of your plugin class.

const Plugin = {

    themes: [{
        name: 'Material UI (Light)',
        key: 'material-ui-light',
        mode: 'light',

        // .. other theme props
    }, {
        name: 'Material UI (Dark)',
        key: 'material-ui-dark',
        mode: 'dark',

        // .. other theme props
    }]
}

Each object in the theme property can be a BlueBase Module. This mean each theme's code can be split into different bundles on web.

const Plugin = {

    public themes = [
        import('path/to/theme-1'),
        import('path/to/theme-2'),
    ]
}

Be aware though, that if you use this approach, these bundles will be downloaded during boot time. This is because BlueBase needs know each theme's name and key to store them in registry.

If you want to split the theme so that they are downloaded only when selected, spilt the internal theme property.

class MaterialUIPlugin extends Plugin {

    public themes = [{
        name: 'Material UI (Light)',
        key: 'material-ui-light',
        mode: 'light',

        theme: import('./theme-rules-light'),

        // .. other theme props
    }, {
        name: 'Material UI (Dark)',
        key: 'material-ui-dark',
        mode: 'dark',

        theme: import('./theme-rules-dark'),

        // .. other theme props
    }]
}

A plugin is just a JavaScript object that has the following properties:

Plugin Categories

Categories are used in plugin listing pages. Currently, we recognise the following kind of plugins, but a developer may define his own category as well.

Example

import { createPlugin } from '@bluebase/core';

export const ExamplePlugin = createPlugin({

    key: 'example',
    name: 'Example Plugin',
    description: 'This is just an example plugin.',
    version: '1.0.0',
    categories: ['theme', 'app'],

    icon: () => ({
        type: 'icon',
        name: 'rocket',
    }),

    defaultConfigs: {
        'plugin.example.foo': 'bar'
    },

    // ... any components come here
    components: [{
        key: 'Logo',
        value: import('./Logo')
    }],

    // ... add other configs, i.e. themes, filters, etc
});