Aurelia 2 Plugin Sample or Docs

gregoryagu · September 11, 2020, 11:18am

I would like to update a Plugin from Aurelia 1, to Aurelia 2.

This is the plugin I would like to convert: https://github.com/AmericanPowerAndGas/aurelia-syncfusion-bridge

I have looked in the V2 docs, but the docs are just a placeholder at this time: [https://docs.aurelia.io/advanced-scenarios/shipping-your-own-aurelia-plugin]

Is there a sample plug-in for V2 so that I can use that to see what needs to be done? Or some sort of doc or guidance so I can move forward with this?

bigopon · September 11, 2020, 12:23pm

Maybe first try to write a simple one in https://gist.dumber.app first and share here? We can try to discuss a bit more. I’m not aware of any guide, since mostly it’s the same:

@customElement(...)
export class MyElement {

}

.bind
.two-way
${...}

gregoryagu · September 11, 2020, 1:47pm

I mean an actual plug-in, not a custom element. Aurelia 1 Plugin

For example, in Aurelia 1, this is the Aurelia-Dialog plugin which gets registered in boot.ts:

aurelia.use.plugin(PLATFORM.moduleName('aurelia-dialog'))

By the way, thanks for the tip on gist.dumber.app, I was unaware of that

Sayan751 · September 11, 2020, 2:04pm

Hi @gregoryagu. As you already know from Au1, there is not much special about the plugin, except the plugin’s configuration function, which is used during bootstrap, to setup global resources, and configuration options.

The same goes also for Au2. As an example, take a look at the i18n plugin in Au2:

github.com

aurelia/aurelia/blob/d425f66219501b5ad908bbbe55be061ad3b3284c/packages/i18n/src/configuration.ts#L99-L119


function createI18nConfiguration(optionsProvider: I18NConfigOptionsProvider) {
  return {
    optionsProvider,
    register(container: IContainer) {
      const options: I18nConfigurationOptions = { initOptions: Object.create(null) };
      optionsProvider(options);

      return container.register(
        coreComponents(options),
        ...dateFormat,
        ...numberFormat,
        ...relativeTimeFormat
      );
    },
    customize(cb?: I18NConfigOptionsProvider) {
      return createI18nConfiguration(cb || optionsProvider);
    },
  };
}

export const I18nConfiguration = createI18nConfiguration(() => { /* noop */ });

The most interesting thing here is the register method. During "bootstrap"ing phase, an instance of IContainer is passed on to this. You can use that to register “global resources”, such as custom elements/attributes, value converters, binding behavior etc.

And then where this plugin is used, you do something like this:

container.register(I18nConfiguration);

If you allow customization from the client code, you can also do so. Clients may choose to setup the configuration by themselves completely ignoring your OOTB configurations. Or you may choose ease up the situation by exposing APIs to customize. In the example above, this is done in the customize method.

If you are not already familiar with the Au2 API, you may take a look here on how to migrate your CEs: https://docs.aurelia.io/getting-started/components#working-without-conventions.

And that’s all! Have fun with Au2

HamedFathi · September 11, 2020, 3:24pm

@gregoryagu

You can consider this project too (Aurelia 2 + Lerna)

Definition

github.com

aurelia-toolbelt/vNext/blob/49c68809305f51728527f915b29eb6ecc664ef18/packages/bootstrap-v5-core/src/BootstrapV5Options.ts#L23


const defaultBootstrapV5Options: IBootstrapV5Options = {
    enableRippleEffect: false,
    enableCssReboot: false,
    enableLogging: false,
    defaultSize: BootstrapSize.Medium,
    inputOptions: {
        floatLabel: false
    }
};

export const IBootstrapV5Options = DI.createInterface<IBootstrapV5Options>('IBootstrapV5Options').noDefault();

export const BootstrapV5Configuration = {
    customize(options: IBootstrapV5Options) {
        return {
            register(container: IContainer) {
                const settings = { ...defaultBootstrapV5Options, ...options };
                return container.register(Registration.instance(IBootstrapV5Options, settings));
            },
        };
    },

Usage

github.com

aurelia-toolbelt/vNext/blob/49c68809305f51728527f915b29eb6ecc664ef18/packages/bootstrap-v5/src/alert/at-alert.ts#L7


import { customElement } from "aurelia";
import template from './at-alert.html';
import { IBootstrapV5Options } from '@aurelia-toolbelt/bootstrap-v5-core';

@customElement({ template, name: 'at-alert' })
export class BootstrapAlert {
    constructor(@IBootstrapV5Options options: IBootstrapV5Options) {
        console.log(options);
    }

}

Configuration

github.com

aurelia-toolbelt/vNext/blob/49c68809305f51728527f915b29eb6ecc664ef18/packages/demo/src/main.ts#L16


import * as BootstrapV5Components from '@aurelia-toolbelt/bootstrap-v5';
import { BootstrapV5Configuration } from '../../bootstrap-v5-core';
import { RippleCustomAttribute } from '../../custom-attributes';

Aurelia
  // .register(StyleConfiguration.shadowDOM({
  //   // optionally add the shared styles for all components
  //   sharedStyles: [shared]
  // }))  
  .register(BootstrapV5Components, RippleCustomAttribute)
  .register(BootstrapV5Configuration.customize({
    enableRippleEffect: true
  }), JitHtmlBrowserConfiguration)
  // To use HTML5 pushState routes, replace previous line with the following
  // customized router config.
  .register(RouterConfiguration.customize({ useUrlFragmentHash: false }))
  .app(MyApp)
  .start();

I think it is easy to follow. (More easier than version 1)

Topic		Replies	Views
Configuration, Authentication and Api plugins for Aurelia 2 (lite experimental version) vNext	1	701	March 1, 2022
New Aurelia Application vNext	3	915	January 23, 2020
Is anyone useing aurelia-form,aurelia-api,aurelia-orm from spoonx?	29	1629	August 31, 2021
How to Create a Plugin Help Requests	8	998	April 15, 2019
How do you create Aurelia plugins? Help Requests	7	1803	November 22, 2018

Aurelia 2 Plugin Sample or Docs

Related topics