npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@brightspace-ui/lms-context-provider

v1.7.0

Published

Provides LMS context and environment settings to UI components, applications and libraries

Downloads

5,840

Readme

@brightspace-ui/lms-context-provider

Provides LMS context and environment settings to UI components, applications and libraries.

Installation

Install from NPM:

npm install @brightspace-ui/lms-context-provider

Usage

Using a Client

Requesting Data

To request data, import tryGet from the client and invoke it directly. The first argument should be a context type corresponding to a registered host plugin, while the second argument is an optional set of options to pass through to the host plugin. The third argument is an optional callback to allow a consumer to subscribe to future changes to the data they're requesting.

import { tryGet } from '@brightspace-ui/lms-context-provider/client.js';

const val = await tryGet(
  'my-context-type',
  { someProp: someVal },
  (changedValues) => {
    // This callback should accept a single argument:
    // an object containing any relevant information from the host plugin
	if (changedValues.someChangedProp === 'someVal') {
		doSomeWork(changedValues.someChangedProp);
	}
  }
);
doSomeWork(val);

If no host plugin is registered to handle a request, or if the data being requested isn't available, the host will return undefined. The host plugin may also need to rely on asynchronous methods to return data, so client code should be resilient to receiving a promise that doesn't resolve or takes some time to resolve.

If no host has been initialized, tryGet will reject with an error.

Performing an Action

To initiate an action on the host but doesn't require return data, import tryPerform from the client and invoke it directly. The first argument should be a context type corresponding to a registered host plugin, while the second argument is an optional set of options to pass through to the host plugin. It is not possible to subscribe to change events using this function.

import { tryPerform } from '@brightspace-ui/lms-context-provider/client.js;'

await tryPerform('my-context-type', { someProp: someVal });

If no host plugin is registered to handle a request, or if the data being requested isn't available, this promise will immediately resolve and nothing will happen. As with the tryGet function, the host plugin may need to perform asynchronous actions to fulfill a request, so this promise may also never resolve, or may take some time to resolve.

If no host has been initialized, tryPerform will reject with an error.

Configuring a Host

Initializing

Initializing a host should rarely be necessary. Within a Brightspace instance, this will generally be handled by BSI via our MVC and legacy frameworks. To initialize a host, import and execute the initialize function.

import { initialize } from '@brightspace-ui/lms-context-provider/host.js';

initialize();

Registering Plugins

To register a host plugin, import and execute the registerPlugin function on a page where a host has already been initialized. The provided context type should be unique per page. If a plugin needs to return data to a client, it should provide a tryGetCallback as the second argument. If clients can be notified when the data changes, then it should provide a subscribeCallback as the third argument.

import { registerPlugin } from '@brightspace-ui/lms-context/provider/host.js';

function tryGetCallback(options) {
	// This can be asynchronous.
	const returnVal = doSomeWork(options);
	return returnVal;
}

function subscribeCallback(onChange, options) {
	// this can be asynchronous.
	const returnVal = doSomeWork(options);

	// Options are defined by the host, not the plugin. sendImmediate indicates the change handler should be invoked immediately.
	if (options.sendImmediate) {
		// Expects an object as its only argument.
		onChange({ val: returnVal });
	}

	// onChange event should be subscribed to future changes.
	registerOnChangeEvent(onChange);
}

registerPlugin('my-context-type', tryGetCallback, subscribeCallback);

Framed Clients

When working with a client inside an iframe, the host page needs to explicitly allow that iframe. To do this, import and execute allowFrame from the host page (the host must already be initialized.). The first argument must be the iframe element itself. The second argument should be the expected origin. Requests from clients within iframes that have not explicitly been allowed or that come from a different origin will be rejected.

import { allowFrame } from '@brightspace-ui/lms-context-provider/host.js';

const myFrame = document.createElement('iframe');
document.body.append(myFrame);

allowFrame(myFrame, window.location.origin);

Developing, Testing and Contributing

After cloning the repo, run npm install to install dependencies.

Linting

# eslint
npm run lint

Testing

# run tests
npm test

Versioning and Releasing

This repo is configured to use semantic-release. Commits prefixed with fix: and feat: will trigger patch and minor releases when merged to main.

To learn how to create major releases and release from maintenance branches, refer to the semantic-release GitHub Action documentation.