How to use webiny-plugins - 10 common examples

// @flow
import config from "./../configs";
import { registerPlugins } from "webiny-plugins";
import install from "webiny-install";

import securityPlugins from "webiny-api-security/install/plugins";
import cmsPlugins from "webiny-api-cms/install/plugins";

registerPlugins(securityPlugins, cmsPlugins);

export default async () => {
    await install({
        config: await config(),
        cms: { copyFiles: true, copyFilesTo: "../../__static" }, // TODO: handled by the CLI install
        security: { admin: { email: "admin@webiny.com", password: "12345678" } }
    });
    process.exit();
};

if (fields[pos.row].length === 0) {
                    fields.splice(pos.row, 1);
                    if (pos.row < row) {
                        createAtRef.current.row--;
                    }
                }

                return insertField(fieldData, createAtRef.current, { ...state, fields });
            });

            return;
        }

        // Find field plugin which handles the dropped field type "id".
        const plugin = getPlugins("form-editor-field-type").find(pl => pl.fieldType.id === type);
        const data = plugin.fieldType.createField();
        insertField(data, createAtRef.current);
    }

middleware: ({ store, action, next }: Object) => {
            const { element, source } = action.payload;

            next(action);

            // Check the source of the element (could be `saved` element which behaves differently from other elements)
            const sourcePlugin = getPlugin(source.type);
            if (!sourcePlugin) {
                return;
            }
            const { onCreate } = sourcePlugin;
            if (!onCreate || onCreate !== "skip") {
                // If source element does not define a specific `onCreate` behavior - continue with the actual element plugin
                const plugin = getPlugin(element.type);
                if (!plugin) {
                    return;
                }
                const { onCreate } = plugin;
                if (onCreate && onCreate === "open-settings") {
                    store.dispatch(activateElement({ element: element.id }));
                    store.dispatch(togglePlugin({ name: "cms-element-settings-advanced" }));
                }
            }

import { hot } from "react-hot-loader";
import React, { cloneElement, Fragment } from "react";
import { UiProvider } from "webiny-app/context/ui";
import { registerPlugins, getPlugins } from "webiny-plugins";
import { Theme as AdminTheme } from "webiny-admin";
import { CmsProvider } from "webiny-app-cms/context";
import { CircularProgress } from "webiny-ui/Progress";
import { Security } from "webiny-app-security/components";
import Login from "webiny-app-security/admin/views/Login";
import myTheme from "theme";
import "./App.scss";
import plugins from "./plugins";

// Register all plugins
registerPlugins(plugins);

// Execute `init` plugins, they may register more plugins dynamically
getPlugins("webiny-init").forEach(plugin => plugin.callback());

const App = () => {
    return (
        /* UiProvider is a simple provider for UI state (dialogs, snackbars, dark theme, ...). */
        
            {/* Security components handles user authentication. */}
            
                {({ initialLoad, authenticated, notAuthenticated }) => (
                    
                        {/* AdminTheme handles the Dark/Light theme switching and initialization. */}
                        
                            {/* Render a loader during initial load of user data */}
                            {initialLoad()}

// @flow
import { registerPlugins } from "webiny-plugins";
import { createHandler as createBaseHandler } from "webiny-api";
import createConfig from "demo-service-config";
import plugins from "./plugins";

registerPlugins(plugins);

export const handler = async (event: Object, context: Object) => {
    const config = await createConfig();
    const apolloHandler = await createBaseHandler(config);
    return apolloHandler(event, context);
};

if (route.path.startsWith("/page-builder/pages") && !loaded.render) {
        const renderPlugins = await import("webiny-app-page-builder/render/presets/default");
        registerPlugins(renderPlugins.default);

        loaded.render = true;
    }

    // If we are on the Editor route, import plugins required to render both editor and preview.
    if (route.path.startsWith("/page-builder/editor") && !loaded.editor) {
        const plugins = await Promise.all(
            [
                import("webiny-app-page-builder/editor/presets/default"),
                !loaded.render ? import("webiny-app-page-builder/render/presets/default") : null
            ].filter(Boolean)
        );
        registerPlugins(plugins.map(p => p.default));

        loaded.editor = true;
        loaded.render = true;
    }

    next();
};

// @flow
import { registerPlugins } from "webiny-plugins";
import { createHandler as createBaseHandler } from "webiny-api";
import servicePlugins from "webiny-api/plugins/service";
import securityPlugins from "webiny-api-security/plugins/service";
import headlessPlugins from "webiny-api-headless/plugins";
import createConfig from "demo-service-config";

registerPlugins(servicePlugins, securityPlugins, headlessPlugins);

/**
 * `createHandler(context)` - function which returns an actual handler function.
 */
export const createHandler = async (context: Object) => {
    const config = await createConfig(context);
    return await createBaseHandler(config);
};

export const lazyLoadMiddleware = () => async (params: Object, next: Function) => {
    const { route } = params;

    // If we are on pages list route, import plugins required to render the page content.
    if (route.path.startsWith("/page-builder/pages") && !loaded.render) {
        const renderPlugins = await import("webiny-app-page-builder/render/presets/default");
        registerPlugins(renderPlugins.default);

        loaded.render = true;
    }

    // If we are on the Editor route, import plugins required to render both editor and preview.
    if (route.path.startsWith("/page-builder/editor") && !loaded.editor) {
        const plugins = await Promise.all(
            [
                import("webiny-app-page-builder/editor/presets/default"),
                !loaded.render ? import("webiny-app-page-builder/render/presets/default") : null
            ].filter(Boolean)
        );
        registerPlugins(plugins.map(p => p.default));

        loaded.editor = true;
        loaded.render = true;

// @flow
import { registerPlugins } from "webiny-plugins";
import { createHandler as createBaseHandler } from "webiny-api";
import createConfig from "./configs";
import plugins from "./plugins";

registerPlugins(plugins);

/**
 * `createHandler(context)` - function which returns an actual handler function.
 */
export const createHandler = async (context: Object) => {
    const config = await createConfig(context);
    return await createBaseHandler(config);
};

async function loadPlugins() {
        // If we are on pages list route, import plugins required to render the page content.
        if (location.pathname.startsWith("/page-builder/pages") && !loaded.render) {
            const renderPlugins = await import("webiny-app-page-builder/render/presets/default");
            registerPlugins(renderPlugins.default);

            globalState.render = true;
            setLoaded({ render: true });
        }

        // If we are on the Editor route, import plugins required to render both editor and preview.
        if (location.pathname.startsWith("/page-builder/editor") && !loaded.editor) {
            const plugins = await Promise.all(
                [
                    import("webiny-app-page-builder/editor/presets/default"),
                    !loaded.render ? import("webiny-app-page-builder/render/presets/default") : null
                ].filter(Boolean)
            );
            registerPlugins(plugins.map(p => p.default));

            globalState.editor = true;