#360 plugin preferences

[louis-menlo]

Problem

• User can't configure Plugin settings

Solution

• The Core module supports preferences APIs, and plugins can register available preferences along with their value types
• Plugin registers available preferences (with preference value type)

import { preferences } from "@janhq/plugin-core";

export function init({ register }: { register: RegisterExtensionPoint }) {
  preferences.registerPreferences<string>(register, PluginName, PreferenceName, DefaultValue);
}

• Plugin retrieve preference value in it entry codes

import { preferences } from "@janhq/plugin-core";

const setup = async () => {
  const preferenceValue: string = (await preferences.get(PluginName, PreferenceName)) ?? DefaultValue;
}

• Preferences page execute to retrieve all available preferences then list out (and allow user to set value)

• Plugin checks for preference settings and function:

No settings available:

Valid settings:

Preferences

To register plugin preferences, you can use the preferences object from the @janhq/plugin-core package. Here's an example of how to register and retrieve plugin preferences:

import { PluginService, preferences } from "@janhq/plugin-core";

const PluginName = "your-first-plugin";

export function init({ register }: { register: RegisterExtensionPoint }) {
  // Register preference update handlers. E.g. update plugin instance with new configuration
  register(PluginService.OnPreferencesUpdate, PluginName, onPreferencesUpdate);

  // Register plugin preferences. E.g. Plugin need apiKey and endpoint to connect to your service
  preferences.registerPreferences<string>(register, PluginName, "apiKey", "");
  preferences.registerPreferences<string>(register, PluginName, "endpoint", "");
}

In this example, we're registering preference update handlers and plugin preferences using the preferences object. We're also defining a PluginName constant to use as the name of the plugin.

To retrieve the values of the registered preferences, we're using the get method of the preferences object and passing in the name of the plugin and the name of the preference.

import { preferences } from "@janhq/plugin-core";

const PluginName = "your-first-plugin";

const setup = async () => {
  // Retrieve apiKey
  const apiKey: string = (await preferences.get(PluginName, "apiKey")) ?? "";

  // Retrieve endpoint
  const endpoint: string = (await preferences.get(PluginName, "endpoint")) ?? "";
}

fixes #360

Action Items:

• preferences module in @janhq/plugin-core
• register preference type & handler in Plugin
• preferences allow get/set using store module
• app handles preference UI with better CSS (registerPreferences should return json instead of DOM component)
• clear values
• grouped settings