@ brightspace- ui/ lms- context- professor

为UI组件,应用程序和库提供LMS上下文和环境设置.

安装

从国家预防机制安装:

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

使用量

使用客户端

请求数据

要请求数据, 导入 tryGet 从客户直接引用它。 第一个参数应该是一个对应已注册主机插件的上下文类型,而第二个参数是一个可选的一组选项,可以传递给主机插件. 第三个论点是可选的回调,允许消费者订阅他们要求的数据的未来更改.

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);

如果没有注册主机插件来处理请求, 或者如果请求的数据不可用, 主机将返回 undefined. 主机插件可能还需要依赖同步方法来返回数据,因此客户端代码应该能够对接收一个不解或需要一些时间才能解答的承诺有弹性.

如果没有主机初始化, tryGet 将因迷误而拒绝.

执行动作

要启动对主机的行动, 但不需要返回数据, 导入 tryPerform 从客户直接引用它。 第一个参数应该是一个对应已注册主机插件的上下文类型,而第二个参数是一个可选的一组选项,可以传递给主机插件. 无法使用此函数订阅更改事件 .

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

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

如果没有注册主机插件来处理请求,或者如果所请求的数据无法提供,这个承诺将立即解决而无所事事. 和现在一样 tryGet 函数,主机插件可能需要执行同步动作来实现请求,所以这个承诺也可能永远也不会解决,或者可能需要一些时间来解决.

如果没有主机初始化, tryPerform 将因迷误而拒绝.

配置主机

初始化

很少需要初始化主机。 在Brightspace 实例中,BSI一般将通过我们的MVC和遗留框架来处理。 要初始化主机, 导入并执行 initialize 函数.

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

initialize();

注册插件

要注册主机插件, 导入并执行 registerPlugin 函数在主机已经初始化的页面上。 提供的上下文类型应为每页独有. 如果插件需要返回数据给客户端,它应当提供 tryGetCallback 作为第二个论点。 如果在数据变化时可以通知客户,那么它应当提供 subscribeCallback 作为第三个论点.

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);

框架客户端

在iframe内与客户端合作时,主机页面需要明确允许该iframe. 要做到这一点, 导入并执行 allowFrame 从主机页面(主机必须已经初始化). 第一个论点必须是框架要素本身。 第二个论点应该是预期的来源。 未获明确允许或来自不同来源的iframes客户的请求将被拒绝.

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

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

allowFrame(myFrame, window.location.origin);

发展、测试和贡献

复制后, 运行 npm install 以安装依赖.

线性

# eslint
npm run lint

测试

# run tests
npm test

版本和发布

此 repo 配置为使用 semantic-release输入前缀 fix: 财务报告和审定财务报表 feat: 合并到 main。 。 。 .

为了学习如何从维护分支中产生主要释放和释放,请参见: 语义- 释放 GitHub 动作 文档.