Plugins

Plugins provides a way to expand and customize FireJSX. They can be used to fetch and pass data to pages or listen to events or do much more. An example can found here

Registering

Plugins can be registered to FireJS using the firejsx.yml file.

plugins:
  - example-plugin

Config

We prefer plugins to use the custom block from firejsx.yml

Type Defination

Read the full type definition here and related here

Defining

One can write plugins by exporting a function as default, much like writing react functional components.

The function looks something like this in typescript

import {Actions, Plugin} from "firejsx/types/Plugin";
import {$} from "firejsx/FireJSX";

export default <Plugin>async function (actions:Actions, $:$) {

}

Actions

The actions object provides you with a bunch of hooks

• onBuild

onBuild: (page: string, callback: (actions: {
    renderPage: (path: string, content?: any) => void
}) => Promise<void>) => void,

Below is an example from webbuddy360.com. Here we are rendering an article page to the path /AniketFuryRocks/BEGINNERS GUIDE TO LINUX when we're in development phase and want to test the :author/:article page. When we want to export the project for production we skip the rendering of the author/article page by passing an undefined value to renderPage callback.

In short using onBuild hook you can provide paths for a template page, skip rendering for a path, or pass content to a normal page or do all to a single page at once.

The passed data is called content and can be accessed through props as props.content by the page.

export default <Plugin>async function ({onBuild}, {args}) {
    onBuild('author/article.jsx', async ({renderPage}) => {
        if (args["--export"])
            renderPage(undefined)
        else
            renderPage(`/AniketFuryRocks/BEGINNERS GUIDE TO LINUX`, {
                POST: {
                    TITLE: "BEGINNERS GUIDE TO LINUX",
                    STAMP: 123123123,
                    IMG: "https://i.pinimg.com/originals/c4/8e/95/c48e95243146b6ee2678a0609e0f6355.jpg",
                    IMG_DESC: "Linux Distros",
                    DESC: "The best linux distros",
                    MD: (await axios.get("https://raw.githubusercontent.com/aniketfuryrocks/S3Encode/master/README.md")).data,
                })
    })
}

• initWebpack

initWebpack: (callback: (config: WebpackConfig) => void) => void

This hook provides you with webpack config which can be configured using the config object.

• postExport

postExport: (callback: () => Promise<void>) => void

This hook is called after export finishes. U can develop something like S3Publish with this hook.

• postRender

postRender: (page: string, callback: (html: string) => void) => void

• initServer

initServer: (callback: (server: Application) => void) => void

This hook provides you with express object.