feat(plugins): Plugin loading management (MIN-233)
A plugin manager has been created that allows you to load plugins, register them, unload and load them.
Allows plugins to receive a DOM element from minerva app and add content to the minerva application.
Plugin has access to object window.minerva which contains constantly updated values from the redux store (created temporary example in window.minverva.configuration) and in the future new implemented methods.
Loading plugins is related to query params. If there is a plugin hash in the url, it will be loaded at the start.
If you want to read more about implementing own pluign then created documentation in file docs/plugins.md which explains that process.
If you would like to test plugin loading, you can use simple plugins created by me:
- https://raw.githubusercontent.com/mateusz-winiarczyk/xx/main/m-plugin-w.js
- https://raw.githubusercontent.com/mateusz-winiarczyk/xx/main/w-plugin-minerva.js
I believe that when we have time, it is worth adding e2e tests to check the functionality of plugins in a real environment
TODO: Remove mocked drawer from MapNavigation.component.tsx when the real one is implemented. It was added to show loading of plugin content.
Merge request reports
Activity
assigned to @mateusz-winiarczyk
docs/plugins.md 0 → 1006444 import { removePlugin } from '@/redux/plugins/plugins.slice'; 5 import { PluginsManager } from '@/services/pluginsManager'; 6 import axios from 'axios'; 7 8 type UseLoadPluginReturnType = { 9 togglePlugin: () => void; 10 isPluginActive: boolean; 11 isPluginLoading: boolean; 12 }; 13 14 type UseLoadPluginProps = { 15 hash: string; 16 pluginUrl: string; 17 }; 18 19 export const useLoadPlugin = ({ hash, pluginUrl }: UseLoadPluginProps): UseLoadPluginReturnType => { 1 import { PluginsManager } from '@/services/pluginsManager'; 2 import axios from 'axios'; 3 import { ChangeEvent, useState } from 'react'; 4 5 type UseLoadPluginReturnType = { 6 handleChangePluginUrl: (event: ChangeEvent<HTMLInputElement>) => void; 7 handleLoadPlugin: () => Promise<void>; 8 isPending: boolean; 9 pluginUrl: string; 10 }; 11 12 export const useLoadPluginFromUrl = (): UseLoadPluginReturnType => { 13 const [pluginUrl, setPluginUrl] = useState(''); 14 15 const isPending = !pluginUrl; changed this line in version 2 of the diff
12 export const useLoadPluginFromUrl = (): UseLoadPluginReturnType => { 13 const [pluginUrl, setPluginUrl] = useState(''); 14 15 const isPending = !pluginUrl; 16 17 const handleLoadPlugin = async (): Promise<void> => { 18 const response = await axios(pluginUrl); 19 const pluginScript = response.data; 20 21 /* eslint-disable no-new-func */ 22 const loadPlugin = new Function(pluginScript); 23 24 PluginsManager.setHashedPlugin({ 25 pluginUrl, 26 pluginScript, 27 }); changed this line in version 2 of the diff
added 1 commit
- 946a224c - test(plugins): add tests for loading plugins
mentioned in merge request !122 (merged)
added 8 commits
-
946a224c...23f26911 - 6 commits from branch
development - ad762f7a - Merge remote-tracking branch 'origin/development' into MIN-233-plugin-loading-management
- 7198f347 - feat(plugins): remove temporary loaded plugins drawer
-
946a224c...23f26911 - 6 commits from branch
mentioned in commit 0b9e9c72