With help of my friend, Sayan, I want to discuss about writing a custom plugin. At the end, you will have a good knowledge to write your own plugins, so stay tuned.
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
The main purpose of this article is to create a component of
Bootstrap 5 as a plugin for Aurelia 2.
Splitting up large codebases into separate independently versioned packages is extremely useful for code sharing. However, making changes across many repositories is messy and difficult to track, and testing across repositories becomes complicated very quickly.
To solve these (and many other) problems, some projects will organize their codebases into multi-package repositories (sometimes called monorepos).
To achieve the ultimate goal of this article, we will create our project in the form of monorepos.
In computing, a plug-in (or plugin, add-in, addin, add-on, or addon) is a software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization.
I want the user to be able to customize their requirements while using this plugin so in the following we will examine how to add config to our plugin.
Writing a new Aurelia Plugin is not difficult but it requires a lot of work that you can read through here. To be honest, it was not really straightforward!
In version 2, everything is straightforward, just introduce the items you export to the
register method. In fact, everything is possible by the
register method so we will see how it works.
We want to separate our plugin in three packages.
We will add the Bootstrap 5 configurations in this package.
Our Bootstrap 5 components will define in this package.
We will use our plugin in this package as a demo.
demo depends on
To config your monorepos, you should do as following:
Lerna as a global tool.
Go to a folder that you want to make project and run
The result should contain
packages: The folder you will create your repositories there.
lerna.json: Lerna’s configuration file.
package.json: Node’s configuration file.
packages folder and install the projects inside it.
After creating, delete all files inside
src folders of
bootstrap-v5. We will add our files there.
To continue we need to config
Lerna, Open your
lerna.json and paste the followimg code:
version: the current version of the repository.
npmClient: an option to specify a specific client to run commands with (this can also be specified on a per command basis). Change to “yarn” to run all commands with yarn. Defaults to “npm”.
command.bootstrap.hoist: Common dependencies will be installed only to the top-level
node_modules, and omitted from individual package
packages: Array of globs to use as package locations.
As described in the structure section defined packages depend on each other. So, we link them together and add the other prerequisites for each.
This package has no dependency.
package.json and add the following dependencies:
package.json and add the following dependencies
Note: All created packages have
0.1.0 version so pay attention if the version changes, update it in other packages.
Finally, run the below command inside your root folder (where
lerna.json is) to install packages.
Go to the
src folder of
bootstrap-v5-core package and create each of below files there.
As I mentioned before, I want to write a configurable Bootstrap plugin so create
I made a
Size enum to handle all Bootstrap sizes. Next we can manage our components according to size value.
Global Bootstrap 5 Options
You need to define your configs via an interface With its default values as a constant.
We can define our
IGlobalBootstrapV5Options to DI container so this happened via
createIBootstrapV5Configuration is the most important part of creating settings.
register(container: IContainer)helps us to introduce our default config to DI container.
customize(cb?: (options: IGlobalBootstrapV5Options) => void)alse helps us to introduce our custom config to the DI container.
Finally, we should export our current configuration with default options via
index.ts file inside
Go to the
src folder of
bootstrap-v5 package, create a
button folder then create each of below files there.
As you can see we are able to access to plugin options easy via
ctor (DI) and react appropriately to its values.
In this example I get the size from the user and apply it to the button component.
- Button Index
- Src Index
- Global Index
index.ts file inside
demo package and go to the
src and update
Importing is available for whole components
Or just a component
To register your components you should add them to
Proudly, we support configuration so we should introduce it to
register method too.
Now, You are able to use your
To run the
demo easily, go to the root folder (where
lerna.json is) and add the following script to
Then, call the command