Plugins

Plugins are a way of expanding and customizing the use of FireJS.

Registering

Plugins can be registered to FireJS using firejs.yml file.

plugins:
  - example-plugin

Types

PagePlugin

Using PagePlugin one can do per page actions, like providing paths and content for dynamic pages or editing the webpack config for the page.

Constructor requires you to call the super function with the name of the respective page.

constructor() {
   super(name_of_the_page);
}

---

onBuild function is triggered before rendering and after webpack compiler finishes the build. The renderPage callback is used to provide path and content for the page.

async onBuild(renderPage: (path: string, content: any) => void, ...extra: any): Promise<void> {}

---

initWebpack function is triggered before instantiating the webpack compiler. The webpackConfig object is used to tweak the Webpack Configuration for the respected page.

initWebpack(webpackConfig: WebpackConfig) {}

---

Example

import PagePlugin from "@eadded/firejs/plugins/PagePlugin";

export default class hello extends PagePlugin {
    constructor() {
        super("[author]/[article].js");
    }

    async onBuild(renderPage) {
        renderPage("/aniket/firejs", {name:"This is a content"})
    }
    
    initWebpack(webpackConfig) {
       webpack.output.filename = "hello[contentHash].js"
    }
}

Here we are building a plugin which renders the path /aniket/firejs for the page [author]/[article].js with content {name:"This is a content"}. The page [author]/[article].js can access this content using props.content.

GlobalPlugin

Using GlobalPlugin one can perform actions in the global scope, like tweaking the express server or editing the webpack config for all the pages.

---

The server arg is nothing but an instance of the express server.

initServer(server: Express.Application) {}

---

The webpackConfig object can be used to tweak the webpack configuration for each and every page.

initWebpack(webpackConfig: WebpackConfig) {}

---

Example

import GlobalPlugin from "@eadded/firejs/plugins/GlobalPlugin";

export default class extends GlobalPlugin {
    constructor() {
        super();
    }

    initServer(server) {
        server.post("/hello",()=>console.log("The client said hello using POST"));
    }
    
    initWebpack(webpackConfig) {
       webpack.output.filename = "hello[contentHash].js"
    }
}

---

One can write plugins by exporting a class which extends the required Plugin Interface, much like writing react class components by extending React.Component.

exporting as default is not mandatory. You can export multiple plugins from the same file by using different names.

Local Plugins and Plugins as dependencies

You can create plugins within the project or outside it, or just download it as a node_module. Internally FireJS uses the require() function from nodejs to load your plugins.

Plugins can be single page javascript files or full-featured node projects.