Using this application you can easily create plug-ins that add/modify functionality of the Canvas LMS UI.

This package provides the following functionality to make it easier to rapidly develop plug-ins:

• Auth: Simple functions to determine enrollment type (etc).
• DOM: Functions to detect if certain elements are added/removed.
• I18n: Enables easy localization (using i18next framework).
• Messages: Functions to add messages and notifications.
• Router: Allows to run plug-in code only on certain pages while recieving all the parameters as variables. Also lets you create URLs based on routes.
• Theme: A slightly modified theme to be used by Instructure UI components

Using NPM:

npm install @artevelde-uas/canvas-lms-app

Using Yarn:

yarn add @artevelde-uas/canvas-lms-app

Just import the Canvas app and your plug-ins and add them to the app:

import { run, addPlugin } from '@artevelde-uas/canvas-lms-app';
import somePlugin from '@some-org/plugin';

addPlugin(somePlugin);

run();

For more information see 'How to set up your project'.

WARNING: some non compatible changes are introduced with the release of version 1.0.0.

These features will be removed:

• The following functions are no langer be supported:

  • addAppListener(): use router.onRoute('[name].*')
  • addRouteListener(): use router.onRoute()
  • router.addListener(): use router.onRoute()
  • getRouteUrl(): use router.getUrl()
  • addReadyListener(): use dom.onElementReady()
  • handle(path): use run()

• The following routes will no longer be valid:

  • course: renamed to courses
  • profile.communication: renamed to profile.notifications

Services will no longer be injected in plug-ins. Instead import them at the top of your file:

INVALID:

export default function ({ router, dom, messages }) {
    // ...
}

VALID:

import { router, dom, messages } from '@artevelde-uas/canvas-lms-app';

export default function () {
    // ...
}

Alternatively, you could add them with the following option:

import somePlugin from '@some-org/plugin';

addPlugin(somePlugin, { classicPlugin: true });

(Beware that support for older plug-ins will be removed in the future.)